gd-bs 6.1.0 → 6.1.2

package/index.html

@@ -55,8 +55,12 @@
         window.addEventListener("load", function() {
             // Dev
             let items = [];
-            for(var i=0; i<10; i++) {
-                items.push({ label: "Item " + i, data: i, isSelected: true });
+            for (var i = 0; i < 10; i++) {
+                items.push({
+                    label: "Item " + i,
+                    data: i,
+                    isSelected: true
+                });
             }
             window["form"] = GD.Components.Form({
                 el: document.getElementById("dev"),
@@ -64,9 +68,20 @@
                     name: "cb",
                     label: "My CB",
                     items,
-                    //renderRow: false,
-                    //colSize: 3,
+                    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"
+                    }]
                 }]
             });
 
@@ -123,7 +138,9 @@
                     text: "Test Tooltip",
                     type: GD.Components.ButtonTypes.OutlineDanger
                 },
-                options: { trigger: "click" }
+                options: {
+                    trigger: "click"
+                }
             });
 
             window["card"] = GD.Components.Card({
@@ -134,7 +151,9 @@
                     actions: [{
                         text: "Card Action",
                         buttonType: GD.Components.ButtonTypes.OutlinePrimary,
-                        onClick: function(action, card) { alert(card.title + " was clicked."); }
+                        onClick: function(action, card) {
+                            alert(card.title + " was clicked.");
+                        }
                     }]
                 }]
             });
@@ -862,6 +881,21 @@
                                     type: GD.Components.FormControlTypes.Password,
                                 }
                             }]
+                        }, {
+                            columns: [{
+                                control: {
+                                    label: "Select an Option",
+                                    name: "option",
+                                    type: GD.Components.FormControlTypes.Switch,
+                                    items: [{
+                                        label: "Switch 1"
+                                    }, {
+                                        label: "Switch 2"
+                                    }, {
+                                        label: "Switch 3"
+                                    }]
+                                }
+                            }]
                         }, {
                             columns: [{
                                 control: {
@@ -1103,7 +1137,9 @@
                     tabContent: "This is the content for tab 4."
                 }, {
                     title: "NavTab 5",
-                    onRenderTab: function(el) { el.innerHTML = "This is the content for tab 5." }
+                    onRenderTab: function(el) {
+                        el.innerHTML = "This is the content for tab 5."
+                    }
                 }]
             });
             window["carousel"] = GD.Components.Carousel({
@@ -1183,7 +1219,9 @@
             GD.Components.Pagination({
                 el: document.querySelector("#paging"),
                 numberOfPages: 5,
-                onClick: function(pageNumber) { alert(pageNumber + " was clicked."); }
+                onClick: function(pageNumber) {
+                    alert(pageNumber + " was clicked.");
+                }
             });
             GD.Components.Progress({
                 el: document.querySelector("#progress"),

package/package.json

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

package/src/components/checkboxGroup/index.ts

@@ -35,7 +35,7 @@ class _CheckboxGroup extends Base<ICheckboxGroupProps> implements ICheckboxGroup
 
     // Configure the card group
     private configure(cbTemplate: string) {
-        let renderRow = typeof (this.props.renderRow) === "boolean" ? this.props.renderRow : true;
+        let renderRow = typeof (this.props.colSize) === "number" ? this.props.colSize > 0 : false;
 
         // See if a label is defined
         let label = this.el.querySelector("legend");

package/src/components/checkboxGroup/item.ts

@@ -37,14 +37,20 @@ export class CheckboxItem {
         if (this._elCheckbox) {
             this._elCheckbox.disabled = this._parent.isDisabled ? true : false;
             this._elCheckbox.readOnly = this._parent.isReadonly ? true : false;
+            this._elCheckbox.required = this._parent.required ? true : false;
 
             // Default the title property for the checkbox
             this._elCheckbox.title = this.props.label || this._parent.title || "";
         }
 
-        // Set the column size
-        let colSize = this._parent.colSize > 0 && this._parent.colSize < 13 ? this._parent.colSize : 12;
-        this._el.classList.add("col-" + colSize);
+        // See if we are rendering a row
+        let renderRow = typeof (this._parent.colSize) === "number" ? this._parent.colSize > 0 : false;
+        if (renderRow) {
+            // Set the column size
+            let colSize = this._parent.colSize > 0 && this._parent.colSize < 13 ? this._parent.colSize : 12;
+            this._el.classList.add("col-" + colSize);
+
+        }
 
         // See if the title property is defined
         if (this._parent.title) {

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

@@ -95,7 +95,7 @@ export interface ICheckboxGroupProps extends IBaseProps<ICheckboxGroup> {
     multi?: boolean;
     onRender?: (el?: HTMLElement, item?: ICheckboxGroupItem) => void;
     onChange?: (items: ICheckboxGroupItem | Array<ICheckboxGroupItem>, ev?: Event) => void;
-    renderRow?: boolean;
+    required?: boolean;
     title?: string;
     type?: number;
     value?: any;

package/src/components/dropdown/index.ts

@@ -289,6 +289,7 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
             dropdown.classList.add("form-select");
             dropdown.disabled = this.props.isReadonly ? true : false;
             dropdown.multiple = this.props.multi ? true : false;
+            dropdown.required = this.props.required ? true : false;
             this.props.title ? dropdown.title = this.props.title : null;
         }
     }

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

@@ -143,6 +143,7 @@ export interface IDropdownProps extends IBaseProps<IDropdown> {
     navFl?: boolean;
     onChange?: (item?: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
     onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
+    required?: boolean;
     setLabelToValue?: boolean;
     title?: string;
     type?: number;

package/src/components/form/control.ts

@@ -121,7 +121,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     items: cbProps.items,
                     onChange: cbProps.onChange,
-                    renderRow: cbProps.renderRow,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Checkbox,
                     value
@@ -137,6 +137,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    required: this._props.required,
                     title: this._props.title,
                     type: InputGroupTypes.ColorPicker,
                     value
@@ -153,6 +154,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     items: (this._props as IFormControlPropsDropdown).items,
                     onChange: (this._props as IFormControlPropsDropdown).onChange,
+                    required: this._props.required,
                     title: this._props.title,
                     value
                 });
@@ -168,6 +170,7 @@ export class FormControl implements IFormControl {
                     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
                 });
@@ -182,6 +185,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    required: this._props.required,
                     title: this._props.title,
                     type: InputGroupTypes.Email,
                     value
@@ -197,6 +201,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    required: this._props.required,
                     title: this._props.title,
                     type: InputGroupTypes.File,
                     value
@@ -211,6 +216,7 @@ export class FormControl implements IFormControl {
                     items: (this._props as IFormControlPropsListBox).items,
                     onChange: (this._props as IFormControlPropsListBox).onChange,
                     placeholder: (this._props as IFormControlPropsListBox).placeholder,
+                    required: this._props.required,
                     value
                 });
                 break;
@@ -229,7 +235,7 @@ export class FormControl implements IFormControl {
                     items: cbMultiProps.items,
                     multi: true,
                     onChange: cbMultiProps.onChange,
-                    renderRow: cbMultiProps.renderRow,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Checkbox,
                     value
@@ -247,6 +253,7 @@ export class FormControl implements IFormControl {
                     multi: true,
                     onChange: (this._props as IFormControlPropsDropdown).onChange,
                     onMenuRendering: (this._props as IFormControlPropsDropdown).onMenuRendering,
+                    required: this._props.required,
                     title: this._props.title,
                     value
                 });
@@ -261,6 +268,7 @@ export class FormControl implements IFormControl {
                     multi: true,
                     onChange: (this._props as IFormControlPropsMultiListBox).onChange,
                     placeholder: (this._props as IFormControlPropsMultiListBox).placeholder,
+                    required: this._props.required,
                     value
                 });
                 break;
@@ -276,7 +284,7 @@ export class FormControl implements IFormControl {
                     items: (this._props as IFormControlPropsMultiCheckbox).items,
                     multi: true,
                     onChange: (this._props as IFormControlPropsMultiCheckbox).onChange,
-                    renderRow: (this._props as IFormControlPropsMultiCheckbox).renderRow,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Radio,
                     value
@@ -294,7 +302,7 @@ export class FormControl implements IFormControl {
                     items: (this._props as IFormControlPropsMultiCheckbox).items,
                     multi: true,
                     onChange: (this._props as IFormControlPropsMultiCheckbox).onChange,
-                    renderRow: (this._props as IFormControlPropsMultiCheckbox).renderRow,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Switch,
                     value
@@ -310,6 +318,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    required: this._props.required,
                     title: this._props.title,
                     type: InputGroupTypes.Password,
                     value
@@ -326,7 +335,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     items: (this._props as IFormControlPropsCheckbox).items,
                     onChange: (this._props as IFormControlPropsCheckbox).onChange,
-                    renderRow: (this._props as IFormControlPropsCheckbox).renderRow,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Radio,
                     value
@@ -344,6 +353,7 @@ export class FormControl implements IFormControl {
                     max: (this._props as IFormControlPropsRange).max || 100,
                     onChange: (this._props as IFormControlPropsRange).onChange,
                     placeholder: (this._props as IFormControlPropsRange).placeholder,
+                    required: this._props.required,
                     step: (this._props as IFormControlPropsRange).step,
                     title: this._props.title,
                     type: InputGroupTypes.Range,
@@ -359,6 +369,7 @@ export class FormControl implements IFormControl {
                     isReadonly: true,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    required: this._props.required,
                     title: this._props.title,
                     type: InputGroupTypes.TextField,
                     value
@@ -375,7 +386,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     items: (this._props as IFormControlPropsCheckbox).items,
                     onChange: (this._props as IFormControlPropsCheckbox).onChange,
-                    renderRow: (this._props as IFormControlPropsCheckbox).renderRow,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Switch,
                     value
@@ -391,6 +402,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    required: this._props.required,
                     rows: (this._props as IFormControlPropsTextField).rows,
                     title: this._props.title,
                     type: InputGroupTypes.TextArea,
@@ -407,6 +419,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     onChange: (this._props as IFormControlPropsTextField).onChange,
                     placeholder: (this._props as IFormControlPropsTextField).placeholder,
+                    required: this._props.required,
                     title: this._props.title,
                     type: InputGroupTypes.TextField,
                     value

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

@@ -105,7 +105,6 @@ export interface IFormControlPropsCheckbox extends IFormControlProps {
     onControlRendering?: (control: IFormControlPropsCheckbox) => void | PromiseLike<IFormControlPropsCheckbox>;
     onGetValue?: (control: IFormControlPropsCheckbox) => any;
     onValidate?: (control: IFormControlPropsCheckbox, value: IFormControlValidationResult) => boolean | IFormControlValidationResult;
-    renderRow?: boolean;
 }
 
 /**

package/src/components/inputGroup/index.ts

@@ -219,6 +219,7 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
                 this.props.placeholder ? textarea.placeholder = this.props.placeholder : null;
                 textarea.disabled = this.props.isDisabled ? true : false;
                 textarea.readOnly = this.props.isReadonly ? true : false;
+                textarea.required = this.props.required ? true : false;
                 textarea.rows = this.props.rows;
                 this.props.title ? textarea.title = this.props.title : null;
             }
@@ -233,6 +234,7 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
                 this.props.placeholder ? input.placeholder = this.props.placeholder : null;
                 input.disabled = this.props.isDisabled ? true : false;
                 input.readOnly = this.props.isReadonly ? true : false;
+                input.required = this.props.required ? true : false;
                 this.props.title ? input.title = this.props.title : null;
                 typeof (this.props.min) === "number" ? input.min = this.props.min + "" : null;
                 typeof (this.props.max) === "number" ? input.max = this.props.max + "" : null;

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

@@ -91,6 +91,7 @@ export interface IInputGroupProps extends IBaseProps<IInputGroup> {
     placeholder?: string;
     prependedButtons?: Array<IButtonProps>;
     prependedLabel?: string;
+    required?: boolean;
     rows?: number;
     step?: number;
     title?: string;

package/src/components/listBox/index.ts

@@ -72,6 +72,9 @@ class _ListBox extends Base<IListBoxProps> implements IListBox {
             this._elSearchBox ? this._elSearchBox.disabled = true : null;
         }
 
+        // Set the required property
+        this._elSearchBox.required = this.props.required ? true : false;
+
         // Set the options
         this.setOptions(this.props.items);
 

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

@@ -99,8 +99,9 @@ export interface IListBoxProps extends IBaseProps<IListBox> {
     isReadonly?: boolean;
     items: Array<IDropdownItem>;
     multi?: boolean;
-    placeholder?: string;
     onLoadData?: () => Array<IDropdownItem> | PromiseLike<Array<IDropdownItem>>;
     onChange?: (items: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
+    placeholder?: string;
+    required?: boolean;
     value?: string | Array<string>;
 }