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

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

@@ -2,17 +2,11 @@ import { h, Host } from "@stencil/core";
 export class DdaDropdown {
     constructor() {
         this.disabled = false;
-        this.validation_id = 'text';
+        this.type = 'bg-white';
+        this.size = 'medium';
         this.icon_mode = false; // New prop for icon mode
         this.custom_class = '';
-        this.placeholder = '';
-        this.main_aria_label = '';
-        this.is_open = false;
-        this.handleClickOutside = (event) => {
-            if (this.is_open && !this.el.contains(event.target)) {
-                this.is_open = false;
-            }
-        };
+        this.isopen = false;
     }
     get parsedOptions() {
         try {
@@ -22,42 +16,38 @@ export class DdaDropdown {
             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;
-        }
-    }
-    toggleSelect() {
+    toggleDropdown() {
         if (!this.disabled) {
-            this.is_open = !this.is_open;
+            this.isopen = !this.isopen;
         }
     }
     selectOption(option) {
         if (!this.disabled) {
-            this.selectedId = option.id;
-            this.selectedText = option.text;
-            this.is_open = false;
-            this.selectChanged.emit(option);
+            this.selected = option;
+            this.isopen = false;
         }
     }
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside);
-    }
-    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: '8f26f0ce6740009a7a2855fcf097189e30b8bee4' }, h("div", { key: 'cf5e2194296f7781d6c25257e6ee454a621b8452', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} dda-input-size-${this.size} dda-validation-${this.error}` }, this.label && (h("label", { key: 'ac9c5f1dcf7e8ec0ddb90fea528530a85c30ccfa', id: labelId, htmlFor: this.button_id, class: "dda-input-label" }, this.label)), h("div", { key: 'f0c2ea41c9cf4a242c879c49a4ccfb7b1263f9ec', class: "dda-dropdown-container" }, h("button", { key: '13b4c1e07d96a5a4bf3a7957be5148b1be2b25d5', name: this.toggle_button_name, id: this.button_id, type: "button", class: "dda-input-field dda-dropdown-header", onClick: () => this.toggleSelect(), "aria-labelledby": this.button_id, disabled: this.disabled }, h("i", { key: 'c28ccd3e1dbea156df11076faf2aa7df17d91153', class: `three-dots material-icons`, "aria-hidden": "true" }, this.is_open ? 'more_vert' : 'more_vert'), !this.icon_mode && (h("span", { key: '4b89e24472ed892582930efe9e75477a9d2ad159', id: valueId, class: "dda-dropdown-text" }, h("span", { key: '304680bea1cc26e014936421d04ae3635ae8a46a' }, this.selectedText || this.placeholder), h("i", { key: '6ef436facac48161a48a83cc0a63d00a4170ead9', class: "material-icons" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')))), this.is_open && (h("div", { key: '91cf673e440c7290a34855722a1dc5c6845cb4c7', 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' : ''}`, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.selectedId === option.id ? 'true' : 'false' }, option.text)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && (h("span", { key: '4acbd34bf7d5e1979f193e094995388f4afdcde5', class: "dda-helper-text", id: this.validation_id }, this.helper_text)), this.error_message && (h("span", { key: '986b728e335fa2c699282f7ed4dddc16c99d0f4f', class: "dda-error-message", id: this.validation_id }, this.error_message)))));
+        const containerClass = [
+            'dda-input-container dda-inline-flex',
+            this.disabled ? 'dda-input-disabled' : '',
+            this.size ? `dda-input-size-${this.size}` : '',
+            this.custom_class ? `${this.custom_class}` : '',
+            this.component_mode,
+        ].filter(Boolean).join(' ');
+        return (h(Host, { key: '670440482e1458551292232c6ecf4b8e54222dd5' }, h("div", { key: 'fe217205cb7551e3d2589af17099f29f7ddf1459', class: containerClass }, this.label && h("label", { key: '001a9f98169f9ea10fcc81ee244aeefcdc4cf274', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '76a1a5219278d1a9719d66144e0705070ce8e31e', class: `dda-dropdown-container ${this.type}` }, h("button", { key: '77267978ffe12646d58cca9ea78dc8c7a09f5e60', id: this.button_id, name: this.arrow_button_name, "aria-label": this.aria_label, type: "button", class: "dda-input-field dda-dropdown-header", onClick: () => this.toggleDropdown() }, h("i", { key: '1f055334eda72df38f48b0a6a16236ece8550dae', class: `three-dots material-icons` }, this.isopen ? 'more_vert' : 'more_vert'), !this.icon_mode && h("span", { key: '89c83de3aeb45ab86b680414f16b531b9b93169c', class: "dda-dropdown-text" }, h("span", { key: 'ab2e18139b8bc2df6abc5c39a733623902bd43df' }, this.selected || 'Select an option'), " ", h("i", { key: '29761f83b08188e3d9d68052849be96332d6c484', class: `material-icons` }, this.isopen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'))), this.isopen && (h("div", { key: 'd2e8282cce424d2711198de03921944e9e7bba71', class: "dda-input-dropdown-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { type: "button", name: this.dropdown_button_name, 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: '4851be0b717e83d496a449981dfb45ec4eedc7e8', class: "dda-helper-text" }, this.helper_text), this.error && h("span", { key: '2d5dae4c61a2e4fa3a9b864ab649fcc25cc74b0d', class: "dda-error-message" }, this.error))));
     }
     static get is() { return "dda-dropdown"; }
+    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": {
@@ -76,8 +66,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "options": {
                 "type": "string",
@@ -95,8 +85,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "options",
-                "reflect": false
+                "reflect": false,
+                "attribute": "options"
             },
             "selected": {
                 "type": "string",
@@ -114,8 +104,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
-                "reflect": false
+                "reflect": false,
+                "attribute": "selected"
             },
             "disabled": {
                 "type": "boolean",
@@ -133,30 +123,11 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "error": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "error",
-                "reflect": false
-            },
-            "error_message": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -172,8 +143,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error"
             },
             "helper_text": {
                 "type": "string",
@@ -191,15 +162,15 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
-            "validation_id": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'bg-transparent' | 'bg-white'",
+                    "resolved": "\"bg-transparent\" | \"bg-white\"",
                     "references": {}
                 },
                 "required": false,
@@ -210,28 +181,29 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_id",
                 "reflect": false,
-                "defaultValue": "'text'"
+                "attribute": "type",
+                "defaultValue": "'bg-white'"
             },
             "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'small' | 'medium'",
+                    "resolved": "\"medium\" | \"small\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
+                "reflect": false,
                 "attribute": "size",
-                "reflect": false
+                "defaultValue": "'medium'"
             },
             "icon_mode": {
                 "type": "boolean",
@@ -249,8 +221,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon_mode",
                 "reflect": false,
+                "attribute": "icon_mode",
                 "defaultValue": "false"
             },
             "custom_class": {
@@ -269,8 +241,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -289,8 +261,8 @@ export class DdaDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "button_id": {
                 "type": "string",
@@ -308,29 +280,10 @@ export class DdaDropdown {
                 },
                 "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": "button_id"
             },
-            "option_select_button_name": {
+            "aria_label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -339,17 +292,17 @@ export class DdaDropdown {
                     "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": {
+            "arrow_button_name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -358,18 +311,17 @@ export class DdaDropdown {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
-                "defaultValue": "''"
+                "attribute": "arrow_button_name"
             },
-            "main_aria_label": {
+            "dropdown_button_name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -378,44 +330,21 @@ export class DdaDropdown {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "main_aria_label",
                 "reflect": false,
-                "defaultValue": "''"
+                "attribute": "dropdown_button_name"
             }
         };
     }
     static get states() {
         return {
-            "is_open": {},
-            "selectedId": {},
-            "selectedText": {}
+            "isopen": {}
         };
     }
-    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": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=dda-dropdown.js.map

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

@@ -5,122 +5,178 @@ export default {
         size: {
             control: { type: 'select' },
             options: ['default', 'small'],
-            description: 'Size of the select',
+            description: 'Size of the dropdown field',
         },
-        label: { control: 'text', description: 'Label for the select' },
-        options: {
-            control: 'object',
-            description: 'Array of options (id and text)',
+        type: {
+            control: { type: 'select' },
+            options: ['bg-transparent', 'bg-white'],
+            description: 'Type of the dropdown field',
         },
-        icon_mode: {
-            control: 'boolean',
-            description: 'Enable or disable icon mode',
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the dropdown field',
+        },
+        label: {
+            control: 'text',
+            description: 'Label for the dropdown field',
         },
         selected: {
             control: 'text',
-            description: 'Selected option (id or text)',
+            description: 'Selected value of the dropdown field',
         },
-        placeholder: {
+        disabled: {
+            control: 'boolean',
+            description: 'Disabled state of the dropdown field',
+        },
+        error: {
             control: 'text',
-            description: 'Placeholder text when no option is selected',
+            description: 'Error message displayed below the dropdown field',
         },
-        main_aria_label: {
+        helper_text: {
             control: 'text',
-            description: 'Aria Label text for the accessibility',
+            description: 'Helper text displayed below the dropdown field',
         },
-        disabled: { control: 'boolean', description: 'Disable the select' },
-        error: {
-            control: { type: 'select' },
-            options: ['normal', 'error'],
-            description: 'Error state of the select',
+        options: {
+            control: 'array', // Use 'array' to handle array input
+            description: 'Array of options for the select',
+        },
+        icon_mode: {
+            control: 'boolean',
+            description: 'Enable or disable icon mode',
+        },
+        custom_class: {
+            control: { type: 'text' },
+            description: 'Custom class for the dropdown component',
         },
-        error_message: { control: 'text', description: 'Error message to display' },
-        helper_text: { control: 'text', description: 'Helper or footer text' },
-        validation_id: { control: 'text', description: 'Validation ID' },
-        custom_class: { control: 'text', description: 'Custom class for the select' },
         component_mode: {
-            control: 'check',
+            control: { type: 'check' },
             options: ['light-mode'],
-            description: 'Mode of the select component',
+            description: 'Mode of the dropdown component',
+        },
+        button_id: {
+            control: { type: 'text' },
+            description: 'Button id for the dropdown field',
+        },
+        aria_label: {
+            control: { type: 'text' },
+            description: 'Aria label for the dropdown field',
+        },
+        arrow_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the arrow button',
+        },
+        dropdown_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the dropdown button',
         },
-        button_id: { control: 'text', description: 'Button ID' },
-        toggle_button_name: { control: 'text', description: 'Toggle button name' },
-        option_select_button_name: { control: 'text', description: 'Option select button name' },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-\`\`\`html
-<dda-dropdown
-  label="Select an option"
-  placeholder="Please select..."
-  main_aria_label="Please choose an option"
-  selected="2"
-  disabled="false"
-  helper_text="Helper or footer text"
-  error_message=""
-  size="default"
-  icon_mode="false"
-  custom_class=""
-  component_mode=""
-  button_id="button"
-  options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"}]'
-  toggle_button_name="toggle_button"
-  option_select_button_name="option_button"
-></dda-dropdown>
-\`\`\`
-        `,
+                component: `
+To use the \`dda-dropdown\` component, pass the following props:
+
+\`\`\`html
+<dda-dropdown
+    label="Headline"
+    selected=""
+    disabled="false"
+    error=""
+    helper_text=""
+    type="bg-white"
+    size="default"
+    icon_mode="false"
+    custom_class=""
+    component_mode=""
+    button_id="dropdown"
+    aria_label="dropdown"
+    options='["Option 1","Option 2","Option 3"]'
+    arrow_button_name="arrow-button"
+    dropdown_button_name="dropdown-button"
+></dda-dropdown>
+  \`\`\`
+`,
             },
         },
     },
 };
 const Template = (args) => {
-    const optionsAttribute = args.options ? `options='${JSON.stringify(args.options)}'` : '';
-    const otherAttributes = Object.entries(args)
-        .filter(([key]) => key !== 'options')
+    const attributes = Object.entries(args)
+        .filter(([key, value]) => value !== undefined && key !== 'options')
         .map(([key, value]) => `${key}="${value}"`)
         .join(' ');
-    return `
-    <dda-dropdown ${optionsAttribute} ${otherAttributes}></dda-dropdown>
-    <script>
-      document.querySelector('dda-dropdown').addEventListener('selectChanged', e => {
-        console.log('Selected:', e.detail);
-      });
-    </script>
-  `;
+    const optionsAttribute = `options='${JSON.stringify(args.options)}'`;
+    return `<dda-dropdown ${attributes} ${optionsAttribute}></dda-dropdown>`;
 };
-const defaultOptions = [
-    { id: '1', text: 'Option 1' },
-    { id: '2', text: 'Option 2' },
-    { id: '3', text: 'Option 3' },
-    { id: '4', text: 'Option 4' },
-    { id: '5', text: 'Option 5' },
-];
 export const Default = Template.bind({});
 Default.args = {
-    label: 'Select an option',
-    placeholder: 'Please select...',
-    main_aria_label: 'Please choose an option',
-    options: defaultOptions,
-    selected: '0',
+    label: 'Headline',
+    selected: '',
     disabled: false,
-    helper_text: 'Helper or footer text',
-    error_message: '',
-    validation_id: 'validationId',
+    error: '',
+    helper_text: '',
+    type: 'bg-white',
     size: 'default',
-    icon_mode: "false",
+    options: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7'],
+    icon_mode: false,
     custom_class: '',
     component_mode: '',
-    button_id: 'button',
-    toggle_button_name: 'toggle_button',
-    option_select_button_name: 'option_button',
-    selectChanged: "",
+    button_id: 'dropdown',
+    aria_label: 'dropdown',
+    arrow_button_name: 'arrow-button',
+    dropdown_button_name: 'dropdown-button',
 };
 export const Small = Template.bind({});
-Small.args = Object.assign(Object.assign({}, Default.args), { size: 'small' });
-export const WithError = Template.bind({});
-WithError.args = Object.assign(Object.assign({}, Default.args), { error: 'error', error_message: 'This is an error message' });
-export const Disabled = Template.bind({});
-Disabled.args = Object.assign(Object.assign({}, Default.args), { disabled: true });
-//# sourceMappingURL=dda-dropdown.stories.js.map
+Small.args = {
+    label: 'Headline',
+    selected: '',
+    disabled: false,
+    error: '',
+    helper_text: '',
+    type: 'bg-white',
+    size: 'small',
+    options: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'],
+    icon_mode: false,
+    custom_class: '',
+    component_mode: '',
+    button_id: 'dropdown',
+    aria_label: 'dropdown',
+    arrow_button_name: 'arrow-button',
+    dropdown_button_name: 'dropdown-button',
+};
+export const Transparent = Template.bind({});
+Transparent.args = {
+    label: '',
+    selected: '',
+    disabled: false,
+    error: '',
+    helper_text: '',
+    type: 'bg-transparent',
+    size: 'default',
+    options: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'],
+    icon_mode: false,
+    custom_class: '',
+    component_mode: '',
+    button_id: 'dropdown',
+    aria_label: 'dropdown',
+    arrow_button_name: 'arrow-button',
+    dropdown_button_name: 'dropdown-button',
+};
+export const icon_mode = Template.bind({});
+icon_mode.args = {
+    label: '',
+    selected: '',
+    disabled: false,
+    error: '',
+    helper_text: '',
+    type: 'bg-white',
+    size: 'default',
+    options: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'],
+    icon_mode: true,
+    custom_class: '',
+    component_mode: '',
+    button_id: 'dropdown',
+    aria_label: 'dropdown',
+    arrow_button_name: 'arrow-button',
+    dropdown_button_name: 'dropdown-button',
+};