@dubai-design-system/components-js 3.12.10 → 3.12.11

package/dist/collection/components/dda-select/dda-select.js

@@ -2,28 +2,9 @@ import { h, Host } from "@stencil/core";
 export class Ddaselect {
     constructor() {
         this.disabled = false;
-        this.validation_id = 'text';
-        this.custom_class = '';
-        this.placeholder = '';
-        this.main_aria_label = '';
-        this.input_name = '';
         this.is_open = false;
-        this.handleClickOutside = (event) => {
-            if (this.is_open && !this.el.contains(event.target)) {
-                this.is_open = false;
-            }
-        };
-        this.handleBlur = () => {
-            this.selectBlurred.emit({
-                name: this.input_name || this.button_id,
-                value: this.selectedText || '',
-            });
-            this.onBlurred.emit(this.selectedId);
-            this.el.dispatchEvent(new FocusEvent('blur', {
-                bubbles: true,
-                composed: true,
-            }));
-        };
+        //@Prop() validationtype?: string;
+        this.custom_class = '';
     }
     get parsedOptions() {
         try {
@@ -33,16 +14,6 @@ export class Ddaselect {
             return [];
         }
     }
-    componentWillLoad() {
-        const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === this.selected || opt.text === this.selected);
-        if (selectedOption) {
-            this.selectedId = selectedOption.id;
-            this.selectedText = selectedOption.text;
-        }
-        if (this.selected) {
-            this.watchSelected(this.selected);
-        }
-    }
     toggleSelect() {
         if (!this.disabled) {
             this.is_open = !this.is_open;
@@ -50,83 +21,24 @@ export class Ddaselect {
     }
     selectOption(option) {
         if (!this.disabled) {
-            this.selectedId = option.id;
-            this.selectedText = option.text;
+            this.selected = option;
             this.is_open = false;
-            this.selectChanged.emit(option);
-            this.onChanged.emit(option.id);
-            this.el.dispatchEvent(new InputEvent('input', {
-                bubbles: true,
-                composed: true,
-                data: option.id,
-                inputType: 'select',
-            }));
-        }
-    }
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside);
-    }
-    async setSelected(value) {
-        const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);
-        if (selectedOption) {
-            this.selectedId = selectedOption.id;
-            this.selectedText = selectedOption.text;
-            this.selected = selectedOption.id.toString();
-        }
-        else {
-            this.selectedId = undefined;
-            this.selectedText = '';
-            this.selected = '';
-        }
-    }
-    async setValue(value) {
-        const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);
-        if (selectedOption) {
-            this.selectedId = selectedOption.id;
-            this.selectedText = selectedOption.text;
-            this.selected = selectedOption.id.toString();
-        }
-        else {
-            this.selectedId = undefined;
-            this.selectedText = '';
-            this.selected = '';
-        }
-    }
-    async getSelectedText() {
-        return this.selectedText;
-    }
-    async getValue() {
-        return this.selectedText || '';
-    }
-    watchSelected(newVal) {
-        const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === newVal || opt.text === newVal);
-        if (selectedOption) {
-            this.selectedId = selectedOption.id;
-            this.selectedText = selectedOption.text;
-        }
-        else {
-            this.selectedId = undefined;
-            this.selectedText = '';
         }
     }
-    numberToWord(num) {
-        const words = ['One', 'Two', 'Three', 'Four', 'Five'];
-        return words[num - 1] || num.toString();
-    }
     render() {
-        const labelId = `${this.button_id}-label`;
-        const valueId = `${this.button_id}-value`;
-        return (h(Host, { key: 'ecf43cd602ef0f98974d1c76cfd50ac7357b6a08' }, h("div", { key: '4c15c3048ad62d235b7259cbf3f39921909ce5e5', class: `
-            dda-input-container ${this.custom_class} 
-            ${this.component_mode} 
-            ${this.disabled ? 'dda-input-disabled' : ''} 
-            dda-input-size-${this.size} dda-validation-${this.validation_type}
-          ` }, this.label && (h("span", { key: 'e58cda1941ef732a951dc06f7c01f7d904a1c8c3', id: labelId, class: "dda-input-label" }, this.label)), h("div", { key: '6885ef524717d3b8f9850b3995f56ae5194e748a', class: "dda-dropdown-container" }, h("button", { key: 'a4e6e30acdf55e12aa4742f9dc824c9e1eec0b57', name: this.toggle_button_name, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", "aria-labelledby": `${labelId} ${this.button_id}`, disabled: this.disabled, onClick: () => this.toggleSelect(), onBlur: this.handleBlur }, h("span", { key: '8f67e50593affdb2b558200091c2aecd53e9c387', id: valueId, class: "dda-select-button-label" }, this.selectedText || this.placeholder), h("i", { key: '423ca7dcd2b51118ffa5e5cddaa86d05ae981e5d', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: 'ffcefb669f4400f26ffff871092cf22ac977a2d4', class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: `option${this.numberToWord(index + 1)}`, type: "button", class: `dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`, role: "option", "aria-selected": this.selectedId === option.id ? 'true' : 'false', onClick: () => this.selectOption(option) }, option.text)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.validation_type === 'error' && this.error_message ? (h("span", { class: "dda-error-message", id: this.validation_id, role: "alert" }, this.error_message)) : (this.helper_text && (h("span", { class: "dda-helper-text", id: this.validation_id }, this.helper_text))))));
+        return (h(Host, { key: 'f43752c23652460fc0be76e7335aab5484f59cab' }, h("div", { key: '3b0a32ae0da79d1a40f84309597ffacce73b3cf4', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: 'ec1e1b9e3341a539be689886dfdfae2066a24ac4', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '62aaf844f12412582d184a9dece450c36d58442f', class: "dda-dropdown-container" }, h("button", { key: '2e36a72d1c5273abeb98e83529e703633071ea8c', name: this.toggle_button_name, "aria-label": this.aria_label, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", onClick: () => { this.toggleSelect(); } }, this.selected || 'Select an option', h("i", { key: 'ac90d996055a9327f179a57439c292e7a2118874', class: `material-icons` }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: 'e1de5eb55e0ec0cc1e55a3948b253e7c1f350949', class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { name: this.option_select_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '58fb41fabc366406d58e3ced4cf63d86edffc5b5', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'e9e79b110711195a627d8367057bd2ed01589ade', class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-select"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../global/input.css", "../../global/global.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../global/input.css", "../../global/global.css"]
+        };
+    }
     static get properties() {
         return {
             "label": {
@@ -145,8 +57,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "options": {
                 "type": "string",
@@ -164,8 +76,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "options",
-                "reflect": false
+                "reflect": false,
+                "attribute": "options"
             },
             "selected": {
                 "type": "string",
@@ -183,8 +95,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
-                "reflect": false
+                "reflect": false,
+                "attribute": "selected"
             },
             "disabled": {
                 "type": "boolean",
@@ -202,8 +114,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "error": {
@@ -222,8 +134,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error"
             },
             "error_message": {
                 "type": "string",
@@ -241,8 +153,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "helper_text": {
                 "type": "string",
@@ -260,47 +172,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
-            },
-            "validation_type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
-            },
-            "validation_id": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "validation_id",
                 "reflect": false,
-                "defaultValue": "'text'"
+                "attribute": "helper_text"
             },
             "size": {
                 "type": "string",
@@ -318,8 +191,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "custom_class": {
                 "type": "string",
@@ -337,8 +210,8 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -357,48 +230,10 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
-            },
-            "button_id": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "button_id",
-                "reflect": false
-            },
-            "toggle_button_name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "toggle_button_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
-            "option_select_button_name": {
+            "aria_label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -407,17 +242,17 @@ export class Ddaselect {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "option_select_button_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
-            "placeholder": {
+            "button_id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -433,11 +268,10 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
-                "defaultValue": "''"
+                "attribute": "button_id"
             },
-            "main_aria_label": {
+            "toggle_button_name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -453,11 +287,10 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "main_aria_label",
                 "reflect": false,
-                "defaultValue": "''"
+                "attribute": "toggle_button_name"
             },
-            "input_name": {
+            "option_select_button_name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -473,130 +306,14 @@ export class Ddaselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_name",
                 "reflect": false,
-                "defaultValue": "''"
+                "attribute": "option_select_button_name"
             }
         };
     }
     static get states() {
         return {
-            "is_open": {},
-            "selectedId": {},
-            "selectedText": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "selectChanged",
-                "name": "selectChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ id: number; text: string }",
-                    "resolved": "{ id: number; text: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "onChanged",
-                "name": "onChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "selectBlurred",
-                "name": "selectBlurred",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ name: string; value: string }",
-                    "resolved": "{ name: string; value: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "onBlurred",
-                "name": "onBlurred",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "setSelected": {
-                "complexType": {
-                    "signature": "(value: string | number) => Promise<void>",
-                    "parameters": [{
-                            "name": "value",
-                            "type": "string | number",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "getSelectedText": {
-                "complexType": {
-                    "signature": "() => Promise<string>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
+            "is_open": {}
         };
     }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "selected",
-                "methodName": "watchSelected"
-            }];
-    }
 }
-//# sourceMappingURL=dda-select.js.map