gd-bs 6.7.6 → 6.7.7

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>
@@ -545,7 +545,7 @@
             cardRender: (el) => { console.log("Card Render: ", el); },
             cardBodyRender: (el) => { console.log("Card Body Render: ", el); },
             collapseInit: obj => { window["collapseDemo"] = obj; },
-            ddlChange: (item) => { alert("Selected Item: " + (item ? item.text : "No Selection")); },
+            ddlChange: (item) => { debugger; alert("Selected Item: " + (item ? item.text : "No Selection")); },
             fileClicked: (btn) => { alert(btn.text + " clicked."); },
             formCustomControl: (ctrl) => { ctrl.el.innerHTML = "<h3>Custom Control</h3>"; },
             inputGrouponChange: (val) => { console.log("Value changed to: " + val); },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.7.6",
+    "version": "6.7.7",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",

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
@@ -369,13 +348,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 +384,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;

package/src/styles/_floating-ui.scss

@@ -30,6 +30,15 @@
     &.floating-dropdown .dropdown-item {
         border-radius: var(--bs-dropdown-border-radius, 5px);
     }
+
+    &.floating-dropdown .dropdown-item.active {
+        background-color: var(--sp-theme-primary, #0078d4);
+    }
+
+    &.floating-dropdown .dropdown-item:hover {
+        background-color: var(--bs-dropdown-link-hover-bg, #faf9f8);
+        color: var(--bs-dropdown-link-hover-color, #201f1e);
+    }
 }
 
 /** Floating-UI */
@@ -47,11 +56,21 @@
 
     /* Floating UI primary theme color */
     &[data-theme~='primary'],
-    &[data-theme~='primary']>div {
+    &[data-theme~='primary']>div,
+    &[data-theme~='primary'] .dropdown-item {
         background-color: var(--sp-theme-primary, #0078d4);
         color: var(--sp-white, #ffffff);
     }
 
+    &[data-theme~='primary'] .dropdown-item.active {
+        background-color: var(--sp-white, #ffffff);
+        color: var(--sp-theme-primary, #0078d4);
+    }
+
+    &[data-theme~='primary'] .dropdown-item:hover {
+        background-color: var(--sp-theme-tertiary);
+    }
+
     &[data-theme~='primary'] {
         border-style: solid;
         border-width: .8px;
@@ -76,11 +95,21 @@
 
     /* Floating UI secondary theme color */
     &[data-theme~='secondary'],
-    &[data-theme~='secondary']>div {
+    &[data-theme~='secondary']>div,
+    &[data-theme~='secondary'] .dropdown-item {
         background-color: var(--sp-info-icon, #605e5c);
         color: var(--sp-white, #ffffff);
     }
 
+    &[data-theme~='secondary'] .dropdown-item.active {
+        background-color: var(--sp-white, #ffffff);
+        color: var(--sp-info-icon, #605e5c);
+    }
+
+    &[data-theme~='secondary'] .dropdown-item:hover {
+        background-color: var(--sp-neutral-lighter);
+    }
+
     &[data-theme~='secondary'] {
         border-style: solid;
         border-width: .8px;
@@ -105,12 +134,22 @@
 
     /* Floating UI success theme color */
     &[data-theme~='success'],
-    &[data-theme~='success']>div {
+    &[data-theme~='success']>div,
+    &[data-theme~='success'] .dropdown-item {
         background-color: var(--sp-success-icon, #107c10);
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='secondary'] {
+    &[data-theme~='success'] .dropdown-item.active {
+        background-color: var(--sp-white, #ffffff);
+        color: var(--sp-success-icon, #107c10);
+    }
+
+    &[data-theme~='success'] .dropdown-item:hover {
+        background-color: var(--sp-neutral-lighter);
+    }
+
+    &[data-theme~='success'] {
         border-style: solid;
         border-width: .8px;
         border-color: var(--sp-theme-primary, #107c10);
@@ -134,12 +173,22 @@
 
     /* Floating UI info theme color */
     &[data-theme~='info'],
-    &[data-theme~='info']>div {
+    &[data-theme~='info']>div,
+    &[data-theme~='info'] .dropdown-item {
         background-color: var(--sp-accent, #8764b8);
         color: var(--sp-black, #000000);
     }
 
-    &[data-theme~='secondary'] {
+    &[data-theme~='info'] .dropdown-item.active {
+        background-color: var(--sp-black, #000000);
+        color: var(--sp-accent, #8764b8);
+    }
+
+    &[data-theme~='info'] .dropdown-item:hover {
+        background-color: var(--sp-neutral-dark);
+    }
+
+    &[data-theme~='info'] {
         border-style: solid;
         border-width: .8px;
         border-color: var(--sp-theme-primary, #8764b8);
@@ -163,12 +212,22 @@
 
     /* Floating UI warning theme color */
     &[data-theme~='warning'],
-    &[data-theme~='warning']>div {
+    &[data-theme~='warning']>div,
+    &[data-theme~='warning'] .dropdown-item {
         background-color: var(--sp-severe-warning-icon, #d83b01);
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='secondary'] {
+    &[data-theme~='warning'] .dropdown-item.active {
+        background-color: var(--sp-white, #ffffff);
+        color: var(--sp-severe-warning-icon, #d83b01);
+    }
+
+    &[data-theme~='warning'] .dropdown-item:hover {
+        background-color: var(--sp-neutral-lighter);
+    }
+
+    &[data-theme~='warning'] {
         border-style: solid;
         border-width: .8px;
         border-color: var(--sp-theme-primary, #d83b01);
@@ -192,12 +251,22 @@
 
     /* Floating UI danger theme color */
     &[data-theme~='danger'],
-    &[data-theme~='danger']>div {
+    &[data-theme~='danger']>div,
+    &[data-theme~='danger'] .dropdown-item {
         background-color: var(--sp-error-icon, #a80000);
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='secondary'] {
+    &[data-theme~='danger'] .dropdown-item.active {
+        background-color: var(--sp-white, #ffffff);
+        color: var(--sp-error-icon, #a80000);
+    }
+
+    &[data-theme~='danger'] .dropdown-item:hover {
+        background-color: var(--sp-neutral-lighter);
+    }
+
+    &[data-theme~='danger'] {
         border-style: solid;
         border-width: .8px;
         border-color: var(--sp-theme-primary, #a80000);
@@ -221,79 +290,108 @@
 
     /* Floating UI light theme color - override Tippy default to match Bootstrap */
     &[data-theme~='light'],
-    &[data-theme~='light']>div {
-        background-color: var(--sp-neutral-lighter, #f3f2f1) !important;
-        color: var(--sp-black, #000000) !important;
+    &[data-theme~='light']>div,
+    &[data-theme~='light'] .dropdown-item {
+        background-color: var(--sp-neutral-lighter, #f3f2f1);
+        color: var(--sp-black, #000000);
     }
 
-    &[data-theme~='secondary'] {
+    &[data-theme~='light'] .dropdown-item.active {
+        background-color: var(--sp-black, #000000);
+        color: var(--sp-neutral-lighter, #f3f2f1);
+    }
+
+    &[data-theme~='light'] .dropdown-item:hover {
+        background-color: var(--sp-white);
+    }
+
+    &[data-theme~='light'] {
         border-style: solid;
         border-width: .8px;
         border-color: var(--sp-theme-primary, #f3f2f1);
     }
 
     &[data-theme~='light'][data-placement^='top']>.arrow::before {
-        border-top-color: var(--sp-neutral-lighter, #f3f2f1) !important;
+        border-top-color: var(--sp-neutral-lighter, #f3f2f1);
     }
 
     &[data-theme~='light'][data-placement^='bottom']>.arrow::before {
-        border-bottom-color: var(--sp-neutral-lighter, #f3f2f1) !important;
+        border-bottom-color: var(--sp-neutral-lighter, #f3f2f1);
     }
 
     &[data-theme~='light'][data-placement^='left']>.arrow::before {
-        border-left-color: var(--sp-neutral-lighter, #f3f2f1) !important;
+        border-left-color: var(--sp-neutral-lighter, #f3f2f1);
     }
 
     &[data-theme~='light'][data-placement^='right']>.arrow::before {
-        border-right-color: var(--sp-neutral-lighter, #f3f2f1) !important;
+        border-right-color: var(--sp-neutral-lighter, #f3f2f1);
     }
 
     /* Floating UI light-border theme color - override Tippy default to match Bootstrap */
     &[data-theme~='light-border'],
-    &[data-theme~='light-border']>div {
-        background-color: var(--sp-white, #ffffff) !important;
-        border-color: var(--sp-neutral-quaternary, #d2d0ce) !important;
-        color: var(--sp-primary-text, #333333) !important;
+    &[data-theme~='light-border']>div,
+    &[data-theme~='light-border'] .dropdown-item {
+        background-color: var(--sp-white, #ffffff);
+        color: var(--sp-primary-text, #333333);
     }
 
-    &[data-theme~='secondary'] {
+    &[data-theme~='light-border'] .dropdown-item.active {
+        background-color: var(--sp-primary-text, #333333);
+        color: var(--sp-white, #ffffff);
+    }
+
+    &[data-theme~='light-border'] .dropdown-item:hover {
+        background-color: var(--sp-black);
+    }
+
+    &[data-theme~='light-border'] {
         border-style: solid;
         border-width: .8px;
         border-color: var(--sp-theme-primary, #ffffff);
     }
 
     &[data-theme~='light-border'][data-placement^='top']>.arrow::before {
-        border-top-color: var(--sp-white, #ffffff) !important;
+        border-top-color: var(--sp-white, #ffffff);
     }
 
     &[data-theme~='light-border'][data-placement^='bottom']>.arrow::before {
-        border-bottom-color: var(--sp-white, #ffffff) !important;
+        border-bottom-color: var(--sp-white, #ffffff);
     }
 
     &[data-theme~='light-border'][data-placement^='left']>.arrow::before {
-        border-left-color: var(--sp-white, #ffffff) !important;
+        border-left-color: var(--sp-white, #ffffff);
     }
 
     &[data-theme~='light-border'][data-placement^='right']>.arrow::before {
-        border-right-color: var(--sp-white, #ffffff) !important;
+        border-right-color: var(--sp-white, #ffffff);
     }
 
     &[data-theme~='light-border'][data-placement^='bottom']>.arrow::after {
-        border-bottom-color: var(--sp-neutral-quaternary, #d2d0ce) !important;
+        border-bottom-color: var(--sp-neutral-quaternary, #d2d0ce);
     }
 
     &[data-theme~='light-border'][data-placement^='top']>.arrow::after {
-        border-top-color: var(--sp-neutral-quaternary, #d2d0ce) !important;
+        border-top-color: var(--sp-neutral-quaternary, #d2d0ce);
     }
 
     /* Floating UI dark theme color */
     &[data-theme~='dark'],
-    &[data-theme~='dark']>div {
+    &[data-theme~='dark']>div,
+    &[data-theme~='dark'] .dropdown-item {
         background-color: var(--sp-neutral-dark, #201f1e);
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='secondary'] {
+    &[data-theme~='dark'] .dropdown-item.active {
+        background-color: var(--sp-white, #ffffff);
+        color: var(--sp-neutral-dark, #201f1e);
+    }
+
+    &[data-theme~='dark'] .dropdown-item:hover {
+        background-color: var(--sp-neutral-lighter);
+    }
+
+    &[data-theme~='dark'] {
         border-style: solid;
         border-width: .8px;
         border-color: var(--sp-theme-primary, #201f1e);
@@ -317,12 +415,18 @@
 
     /* Floating UI SharePoint theme color */
     &[data-theme~='sharepoint'],
-    &[data-theme~='sharepoint']>div {
+    &[data-theme~='sharepoint']>div,
+    &[data-theme~='sharepoint'] .dropdown-item {
         background-color: var(--sp-theme-dark, #005a9e);
         color: var(--sp-white, #ffffff);
     }
 
-    &[data-theme~='secondary'] {
+    &[data-theme~='sharepoint'] .dropdown-item.active {
+        background-color: var(--sp-white, #ffffff);
+        color: var(--sp-theme-dark, #005a9e);
+    }
+
+    &[data-theme~='sharepoint'] {
         border-style: solid;
         border-width: .8px;
         border-color: var(--sp-theme-primary, #005a9e);