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

package/dist/collection/components/dda-pagination/dda-pagination.stories.js

@@ -76,30 +76,30 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-pagination\` component, pass the following props:
-
-\`\`\`html
-<dda-pagination
-    total_pages="8"
-    current_page="1"
-    type="simple-slider"
-    custom_class=""
-    component_mode=""
-    simple_slider_prev_button: ""
-    simple_slider_next_button: ""
-    buttons_prev_button: ""
-    buttons_next_button: ""
-    text_prev_button: ""
-    text_next_button: ""
-    text_pages_prev_button: ""
-    text_pages_next_button: ""
-    button_text_prev_button: ""
-    button_text_next_button: ""
-    buttons_pages_prev_button: ""
-    buttons_pages_next_button: ""
-></dda-pagination>
-  \`\`\`
+                component: `
+To use the \`dda-pagination\` component, pass the following props:
+
+\`\`\`html
+<dda-pagination
+    total_pages="8"
+    current_page="1"
+    type="simple-slider"
+    custom_class=""
+    component_mode=""
+    simple_slider_prev_button: ""
+    simple_slider_next_button: ""
+    buttons_prev_button: ""
+    buttons_next_button: ""
+    text_prev_button: ""
+    text_next_button: ""
+    text_pages_prev_button: ""
+    text_pages_next_button: ""
+    button_text_prev_button: ""
+    button_text_next_button: ""
+    buttons_pages_prev_button: ""
+    buttons_pages_next_button: ""
+></dda-pagination>
+  \`\`\`
 `,
             },
         },
@@ -252,4 +252,3 @@ Full.args = {
     buttons_pages_prev_button: "",
     buttons_pages_next_button: "",
 };
-//# sourceMappingURL=dda-pagination.stories.js.map

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

@@ -3,45 +3,23 @@ import { CountriesList } from "../../assets/countries";
 export class DdaPhoneField {
     constructor() {
         this.placeholder = 'Enter phone number';
-        this.validation_id = 'text';
         this.disabled = false;
         this.country_code = '+971';
-        this.country_flag = 'https://flagcdn.com/w320/ae.png';
-        this.internalValue = '';
+        this.country_flag = 'https://flagcdn.com/w320/ae.png'; // Default UAE flag
+        this.phone_number = '';
         this.is_focused = false;
         this.dropdown_open = false;
         this.countries = [];
-        this.handleDocumentClick = (event) => {
-            if (this.dropdown_open && this.hostElement && !this.hostElement.contains(event.target)) {
-                this.dropdown_open = false;
-            }
-        };
-    }
-    async getValue() {
-        return this.internalValue || this.value || '';
-    }
-    async validatePhoneField() {
-        this.phoneBlurred.emit({
-            name: this.phone_input_name,
-            value: this.internalValue.trim(),
-        });
-        this.onBlurred.emit({
-            name: this.phone_input_name,
-            value: this.internalValue.trim(),
-        });
-    }
-    watchHandler(newValue) {
-        this.internalValue = newValue;
     }
+    // componentWillLoad() {
+    //   fetch('/path/to/countries.json')
+    //     .then(response => response.json())
+    //     .then(data => {
+    //       this.countries = data;
+    //     });
+    // }
     componentWillLoad() {
         this.countries = CountriesList;
-        this.internalValue = this.value || '';
-    }
-    componentDidLoad() {
-        document.addEventListener('click', this.handleDocumentClick);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleDocumentClick);
     }
     toggleDropdown() {
         this.dropdown_open = !this.dropdown_open;
@@ -56,34 +34,27 @@ export class DdaPhoneField {
     }
     handleBlur() {
         this.is_focused = false;
-        this.phoneBlurred.emit({
-            name: this.phone_input_name,
-            value: this.internalValue.trim(),
-        });
-        this.onBlurred.emit(this.internalValue.trim());
     }
     handlephonenumberChange(event) {
         const target = event.target;
-        const targetvalue = target.value.replace(/\D/g, '');
-        this.internalValue = targetvalue;
-    }
-    handleKeyDown(event) {
-        const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Tab'];
-        if (allowedKeys.includes(event.key) ||
-            event.ctrlKey ||
-            event.metaKey // Allow copy/paste shortcuts
-        ) {
-            return;
-        }
-        if (!/^\d$/.test(event.key)) {
-            event.preventDefault();
-        }
+        const targetvalue = target.value.replace(/[^0-9.]/g, '');
+        this.phone_number = targetvalue;
     }
     render() {
-        const inputClass = `${this.component_mode} ${this.size ? `dda-input-size-${this.size}` : ''} ${this.error_message ? `dda-error-message` : ''} ${this.validation_type ? `dda-validation-${this.validation_type}` : ''} ${this.is_focused ? 'dda-input-focus' : ''} ${this.internalValue ? 'dda-input-focus-filled' : ''}`;
-        return (h(Host, { key: 'd97be882c394ba7cc2a1f489d7222ab2fed0fe54', ref: el => (this.hostElement = el) }, h("div", { key: '8d811d7dc857a05ff09e1679af984714ec320d96', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && (h("label", { key: '715f3cbce511a077295ebaaf88c9c0affe58b782', htmlFor: this.input_id, class: "dda-input-label" }, this.label)), h("div", { key: 'cec492e63da2a10f200dc23ee480559597ac6670', class: `dda-input-field-group dda-phone-field` }, h("div", { key: 'c8fdd1e13ba790b6b3b3ed0037182bac05343608', class: "dda-input-dropdown-btn" }, h("button", { key: '1362edbfa546588f16d8c6d8b1793e08b9749945', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", onClick: () => this.toggleDropdown() }, h("img", { key: '0a0e0d32f797c2ab1044a0ba7bf3814bb8862331', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, h("i", { key: '8709a1598a6e57a816126d14c8466f41d56ce2b1', class: "material-icons", "aria-hidden": "true" }, "keyboard_arrow_down")), this.dropdown_open && (h("div", { key: 'a47b6c2d06486ae76ff2a98e7160b297b249c202', class: "dda-input-dropdown-list" }, this.countries.map(country => (h("button", { id: `countryCode${country.code}`, name: this.country_select_button_name, "aria-label": this.button_aria_label, type: "button", class: "country-select dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: 'ecc0b8bdde9294c0c1cefaed0fe797fe955bb599', id: this.input_id, name: this.phone_input_name, "aria-label": this.aria_label, type: "text", inputmode: "numeric", maxlength: this.max_length, pattern: "[0-9]*", class: "dda-field-group-input", placeholder: this.placeholder, value: this.internalValue, disabled: this.disabled, onFocus: this.handleFocus.bind(this), onInput: e => this.handlephonenumberChange(e), onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleBlur() })), 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))))));
+        const inputClass = `${this.component_mode} ${this.size ? `dda-input-size-${this.size}` : ''} ${this.error_message ? `dda-error-message` : ''}  ${this.validation_type ? `dda-validation-${this.validation_type}` : ''}  ${this.is_focused ? 'dda-input-focus' : ''} ${this.phone_number ? 'dda-input-focus-filled' : ''}`;
+        return (h(Host, { key: '633a50058d652a08b4e06098aaf0321145490071' }, h("div", { key: 'a1ac672c9016157e669004a02b31c5d55505c687', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: 'e25913e6ce4004a1bea91f66350f27838cfb8525', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'cd6bcdc19e1fbb70b471ea0807227ae770667193', class: `dda-input-field-group dda-phone-field` }, h("div", { key: 'a097adee0cd6770fa3c99f1254299b3ef6231405', class: "dda-input-dropdown-btn" }, h("button", { key: '2bc2168e0b4680cb50cf6e2f2e17647dcfdd2b48', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", onClick: () => this.toggleDropdown() }, h("img", { key: 'b0f854029f4959a6fcd97c441f84eca0462dff33', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: '4f5494f5aa6bf1506e4fdbd53ce25e4a90fc9c99', class: `material-icons` }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: '898d790a05c88ea2c2ee9bd535dc7d393d10ebc5', class: "dda-input-dropdown-list" }, this.countries.map(country => (h("button", { id: this.button_id, name: this.country_select_button_name, "aria-label": this.button_aria_label, type: "button", class: "dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: '318d327cfc460a30d3aeddd34a97e074ede58a50', id: this.input_id, name: this.phone_input_name, "aria-label": this.aria_label, type: "number", class: `dda-field-group-input`, placeholder: this.placeholder, inputmode: 'numeric', pattern: "[0-9]*", value: this.phone_number, onInput: this.handlephonenumberChange.bind(this), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), disabled: this.disabled })), this.helper_text && !this.validation_type && h("span", { key: 'd7744a45e5cc3ffa866986c3e94b621e19d635f6', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '1fedde21cf7acf94663d2d5d7dd7424a55f6b208', class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-phonefield"; }
+    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": {
@@ -102,8 +73,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "placeholder": {
                 "type": "string",
@@ -121,8 +92,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
+                "attribute": "placeholder",
                 "defaultValue": "'Enter phone number'"
             },
             "helper_text": {
@@ -141,27 +112,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
-            },
-            "max_length": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "max_length",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "validation_type": {
                 "type": "string",
@@ -179,8 +131,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "validation_type"
             },
             "error_message": {
                 "type": "string",
@@ -198,28 +150,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "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": "error_message"
             },
             "disabled": {
                 "type": "boolean",
@@ -237,8 +169,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "size": {
@@ -257,8 +189,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "custom_class": {
                 "type": "string",
@@ -276,8 +208,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
             "component_mode": {
                 "type": "string",
@@ -295,8 +227,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "input_id": {
                 "type": "string",
@@ -314,8 +246,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "aria_label": {
                 "type": "string",
@@ -333,8 +265,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "button_id": {
                 "type": "string",
@@ -352,8 +284,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
             },
             "button_aria_label": {
                 "type": "string",
@@ -371,8 +303,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_aria_label"
             },
             "toggle_button_name": {
                 "type": "string",
@@ -390,8 +322,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "toggle_button_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "toggle_button_name"
             },
             "country_select_button_name": {
                 "type": "string",
@@ -409,8 +341,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "country_select_button_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "country_select_button_name"
             },
             "phone_input_name": {
                 "type": "string",
@@ -428,27 +360,8 @@ export class DdaPhoneField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "phone_input_name",
-                "reflect": false
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "value",
-                "reflect": false
+                "reflect": false,
+                "attribute": "phone_input_name"
             }
         };
     }
@@ -456,89 +369,10 @@ export class DdaPhoneField {
         return {
             "country_code": {},
             "country_flag": {},
-            "internalValue": {},
+            "phone_number": {},
             "is_focused": {},
             "dropdown_open": {},
-            "countries": {},
-            "hostElement": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "phoneBlurred",
-                "name": "phoneBlurred",
-                "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": []
-                }
-            },
-            "validatePhoneField": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
+            "countries": {}
         };
     }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "watchHandler"
-            }];
-    }
 }
-//# sourceMappingURL=dda-phonefield.js.map