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

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

@@ -2,49 +2,9 @@ import { h, Host } from "@stencil/core";
 export class DdaInput {
     constructor() {
         this.type = 'text';
-        this.input_role = 'text';
-        this.validation_id = 'text';
-        this.required = false;
-        this.internalValue = '';
     }
-    async getValue() {
-        return this.internalValue || this.value || '';
-    }
-    watchValue(newValue) {
-        this.internalValue = newValue || '';
-    }
-    async setValue(val) {
-        this.internalValue = val;
-        // this.inputChanged.emit(val);
-        this.onChanged.emit(val);
-    }
-    async reset() {
-        this.internalValue = '';
-        // this.inputChanged.emit('');
-        this.onChanged.emit('');
-    }
-    componentWillLoad() {
-        this.internalValue = this.value || '';
-    }
-    componentDidLoad() {
-        // Hide date input placeholder
-        if (this.type === 'date') {
-            const dateInput = this.el.querySelector('input[type="date"]');
-            if (dateInput) {
-                dateInput.style.color = 'transparent';
-                dateInput.addEventListener('focus', () => {
-                    dateInput.style.color = '#000';
-                });
-                dateInput.addEventListener('blur', () => {
-                    if (!dateInput.value) {
-                        dateInput.style.color = 'transparent';
-                    }
-                });
-                dateInput.addEventListener('change', () => {
-                    dateInput.style.color = '#000';
-                });
-            }
-        }
+    handleInput(event) {
+        this.value = event.target.value;
     }
     render() {
         const inputClass = [
@@ -54,57 +14,23 @@ export class DdaInput {
             this.input_status ? `dda-input-${this.input_status}` : '',
             this.type === 'Witherror' ? 'dda-validation-error' : '',
             this.type === 'disabled' ? 'dda-input-disabled' : '',
-            this.custom_class,
+            this.custom_class, // Include custom class
             this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const describedByIds = [];
-        if (this.helper_text)
-            describedByIds.push(`${this.validation_id}-helper`);
-        if (this.validation_type === 'error' && this.error_message)
-            describedByIds.push(`${this.validation_id}-error`);
-        return (h(Host, { key: '0c68617cd233d276c09d29d12e031b0a00d883fa' }, h("div", { key: '785a9429deb055030a3f4c8f0c11baa0d4356c0e', class: inputClass }, this.label && (h("label", { key: '45f247480cf1c84b5c574dbc9fd7984a2804a6f6', htmlFor: this.input_id, class: "dda-input-label", id: `${this.input_id}-label` }, this.label)), h("input", { key: '6ebafb81518fc518cd69b04e9062343d24af408d', id: this.input_id, name: this.input_name, class: `dda-input-field dda-input-text ${this.type === 'date' && this.value ? 'has-value' : ''}`, type: this.type, role: this.input_role, placeholder: this.placeholder, value: this.internalValue, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', "aria-describedby": `${this.input_id}-label`, "aria-label": !this.label ? this.aria_label : undefined, onInput: event => {
-                this.internalValue = event.target.value;
-                this.inputChanged.emit(event);
-                this.onChanged.emit(event.target.value);
-                this.el.dispatchEvent(new InputEvent('input', {
-                    bubbles: true,
-                    composed: true,
-                    data: event.data,
-                    inputType: event.inputType,
-                    isComposing: event.isComposing,
-                }));
-            }, onBlur: event => {
-                const value = event.target.value.trim();
-                this.inputBlurred.emit({ name: this.input_name, value });
-                this.onBlurred.emit(value);
-                this.el.dispatchEvent(new FocusEvent('blur', {
-                    bubbles: true,
-                    composed: true,
-                    relatedTarget: event.relatedTarget,
-                }));
-            }, onFocus: (event) => {
-                this.el.dispatchEvent(new FocusEvent('focus', {
-                    bubbles: true,
-                    composed: true,
-                    relatedTarget: event.relatedTarget,
-                }));
-            }, onKeyDown: (event) => {
-                this.el.dispatchEvent(new KeyboardEvent('keydown', {
-                    bubbles: true,
-                    composed: true,
-                    key: event.key,
-                    code: event.code,
-                    ctrlKey: event.ctrlKey,
-                    shiftKey: event.shiftKey,
-                    altKey: event.altKey,
-                    metaKey: event.metaKey,
-                    repeat: event.repeat,
-                }));
-            } }), 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))))));
+            this.input_name,
+        ].filter(Boolean).join(' ');
+        return (h(Host, { key: '8efc8f909732eb8ed47989be4f00c4a61fb63d6b' }, h("div", { key: '29e307bebfc63a535451b21e9d15a80ca4bb5905', class: inputClass }, this.label && h("label", { key: 'c53a063d2eedb4bd4308349d27b1b4665e10d454', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("input", { key: 'ed3f74cc36069c3e93bfab8353659feba9267b36', "aria-label": this.aria_label, id: this.input_id, name: this.input_name, type: this.type, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-text" }), this.helper_text && h("span", { key: 'bac4e7ccb56cef050765efbce9ffe0b3d077afc1', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'a56a6467a0bcc695a20d3340702ec7a1a9bf9aad', class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-input"; }
+    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": {
@@ -123,8 +49,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "placeholder": {
                 "type": "string",
@@ -142,8 +68,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "value": {
                 "type": "string",
@@ -161,30 +87,10 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
-                "reflect": false
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "type",
                 "reflect": false,
-                "defaultValue": "'text'"
+                "attribute": "value"
             },
-            "input_role": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -200,8 +106,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_role",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'text'"
             },
             "helper_text": {
@@ -220,8 +126,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "error_message": {
                 "type": "string",
@@ -239,8 +145,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "validation_type": {
                 "type": "string",
@@ -258,28 +164,8 @@ export class DdaInput {
                 },
                 "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": "validation_type"
             },
             "size": {
                 "type": "string",
@@ -297,8 +183,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "input_status": {
                 "type": "string",
@@ -316,8 +202,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_status",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_status"
             },
             "custom_class": {
                 "type": "string",
@@ -335,8 +221,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
             "component_mode": {
                 "type": "string",
@@ -354,8 +240,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "input_id": {
                 "type": "string",
@@ -373,8 +259,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "aria_label": {
                 "type": "string",
@@ -392,8 +278,8 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "input_name": {
                 "type": "string",
@@ -411,164 +297,9 @@ export class DdaInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_name",
-                "reflect": false
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "required",
                 "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalValue": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "inputChanged",
-                "name": "inputChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "onChanged",
-                "name": "onChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "inputBlurred",
-                "name": "inputBlurred",
-                "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 {
-            "getValue": {
-                "complexType": {
-                    "signature": "() => Promise<string>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<string>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "setValue": {
-                "complexType": {
-                    "signature": "(val: string) => Promise<void>",
-                    "parameters": [{
-                            "name": "val",
-                            "type": "string",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "reset": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
+                "attribute": "input_name"
             }
         };
     }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "watchValue"
-            }];
-    }
 }
-//# sourceMappingURL=dda-input.js.map