gd-bs 6.6.1 → 6.6.2

package/index.html

@@ -59,32 +59,17 @@
             let items = [];
             for (var i = 0; i < 10; i++) {
                 items.push({
-                    label: "Item " + i,
                     data: i,
-                    isSelected: true
+                    text: "Item " + i,
+                    value: i
                 });
             }
-            window["form"] = GD.Components.Form({
+            window["cb_ddl"] = GD.Components.Dropdown({
                 el: document.getElementById("dev"),
-                controls: [{
-                    name: "cb",
-                    label: "My CB",
-                    items,
-                    renderRow: true,
-                    colSize: 3,
-                    type: 8
-                }, {
-                    name: "switch",
-                    label: "Select an Option",
-                    type: GD.Components.FormControlTypes.Switch,
-                    items: [{
-                        label: "Switch 1"
-                    }, {
-                        label: "Switch 2"
-                    }, {
-                        label: "Switch 3"
-                    }]
-                }]
+                items: items,
+                isCheckbox: true,
+                multi: true,
+                label: "CB Dropdown"
             });
 
             // Components

package/package.json

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

package/src/components/dropdown/index.ts

@@ -1,7 +1,9 @@
 import { IDropdown, IDropdownItem, IDropdownProps } from "./types";
+import { ICheckboxGroup, ICheckboxGroupItem } from "../checkboxGroup/types";
 import { IPopover, IPopoverProps } from "../popover/types";
 import { Base } from "../base";
 import { ButtonClassNames, ButtonTypes } from "../button";
+import { CheckboxGroup, CheckboxGroupTypes } from "../checkboxGroup"
 import { Popover, PopoverPlacements, PopoverTypes } from "../popover";
 import { DropdownFormItem } from "./formItem";
 import { DropdownItem } from "./item";
@@ -33,6 +35,7 @@ const GetHTML = (props: IDropdownProps) => {
  */
 class _Dropdown extends Base<IDropdownProps> implements IDropdown {
     private _autoSelect: boolean = null;
+    private _cb: ICheckboxGroup = null;
     private _elMenu: HTMLElement;
     private _initFl: boolean = false;
     private _items: Array<DropdownFormItem | DropdownItem> = null;
@@ -389,32 +392,61 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         // Get the menu
         let menu = this.el.querySelector(".dropdown-menu") || this.el.querySelector("select");
         if (menu) {
-            let isForm = menu.nodeName == "SELECT";
+            // See if we are creating checkboxes
+            if (this.props.isCheckbox) {
+                let cbItems: ICheckboxGroupItem[] = [];
 
-            // Parse the items
-            let items = this.props.items || [];
-            for (let i = 0; i < items.length; i++) {
-                // Create the item
-                let item = isForm ? new DropdownFormItem(items[i], this.props) : new DropdownItem(items[i], this.props);
-                this._items.push(item);
-
-                // See if this isn't for a form
-                if (!isForm) {
-                    // Configure the item events
-                    this.configureItemEvents(item);
+                // Parse the items
+                let items = this.props.items || [];
+                for (let i = 0; i < items.length; i++) {
+                    let item = items[i];
+
+                    // Create the checkbox item
+                    cbItems.push({
+                        data: item,
+                        isDisabled: item.isDisabled,
+                        isSelected: item.isSelected,
+                        label: item.text,
+                        onChange: item.onClick,
+                        type: CheckboxGroupTypes.Checkbox
+                    });
                 }
 
-                // Add the item to the menu
-                menu.appendChild(item.el);
-            }
+                // Render the checkbox
+                this._cb = CheckboxGroup({
+                    className: "m-2",
+                    el: menu,
+                    items: cbItems,
+                    multi: this.props.multi
+                });
+            } else {
+                let isForm = menu.nodeName == "SELECT";
 
-            // See if this is a form
-            if (isForm) {
-                // Ensure the selected values match the index
-                let idx = (menu as HTMLSelectElement).selectedIndex;
-                if (this._items[idx] && this._items[idx].isSelected == false) {
-                    // Select the item
-                    this._items[idx].toggle();
+                // Parse the items
+                let items = this.props.items || [];
+                for (let i = 0; i < items.length; i++) {
+                    // Create the item
+                    let item = isForm ? new DropdownFormItem(items[i], this.props) : new DropdownItem(items[i], this.props);
+                    this._items.push(item);
+
+                    // See if this isn't for a form
+                    if (!isForm) {
+                        // Configure the item events
+                        this.configureItemEvents(item);
+                    }
+
+                    // Add the item to the menu
+                    menu.appendChild(item.el);
+                }
+
+                // See if this is a form
+                if (isForm) {
+                    // Ensure the selected values match the index
+                    let idx = (menu as HTMLSelectElement).selectedIndex;
+                    if (this._items[idx] && this._items[idx].isSelected == false) {
+                        // Select the item
+                        this._items[idx].toggle();
+                    }
                 }
             }
         }
@@ -448,17 +480,32 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
     getValue() {
         let values = [];
 
-        // Parse the items
-        for (let i = 0; i < this._items.length; i++) {
-            let item = this._items[i];
-
-            // Skip disabled items
-            if ((item.el as HTMLOptionElement).disabled) { continue; }
+        // See if the checkboxes exist
+        if (this._cb) {
+            // Get the values
+            let items = this._cb.getValue() as ICheckboxGroupItem[];
+            items = typeof (items["length"]) === "number" ? items : [items] as any;
 
-            // See if this item is selected
-            if (item.isSelected) {
+            // Parse the items
+            for (let i = 0; i < items.length; i++) {
                 // Add the value
-                values.push(item.props);
+                values.push(items[i].data);
+            }
+
+            // Return the value
+        } else {
+            // Parse the items
+            for (let i = 0; i < this._items.length; i++) {
+                let item = this._items[i];
+
+                // Skip disabled items
+                if ((item.el as HTMLOptionElement).disabled) { continue; }
+
+                // See if this item is selected
+                if (item.isSelected) {
+                    // Add the value
+                    values.push(item.props);
+                }
             }
         }
 

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

@@ -135,6 +135,7 @@ export interface IDropdownProps extends IBaseProps<IDropdown> {
     dropUp?: boolean;
     formFl?: boolean;
     id?: string;
+    isCheckbox?: boolean;
     isDark?: boolean;
     isDatalist?: boolean;
     isReadonly?: boolean;

package/src/components/form/control.ts

@@ -177,6 +177,39 @@ export class FormControl implements IFormControl {
                     value
                 });
                 break;
+            // Dropdown
+            case FormControlTypes.DropdownButton:
+                // Add the dropdown
+                this._ddl = Dropdown({
+                    className,
+                    formFl: false,
+                    id: this._props.id,
+                    isReadonly: this._props.isReadonly,
+                    items: (this._props as IFormControlPropsDropdown).items,
+                    onChange: (this._props as IFormControlPropsDropdown).onChange,
+                    onMenuRendering: (this._props as IFormControlPropsDropdown).onMenuRendering,
+                    required: this._props.required,
+                    title: this._props.title,
+                    value
+                });
+                break;
+            // Dropdown
+            case FormControlTypes.DropdownCheckbox:
+                // Add the dropdown
+                this._ddl = Dropdown({
+                    className,
+                    formFl: false,
+                    id: this._props.id,
+                    isCheckbox: true,
+                    isReadonly: this._props.isReadonly,
+                    items: (this._props as IFormControlPropsDropdown).items,
+                    onChange: (this._props as IFormControlPropsDropdown).onChange,
+                    onMenuRendering: (this._props as IFormControlPropsDropdown).onMenuRendering,
+                    required: this._props.required,
+                    title: this._props.title,
+                    value
+                });
+                break;
             // Email
             case FormControlTypes.Email:
                 // Add the input
@@ -264,6 +297,41 @@ export class FormControl implements IFormControl {
                     value
                 });
                 break;
+            // Multi-Dropdown Button
+            case FormControlTypes.MultiDropdownButton:
+                // Add the dropdown
+                this._ddl = Dropdown({
+                    className,
+                    formFl: false,
+                    id: this._props.id,
+                    isReadonly: this._props.isReadonly,
+                    items: (this._props as IFormControlPropsDropdown).items,
+                    multi: true,
+                    onChange: (this._props as IFormControlPropsDropdown).onChange,
+                    onMenuRendering: (this._props as IFormControlPropsDropdown).onMenuRendering,
+                    required: this._props.required,
+                    title: this._props.title,
+                    value
+                });
+                break;
+            // Multi-Dropdown Checkbox
+            case FormControlTypes.MultiDropdownCheckbox:
+                // Add the dropdown
+                this._ddl = Dropdown({
+                    className,
+                    formFl: false,
+                    id: this._props.id,
+                    isCheckbox: true,
+                    isReadonly: this._props.isReadonly,
+                    items: (this._props as IFormControlPropsDropdown).items,
+                    multi: true,
+                    onChange: (this._props as IFormControlPropsDropdown).onChange,
+                    onMenuRendering: (this._props as IFormControlPropsDropdown).onMenuRendering,
+                    required: this._props.required,
+                    title: this._props.title,
+                    value
+                });
+                break;
             // Multi-List Box
             case FormControlTypes.MultiListBox:
                 // Add the list box

package/src/components/form/controlTypes.d.ts

@@ -222,10 +222,14 @@ export type IFormControlTypes = {
     Email: number;
     Datalist: number;
     Dropdown: number;
+    DropdownButton: number;
+    DropdownCheckbox: number;
     File: number;
     ListBox: number;
     MultiCheckbox: number;
     MultiDropdown: number;
+    MultiDropdownButton: number;
+    MultiDropdownCheckbox: number;
     MultiListBox: number;
     MultiRadio: number;
     MultiSwitch: number;

package/src/components/form/types.ts

@@ -7,20 +7,24 @@ export enum FormControlTypes {
     Email = 3,
     Datalist = 4,
     Dropdown = 5,
-    File = 6,
-    ListBox = 7,
-    MultiCheckbox = 8,
-    MultiDropdown = 9,
-    MultiListBox = 10,
-    MultiRadio = 11,
-    MultiSwitch = 12,
-    Password = 13,
-    Radio = 14,
-    Range = 15,
-    Readonly = 16,
-    Switch = 17,
-    TextArea = 18,
-    TextField = 19
+    DropdownButton = 6,
+    DropdownCheckbox = 7,
+    File = 8,
+    ListBox = 9,
+    MultiCheckbox = 10,
+    MultiDropdown = 11,
+    MultiDropdownButton = 12,
+    MultiDropdownCheckbox = 13,
+    MultiListBox = 14,
+    MultiRadio = 15,
+    MultiSwitch = 16,
+    Password = 17,
+    Radio = 18,
+    Range = 19,
+    Readonly = 20,
+    Switch = 21,
+    TextArea = 22,
+    TextField = 23
 }
 
 /**