gd-bs 5.0.6 → 5.1.0

package/package.json

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

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

@@ -9,15 +9,16 @@
  *         id: "demoAccordion",
  *         items: [
  *             {
- *                 btnProps: { text: "Item 1" },
- *                 content: "This is the content for item 1."
+ *                 header: "Item 1",
+ *                 content: "This is the content for item 1.",
+ *                 showFl: true
  *             },
  *             {
- *                 btnProps: { text: "Item 2" },
+ *                 header: "Item 2",
  *                 content: "This is the content for item 2."
  *             },
  *             {
- *                 btnProps: { text: "Item 3" },
+ *                 header: "Item 3",
  *                 content: "This is the content for item 3."
  *             }
  *         ]
@@ -39,15 +40,16 @@
  *     id: "demoAccordion",
  *     items: [
  *         {
- *             btnProps: { text: "Item 1" },
- *             content: "This is the content for item 1."
+ *             header: "Item 1",
+ *             content: "This is the content for item 1.",
+ *             showFl: true
  *         },
  *         {
- *             btnProps: { text: "Item 2" },
+ *             header: "Item 2",
  *             content: "This is the content for item 2."
  *         },
  *         {
- *             btnProps: { text: "Item 3" },
+ *             header: "Item 3",
  *             content: "This is the content for item 3."
  *         }
  *     ]
@@ -57,7 +59,6 @@
 export const Accordion: (props: IAccordionProps, template?: string, itemTemplate?: string) => IAccordion;
 
 import { IBase, IBaseProps } from "../types";
-import { ICollapseOptions } from "../collapse/types";
 
 /**
  * Accordion
@@ -77,11 +78,6 @@ export interface IAccordionItem<T = Element> {
     showFl?: boolean;
 }
 
-/**
- * Accordion Options
- */
-export interface IAccordionOptions extends ICollapseOptions { }
-
 /**
  * Accordion Properties
  */
@@ -89,5 +85,4 @@ export interface IAccordionProps<T = Element> extends IBaseProps<IAccordion> {
     autoCollapse?: boolean;
     id?: string;
     items?: Array<IAccordionItem<T>>;
-    options?: IAccordionOptions;
 }

package/src/components/listBox/index.ts

@@ -81,6 +81,28 @@ class _ListBox extends Base<IListBoxProps> implements IListBox {
 
     // Configures the events
     private configureEvents() {
+        // Execute the load event
+        let returnVal: any = 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(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", ev => {
             let value = this._elSearchBox.value;
@@ -172,8 +194,10 @@ class _ListBox extends Base<IListBoxProps> implements IListBox {
      * Public Interface
      */
 
+    // Gets the selected items
     getValue() { return this._selectedItems; }
 
+    // Sets the options
     setOptions(items: Array<IDropdownItem> = []) {
         let elDatalist = this.el.querySelector("datalist") as HTMLDataListElement;
         if (elDatalist) {

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

@@ -16,6 +16,9 @@ export interface IListBox extends IBase<IListBoxProps> {
     /** The selected listbox items. */
     getValue: () => Array<IDropdownItem>;
 
+    /** Sets the options */
+    setOptions: (items: Array<IDropdownItem>) => void;
+
     /** Sets the listbox value. */
     setValue: (value?: string | Array<string> | Array<IDropdownItem>) => void;
 }
@@ -30,6 +33,7 @@ export interface IListBoxProps {
     items: Array<IDropdownItem>;
     multi?: boolean;
     placeholder?: string;
+    onLoadData?: () => Array<IDropdownItem> | PromiseLike<Array<IDropdownItem>>;
     onChange?: (items: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
     value?: string | Array<string>;
 }

package/src/components/nav/index.ts

@@ -91,24 +91,24 @@ class _Nav extends Base<INavProps> implements INav {
                     this.configureEvents(link);
 
                     // Add the tab content
-                    tabs.appendChild(link.elTab);
+                    tabs.appendChild(link.elTabContent);
 
                     // See if the fade option is enabled
                     if (this.props.fadeTabs) {
                         // Set the class name
-                        link.elTab.classList.add("fade");
+                        link.elTabContent.classList.add("fade");
 
                         // See if the tab is active
                         if (link.props.isActive) {
                             // Set the class name
-                            link.elTab.classList.add("show");
+                            link.elTabContent.classList.add("show");
                         }
                     }
                 }
 
                 // Call the render events
-                this.props.onLinkRendered ? this.props.onLinkRendered(link.el, links[i]) : null;
-                this.props.onTabRendered ? this.props.onTabRendered(link.elTab, links[i]) : null;
+                this.props.onLinkRendered ? this.props.onLinkRendered(link.elTab, links[i]) : null;
+                this.props.onTabRendered ? this.props.onTabRendered(link.elTabContent, links[i]) : null;
             }
         }
     }
@@ -143,7 +143,7 @@ class _Nav extends Base<INavProps> implements INav {
                 let link = this._links[i];
 
                 // See if this is the target tab
-                if (tabId === i + 1 || link.elTab.getAttribute("data-title") == tabId) {
+                if (tabId === i + 1 || link.elTabContent.getAttribute("data-title") == tabId) {
                     // Toggle it if it's not active
                     link.isActive ? null : link.toggle(this.props.fadeTabs);
                 }