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

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

@@ -2,107 +2,31 @@ import { h, Host } from "@stencil/core";
 export class DdaSearchInput {
     constructor() {
         this.placeholder = 'Search';
-        this.size = 'sm';
-        this.show_button = false;
-        this.has_error = false;
+        this.size = 'sm'; // default to small size
+        this.show_button = false; // control to show/hide search button
+        this.has_error = false; // control error state
         this.custom_class = '';
-        this.hasInputValue = false;
-        this.internalValue = '';
-        this.handleInput = (event) => {
-            const target = event.target;
-            this.hasInputValue = target.value.length > 0;
-        };
-        this.handleKeyDown = (event) => {
-            if (event.key === 'Enter') {
-                const target = event.target;
-                console.log('Search input value (Enter):', target.value);
-            }
-            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.handleSearchClick = () => {
-            const input = this.el.querySelector(`#${this.input_id}`);
-            if (input) {
-                // console.log('Search input value (Button):', input.value);
-                this.buttonClicked.emit(this.internalValue || this.value);
-            }
-        };
-    }
-    watchValue(newValue) {
-        this.internalValue = newValue || '';
-        this.hasInputValue = !!this.internalValue;
-    }
-    componentWillLoad() {
-        this.internalValue = this.value || '';
-        this.hasInputValue = !!this.internalValue;
     }
     clearInput() {
-        if (!this.input_id)
-            return;
-        const input = this.el.querySelector(`#${this.input_id}`);
+        const input = this.el.querySelector('#search');
         if (input) {
             input.value = '';
-            this.internalValue = '';
-            this.hasInputValue = false;
-            // this.inputChanged.emit('');
-            this.onChanged.emit('');
-            input.focus();
         }
     }
-    async reset() {
-        this.internalValue = '';
-        this.hasInputValue = false;
-        // this.inputChanged.emit('');
-        this.onChanged.emit('');
-    }
-    async setValue(val) {
-        this.internalValue = val;
-        this.hasInputValue = !!val;
-        // this.inputChanged.emit(val);
-        this.onChanged.emit(val);
-    }
     render() {
-        return (h(Host, { key: 'e23b6f258bc2699153dbe74a0b0a35394a884c09' }, h("div", { key: 'bb778d44ef2b22c05a6d516aeac4fbf7a37737c3', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class} ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && (h("label", { key: 'c6280620a3f1b7742d3fb04157b570e5dd33ca60', htmlFor: this.button_id, class: "dda-input-label" }, this.label)), h("div", { key: '5b1a38c75b2d281aefba77de7115dfb88314e4ad', class: "dda-search-area dda-search-action" }, h("i", { key: 'ccdd26425e32e370bfb3547bf5f0915d8de4182f', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: 'a48aedceda06d6f69c6ffcac840d9dcecc720018', name: this.search_input_name, "aria-label": this.aria_label, id: this.input_id, value: this.internalValue, type: "text", class: `dda-input-field dda-search-field ${this.show_button ? 'has-search-button' : ''}`, placeholder: this.placeholder,
-            // onInput={this.handleInput}
-            onKeyDown: this.handleKeyDown, onInput: event => {
-                this.internalValue = event.target.value;
-                this.hasInputValue = !!this.internalValue;
-                this.inputChanged.emit(event);
-                this.onChanged.emit(event);
-                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.search_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,
-                }));
-            } }), h("div", { key: '8ffaa5e058389cf65ad70ab29676748d667a8a68', class: "dda-search-btngroup" }, this.hasInputValue && (h("button", { key: 'c2190c168ad754cb93b60da8d568bb62a89e29de', name: this.close_button_name, "aria-label": this.button_aria_label, id: this.button_id, type: "button", class: "dda-search-close-icon", onClick: () => this.clearInput() }, h("i", { key: '94b4644da93e67679ee2586853977bd7d14f5045', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close"))), this.show_button && (h("button", { key: '5dce491dfeecc09dd4d79bce8dc637c163986749', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm", onClick: this.handleSearchClick }, this.button_text)))), this.helper_text && (h("span", { key: 'e0f361ea19e1b30c903b1dfc21d9ae4bd84e7907', class: "dda-helper-text", id: this.validation_id }, this.helper_text)), this.error_message && (h("span", { key: 'ae3eaeb103f2923041b589c9cd3ea67a97752f5b', class: "dda-error-message", id: this.validation_id }, this.error_message)))));
+        return (h(Host, { key: 'd819b5cad21471fa5c0a5c4085ce472af98e270f' }, h("div", { key: 'c181b8b9cc53d609beede37c8d6f3cb32947b18f', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: '8bb82ef67ae6900c1836a4ca98413f318da0a325', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '7e3b5763937d5cba119531f7aba41f66abaff40d', class: "dda-search-area dda-search-action" }, h("i", { key: '0d24a6ceb56fca500c5fc0cf15eb5575b53f76ab', class: "material-icons icon-left" }, "search"), h("input", { key: '835b3ab4f73ba3b07ef9240608559469af77cacd', name: this.search_input_name, "aria-label": this.aria_label, id: 'search', type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder }), h("div", { key: '74c9306fb4a3ae14670f89813665c5b4a5f18f19', class: "dda-search-btngroup" }, h("button", { key: '82c1638597f0dce0a1d19a6db7896ae4482a740e', name: this.close_button_name, "aria-label": this.button_aria_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '43fad8a06e9976fa49dbe98c055c6d80044eb87a', class: "material-icons  material-symbols-outlined" }, "close")), this.show_button && (h("button", { key: 'ccc677526923d8e25fafefe1ca4cb01698c728d2', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: 'f362c2e27910c046ba30defc97fdee1a62d536e6', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '0457586d16926f680433410e97a61a558eb7379c', class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-search-input"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../global/input.css", "../../global/global.css", "../../global/dda-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../global/input.css", "../../global/global.css", "../../global/dda-button.css"]
+        };
+    }
     static get properties() {
         return {
             "placeholder": {
@@ -121,8 +45,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
+                "attribute": "placeholder",
                 "defaultValue": "'Search'"
             },
             "label": {
@@ -141,8 +65,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "size": {
                 "type": "string",
@@ -160,8 +84,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'sm'"
             },
             "error_message": {
@@ -180,8 +104,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "show_button": {
                 "type": "boolean",
@@ -199,8 +123,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show_button",
                 "reflect": false,
+                "attribute": "show_button",
                 "defaultValue": "false"
             },
             "helper_text": {
@@ -219,27 +143,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "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
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "input_status": {
                 "type": "string",
@@ -257,8 +162,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_status",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_status"
             },
             "has_error": {
                 "type": "boolean",
@@ -276,8 +181,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has_error",
                 "reflect": false,
+                "attribute": "has_error",
                 "defaultValue": "false"
             },
             "custom_class": {
@@ -296,8 +201,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -316,8 +221,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "button_id": {
                 "type": "string",
@@ -335,27 +240,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
-            },
-            "input_id": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_id"
             },
             "aria_label": {
                 "type": "string",
@@ -373,8 +259,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "button_aria_label": {
                 "type": "string",
@@ -392,8 +278,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_aria_label"
             },
             "search_input_name": {
                 "type": "string",
@@ -411,8 +297,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "search_input_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "search_input_name"
             },
             "close_button_name": {
                 "type": "string",
@@ -430,8 +316,8 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close_button_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "close_button_name"
             },
             "search_button_name": {
                 "type": "string",
@@ -449,181 +335,10 @@ export class DdaSearchInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "search_button_name",
-                "reflect": false
-            },
-            "button_text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "button_text",
-                "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
-            }
-        };
-    }
-    static get states() {
-        return {
-            "hasInputValue": {},
-            "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": "buttonClicked",
-                "name": "buttonClicked",
-                "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 {
-            "reset": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "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": []
-                }
+                "reflect": false,
+                "attribute": "search_button_name"
             }
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "watchValue"
-            }];
-    }
 }
-//# sourceMappingURL=dda-search-input.js.map

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

@@ -23,10 +23,6 @@ export default {
             control: 'text',
             description: 'Error message displayed below the search field',
         },
-        validation_id: {
-            control: 'text',
-            description: 'Error message field ID',
-        },
         show_button: {
             control: 'boolean',
             description: 'Show or hide the search button',
@@ -53,10 +49,6 @@ export default {
             control: { type: 'text' },
             description: 'default',
         },
-        input_id: {
-            control: { type: 'text' },
-            description: 'default',
-        },
         aria_label: {
             control: { type: 'text' },
             description: 'Aria label for the search input',
@@ -81,39 +73,33 @@ export default {
             control: { type: 'text' },
             description: 'Name for the search button',
         },
-        button_text: {
-            control: { type: 'text' },
-            description: 'Name for the search button',
-        },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-search-input\` component, pass the following props:
-
-  \`\`\`html
-<dda-search-input
-    placeholder="Search"
-    label="Search"
-    size="default"
-    helper_text="Helper or footer text"
-    error_message=""
-    validation_id=""
-    show_button="false"
-    has_error="false"
-    custom_class=""
-    component_mode=""
-    button_id="button"
-    input_id="search"
-    aria_label="search-input"
-    button_aria_label="clear-search"
-    onchange="console.log('changed')"
-    search_input_name="search-input"
-    close_button_name="close-button"
-    search_button_name="search-button"
-></dda-search-input>
-  \`\`\`
+                component: `
+  To use the \`dda-search-input\` component, pass the following props:
+
+  \`\`\`html
+<dda-search-input
+    placeholder="Search"
+    label="Search"
+    size="default"
+    helper_text="Helper or footer text"
+    error_message=""
+    show_button="false"
+    has_error="false"
+    custom_class=""
+    component_mode=""
+    button_id="button"
+    aria_label="search-input"
+    button_aria_label="clear-search"
+    onchange="console.log('changed')"
+    search_input_name="search-input"
+    close_button_name="close-button"
+    search_button_name="search-button"
+></dda-search-input>
+  \`\`\`
   `,
             },
         },
@@ -133,20 +119,17 @@ Default.args = {
     size: 'default',
     helper_text: 'Helper or footer text',
     error_message: '',
-    validation_id: '',
     show_button: false,
     has_error: false,
     custom_class: '',
     component_mode: '',
     button_id: 'button',
-    input_id: 'Search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
     onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",
-    button_text: "Search",
 };
 export const WithButton = Template.bind({});
 WithButton.args = {
@@ -155,42 +138,35 @@ WithButton.args = {
     size: 'default',
     helper_text: 'Helper or footer text',
     error_message: '',
-    validation_id: '',
     show_button: true,
     has_error: false,
     custom_class: '',
     component_mode: '',
     button_id: 'button',
-    input_id: 'Search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
     onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",
-    button_text: "Search",
 };
 export const WithError = Template.bind({});
 WithError.args = {
     placeholder: 'Search',
     label: 'Search',
     size: 'default',
-    input_status: 'normal',
     error_message: 'Helper or footer text',
-    validation_id: '',
     show_button: false,
     has_error: true,
     custom_class: '',
     component_mode: '',
     button_id: 'button',
-    input_id: 'Search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
     onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",
-    button_text: "Search",
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -199,19 +175,15 @@ Disabled.args = {
     size: 'default',
     input_status: 'disabled',
     helper_text: 'Helper or footer text',
-    validation_id: '',
     show_button: false,
     has_error: false,
     custom_class: '',
     component_mode: '',
     button_id: 'button',
-    input_id: 'Search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
     onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",
-    button_text: "Search",
 };
-//# sourceMappingURL=dda-search-input.stories.js.map