npm - @dubai-design-system/components-js - Versions diffs - 3.12.4 → 3.12.5 - Mend

@dubai-design-system/components-js 3.12.4 → 3.12.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/dist/collection/components/dda-split-button/dda-split-button.js ADDED Viewed

@@ -0,0 +1,395 @@
+import { Host, h } from "@stencil/core";
+export class DdaSplitButton {
+    constructor() {
+        this.button_type = 'button';
+        this.disabled = false;
+        this.start_icon_family = '';
+        this.start_icon = '';
+        this.button_text = '';
+        this.aria_label = '';
+        this.button_color = 'primary';
+        this.button_shape = '';
+        this.icon_button_shape = '';
+        this.custom_class = '';
+        this.button_name = '';
+        this.handleClick = (event) => {
+            if (this.disabled)
+                return;
+            this.buttonClick.emit({
+                event,
+                id: this.button_id,
+                value: this.value,
+                name: this.button_name,
+            });
+        };
+    }
+    render() {
+        const buttonClass = [
+            'dda-split-btn',
+            `btn-color-${this.button_color}`,
+            this.size ? `btn-size-${this.size}` : '',
+            this.button_shape ? `split-btn-shape-${this.button_shape}` : '',
+            this.icon_button_shape ? `icon-btn-${this.icon_button_shape}` : '',
+            this.gap ? `dda-gap-${this.gap}` : '',
+            this.custom_class,
+            this.component_mode,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h(Host, { key: '4fa9e3147d92b59ff992c70abe60cc4e6cff2d8c' }, h("div", { key: 'd2151cf6cfbfa221e179f99fe1ab8cd3d7176388', class: "split-btn-container" }, h("button", { key: 'cfa584ca0cb7518a42b025b50c0966eb848922af', id: this.button_id, type: this.button_type, class: buttonClass, disabled: this.disabled, "aria-label": this.aria_label || this.button_text, name: this.button_name, value: this.value, onClick: this.handleClick }, this.start_icon && (h("i", { key: 'ce0e7e51be1d34a8beb6e0433591c4686302fa5b', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, this.start_icon)), this.button_text), h("button", { key: 'deffec49b0b519f81bab94322ae834849dbdc65e', class: "split-btn-arrow" }))));
+    }
+    static get is() { return "dda-split-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dda-split-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dda-split-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "button_type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "button_type",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "start_icon_family": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "start_icon_family",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "start_icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "start_icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "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,
+                "defaultValue": "''"
+            },
+            "aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria_label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "button_color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "button_color",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false
+            },
+            "button_shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "button_shape",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "icon_button_shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon_button_shape",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "gap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "gap",
+                "reflect": false
+            },
+            "custom_class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "custom_class",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "component_mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "component_mode",
+                "reflect": false
+            },
+            "button_id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "button_id",
+                "reflect": false
+            },
+            "button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "button_name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClick",
+                "name": "buttonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ event: MouseEvent, id: string, value: string, name: string }",
+                    "resolved": "{ event: MouseEvent; id: string; value: string; name: string; }",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=dda-split-button.js.map

package/dist/collection/components/dda-split-button/dda-split-button.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dda-split-button.js","sourceRoot":"","sources":["../../../src/components/dda-split-button/dda-split-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Host, Component, Prop, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-split-button',\r\n styleUrls: ['dda-split-button.css'],\r\n shadow: false,\r\n})\r\nexport class DdaSplitButton {\r\n @Prop() button_type: string = 'button';\r\n @Prop() disabled: boolean = false;\r\n @Prop() start_icon_family: string = '';\r\n @Prop() start_icon: string = '';\r\n @Prop() button_text: string = '';\r\n @Prop() aria_label?: string = '';\r\n @Prop() button_color: string = 'primary';\r\n @Prop() size?: string;\r\n @Prop() button_shape?: string = '';\r\n @Prop() icon_button_shape?: string = '';\r\n @Prop() gap?: number;\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() button_id: string;\r\n @Prop() button_name?: string = '';\r\n @Prop() value?: string;\r\n\r\n @Event() buttonClick: EventEmitter<{ event: MouseEvent, id: string, value: string, name: string }>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n if (this.disabled) return;\r\n\r\n this.buttonClick.emit({\r\n event,\r\n id: this.button_id,\r\n value: this.value,\r\n name: this.button_name,\r\n });\r\n };\r\n \r\n\r\n render() {\r\n const buttonClass = [\r\n 'dda-split-btn',\r\n `btn-color-${this.button_color}`,\r\n this.size ? `btn-size-${this.size}` : '',\r\n this.button_shape ? `split-btn-shape-${this.button_shape}` : '',\r\n this.icon_button_shape ? `icon-btn-${this.icon_button_shape}` : '',\r\n this.gap ? `dda-gap-${this.gap}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n ]\r\n \r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n return (\r\n <Host>\r\n <div class=\"split-btn-container\">\r\n <button\r\n id={this.button_id}\r\n type={this.button_type}\r\n class={buttonClass}\r\n disabled={this.disabled}\r\n aria-label={this.aria_label || this.button_text}\r\n name={this.button_name}\r\n value={this.value}\r\n onClick={this.handleClick}\r\n >\r\n {this.start_icon && (\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n {this.start_icon}\r\n </i>\r\n )}\r\n {this.button_text}\r\n </button>\r\n <button class=\"split-btn-arrow\">\r\n \r\n </button>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/dda-split-button/dda-split-button.stories.js ADDED Viewed

@@ -0,0 +1,125 @@
+export default {
+    title: 'Components/DDA Split Button',
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+To use the \`<dda-split-button>\` component, pass the following props:
+\`\`\`html
+<dda-split-button
+    button_color="default-primary"
+    start_icon="sentiment_satisfied"
+    button_text: "Button"
+    custom_class=""
+    component_mode=""
+    button_id="button"
+    aria_label="button"
+    button_name="button"
+    value="my-value"
+    >
+</dda-split-button>
+\`\`\`
+To listen for click events:
+\`\`\`javascript
+document.querySelector('dda-split-button').addEventListener('buttonClick', (e) => {
+  const { event, id, value, name } = e.detail;
+  console.log('Button clicked:', { id, value, name });
+});
+\`\`\`
+        `,
+            },
+        },
+    },
+    argTypes: {
+        button_color: {
+            control: { type: 'select' },
+            options: [
+                'default-primary', 'default-secondary', 'default-tertiary', 'default-link',
+                'error-primary', 'error-secondary', 'error-tertiary', 'error-link',
+                'onsurface-primary', 'onsurface-secondary', 'onsurface-tertiary', 'onsurface-link',
+                'secondary', 'success', 'warning', 'surface', 'surface-variant', 'disabled',
+            ],
+        },
+        button_type: { control: 'select', options: ['button', 'submit', 'reset'] },
+        size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'] },
+        button_shape: { control: 'select', options: ['default', 'circle'] },
+        icon_button_shape: { control: 'select', options: ['default', 'circle'] },
+        gap: { control: 'select', options: [1, 2] },
+        button_text: { control: 'text' },
+        custom_class: { control: 'text' },
+        component_mode: {
+            control: { type: 'select' },
+            options: ['', 'light-mode'],
+            description: 'Mode of the button component',
+        },
+        button_id: { control: 'text', description: 'ID of the button' },
+        aria_label: { control: 'text', description: 'Aria label for the button' },
+        button_name: { control: 'text', description: 'Name of the button' },
+        value: { control: 'text', description: 'Value of the button' },
+        disabled: { control: 'boolean', description: 'Disable the button' },
+    },
+};
+const Template = (args) => {
+    const attributes = Object.entries(args)
+        .filter(([key, value]) => value !== undefined && key !== 'text')
+        .map(([key, value]) => {
+        if (key === 'onClick') {
+            return `onclick="${value}"`; // inject raw JS string
+        }
+        return `${key}="${value}"`;
+    })
+        .join(' ');
+    // Manually add the onclick attribute with a placeholder JS snippet or text
+    const onclickAttr = 'onclick="console.log(\'native click\')"';
+    // Create the button element HTML string including onclick
+    const buttonHtml = `<dda-split-button ${attributes} ${onclickAttr}></dda-split-button>`;
+    // Add event listener after the element is created (unchanged)
+    setTimeout(() => {
+        const button = document.querySelector(`dda-split-button[button_id="${args.button_id}"]`);
+        if (button) {
+            button.removeEventListener('buttonClick', handleButtonClick);
+            button.addEventListener('buttonClick', handleButtonClick);
+        }
+    }, 0);
+    return buttonHtml;
+};
+const handleButtonClick = (e) => {
+    const { event, id, value, name } = e.detail;
+    console.log('Button clicked:', { id, value, name });
+    console.log('Mouse event:', event);
+    if (id === 'error-button') {
+        alert('Hello! I am an alert box!!');
+    }
+    else if (id === 'console-button') {
+        console.log('Button clicked via custom event');
+    }
+};
+export const DefaultPrimary = Template.bind({});
+DefaultPrimary.args = {
+    button_type: "button",
+    button_color: 'default-primary',
+    start_icon: 'sentiment_satisfied',
+    button_text: 'Button',
+    button_id: 'default-primary-btn',
+    aria_label: 'default primary button',
+    button_name: 'defaultPrimaryButton',
+    value: 'default-primary-value',
+    button_shape: 'default',
+    size: 'md',
+    gap: 1,
+    disabled: false,
+    custom_class: '',
+    component_mode: '',
+    onclick: "console.log('native click')"
+};
+export const ErrorPrimary = Template.bind({});
+ErrorPrimary.args = Object.assign(Object.assign({}, DefaultPrimary.args), { button_color: 'error-primary', start_icon: 'sentiment_satisfied', button_text: 'Button', button_id: 'default-primary-btn', aria_label: 'default primary button', button_name: 'defaultPrimaryButton', value: 'default-primary-value', button_shape: 'default', size: 'md', gap: '1', disabled: false, custom_class: '', component_mode: '', onclick: "console.log('native click')" });
+export const SurfacePrimary = Template.bind({});
+SurfacePrimary.args = Object.assign(Object.assign({}, DefaultPrimary.args), { button_color: 'onsurface-primary', start_icon: 'sentiment_satisfied', button_text: 'Button', button_id: 'default-primary-btn', aria_label: 'default primary button', button_name: 'defaultPrimaryButton', value: 'default-primary-value', button_shape: 'default', size: 'md', gap: '1', disabled: false, custom_class: '', component_mode: '', onclick: "console.log('native click')" });
+export const Disabled = Template.bind({});
+Disabled.args = Object.assign(Object.assign({}, DefaultPrimary.args), { button_color: 'disabled', button_id: 'disabled-button', disabled: true, custom_class: '', component_mode: '', onclick: "console.log('native click')" });
+//# sourceMappingURL=dda-split-button.stories.js.map

package/dist/collection/components/dda-split-button/dda-split-button.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dda-split-button.stories.js","sourceRoot":"","sources":["../../../src/components/dda-split-button/dda-split-button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\r\n title: 'Components/DDA Split Button',\r\n tags: ['autodocs'],\r\n parameters: {\r\n docs: {\r\n description: {\r\n component: `\r\nTo use the \\`<dda-split-button>\\` component, pass the following props:\r\n\r\n\\`\\`\\`html\r\n<dda-split-button\r\n button_color=\"default-primary\"\r\n start_icon=\"sentiment_satisfied\"\r\n button_text: \"Button\"\r\n custom_class=\"\"\r\n component_mode=\"\"\r\n button_id=\"button\"\r\n aria_label=\"button\"\r\n button_name=\"button\"\r\n value=\"my-value\"\r\n >\r\n</dda-split-button>\r\n\\`\\`\\`\r\n\r\nTo listen for click events:\r\n\r\n\\`\\`\\`javascript\r\ndocument.querySelector('dda-split-button').addEventListener('buttonClick', (e) => {\r\n const { event, id, value, name } = e.detail;\r\n console.log('Button clicked:', { id, value, name });\r\n});\r\n\\`\\`\\`\r\n `,\r\n },\r\n },\r\n },\r\n argTypes: {\r\n button_color: {\r\n control: { type: 'select' },\r\n options: [\r\n 'default-primary','default-secondary','default-tertiary','default-link',\r\n 'error-primary','error-secondary','error-tertiary','error-link',\r\n 'onsurface-primary','onsurface-secondary','onsurface-tertiary','onsurface-link',\r\n 'secondary','success','warning','surface','surface-variant','disabled',\r\n ],\r\n },\r\n button_type: { control: 'select', options: ['button', 'submit', 'reset'] },\r\n size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'] },\r\n button_shape: { control: 'select', options: ['default', 'circle'] },\r\n icon_button_shape: { control: 'select', options: ['default', 'circle'] },\r\n gap: { control: 'select', options: [1, 2] },\r\n button_text: { control: 'text' },\r\n custom_class: { control: 'text' },\r\n component_mode: {\r\n control: { type: 'select' },\r\n options: ['', 'light-mode'],\r\n description: 'Mode of the button component',\r\n },\r\n button_id: { control: 'text', description: 'ID of the button' },\r\n aria_label: { control: 'text', description: 'Aria label for the button' },\r\n button_name: { control: 'text', description: 'Name of the button' },\r\n value: { control: 'text', description: 'Value of the button' },\r\n disabled: { control: 'boolean', description: 'Disable the button' },\r\n },\r\n};\r\n\r\n\r\n\r\nconst Template = (args) => {\r\n const attributes = Object.entries(args)\r\n .filter(([key, value]) => value !== undefined && key !== 'text')\r\n .map(([key, value]) => {\r\n if (key === 'onClick') {\r\n return `onclick=\"${value}\"`; // inject raw JS string\r\n }\r\n return `${key}=\"${value}\"`;\r\n })\r\n .join(' ');\r\n\r\n // Manually add the onclick attribute with a placeholder JS snippet or text\r\n const onclickAttr = 'onclick=\"console.log(\\'native click\\')\"';\r\n\r\n // Create the button element HTML string including onclick\r\n const buttonHtml = `<dda-split-button ${attributes} ${onclickAttr}></dda-split-button>`;\r\n \r\n // Add event listener after the element is created (unchanged)\r\n setTimeout(() => {\r\n const button = document.querySelector(`dda-split-button[button_id=\"${args.button_id}\"]`);\r\n if (button) {\r\n button.removeEventListener('buttonClick', handleButtonClick);\r\n button.addEventListener('buttonClick', handleButtonClick);\r\n }\r\n }, 0);\r\n\r\n return buttonHtml;\r\n};\r\n\r\nconst handleButtonClick = (e) => {\r\n const { event, id, value, name } = e.detail;\r\n console.log('Button clicked:', { id, value, name });\r\n console.log('Mouse event:', event);\r\n\r\n if (id === 'error-button') {\r\n alert('Hello! I am an alert box!!');\r\n } else if (id === 'console-button') {\r\n console.log('Button clicked via custom event');\r\n }\r\n};\r\n\r\nexport const DefaultPrimary = Template.bind({});\r\nDefaultPrimary.args = {\r\n button_type: \"button\",\r\n button_color: 'default-primary',\r\n start_icon: 'sentiment_satisfied',\r\n button_text: 'Button',\r\n button_id: 'default-primary-btn',\r\n aria_label: 'default primary button',\r\n button_name: 'defaultPrimaryButton',\r\n value: 'default-primary-value',\r\n button_shape: 'default',\r\n size: 'md',\r\n gap: 1,\r\n disabled: false,\r\n custom_class: '',\r\n component_mode: '',\r\n onclick: \"console.log('native click')\"\r\n};\r\n\r\nexport const ErrorPrimary = Template.bind({});\r\nErrorPrimary.args = {\r\n ...DefaultPrimary.args,\r\n button_color: 'error-primary',\r\n start_icon: 'sentiment_satisfied',\r\n button_text: 'Button',\r\n button_id: 'default-primary-btn',\r\n aria_label: 'default primary button',\r\n button_name: 'defaultPrimaryButton',\r\n value: 'default-primary-value',\r\n button_shape: 'default',\r\n size: 'md',\r\n gap: '1',\r\n disabled: false,\r\n custom_class: '',\r\n component_mode: '',\r\n onclick: \"console.log('native click')\"\r\n};\r\n\r\nexport const SurfacePrimary = Template.bind({});\r\nSurfacePrimary.args = {\r\n ...DefaultPrimary.args,\r\n button_color: 'onsurface-primary',\r\n start_icon: 'sentiment_satisfied',\r\n button_text: 'Button',\r\n button_id: 'default-primary-btn',\r\n aria_label: 'default primary button',\r\n button_name: 'defaultPrimaryButton',\r\n value: 'default-primary-value',\r\n button_shape: 'default',\r\n size: 'md',\r\n gap: '1',\r\n disabled: false,\r\n custom_class: '',\r\n component_mode: '',\r\n onclick: \"console.log('native click')\"\r\n};\r\n\r\nexport const Disabled = Template.bind({});\r\nDisabled.args = {\r\n ...DefaultPrimary.args,\r\n button_color: 'disabled',\r\n button_id: 'disabled-button',\r\n disabled: true,\r\n custom_class: '',\r\n component_mode: '',\r\n onclick: \"console.log('native click')\"\r\n};\r\n\r\n\r\n"]}

package/dist/collection/components/dda-sticky-footer/dda-sticky-footer.js CHANGED Viewed

@@ -75,7 +75,7 @@ export class DdaStickyFooter {
     render() {
         const footmiddlesection = this.parseJsonArray(this.middleLink);
         const footrightsection = this.parseJsonArray(this.rightLink);
-        return (h("div", { key: 'f2dae2f648153882e10218c616d18261b7e283a1', class: { 'dda-footer': true, 'hidden': this.isHidden } }, h("div", { key: '8420c243926f1c63907cb22a707641edcf1a9bed', class: "footer-content" }, h("div", { key: 'ecfadc0c7e85fbb3745c79be4f3db9ee593b2d6a', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '6b0a4e16c039a240e9d0f8f1d0ba6e0ee04c1aaa' }, this.happinessIconSrc && (h("li", { key: '167da6a962880071b1fc9b8d9993dba1a773ac66', class: "foot-icon-btn" }, h("dda-tooltip", { key: '83eb322dcd0ea3b6531d5b4a50947945893ae172', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: '80ad25f72680d7bfc22652b49863f5dd719fae24', href: this.happinessIconHref, id: this.happinessIconId, onClick: this.happinessIconClick }, h("img", { key: 'a385bb74233d10e8d824ef6409e5a1dc00b02e9d', src: this.colorTheme == 'light' ? this.happinessIconSrc : this.happinessIconSrcDark, alt: this.happinessIconAlt }), h("span", { key: 'ba726eb21a4a3ad632611f77474d6c950810373d', class: "visually-hidden" }, this.happinessIconTooltip))))), this.accessibilityIconSrc && (h("li", { key: 'aa5930ec1d62349e6d2388fe6b83650d7c48a9f1', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'dfadd4b1ff74179320fdeb756b60f57edef772ad', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '89bc609cc7b3a913d658b25337bd042717ad4e9f', href: this.accessibilityIconHref, id: this.accessibilityIconId, onClick: this.accessibilityIconClick }, h("img", { key: 'e9d7662edf3b521668f5b8338ee017bdab542493', src: this.colorTheme == 'light' ? this.accessibilityIconSrc : this.accessibilityIconSrcDark, alt: this.accessibilityIconAlt }), h("span", { key: 'f75abbde98c7ad6fe807c19c2558603ac04abb25', class: "visually-hidden" }, this.accessibilityIconTooltip))))), this.servicesIconText && (h("li", { key: '05a73f88db125e48136b477148ace14e09fdd9d9', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'a434cbd52e6fa31e1c5c6732cadb2feb537be4a4', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: '1ccb702efabd0e80cb951eb053b822b6c8d5bdb5', href: this.servicesIconHref, id: this.servicesIconId, onClick: this.servicesIconClick }, h("img", { key: '943d90b2e42d7e08ff13aa39fe7e259a6332cad9', src: this.colorTheme == 'light' ? this.servicesIconSrc : this.servicesIconSrcDark, alt: this.servicesIconAlt }), h("span", { key: '1f4e571909b037b2159953395e63a8eb48ec0999' }, this.servicesIconText))))))), !this.hideMiddleSection && (h("div", { key: 'eeac2e27968cb93e2ff026474d8021d91ae08651', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: 'a8f00c9c4b39d99db8724d19bf3ffba5e166b13d', class: "foot-logo" }, footmiddlesection.map((middleItem, index) => (h("li", { key: index }, h("dda-tooltip", { title_text: middleItem.LogoTooltip, description: "", position: "top" }, h("a", { href: middleItem.href, onClick: () => this.middleItemClick(middleItem) }, h("img", { src: this.colorTheme == 'light' ? middleItem.src : middleItem.srcDark, alt: middleItem.alt }), h("span", { class: "visually-hidden" }, middleItem.LogoTooltip))))))))), h("div", { key: '1abe68173db66c995b7f116597592932ac1df91f', class: "dda-footer-item dda-footer-right" }, h("ul", { key: 'f5560e8a5a277be0319ed86a94473eeb15b63722', class: "foot-right_links" }, footrightsection.map((rightItem, index) => (h("li", { class: "foot-icon-btn", key: index }, h("dda-tooltip", { title_text: rightItem.RightLinkTooltip, description: "", position: "top" }, h("a", { href: rightItem.href, title: rightItem.title, "aria-label": `${rightItem.IconName} ${rightItem.LinkText}`, id: rightItem.itemId, onClick: () => this.rightItemClick(rightItem) }, h("i", { class: rightItem.IconFamily }, rightItem.IconName), h("span", null, rightItem.LinkText)))))), this.dubaiaeIconSrc && this.dubaiaeIconSmallSrc && (h("li", { key: 'decff51b8733c9bccf97086fdeeeae33e9d544bf', class: "foot-icon-btn" }, h("dda-tooltip", { key: '0dfa3fc3b7d8f1681f4c5ad18d016be3216734ea', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: '4fc3b4b938660f2f7f88290eeba99ded7cbedab9', href: this.dubaiaeIconHref, onClick: this.dubaiAEClick, id: this.dubaiaeIconId }, h("img", { key: 'c4079f5131e8afdd99b42d97154494a0985dabf1', class: "dubaiae-text-icon", src: this.colorTheme == 'light' ? this.dubaiaeIconSrc : this.dubaiaeIconSrcDark, alt: `${this.dubaiaeIconAlt} icon desktop` }), h("img", { key: '5027a7c52e5c35286ec7cd99c577960b5a953ab9', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: `${this.dubaiaeIconAlt} icon mobile` }), h("span", { key: 'ca47a79c32d5f44b87b06bd44a945a156aecdccf', class: "visually-hidden" }, this.dubaiaeIconTooltip))))), this.aiIconSrc && (h("li", { key: '7d0b0760fe05ac434757dcb9b16f08253b279984', class: "foot-icon-btn" }, h("dda-tooltip", { key: '04c19c452b17d28e8bc3f7489af5b55eadad931b', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: '4d446f90cf9c8e798bf44ec232990fe5ed879c84', href: this.aiIconHref, onClick: this.aiIconClick, id: this.aiIconId }, h("img", { key: '392a3d0891c6e5f5d3130f6802ad065e3cae204f', src: this.colorTheme == 'light' ? this.aiIconSrc : this.aiIconSrcDark, alt: this.aiIconAlt }), h("span", { key: 'd7ca1d2e50a1dc1e9db36ea89efffe2397478958', class: "visually-hidden" }, this.aiIconTooltip))))), this.chatIconSrc && (h("li", { key: '1dfdf25a49b5be0f9d18558408f4fad8bc65a1c5', class: "foot-icon-btn" }, h("dda-tooltip", { key: '3d65d37c88c1c5921733d0cb191236f9ee3ebc47', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: 'bab41d319f703aa55ba314c7d3754cfd8b37fcb3', href: this.chatIconHref, onClick: this.chatIconClick, id: this.chatIconId }, h("img", { key: '7c564be67f0d0154e152d347675e1fa0916fab32', src: this.colorTheme == 'light' ? this.chatIconSrc : this.chatIconSrcDark, alt: this.chatIconAlt }), h("span", { key: '51e8956b7a6826da9069bf140521ec6758c3a9b4', class: "visually-hidden" }, this.chatIconTooltip)))))), h("button", { key: '12443c9cb4d3b30feacbd13a4d4cd81ec0e5ae41', type: "button", class: "show-right-icon", onClick: this.toggleFooterIcons }, h("i", { key: '5eea7473c297f7e4b8979a519da1f7d1645920a1', class: this.moreIconFamily }, this.moreIcon))))));
+        return (h("div", { key: '95efee7973feff76b7a1ddfa9fba5fb1d45f1b3b', class: { 'dda-footer': true, 'hidden': this.isHidden } }, h("div", { key: '1e3ab5c919a033bf29e88ec4fb3b0a2876eee5d2', class: "footer-content" }, h("div", { key: '01f21c2537d9fe164a0f939fdeed2d277201d3d5', class: "dda-footer-item dda-footer-left" }, h("ul", { key: 'ecb8a26cf343c1bbc70746bff068eb94607ba0bc' }, this.happinessIconSrc && (h("li", { key: 'c278cf1dc53e641abc7cffbc8d1429cdea1a00f8', class: "foot-icon-btn" }, h("dda-tooltip", { key: '1360e509accc4c341d4ed0ae1483e4317094cde2', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: 'b1e2ed419289fd9a455d4a96338c94ba51272347', href: this.happinessIconHref, id: this.happinessIconId, onClick: this.happinessIconClick }, h("img", { key: '77348880a412126358c812b879a333545f264b10', src: this.colorTheme == 'light' ? this.happinessIconSrc : this.happinessIconSrcDark, alt: this.happinessIconAlt }), h("span", { key: '278a3aff163a7dde55b4ec91ff45a5d2cac71eed', class: "visually-hidden" }, this.happinessIconTooltip))))), this.accessibilityIconSrc && (h("li", { key: '7f6f00c3eae0fd0dcabdda947751e95f039114ff', class: "foot-icon-btn" }, h("dda-tooltip", { key: '381638253927a84291478679f3fc100a151c01c7', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '8379824009617bcd41ca32486fc19e168fb0e10e', href: this.accessibilityIconHref, id: this.accessibilityIconId, onClick: this.accessibilityIconClick }, h("img", { key: 'f826744d391b0ebdb292fd54337e4e8fafbaa527', src: this.colorTheme == 'light' ? this.accessibilityIconSrc : this.accessibilityIconSrcDark, alt: this.accessibilityIconAlt }), h("span", { key: '5583a046cc7d4623dba6017f0d1d8af8b73e4a5f', class: "visually-hidden" }, this.accessibilityIconTooltip))))), this.servicesIconText && (h("li", { key: 'f1aa856dbef7ed95dfefb6e1896b6102ced3a50b', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'b046c2c2ba429c9a2218633733c229f661dd38d9', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: 'a0e4b0aecd9d5903074b0f02709f9b273216d1ab', href: this.servicesIconHref, id: this.servicesIconId, onClick: this.servicesIconClick }, h("img", { key: '71835647960d328c004758b1619d7a1c5f12e8b1', src: this.colorTheme == 'light' ? this.servicesIconSrc : this.servicesIconSrcDark, alt: this.servicesIconAlt }), h("span", { key: '0fac4b409517fbab8df699f13558cfce95df3c8f' }, this.servicesIconText))))))), !this.hideMiddleSection && (h("div", { key: '9b468bf13c76270aaf4b2b82bcc3679aec07d25c', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '3e010b43efdcad46e7d167760e70b10866e4b023', class: "foot-logo" }, footmiddlesection.map((middleItem, index) => (h("li", { key: index }, h("dda-tooltip", { title_text: middleItem.LogoTooltip, description: "", position: "top" }, h("a", { href: middleItem.href, onClick: () => this.middleItemClick(middleItem) }, h("img", { src: this.colorTheme == 'light' ? middleItem.src : middleItem.srcDark, alt: middleItem.alt }), h("span", { class: "visually-hidden" }, middleItem.LogoTooltip))))))))), h("div", { key: '8c28f2d603519d5f7ce7d1f1aa9a78f296b9adaa', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '496ee22e3a97227dffc430ab36b279819c148c14', class: "foot-right_links" }, footrightsection.map((rightItem, index) => (h("li", { class: "foot-icon-btn", key: index }, h("dda-tooltip", { title_text: rightItem.RightLinkTooltip, description: "", position: "top" }, h("a", { href: rightItem.href, title: rightItem.title, "aria-label": `${rightItem.IconName} ${rightItem.LinkText}`, id: rightItem.itemId, onClick: () => this.rightItemClick(rightItem) }, h("i", { class: rightItem.IconFamily }, rightItem.IconName), h("span", null, rightItem.LinkText)))))), this.dubaiaeIconSrc && this.dubaiaeIconSmallSrc && (h("li", { key: 'f378807753887b94eb013ef93f9a1375efbde5af', class: "foot-icon-btn" }, h("dda-tooltip", { key: '890275f2ee49904866139441574dfa921948be0f', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: '734197129ea2af52682cc9ba9ada6849e3f8c9a2', href: this.dubaiaeIconHref, onClick: this.dubaiAEClick, id: this.dubaiaeIconId }, h("img", { key: 'bffab79724f39af1fa4f056adf10e125b0462d44', class: "dubaiae-text-icon", src: this.colorTheme == 'light' ? this.dubaiaeIconSrc : this.dubaiaeIconSrcDark, alt: `${this.dubaiaeIconAlt} icon desktop` }), h("img", { key: '6e32692826d4320dec0fb04649b17bdb4d4c6037', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: `${this.dubaiaeIconAlt} icon mobile` }), h("span", { key: '3e9e81f77f46b677d2ab60a5a93b5ff7be66b283', class: "visually-hidden" }, this.dubaiaeIconTooltip))))), this.aiIconSrc && (h("li", { key: '8e412a8bb72fe45cef1f0e86042270b54cb8e4b8', class: "foot-icon-btn" }, h("dda-tooltip", { key: '1f27e8afeda263e65fb7654aa8d6edca7097b13b', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: '094c834441db0f0831fd2aebf4026f20ca2d6280', href: this.aiIconHref, onClick: this.aiIconClick, id: this.aiIconId }, h("img", { key: '99dd257e47f07f0ebc354322532973596d85978b', src: this.colorTheme == 'light' ? this.aiIconSrc : this.aiIconSrcDark, alt: this.aiIconAlt }), h("span", { key: 'a06b175a3f200cbfea89328131f0645dd140194f', class: "visually-hidden" }, this.aiIconTooltip))))), this.chatIconSrc && (h("li", { key: '1f8bf5ae84472736dcecebe6ba6fb0a0235960fe', class: "foot-icon-btn" }, h("dda-tooltip", { key: '72f7ffb30994b8c8ad33ce0e49ebecb1cfa7dcc1', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '638deff5a2e92880c6b2f6f13e1d8b186c23c1f7', href: this.chatIconHref, onClick: this.chatIconClick, id: this.chatIconId }, h("img", { key: 'd5b6a32405fd41fc2828a6f129784fe918b9cefd', src: this.colorTheme == 'light' ? this.chatIconSrc : this.chatIconSrcDark, alt: this.chatIconAlt }), h("span", { key: '56da55a3b07fa996695c177cca93b4ae846fce94', class: "visually-hidden" }, this.chatIconTooltip)))))), h("button", { key: '6ffa766e66debd928fb33db0e3ba6711db043aaa', type: "button", class: "show-right-icon", onClick: this.toggleFooterIcons }, h("i", { key: '217a991516b7d9a65db8b0f3e3bba231cc2b6c09', class: this.moreIconFamily }, this.moreIcon))))));
     }
     static get is() { return "dda-sticky-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-tabs/dda-tabs.js CHANGED Viewed

@@ -62,7 +62,7 @@ export class DdaTabs {
         this.tabClick.emit(index);
     }
     render() {
-        return (h(Host, { key: '9fba77b9c33c9077f5e8999a1ce8c46535df6302' }, h("div", { key: 'dc5d7ccde21eca695798d6e62c4bbcc117b19962', role: "tablist", "aria-label": "Tab Navigation", class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode} ${this.tab_type}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.parsedButtonIds[index] || `tab-btn-${index + 1}`, name: this.button_name, "aria-label": title, type: "button", value: this.parsedButtonValues[index] || '', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, role: "tab", "aria-selected": this.active_tab === index ? 'true' : 'false', "aria-controls": `tab-btn-${index + 1}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && (h("i", { class: `material-icons`, "aria-hidden": "true" }, this.parsedIcons[index] || '')), h("span", null, title)))))));
+        return (h(Host, { key: 'a63350c6f7e789932d37cf0385e493a80c1309d6' }, h("div", { key: '5f35f70fe945369d035e87f6221eaf5a48edbf9a', role: "tablist", "aria-label": "Tab Navigation", class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode} ${this.tab_type}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.parsedButtonIds[index] || `tab-btn-${index + 1}`, name: this.button_name, "aria-label": title, type: "button", value: this.parsedButtonValues[index] || '', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, role: "tab", "aria-selected": this.active_tab === index ? 'true' : 'false', "aria-controls": `tab-btn-${index + 1}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && (h("i", { class: `material-icons`, "aria-hidden": "true" }, this.parsedIcons[index] || '')), h("span", null, title)))))));
     }
     static get is() { return "dda-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-textarea/dda-textarea.js CHANGED Viewed

@@ -92,7 +92,7 @@ export class DdaTextarea {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '84c8c4cf9523ce3dbb0abac66620362a6562b283' }, h("div", { key: '2667bc3bb5241b6301fa7a74305ab124161abc5c', class: textareaClass }, this.label && (h("label", { key: '088e47cd088301ef751b5aac6475f5c0c2affc2c', htmlFor: this.input_id, class: "dda-input-label" }, this.label)), this.enable_rich_editor ? (h("div", { id: "editor", class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.internalValue || this.value, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, onInput: event => this.handleInput(event), onBlur: event => this.handleBlur(event), onFocus: (event) => {
+        return (h(Host, { key: '3d95e60cae7eb7f6280e17e2a0d3076e408c9c98' }, h("div", { key: 'ae65d105dacf8287a675344756842901c3313fcd', class: textareaClass }, this.label && (h("label", { key: '4590c87e0f1201e001fe245e14b57fca4ba071e8', htmlFor: this.input_id, class: "dda-input-label" }, this.label)), this.enable_rich_editor ? (h("div", { id: "editor", class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.internalValue || this.value, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, onInput: event => this.handleInput(event), onBlur: event => this.handleBlur(event), onFocus: (event) => {
                 this.el.dispatchEvent(new FocusEvent('focus', {
                     bubbles: true,
                     composed: true,

package/dist/collection/components/dda-toggle/dda-toggle.js CHANGED Viewed

@@ -7,10 +7,10 @@ export class DdaToggle {
         const toggleClass = ['dda-toggle-btn', this.size ? `dda-toggle-${this.size}` : '', this.custom_class ? `${this.custom_class}` : '', this.component_mode]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '5548a49f32dea01195caf2a86f4a04f3f1b14a73' }, h("label", { key: '33608675617c7551fdcb519470e806109ef7209e', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '5355df7fe3de4dcda50d2fd43920e95bbb4d0968', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked, onChange: event => {
+        return (h(Host, { key: '9a7aedffff589a851cd8b224871e8be5f36e500b' }, h("label", { key: '5010658c3126f79aa73c51c96dd893a9816d5ca2', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '5d116e7eb40788d4c63cde1104234b5e94d15d17', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked, onChange: event => {
                 this.toggleChanged.emit(event);
                 this.onChanged.emit(event);
-            } }), h("span", { key: 'ed36eef7bb72e28521786f0eda989e9c095d0bb9', class: "toggle" }), h("p", { key: 'cf52347775fe7ae54ceee0814f5b23ec66e0433b' }, h("span", { key: '3d99822b9da959875f8a7c555fe173525257587f', class: "toggle-title" }, "Radio Button Title"), h("span", { key: '9bba5e196b2ee9e0301c0f562e4d343cab20126f', class: "toggle-supporting" }, "Supporting Text")))));
+            } }), h("span", { key: '9996605f39a1f5eb437b519f0abec233244705c2', class: "toggle" }), h("p", { key: 'e50c9e6375cd7ecf40237648947af5e2b8b2b36c' }, h("span", { key: 'd2bbdc6edd9865df0263efb4020e2a49578df9c1', class: "toggle-title" }, "Radio Button Title"), h("span", { key: 'fc1f4cb6710c01aaf52aac79d847bdcf173923ec', class: "toggle-supporting" }, "Supporting Text")))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {