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

package/dist/collection/components/dda-number-field/dda-number-field.js

@@ -5,29 +5,11 @@ export class DdaNumberField {
         this.is_focused = false;
         this.custom_class = '';
         this.isCurrencyDropdownOpen = false;
-        this.handleOutsideClick = (event) => {
-            if (!this.hostElement.contains(event.target)) {
-                this.isCurrencyDropdownOpen = false;
-            }
-        };
-    }
-    connectedCallback() {
-        document.addEventListener('click', this.handleOutsideClick);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleOutsideClick);
     }
     handleInput(event) {
         const inputElement = event.target;
         const inputValue = inputElement.value.replace(/[^0-9.]/g, '');
         inputElement.value = inputValue;
-        this.el.dispatchEvent(new InputEvent('input', {
-            bubbles: true,
-            composed: true,
-            data: event.data,
-            inputType: event.inputType,
-            isComposing: event.isComposing,
-        }));
     }
     handleFocus() {
         this.is_focused = true;
@@ -52,12 +34,6 @@ export class DdaNumberField {
             return [];
         }
     }
-    async setValue(val) {
-        this.value = val;
-    }
-    async getValue() {
-        return this.value || '';
-    }
     render() {
         const containerClass = [
             'dda-input-container',
@@ -68,12 +44,20 @@ export class DdaNumberField {
             this.error_message ? 'dda-error-message' : '',
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        return (h(Host, { key: '91def39d4869053ffb52d63279a504c0fd7e03e1', ref: el => (this.hostElement = el) }, h("div", { key: 'bf83501237b86db00c05fb71d18f2a3d9cd13e11', class: containerClass }, this.label && (h("label", { key: 'b6ca1e8a6bc9ad27292f7fb8f94d86fddc6d29d6', htmlFor: this.input_id, class: "dda-input-label" }, this.label)), h("div", { key: 'f6b5193b6bf159272e7d20d375820698ea3f5a60', class: "dda-input-field-group dda-number-field" }, h("input", { key: 'd9369bd8021d0bf6af8870530d47718211e8360f', id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "number", placeholder: this.placeholder, value: this.value, pattern: '[0-9]*', onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input" }), h("div", { key: '4dc2a7224754217edf78619ac40399c21634556d', class: "dda-input-dropdown-btn" }, h("button", { key: '76047ef680f600fb74803e815669eba9a6dbb21e', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, ' ', h("i", { key: '87017c99cb3515c7122148ede366f083599abbc3', class: `material-icons`, "aria-hidden": "true" }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '0847ebded3099fcf48ac0e0a337480446f6cd255', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: 'c77a72d290e9b157bebf52e4ea0293f723c2ff3d', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '52a3c41a8907b557bb26b207ee57822e56559d99', class: "dda-error-message" }, this.error_message))));
+        ].filter(Boolean).join(' ');
+        return (h(Host, { key: 'ae450483f9cc0b6ac2eaefcace9274bfb5da20f9' }, h("div", { key: 'ab0b9539dea8e287d8986defdf9d18525d067b60', class: containerClass }, this.label && h("label", { key: '80362825c56ad807a12b31c9a75f424b76d4d97c', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: '00384dc7f258667a7fa11eded180bdc1aa54b679', class: "dda-input-field-group dda-number-field" }, h("input", { key: '5d62066d29d6a96535b84ebacd610a3c52f70324', id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input" }), h("div", { key: '9add17f647588c6094834ac60597a1c1e5ca5d8c', class: "dda-input-dropdown-btn" }, h("button", { key: '7e25c49ce1e2553c3b9f58569f60cde0f1c19c63', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: 'f844dad82c5626b893caf9079933a7d59a8126d6', class: `material-icons` }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '04becf4d6491a0b64cb2d17c1840370ad99b6a4c', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: 'fbd6f5dd617e4d7e6f79a6fdc9824373223757b1', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '22a6f9205239ca193904344ba8239b8a023a8e47', class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-number-field"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../global/input.css", "../../global/global.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../global/input.css", "../../global/global.css"]
+        };
+    }
     static get properties() {
         return {
             "placeholder": {
@@ -92,8 +76,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "label": {
                 "type": "string",
@@ -111,8 +95,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "value": {
                 "type": "string",
@@ -130,8 +114,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "helper_text": {
                 "type": "string",
@@ -149,8 +133,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "error_message": {
                 "type": "string",
@@ -168,8 +152,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "validation_type": {
                 "type": "string",
@@ -187,8 +171,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "validation_type"
             },
             "size": {
                 "type": "string",
@@ -206,8 +190,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "input_status": {
                 "type": "string",
@@ -225,8 +209,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_status",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_status"
             },
             "currencies": {
                 "type": "string",
@@ -244,8 +228,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "currencies",
-                "reflect": false
+                "reflect": false,
+                "attribute": "currencies"
             },
             "selected_currency": {
                 "type": "string",
@@ -263,8 +247,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected_currency",
                 "reflect": false,
+                "attribute": "selected_currency",
                 "defaultValue": "'USD'"
             },
             "custom_class": {
@@ -283,8 +267,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -303,8 +287,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "input_id": {
                 "type": "string",
@@ -322,8 +306,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "aria_label": {
                 "type": "string",
@@ -341,8 +325,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "input_name": {
                 "type": "string",
@@ -360,8 +344,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_name"
             },
             "toggle_button_name": {
                 "type": "string",
@@ -379,8 +363,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "toggle_button_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "toggle_button_name"
             },
             "currency_button_name": {
                 "type": "string",
@@ -398,8 +382,8 @@ export class DdaNumberField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "currency_button_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "currency_button_name"
             }
         };
     }
@@ -409,31 +393,4 @@ export class DdaNumberField {
             "isCurrencyDropdownOpen": {}
         };
     }
-    static get methods() {
-        return {
-            "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": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=dda-number-field.js.map

package/dist/collection/components/dda-number-field/dda-number-field.stories.js

@@ -82,28 +82,28 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-number-field\` component, pass the following props:
-  
-  \`\`\`html
-<dda-number-field
-    label="Amount"
-    value=""
-    placeholder="Enter amount"
-    helper_text="Helper or footer text"
-    error_message=""
-    validation_type="normal"
-    size="medium"
-    input_status="normal"
-    selected_currency="USD"
-    custom_class=""
-    component_mode=""
-    input_id="input"
-    aria_label="input"
-    currencies='["USD","EUR","GBP","AED","PKR"]'
-    onchange="console.log('changed')"
-></dda-number-field>
-    \`\`\`
+                component: `
+  To use the \`dda-number-field\` component, pass the following props:
+  
+  \`\`\`html
+<dda-number-field
+    label="Amount"
+    value=""
+    placeholder="Enter amount"
+    helper_text="Helper or footer text"
+    error_message=""
+    validation_type="normal"
+    size="medium"
+    input_status="normal"
+    selected_currency="USD"
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    aria_label="input"
+    currencies='["USD","EUR","GBP","AED","PKR"]'
+    onchange="console.log('changed')"
+></dda-number-field>
+    \`\`\`
   `,
             },
         },
@@ -127,7 +127,7 @@ Default.args = {
     validation_type: 'normal',
     size: 'medium',
     input_status: 'normal',
-    currencies: ['USD', 'EUR', 'GBP', 'AED', 'INR', 'PKR'],
+    currencies: ['USD', 'EUR', 'GBP', 'AED', 'PKR'],
     selected_currency: 'USD',
     custom_class: '',
     component_mode: '',
@@ -148,7 +148,7 @@ Small.args = {
     validation_type: 'normal',
     size: 'small',
     input_status: 'normal',
-    currencies: ['USD', 'EUR', 'GBP', 'AED', 'INR', 'PKR'],
+    currencies: ['USD', 'EUR', 'GBP', 'AED', 'PKR'],
     selected_currency: 'USD',
     custom_class: '',
     component_mode: '',
@@ -168,7 +168,7 @@ Error.args = {
     validation_type: 'error',
     size: 'medium',
     input_status: 'normal',
-    currencies: ['USD', 'EUR', 'GBP', 'AED', 'INR', 'PKR'],
+    currencies: ['USD', 'EUR', 'GBP', 'AED', 'PKR'],
     selected_currency: 'USD',
     custom_class: '',
     component_mode: '',
@@ -189,7 +189,7 @@ Disabled.args = {
     validation_type: 'normal',
     size: 'medium',
     input_status: 'disabled',
-    currencies: ['USD', 'EUR', 'GBP', 'AED', 'INR', 'PKR'],
+    currencies: ['USD', 'EUR', 'GBP', 'AED', 'PKR'],
     selected_currency: 'USD',
     custom_class: '',
     component_mode: '',
@@ -200,4 +200,3 @@ Disabled.args = {
     toggle_button_name: 'toggle-button',
     currency_button_name: 'currency-button',
 };
-//# sourceMappingURL=dda-number-field.stories.js.map