gd-bs 6.7.6 → 6.7.8

package/indexv2.html

@@ -177,7 +177,7 @@
 
     <h5>Dropdown</h5>
 
-    <bs-dropdown auto-select="true" is-split="false" label="My Dropdown:" on-change="MyLib.ddlChange">
+    <bs-dropdown auto-select="true" is-split="false" label="My Dropdown:" search="true" on-change="MyLib.ddlChange">
         <item is-header="true">Header 1</item>
         <item is-divider="true"></item>
         <item value="1">Item 1</item>
@@ -192,6 +192,16 @@
         <item value="8">Item 8</item>
         <item value="9">Item 9</item>
         <item value="10">Item 10</item>
+        <item value="11">Item 11</item>
+        <item value="12">Item 12</item>
+        <item value="13">Item 13</item>
+        <item value="14">Item 14</item>
+        <item value="15">Item 15</item>
+        <item value="16">Item 16</item>
+        <item value="17">Item 17</item>
+        <item value="18">Item 18</item>
+        <item value="19">Item 19</item>
+        <item value="20">Item 20</item>
     </bs-dropdown>
 
     <h5>Form (Rows)</h5>
@@ -218,6 +228,21 @@
                 <item value="3">Item 3</item>
                 <item value="4">Item 4</item>
                 <item value="5">Item 5</item>
+                <item value="6">Item 6</item>
+                <item value="7">Item 7</item>
+                <item value="8">Item 8</item>
+                <item value="9">Item 9</item>
+                <item value="10">Item 10</item>
+                <item value="11">Item 11</item>
+                <item value="12">Item 12</item>
+                <item value="13">Item 13</item>
+                <item value="14">Item 14</item>
+                <item value="15">Item 15</item>
+                <item value="16">Item 16</item>
+                <item value="17">Item 17</item>
+                <item value="18">Item 18</item>
+                <item value="19">Item 19</item>
+                <item value="20">Item 20</item>
             </bs-form-control>
         </row>
         <div>

package/package.json

@@ -1,61 +1,61 @@
-{
-    "name": "gd-bs",
-    "version": "6.7.6",
-    "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
-    "main": "build/index.js",
-    "typings": "src/index.d.ts",
-    "scripts": {
-        "all": "npm run clean && npm run generate-icons && npm run build && npm run build-icons && npm run prod && npm run prod-icons && npm run typings",
-        "build": "tsc && npm run pre-build && npm run build-bs && webpack --mode=development && npm run post-build",
-        "build-bs": "webpack --mode=production --config webpack.sass.js",
-        "build-icons": "webpack --mode=development --config webpack.icons.js",
-        "pre-build": "node ./pre-build",
-        "post-build": "node ./post-build",
-        "clean": "node ./clean.js",
-        "docs": "typedoc",
-        "generate-icons": "node ./generateIcons",
-        "package": "npm run all && npm run docs",
-        "prod": "webpack --mode=production",
-        "prod-icons": "webpack --mode=production --config webpack.icons.js",
-        "typings": "dts-bundle --configJson dts-bundle.json"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/gunjandatta/gd-bs.git"
-    },
-    "keywords": [
-        "Bootstrap",
-        "TypeScript"
-    ],
-    "author": "Gunjan Datta <me@dattabase.com> (https://dattabase.com)",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/gunjandatta/gd-bs/issues"
-    },
-    "homepage": "https://dattabase.com/extras/bs",
-    "dependencies": {
-        "@floating-ui/dom": "^1.7.1",
-        "bootstrap": "^5.3.6",
-        "bootstrap-icons": "^1.13.1",
-        "core-js": "^3.43.0"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.27.4",
-        "@babel/preset-env": "^7.27.2",
-        "@types/node": "^18.19.111",
-        "autoprefixer": "^10.4.21",
-        "babel-loader": "^9.2.1",
-        "css-loader": "^6.11.0",
-        "dts-bundle": "^0.7.3",
-        "postcss-loader": "^7.3.4",
-        "sass": "^1.89.2",
-        "sass-loader": "^13.3.3",
-        "style-loader": "^3.3.4",
-        "terser-webpack-plugin": "^5.3.14",
-        "ts-loader": "^9.5.2",
-        "typedoc": "^0.24.8",
-        "typescript": "4.9.5",
-        "webpack": "^5.99.9",
-        "webpack-cli": "^5.1.4"
-    }
+{
+    "name": "gd-bs",
+    "version": "6.7.8",
+    "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
+    "main": "build/index.js",
+    "typings": "src/index.d.ts",
+    "scripts": {
+        "all": "npm run clean && npm run generate-icons && npm run build && npm run build-icons && npm run prod && npm run prod-icons && npm run typings",
+        "build": "tsc && npm run pre-build && npm run build-bs && webpack --mode=development && npm run post-build",
+        "build-bs": "webpack --mode=production --config webpack.sass.js",
+        "build-icons": "webpack --mode=development --config webpack.icons.js",
+        "pre-build": "node ./pre-build",
+        "post-build": "node ./post-build",
+        "clean": "node ./clean.js",
+        "docs": "typedoc",
+        "generate-icons": "node ./generateIcons",
+        "package": "npm run all && npm run docs",
+        "prod": "webpack --mode=production",
+        "prod-icons": "webpack --mode=production --config webpack.icons.js",
+        "typings": "dts-bundle --configJson dts-bundle.json"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/gunjandatta/gd-bs.git"
+    },
+    "keywords": [
+        "Bootstrap",
+        "TypeScript"
+    ],
+    "author": "Gunjan Datta <me@dattabase.com> (https://dattabase.com)",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/gunjandatta/gd-bs/issues"
+    },
+    "homepage": "https://dattabase.com/extras/bs",
+    "dependencies": {
+        "@floating-ui/dom": "^1.7.1",
+        "bootstrap": "^5.3.6",
+        "bootstrap-icons": "^1.13.1",
+        "core-js": "^3.43.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.27.4",
+        "@babel/preset-env": "^7.27.2",
+        "@types/node": "^18.19.111",
+        "autoprefixer": "^10.4.21",
+        "babel-loader": "^9.2.1",
+        "css-loader": "^6.11.0",
+        "dts-bundle": "^0.7.3",
+        "postcss-loader": "^7.3.4",
+        "sass": "^1.89.2",
+        "sass-loader": "^13.3.3",
+        "style-loader": "^3.3.4",
+        "terser-webpack-plugin": "^5.3.14",
+        "ts-loader": "^9.5.2",
+        "typedoc": "^0.24.8",
+        "typescript": "4.9.5",
+        "webpack": "^5.99.9",
+        "webpack-cli": "^5.1.4"
+    }
 }

package/src/components/dropdown/formItem.ts

@@ -87,6 +87,9 @@ export class DropdownFormItem {
     // The component HTML element
     get el(): HTMLElement { return this._el; }
 
+    // Hides the item
+    hide() { this._el.classList.add("d-none"); }
+
     // Returns true if the item is selected
     get isSelected(): boolean { return this._isSelected; }
     set isSelected(value: boolean) { this._isSelected = value; }
@@ -94,6 +97,9 @@ export class DropdownFormItem {
     // The component properties
     get props(): IDropdownItem { return this._props; }
 
+    // Shows the item
+    show() { this._el.classList.remove("d-none"); }
+
     // Toggles the item selection
     toggle() {
         // Skip the dividers, headers

package/src/components/dropdown/index.ts

@@ -38,6 +38,7 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
     private _autoSelect: boolean = null;
     private _cb: ICheckboxGroup = null;
     private _elMenu: HTMLElement;
+    private _elSearch: HTMLInputElement;
     private _floatingUI: IFloatingUI = null;
     private _initFl: boolean = false;
     private _items: Array<DropdownFormItem | DropdownItem> = null;
@@ -52,6 +53,9 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         // Configure the events
         this.configureEvents();
 
+        // Configure search
+        this.configureSearch();
+
         // Configure the parent
         this.configureParent();
 
@@ -258,6 +262,16 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
                 elTarget: toggle,
                 placement: typeof (this.props.placement) === "number" ? this.props.placement : FloatingUIPlacements.BottomStart,
                 theme: popoverType,
+                onShow: () => {
+                    // See if the search element exists
+                    if (this._elSearch) {
+                        // Clear the search
+                        this._elSearch.value = "";
+
+                        // Show all the items
+                        for (let i = 0; i < this._items.length; i++) { this._items[i].show(); }
+                    }
+                },
                 options: {
                     arrow: false,
                     flip: true,
@@ -396,6 +410,73 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         }
     }
 
+    // Configures the search option for the dropdown
+    private configureSearch() {
+        // 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
+        let 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", () => {
+            // Get the value
+            let searchText = (this._elSearch.value || "").toLocaleLowerCase();
+
+            // Set the flags
+            let itemsFound = false;
+            let showAll = searchText == "";
+
+            // Hide the empty text
+            elEmptyText.classList.add("d-none");
+
+            // Parse the items
+            for (let i = 0; i < this._items.length; i++) {
+                let 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
     private generateCheckboxItems(): ICheckboxGroupItem[] {
         let cbItems: ICheckboxGroupItem[] = [];
@@ -644,6 +725,9 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
                 }
             }
         }
+
+        // Configure search
+        this.configureSearch();
     }
 
     // Sets the label of the dropdown

package/src/components/dropdown/item.ts

@@ -153,12 +153,18 @@ export class DropdownItem {
     // The component HTML element
     get el(): HTMLElement { return this._el; }
 
+    // Hides the item
+    hide() { this._el.classList.add("d-none"); }
+
     // Returns true if the item is selected
     get isSelected(): boolean { return this._isSelected; }
 
     // The component properties
     get props(): IDropdownItem { return this._props; }
 
+    // Shows the item
+    show() { this._el.classList.remove("d-none"); }
+
     // Toggles the item selection
     toggle() {
         // Skip the dividers, headers and nav items

package/src/components/dropdown/types.d.ts

@@ -155,6 +155,7 @@ export interface IDropdownProps extends IBaseProps<IDropdown> {
     onMenuRendering?: (props: IFloatingUIProps) => IFloatingUIProps;
     placement?: number;
     required?: boolean;
+    search?: boolean;
     title?: string;
     type?: number;
     updateLabel?: boolean;

package/src/components/floating-ui/index.ts

@@ -49,18 +49,15 @@ export enum FloatingUITypes {
  */
 class _FloatingUI {
     private _elArrow: HTMLElement = null;
-    private _elTarget: HTMLElement = null;
     private _elContent: HTMLElement = null;
+    private _elIgnore: HTMLElement[] = null;
+    private _elTarget: HTMLElement = null;
     private _options: ComputePositionConfig = null;
     private _props: IFloatingUIProps = null;
 
-    // Static events
-    private static Events = [];
-    private static EventsCreated = false;
-    private static ScrollEvents = [];
-
     // Constructor
     constructor(props: IFloatingUIProps) {
+        this._elIgnore = [];
         this._elTarget = props.elTarget;
         this._props = props;
 
@@ -82,6 +79,7 @@ class _FloatingUI {
         this._props.show ? this.show() : this.hide();
     }
 
+    // Add the events to trigger, refresh and hide the element
     private addEvents(trigger: string = "") {
         // Events
         if (trigger.indexOf("mouse") >= 0) {
@@ -99,48 +97,29 @@ class _FloatingUI {
             });
         }
 
-        // Add the events
-        _FloatingUI.Events.push((ev: Event) => {
-            // See if it's outside the target element
-            if (!this._elTarget.contains(ev.target as any)) {
-                // Hide the element
-                this.hide();
-            }
-        });
-        _FloatingUI.ScrollEvents.push((ev: Event) => {
-            // Refresh the content
-            this.refresh();
-        });
+        // Create the event
+        document.addEventListener("click", (ev) => {
+            // Do nothing if we toggled this component
+            if (this._elTarget.contains(ev.target as HTMLElement)) { return; }
 
-        // Ensure the click event exists
-        if (!_FloatingUI.EventsCreated) {
-            // Create the event
-            document.addEventListener("click", (ev) => {
-                // Wait for the other events to run
-                setTimeout(() => {
-                    // Parse the events
-                    _FloatingUI.Events.forEach(fnEvent => {
-                        // Call the event
-                        fnEvent(ev);
-                    });
-                }, 10);
-            });
+            // Parse the elements to ignore
+            for (let i = 0; i < this._elIgnore.length; i++) {
+                // Do nothing if it triggered the click
+                if (this._elIgnore[i].contains(ev.target as HTMLElement)) { return; }
+            }
 
-            // Create the scroll event
-            window.addEventListener("scroll", (ev) => {
-                // Wait for the other events to run
-                setTimeout(() => {
-                    // Parse the events
-                    _FloatingUI.ScrollEvents.forEach(fnEvent => {
-                        // Call the event
-                        fnEvent(ev);
-                    });
-                }, 10);
-            });
+            // Hide the element
+            this.hide();
+        });
 
-            // Set the flag
-            _FloatingUI.EventsCreated = true;
-        }
+        // Create the scroll event
+        window.addEventListener("scroll", (ev) => {
+            // Wait for the other events to run
+            setTimeout(() => {
+                // Refresh the content
+                this.refresh();
+            }, 10);
+        });
     }
 
     // Creates the floating ui
@@ -346,12 +325,16 @@ class _FloatingUI {
             if (this._elArrow) {
                 let arrowX = middlewareData.arrow.x;
                 let arrowY = middlewareData.arrow.y;
+                let placement = (middlewareData.offset?.placement || this._options.placement).split('-')[0];
                 let side = {
                     top: 'bottom',
                     right: 'left',
                     bottom: 'top',
                     left: 'right'
-                }[(middlewareData.offset?.placement || this._options.placement).split('-')[0]]
+                }[placement]
+
+                // Set the placement
+                this._elContent.setAttribute("data-placement", placement);
 
                 // Update the location
                 Object.assign(this._elArrow.style, {
@@ -369,13 +352,33 @@ class _FloatingUI {
      * Public Methods
      */
 
+    addIgnoreElement(el: HTMLElement) { this._elIgnore.push(el); }
+
+    removeIgnoreElement(el: HTMLElement) {
+        // Parse the elements
+        for (let 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;
+            }
+        }
+    }
+
     setContent(el) { this._elContent = el; this.refresh(); }
 
     // Hides the content
     hide() {
         // Remove it from the document
         this._elContent.classList.add("d-none");
-        if (document.body.contains(this._elContent)) { document.body.removeChild(this._elContent); }
+        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;
+        }
     }
 
     // Determines if the content is visible
@@ -385,7 +388,16 @@ class _FloatingUI {
     show() {
         // Append it to the document
         this._elContent.classList.remove("d-none");
-        if (!document.body.contains(this._elContent)) { document.body.appendChild(this._elContent); this.refresh(); }
+        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

package/src/components/floating-ui/types.d.ts

@@ -5,8 +5,10 @@ import { IBaseProps } from "../types";
 export const FloatingUIPlacements: IFloatingUIPlacements;
 
 export interface IFloatingUI {
+    addIgnoreElement: (el: Element) => void;
     hide: () => void;
     isVisible: boolean;
+    removeIgnoreElement: (el: Element) => void;
     setContent: (el: string | Element) => void;
     show: () => void;
     toggle: () => void;
@@ -29,6 +31,8 @@ export interface IFloatingUIOptions {
 export interface IFloatingUIProps extends IBaseProps<IFloatingUI> {
     elContent: HTMLElement;
     elTarget: HTMLElement;
+    onHide?: (el?: HTMLElement) => void;
+    onShow?: (el?: HTMLElement) => void;
     options?: IFloatingUIOptions;
     placement?: number;
     show?: boolean;