gd-bs 5.0.7 → 5.0.8

package/build/components/listBox/index.js

@@ -88,6 +88,22 @@ var _ListBox = /** @class */ (function (_super) {
     // 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);
+                });
+            }
+            else {
+                // Set the options
+                this.setOptions(returnVal);
+            }
+        }
         // Set the change event on the search box
         this._elSearchBox.addEventListener("input", function (ev) {
             var value = _this._elSearchBox.value;

package/dist/gd-bs-icons.js

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