gd-bs 6.1.1 → 6.1.3

package/index.html

@@ -936,6 +936,10 @@
                                     name: "Jobs",
                                     type: GD.Components.FormControlTypes.Dropdown,
                                     items: [{
+                                        text: "Select...",
+                                        isDisabled: true,
+                                        isSelected: true
+                                    },{
                                         text: "Job 1"
                                     }, {
                                         text: "Job 2"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.1.1",
+    "version": "6.1.3",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",
@@ -35,7 +35,7 @@
     "dependencies": {
         "@popperjs/core": "^2.11.6",
         "bootstrap": "^5.2.3",
-        "bootstrap-icons": "^1.10.3",
+        "bootstrap-icons": "^1.10.4",
         "core-js": "^3.25.5",
         "tippy.js": "^6.3.7"
     },

package/pnpm-lock.yaml

@@ -1,7 +1,7 @@
 dependencies:
   '@popperjs/core': 2.11.6
   bootstrap: 5.2.3_@popperjs+core@2.11.6
-  bootstrap-icons: 1.10.3
+  bootstrap-icons: 1.10.4
   core-js: 3.25.5
   tippy.js: 6.3.7
 devDependencies:
@@ -1612,10 +1612,10 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
-  /bootstrap-icons/1.10.3:
+  /bootstrap-icons/1.10.4:
     dev: false
     resolution:
-      integrity: sha512-7Qvj0j0idEm/DdX9Q0CpxAnJYqBCFCiUI6qzSPYfERMcokVuV9Mdm/AJiVZI8+Gawe4h/l6zFcOzvV7oXCZArw==
+      integrity: sha512-eI3HyIUmpGKRiRv15FCZccV+2sreGE2NnmH8mtxV/nPOzQVu0sPEj8HhF1MwjJ31IhjF0rgMvtYOX5VqIzcb/A==
   /bootstrap/5.2.3_@popperjs+core@2.11.6:
     dependencies:
       '@popperjs/core': 2.11.6
@@ -3282,7 +3282,7 @@ specifiers:
   autoprefixer: ^10.4.12
   babel-loader: ^8.2.5
   bootstrap: ^5.2.3
-  bootstrap-icons: ^1.10.3
+  bootstrap-icons: ^1.10.4
   core-js: ^3.25.5
   css-loader: ^6.7.1
   dts-bundle: ^0.7.3

package/src/components/checkboxGroup/item.ts

@@ -37,6 +37,7 @@ 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 || "";

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

@@ -95,6 +95,7 @@ export interface ICheckboxGroupProps extends IBaseProps<ICheckboxGroup> {
     multi?: boolean;
     onRender?: (el?: HTMLElement, item?: ICheckboxGroupItem) => void;
     onChange?: (items: ICheckboxGroupItem | Array<ICheckboxGroupItem>, ev?: Event) => void;
+    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;
         }
     }
@@ -448,6 +449,9 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         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

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,6 +121,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     items: cbProps.items,
                     onChange: cbProps.onChange,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Checkbox,
                     value
@@ -136,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
@@ -152,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
                 });
@@ -167,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
                 });
@@ -181,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
@@ -196,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
@@ -210,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;
@@ -228,6 +235,7 @@ export class FormControl implements IFormControl {
                     items: cbMultiProps.items,
                     multi: true,
                     onChange: cbMultiProps.onChange,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Checkbox,
                     value
@@ -245,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
                 });
@@ -259,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;
@@ -274,6 +284,7 @@ export class FormControl implements IFormControl {
                     items: (this._props as IFormControlPropsMultiCheckbox).items,
                     multi: true,
                     onChange: (this._props as IFormControlPropsMultiCheckbox).onChange,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Radio,
                     value
@@ -291,6 +302,7 @@ export class FormControl implements IFormControl {
                     items: (this._props as IFormControlPropsMultiCheckbox).items,
                     multi: true,
                     onChange: (this._props as IFormControlPropsMultiCheckbox).onChange,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Switch,
                     value
@@ -306,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
@@ -322,6 +335,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     items: (this._props as IFormControlPropsCheckbox).items,
                     onChange: (this._props as IFormControlPropsCheckbox).onChange,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Radio,
                     value
@@ -339,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,
@@ -354,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
@@ -370,6 +386,7 @@ export class FormControl implements IFormControl {
                     isReadonly: this._props.isReadonly,
                     items: (this._props as IFormControlPropsCheckbox).items,
                     onChange: (this._props as IFormControlPropsCheckbox).onChange,
+                    required: this._props.required,
                     title: this._props.title,
                     type: CheckboxGroupTypes.Switch,
                     value
@@ -385,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,
@@ -401,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/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>;
 }

package/src/icons/svgs/folderPlus.ts

@@ -1,4 +1,4 @@
 import { generateIcon } from "../generate";
 export function folderPlus(height, width, className?) {
-  return generateIcon(`<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-folder-plus' viewBox='0 0 16 16'>   <path d='m.5 3 .04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9v-1H2.826a1 1 0 0 1-.995-.91l-.637-7A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09L14.54 8h1.005l.256-2.819A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2zm5.672-1a1 1 0 0 1 .707.293L7.586 3H2.19c-.24 0-.47.042-.683.12L1.5 2.98a1 1 0 0 1 1-.98h3.672z'/>   <path d='M13.5 10a.5.5 0 0 1 .5.5V12h1.5a.5.5 0 1 1 0 1H14v1.5a.5.5 0 1 1-1 0V13h-1.5a.5.5 0 0 1 0-1H13v-1.5a.5.5 0 0 1 .5-.5z'/> </svg>`, height, width, className);
+  return generateIcon(`<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-folder-plus' viewBox='0 0 16 16'>   <path d='m.5 3 .04.87a1.99 1.99 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9v-1H2.826a1 1 0 0 1-.995-.91l-.637-7A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09L14.54 8h1.005l.256-2.819A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2Zm5.672-1a1 1 0 0 1 .707.293L7.586 3H2.19c-.24 0-.47.042-.683.12L1.5 2.98a1 1 0 0 1 1-.98h3.672Z'/>   <path d='M13.5 9a.5.5 0 0 1 .5.5V11h1.5a.5.5 0 1 1 0 1H14v1.5a.5.5 0 1 1-1 0V12h-1.5a.5.5 0 0 1 0-1H13V9.5a.5.5 0 0 1 .5-.5Z'/> </svg>`, height, width, className);
 }

package/src/icons/svgs/postcardHeartFill.ts

@@ -1,4 +1,4 @@
 import { generateIcon } from "../generate";
 export function postcardHeartFill(height, width, className?) {
-  return generateIcon(`<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-postcard-heart-fill' viewBox='0 0 16 16'>   <path fill-rule='evenodd' d='M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2Zm6 2.5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7Zm3.5.878c1.482-1.42 4.795 1.392 0 4.622-4.795-3.23-1.482-6.043 0-4.622ZM2 5.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Z'/> </svg>`, height, width, className);
+  return generateIcon(`<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-postcard-heart-fill' viewBox='0 0 16 16'>   <path d='M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2Zm6 2.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0Zm3.5.878c1.482-1.42 4.795 1.392 0 4.622-4.795-3.23-1.482-6.043 0-4.622ZM2 5.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Z'/> </svg>`, height, width, className);
 }

package/src/icons/svgs/trash.ts

@@ -1,4 +1,4 @@
 import { generateIcon } from "../generate";
 export function trash(height, width, className?) {
-  return generateIcon(`<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'>   <path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/>   <path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/> </svg>`, height, width, className);
+  return generateIcon(`<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'>   <path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z'/>   <path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z'/> </svg>`, height, width, className);
 }