gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
297 lines (296 loc) • 12.9 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListBox = void 0;
var base_1 = require("../base");
var templates_1 = require("./templates");
/**
* List Box
* @property props - The list box properties.
*/
var _ListBox = /** @class */ (function (_super) {
__extends(_ListBox, _super);
// Constructor
function _ListBox(props, template) {
if (template === void 0) { template = templates_1.HTML; }
var _this = _super.call(this, template, props) || this;
_this._elLabel = null;
_this._elSearchBox = null;
_this._elDatalist = null;
_this._elValues = null;
_this._initFl = false;
_this._items = null;
_this._selectedItems = null;
// Configure the list box
_this.configure();
// Configure the events
_this.configureEvents();
// Configure the parent
_this.configureParent();
// Set the flag
_this._initFl = true;
return _this;
}
// Configures the list box
_ListBox.prototype.configure = function () {
this._elLabel = this.el.querySelector("label");
this._elSearchBox = this.el.querySelector("input");
this._elDatalist = this.el.querySelector("datalist");
this._elValues = this.el.querySelector("ul");
// See if the placeholder exists
if (this.props.placeholder) {
// Update the placeholder
this._elSearchBox ? this._elSearchBox.placeholder = this.props.placeholder : null;
}
// See if the id is set
if (this.props.id) {
// Update the ids
this.el.id = this.props.id;
this._elLabel ? this._elLabel.setAttribute("for", this.props.id + "-search") : null;
this._elSearchBox ? this._elSearchBox.id = this.props.id + "-search" : null;
this._elSearchBox ? this._elSearchBox.setAttribute("list", this.props.id + "-list") : null;
this._elDatalist ? this._elDatalist.id = this.props.id + "-list" : null;
}
// See if the label exists
if (this._elLabel) {
if (this.props.label) {
this._elLabel.innerHTML = this.props.label;
}
else {
// Remove the label
this.el.removeChild(this._elLabel);
}
}
// See if this is read-only
if (this.props.isReadonly) {
// Disable the search box
this._elSearchBox ? this._elSearchBox.disabled = true : null;
}
// Set the required property
this._elSearchBox.required = this.props.required ? true : false;
// Set the options
this.setOptions(this.props.items);
// Set the value if it's been defined
if (this.props.value != undefined) {
this.setValue(this.props.value);
}
};
// Configures the events
_ListBox.prototype.configureEvents = function () {
var _this = this;
// Execute the load event
var returnVal = this.props.onLoadData ? this.props.onLoadData() : null;
if (returnVal) {
// See if a promise was returned
if (typeof (returnVal.then) === "function") {
// Wait for the promise to complete
returnVal.then(function (items) {
// Set the options
_this.setOptions(items);
// Set the value if it's been defined
if (_this.props.value != undefined) {
_this.setValue(_this.props.value);
}
});
}
else {
// Set the options
this.setOptions(returnVal);
// Set the value if it's been defined
if (this.props.value != undefined) {
this.setValue(this.props.value);
}
}
}
// Set the change event on the search box
this._elSearchBox.addEventListener("input", function (ev) {
var value = _this._elSearchBox.value;
// Parse the items
for (var i = 0; i < _this._items.length; i++) {
var item = _this._items[i];
// See if this is the target item
if (item.text == value) {
// See if this is a multi-select
if (_this.props.multi) {
var existsFl = false;
// Parse the selected items
for (var j = 0; j < _this._selectedItems.length; j++) {
var selectedItem = _this._selectedItems[j];
// See if this item is already selected
if (selectedItem.text == item.text) {
// Set the flag
existsFl = true;
break;
}
}
// Ensure the item wasn't already selected
if (!existsFl) {
// Set the value
_this.setValue(_this._selectedItems.concat(item).sort(function (a, b) {
if (a.text < b.text) {
return -1;
}
if (a.text > b.text) {
return 1;
}
return 0;
}));
// Call the change event
_this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;
}
}
else {
// Set the value
_this.setValue(value);
// Call the change event
_this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;
}
// Clear the selected value
_this._elSearchBox.value = "";
// Bug - Edge (non-chromium)
// The menu is still visible, so we fill force a "blur" to hide the menu after selection
_this._elSearchBox.blur();
}
}
});
};
// Method to configure the item event
_ListBox.prototype.configureItemEvent = function (elRemove, elItem, item) {
var _this = this;
// Ensure the remove element exists
if (elRemove) {
// Add a click event to the badge
var badge = elItem.querySelector(".badge");
if (badge) {
badge.addEventListener("click", function (ev) {
// Remove the item
_this._elValues.removeChild(elItem);
// Find the selected item
for (var i = 0; i < _this._selectedItems.length; i++) {
var selectedItem = _this._selectedItems[i];
// See if this is the target item
if (selectedItem.text == item.text) {
// Remove this item
_this._selectedItems.splice(i, 1);
// Call the change event
_this.props.onChange ? _this.props.onChange(_this._selectedItems, ev) : null;
break;
}
}
});
}
}
};
/**
* Public Interface
*/
// Gets the selected items
_ListBox.prototype.getValue = function () {
// Return the value
return this.props.multi ? this._selectedItems : this._selectedItems[0];
};
// Sets the options
_ListBox.prototype.setOptions = function (items) {
if (items === void 0) { items = []; }
var elDatalist = this.el.querySelector("datalist");
if (elDatalist) {
// Save a reference to the items
this._items = items;
// Clear the options
while (elDatalist.firstChild) {
elDatalist.removeChild(elDatalist.firstChild);
}
// Clear the value
this._elSearchBox.value = "";
this._selectedItems = [];
// Parse the items
for (var i = 0; i < items.length; i++) {
var props = items[i];
// Add the option
var elOption = document.createElement("option");
elOption.value = props.text;
elDatalist.appendChild(elOption);
// See if the item is selected
if (props.isSelected) {
// Add the selected item
this._selectedItems.push(props);
}
}
// See if items are selected
if (this._selectedItems.length > 0) {
// Set the value
this.setValue(this._selectedItems);
}
}
};
// Set the value
_ListBox.prototype.setValue = function (value) {
// Clear the items
this._selectedItems = [];
while (this._elValues.firstChild) {
this._elValues.removeChild(this._elValues.firstChild);
}
// Parse the values
if (value) {
// Ensure this is an array
var values = typeof (value) === "string" || typeof (value) === "number" ? [value] : value;
// Parse the values
for (var i = 0; i < values.length; i++) {
var itemValue = values[i];
itemValue = typeof (itemValue) === "string" || typeof (itemValue) === "number" ? itemValue : itemValue.text;
// Parse the items
for (var j = 0; j < this._items.length; j++) {
var item = this._items[j];
// See if this is the target item
if (item.text == itemValue || item.value == itemValue) {
// Add the selected item
this._selectedItems.push(item);
// Create the list item
var elItem = document.createElement("div");
elItem.innerHTML = templates_1.HTMLItem;
elItem = elItem.firstChild;
this._elValues.appendChild(elItem);
// Set the text value
var elRemove = elItem.querySelector("span");
if (elRemove) {
var text = document.createTextNode(item.text);
elItem.insertBefore(text, elRemove);
}
// See if this is read-only
if (this.props.isReadonly) {
// Delete the "remove" button
elItem.removeChild(elRemove);
elRemove = null;
}
// Configure the event for this item
this.configureItemEvent(elRemove, elItem, item);
// Break from the loop
break;
}
}
}
}
// See if a change event exists
if (this._initFl && this.props.onChange) {
// Execute the change event
this.props.onChange(this.getValue());
}
};
return _ListBox;
}(base_1.Base));
var ListBox = function (props, template) { return new _ListBox(props, template); };
exports.ListBox = ListBox;