gd-bs 6.7.6 → 6.7.8

package/build/components/dropdown/formItem.js

@@ -81,6 +81,8 @@ var DropdownFormItem = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    // Hides the item
+    DropdownFormItem.prototype.hide = function () { this._el.classList.add("d-none"); };
     Object.defineProperty(DropdownFormItem.prototype, "isSelected", {
         // Returns true if the item is selected
         get: function () { return this._isSelected; },
@@ -94,6 +96,8 @@ var DropdownFormItem = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    // Shows the item
+    DropdownFormItem.prototype.show = function () { this._el.classList.remove("d-none"); };
     // Toggles the item selection
     DropdownFormItem.prototype.toggle = function () {
         // Skip the dividers, headers

package/build/components/dropdown/index.js

@@ -78,6 +78,8 @@ var _Dropdown = /** @class */ (function (_super) {
         _this.configure();
         // Configure the events
         _this.configureEvents();
+        // Configure search
+        _this.configureSearch();
         // Configure the parent
         _this.configureParent();
         // Set the flag
@@ -273,6 +275,17 @@ var _Dropdown = /** @class */ (function (_super) {
                 elTarget: toggle,
                 placement: typeof (this.props.placement) === "number" ? this.props.placement : floating_ui_1.FloatingUIPlacements.BottomStart,
                 theme: popoverType,
+                onShow: function () {
+                    // See if the search element exists
+                    if (_this._elSearch) {
+                        // Clear the search
+                        _this._elSearch.value = "";
+                        // Show all the items
+                        for (var i = 0; i < _this._items.length; i++) {
+                            _this._items[i].show();
+                        }
+                    }
+                },
                 options: {
                     arrow: false,
                     flip: true,
@@ -402,6 +415,66 @@ var _Dropdown = /** @class */ (function (_super) {
             }
         }
     };
+    // Configures the search option for the dropdown
+    _Dropdown.prototype.configureSearch = function () {
+        var _this = this;
+        // See if search is enabled and the menu exists
+        if (this.props.search != true || this._elMenu == null) {
+            return;
+        }
+        // Create the search textbox
+        this._elSearch = document.createElement("input");
+        this._elSearch.classList.add("form-control");
+        this._elSearch.type = "search";
+        this._elSearch.placeholder = "Search for item...";
+        // Insert the item as the first element
+        this._elMenu.firstChild ? this._elMenu.insertBefore(this._elSearch, this._elMenu.firstChild) : this._elMenu.appendChild(this._elSearch);
+        // Create the empty text
+        var elEmptyText = document.createElement("h6");
+        elEmptyText.classList.add("dropdown-header");
+        elEmptyText.classList.add("d-none");
+        elEmptyText.innerHTML = "No items were found...";
+        this._elMenu.appendChild(elEmptyText);
+        // Add the element to the ignore list
+        this._floatingUI.addIgnoreElement(this._elSearch);
+        // Add the event
+        this._elSearch.addEventListener("input", function () {
+            // Get the value
+            var searchText = (_this._elSearch.value || "").toLocaleLowerCase();
+            // Set the flags
+            var itemsFound = false;
+            var showAll = searchText == "";
+            // Hide the empty text
+            elEmptyText.classList.add("d-none");
+            // Parse the items
+            for (var i = 0; i < _this._items.length; i++) {
+                var item = _this._items[i];
+                // See if we are showing all the items
+                if (showAll) {
+                    // Show the item
+                    item.show();
+                }
+                else {
+                    // See if the value contains the text
+                    if ((item.props.text || "").toLowerCase().indexOf(searchText) >= 0) {
+                        // Show the item
+                        item.show();
+                        // Set the flag
+                        itemsFound = true;
+                    }
+                    else {
+                        // Hide the item
+                        item.hide();
+                    }
+                }
+            }
+            // See if no items were found
+            if (!showAll && !itemsFound) {
+                // Show the empty message
+                elEmptyText.classList.remove("d-none");
+            }
+        });
+    };
     // Generates the checkbox items
     _Dropdown.prototype.generateCheckboxItems = function () {
         var cbItems = [];
@@ -633,6 +706,8 @@ var _Dropdown = /** @class */ (function (_super) {
                 }
             }
         }
+        // Configure search
+        this.configureSearch();
     };
     // Sets the label of the dropdown
     _Dropdown.prototype.setLabel = function (value) {

package/build/components/dropdown/item.js

@@ -142,6 +142,8 @@ var DropdownItem = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    // Hides the item
+    DropdownItem.prototype.hide = function () { this._el.classList.add("d-none"); };
     Object.defineProperty(DropdownItem.prototype, "isSelected", {
         // Returns true if the item is selected
         get: function () { return this._isSelected; },
@@ -154,6 +156,8 @@ var DropdownItem = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    // Shows the item
+    DropdownItem.prototype.show = function () { this._el.classList.remove("d-none"); };
     // Toggles the item selection
     DropdownItem.prototype.toggle = function () {
         // Skip the dividers, headers and nav items

package/build/components/floating-ui/index.js

@@ -50,10 +50,12 @@ var _FloatingUI = /** @class */ (function () {
     function _FloatingUI(props) {
         var _a;
         this._elArrow = null;
-        this._elTarget = null;
         this._elContent = null;
+        this._elIgnore = null;
+        this._elTarget = null;
         this._options = null;
         this._props = null;
+        this._elIgnore = [];
         this._elTarget = props.elTarget;
         this._props = props;
         // Create the content element
@@ -70,6 +72,7 @@ var _FloatingUI = /** @class */ (function () {
         // Set the visibility
         this._props.show ? this.show() : this.hide();
     }
+    // Add the events to trigger, refresh and hide the element
     _FloatingUI.prototype.addEvents = function (trigger) {
         var _this = this;
         if (trigger === void 0) { trigger = ""; }
@@ -88,45 +91,30 @@ var _FloatingUI = /** @class */ (function () {
                 _this.isVisible ? _this.hide() : _this.show();
             });
         }
-        // Add the events
-        _FloatingUI.Events.push(function (ev) {
-            // See if it's outside the target element
-            if (!_this._elTarget.contains(ev.target)) {
-                // Hide the element
-                _this.hide();
+        // Create the event
+        document.addEventListener("click", function (ev) {
+            // Do nothing if we toggled this component
+            if (_this._elTarget.contains(ev.target)) {
+                return;
             }
+            // Parse the elements to ignore
+            for (var i = 0; i < _this._elIgnore.length; i++) {
+                // Do nothing if it triggered the click
+                if (_this._elIgnore[i].contains(ev.target)) {
+                    return;
+                }
+            }
+            // Hide the element
+            _this.hide();
         });
-        _FloatingUI.ScrollEvents.push(function (ev) {
-            // Refresh the content
-            _this.refresh();
+        // Create the scroll event
+        window.addEventListener("scroll", function (ev) {
+            // Wait for the other events to run
+            setTimeout(function () {
+                // Refresh the content
+                _this.refresh();
+            }, 10);
         });
-        // Ensure the click event exists
-        if (!_FloatingUI.EventsCreated) {
-            // Create the event
-            document.addEventListener("click", function (ev) {
-                // Wait for the other events to run
-                setTimeout(function () {
-                    // Parse the events
-                    _FloatingUI.Events.forEach(function (fnEvent) {
-                        // Call the event
-                        fnEvent(ev);
-                    });
-                }, 10);
-            });
-            // Create the scroll event
-            window.addEventListener("scroll", function (ev) {
-                // Wait for the other events to run
-                setTimeout(function () {
-                    // Parse the events
-                    _FloatingUI.ScrollEvents.forEach(function (fnEvent) {
-                        // Call the event
-                        fnEvent(ev);
-                    });
-                }, 10);
-            });
-            // Set the flag
-            _FloatingUI.EventsCreated = true;
-        }
     };
     // Creates the floating ui
     _FloatingUI.prototype.create = function () {
@@ -318,12 +306,15 @@ var _FloatingUI = /** @class */ (function () {
             if (_this._elArrow) {
                 var arrowX = middlewareData.arrow.x;
                 var arrowY = middlewareData.arrow.y;
+                var placement = (((_c = middlewareData.offset) === null || _c === void 0 ? void 0 : _c.placement) || _this._options.placement).split('-')[0];
                 var side = {
                     top: 'bottom',
                     right: 'left',
                     bottom: 'top',
                     left: 'right'
-                }[(((_c = middlewareData.offset) === null || _c === void 0 ? void 0 : _c.placement) || _this._options.placement).split('-')[0]];
+                }[placement];
+                // Set the placement
+                _this._elContent.setAttribute("data-placement", placement);
                 // Update the location
                 Object.assign(_this._elArrow.style, (_b = {
                         left: arrowX != null ? "".concat(arrowX, "px") : '',
@@ -339,13 +330,28 @@ var _FloatingUI = /** @class */ (function () {
     /**
      * Public Methods
      */
+    _FloatingUI.prototype.addIgnoreElement = function (el) { this._elIgnore.push(el); };
+    _FloatingUI.prototype.removeIgnoreElement = function (el) {
+        // Parse the elements
+        for (var i = 0; i < this._elIgnore.length; i++) {
+            // See if this is the element to remove
+            if (this._elIgnore[i].isEqualNode(el)) {
+                // Remove it
+                this._elIgnore.splice(i, 1);
+                return;
+            }
+        }
+    };
     _FloatingUI.prototype.setContent = function (el) { this._elContent = el; this.refresh(); };
     // Hides the content
     _FloatingUI.prototype.hide = function () {
         // Remove it from the document
         this._elContent.classList.add("d-none");
         if (document.body.contains(this._elContent)) {
+            // Remove the element from the page
             document.body.removeChild(this._elContent);
+            // Call the event
+            this._props.onHide ? this._props.onHide() : null;
         }
     };
     Object.defineProperty(_FloatingUI.prototype, "isVisible", {
@@ -359,16 +365,16 @@ var _FloatingUI = /** @class */ (function () {
         // Append it to the document
         this._elContent.classList.remove("d-none");
         if (!document.body.contains(this._elContent)) {
+            // Add the element to the page
             document.body.appendChild(this._elContent);
+            // Refresh the position
             this.refresh();
+            // Call the event
+            this._props.onShow ? this._props.onShow() : null;
         }
     };
     // Toggles the floating ui
     _FloatingUI.prototype.toggle = function () { this.isVisible ? this.hide() : this.show(); };
-    // Static events
-    _FloatingUI.Events = [];
-    _FloatingUI.EventsCreated = false;
-    _FloatingUI.ScrollEvents = [];
     return _FloatingUI;
 }());
 var FloatingUI = function (props) { return new _FloatingUI(props); };