@dubai-design-system/components-js 5.3.0 → 5.3.2

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

@@ -15,6 +15,19 @@ export class Ddaselect {
         // Fallback id so the label, list and messages are wired when no button_id
         // is passed (otherwise ids became "undefined-listbox" and the label had for="").
         this.fallbackId = uniqueId('dda-select');
+        this.onTriggerBlur = (event) => {
+            var _a;
+            // A keyboard ArrowDown/Up on the trigger opens the list and moves focus into it — that is
+            // not the user leaving the field, so skip the event when focus lands back inside this.el.
+            const related = event.relatedTarget;
+            if (related && this.el.contains(related)) {
+                return;
+            }
+            this.selectBlurred.emit({
+                name: this.input_name || this.button_id || this.triggerId,
+                value: ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.text) || '',
+            });
+        };
         this.onTriggerKeyDown = (event) => {
             if (this.disabled) {
                 return;
@@ -98,12 +111,51 @@ export class Ddaselect {
         return ids.length ? ids.join(' ') : undefined;
     }
     get parsedOptions() {
-        try {
-            return JSON.parse(this.options);
+        let raw = this.options;
+        if (typeof raw === 'string') {
+            try {
+                raw = JSON.parse(raw);
+            }
+            catch (_a) {
+                return [];
+            }
         }
-        catch (_a) {
+        if (!Array.isArray(raw))
             return [];
-        }
+        return raw
+            .map((entry) => {
+            var _a;
+            if (typeof entry === 'string')
+                return { id: entry, text: entry };
+            if (entry && typeof entry === 'object' && typeof entry.text === 'string') {
+                const option = entry;
+                // Keep the original entry as `source` so selectChanged can emit it with any extra
+                // fields (e.g. `code`) the page passed in, as 3.x did.
+                return { id: (_a = option.id) !== null && _a !== void 0 ? _a : option.text, text: option.text, source: option };
+            }
+            return null;
+        })
+            .filter((option) => option !== null);
+    }
+    // 3.x matched `selected` against the id (as a string) or the text. An id match wins over a
+    // text match, so two options with the same text but different ids stay apart.
+    findSelected(options) {
+        var _a;
+        if (this.selected === undefined || this.selected === null)
+            return undefined;
+        const value = String(this.selected);
+        return (_a = options.find(option => String(option.id) === value)) !== null && _a !== void 0 ? _a : options.find(option => option.text === value);
+    }
+    get selectedOption() {
+        return this.findSelected(this.parsedOptions);
+    }
+    get triggerLabel() {
+        if (this.aria_label)
+            return this.aria_label;
+        // main_aria_label sets aria-label, which replaces aria-labelledby. Only use it when there is
+        // no label to keep aria-labelledby for; otherwise the label and the selected value would stop
+        // being announced.
+        return this.label ? undefined : this.main_aria_label || undefined;
     }
     focusOption(index) {
         const options = Array.from(this.el.querySelectorAll('.dda-input-dropdown-item[role="option"]'));
@@ -119,8 +171,9 @@ export class Ddaselect {
     }
     initialOptionIndex() {
         const options = this.parsedOptions;
-        const selectedIndex = options.indexOf(this.selected);
-        return selectedIndex >= 0 ? selectedIndex : 0;
+        const selected = this.findSelected(options);
+        const index = selected ? options.indexOf(selected) : -1;
+        return index >= 0 ? index : 0;
     }
     toggleSelect() {
         if (!this.disabled) {
@@ -149,12 +202,19 @@ export class Ddaselect {
         this.toggleSelect();
     }
     selectOption(option) {
+        var _a;
         if (!this.disabled) {
-            const changed = this.selected !== option;
-            this.selected = option;
+            const value = String(option.id);
+            // Compare against the currently *matched* option's id, not the raw `selected` prop: when
+            // `selected` holds text or a differently-typed id (e.g. a number), comparing it to
+            // `value` directly reported a change that had not happened.
+            const currentSelected = this.findSelected(this.parsedOptions);
+            const changed = String(currentSelected === null || currentSelected === void 0 ? void 0 : currentSelected.id) !== value;
+            this.selected = value;
             this.closeAndReturnFocus();
+            this.selectChanged.emit((_a = option.source) !== null && _a !== void 0 ? _a : { id: option.id, text: option.text });
             if (changed) {
-                this.selectionChange.emit({ value: option });
+                this.selectionChange.emit({ value, id: option.id, text: option.text });
             }
         }
     }
@@ -166,8 +226,17 @@ export class Ddaselect {
         }
     }
     render() {
+        var _a;
         const id = this.triggerId;
-        return (h(Host, { key: '1c91c9a3fe3d57849fbf1f2e54494412fbe39e15' }, h("div", { key: '87f88aa9629cfd9ee7cbe2b6b12ff21f1ad463b8', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: '31d3c458112c6a44f7e9d5c488e6c6959521faa9', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: 'cdf70b1a3ebfef09df49f3b399d2cdc960ea9fd3', class: "dda-dropdown-container" }, h("button", { key: '3223419582be3819dff4b0613999eb37a9e10cb9', name: this.toggle_button_name, "aria-label": this.aria_label, "aria-labelledby": this.label && !this.aria_label ? `${this.labelId} ${id}` : undefined, id: id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown }, this.selected || 'Select an option', h("i", { key: '9a14de25046bf78a44b5afa3575ace2b0031f8c6', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '48b9417d23766f0c8654df0f8653c7c28f6f5464', id: this.listboxId, role: "listbox", "aria-label": this.aria_label || this.label, class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": this.selected === option ? 'true' : 'false', tabIndex: index === this.initialOptionIndex() ? 0 : -1, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '391eefc548be3ee063cea84368917191a61b70f2', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'b9e5a701944138256c439a99375b3739a12a8b7d', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        const options = this.parsedOptions;
+        const current = this.findSelected(options);
+        // Computed once here (not per option below) to keep the list render O(n) instead of O(n^2).
+        const activeIndex = current ? options.indexOf(current) : 0;
+        const validation = this.error || this.validation_type;
+        return (h(Host, { key: '79b4f368bdab0911dde6303d33ab79c8ea093399' }, h("div", { key: '8f9d7984043832d14d72ed6770b5ea384b3e4015', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${validation} ` }, this.label && h("label", { key: 'c3e73bc801980fe409dde6078b5763edbc249292', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: '2572ef664b2aafcefd62c7361337d2aa9a649438', class: "dda-dropdown-container" }, h("button", { key: 'cda07037871e133d06a54c4da37abee49db11f59', name: this.toggle_button_name, "aria-label": this.triggerLabel, "aria-labelledby": this.label && !this.triggerLabel ? `${this.labelId} ${id}` : undefined, id: id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown, onBlur: this.onTriggerBlur }, current ? current.text : ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select an option'), h("i", { key: '3d8f579d35ad0516e78530b548d61858d0721831', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '66eb4b2edd1f716a95be787e4cfd9185936bc62f', id: this.listboxId, role: "listbox", "aria-label": this.triggerLabel || this.label, class: "dda-input-dropdown-list dda-select-list" }, options.length > 0 ? (options.map((option, index) => {
+            const isCurrent = current !== undefined && String(current.id) === String(option.id);
+            return (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": isCurrent ? 'true' : 'false', tabIndex: index === activeIndex ? 0 : -1, class: `dda-input-dropdown-item ${isCurrent ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option), key: `${index}-${option.id}` }, option.text));
+        })) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '31d9c4afb879454e109e7d6fb406b5467ef5c495', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '2b6ab09e5477120046fbacf530c514c8421a4aaa', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-select"; }
     static get originalStyleUrls() {
@@ -205,15 +274,25 @@ export class Ddaselect {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "string | Array<string | SelectOption>",
+                    "resolved": "(string | SelectOption)[] | string",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "SelectOption": {
+                            "location": "local",
+                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-select/dda-select.tsx",
+                            "id": "src/components/dda-select/dda-select.tsx::SelectOption"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Options as a JSON array string, e.g. `'[\"Dubai\",\"Abu Dhabi\",\"Sharjah\"]'`. Invalid JSON shows \"No options available\"."
+                    "text": "Options: a JSON array, or an array property, of strings (`[\"Dubai\",\"Sharjah\"]`) or 3.x `{ id, text }` objects (`[{\"id\":1,\"text\":\"Dubai\"}]`). Other entries are ignored. Invalid JSON shows \"No options available\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -232,7 +311,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The selected option. Must match an entry in `options`. The trigger shows \"Select an option\" when it is empty. Updated when the user picks an option. Mutable: the component assigns it."
+                    "text": "The selected option: its id, or its text. For string options the id is the text. Updated to the picked option's id (as a string) when the user picks one. Mutable: the component assigns it."
                 },
                 "getter": false,
                 "setter": false,
@@ -449,6 +528,82 @@ export class Ddaselect {
                 "setter": false,
                 "reflect": false,
                 "attribute": "option_select_button_name"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text in the trigger when nothing is selected. Default: `Select an option`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "input_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` sent in `selectBlurred`. Falls back to `button_id`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input_name"
+            },
+            "main_aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "3.x name of `aria_label`, used as the trigger's aria-label only when `label` is not set. `aria_label` wins when both are set; when `label` is set, `main_aria_label` is ignored and the trigger keeps its `aria-labelledby`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "main_aria_label"
+            },
+            "validation_type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "3.x name of `error` (the validation state class). `error` wins when both are set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validation_type"
             }
         };
     }
@@ -466,11 +621,47 @@ export class Ddaselect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new option."
+                    "text": "Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new `selected` value (the option id as a string); `detail.id` and `detail.text` are the option."
+                },
+                "complexType": {
+                    "original": "{ value: string; id: string | number; text: string }",
+                    "resolved": "{ value: string; id: string | number; text: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "selectChanged",
+                "name": "selectChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "3.x event: emitted each time the user picks one, even if it is already selected. For a string\noption this is `{ id, text }`; for an object option this is the original option object, extra\nfields included, as 3.x did."
+                },
+                "complexType": {
+                    "original": "SelectOption",
+                    "resolved": "SelectOption",
+                    "references": {
+                        "SelectOption": {
+                            "location": "local",
+                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-select/dda-select.tsx",
+                            "id": "src/components/dda-select/dda-select.tsx::SelectOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "selectBlurred",
+                "name": "selectBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "3.x event: emitted when the trigger loses focus, with `{ name, value }` \u2014 `input_name` (or `button_id`) and the selected text."
                 },
                 "complexType": {
-                    "original": "{ value: string }",
-                    "resolved": "{ value: string; }",
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
                     "references": {}
                 }
             }];

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

@@ -61,6 +61,22 @@ export default {
             control: { type: 'text' },
             description: 'Name for the option select button',
         },
+        placeholder: {
+            control: { type: 'text' },
+            description: 'Text in the trigger when nothing is selected',
+        },
+        input_name: {
+            control: { type: 'text' },
+            description: '3.x: name sent in the selectBlurred event',
+        },
+        main_aria_label: {
+            control: { type: 'text' },
+            description: '3.x name of aria_label; used only when there is no label',
+        },
+        validation_type: {
+            control: { type: 'text' },
+            description: '3.x name of the error/validation state',
+        },
     },
     parameters: {
         docs: {
@@ -85,17 +101,38 @@ export default {
     option_select_button_name="option_select_button_name"
 ></dda-select>
   \`\`\`
+
+  \`options\` also takes 3.x \`{ id, text }\` objects, and \`selected\` then takes the id:
+
+  \`\`\`html
+<dda-select
+    label="Emirate"
+    placeholder="Select an emirate"
+    selected="2"
+    options='[{"id":1,"text":"Dubai"},{"id":2,"text":"Abu Dhabi"},{"id":3,"text":"Sharjah"}]'
+></dda-select>
+
+    <script>
+      const select = document.querySelector('dda-select');
+      select.addEventListener('selectChanged', e => {
+        console.log('selectChanged:', e.detail);
+      });
+      select.addEventListener('selectionChange', e => {
+        console.log('selectionChange:', e.detail);
+      });
+    </script>
+  \`\`\`
   `,
             },
         },
     },
 };
-const Template = (args) => {
+const Template = args => {
     const attributes = Object.entries(args)
         .filter(([key, value]) => value !== undefined && key !== 'text' && key !== 'options')
         .map(([key, value]) => `${key}="${value}"`)
         .join(' ');
-    const optionsAttribute = `options='${JSON.stringify(args.options)}'`;
+    const optionsAttribute = `options='${typeof args.options === 'string' ? args.options : JSON.stringify(args.options)}'`;
     return `<dda-select ${attributes} ${optionsAttribute}></dda-select>`;
 };
 export const Default = Template.bind({});
@@ -111,8 +148,8 @@ Default.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
-    toggle_button_name: "toggle_button_name",
-    option_select_button_name: "option_select_button_name",
+    toggle_button_name: 'toggle_button_name',
+    option_select_button_name: 'option_select_button_name',
 };
 export const Small = Template.bind({});
 Small.args = {
@@ -127,8 +164,8 @@ Small.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
-    toggle_button_name: "toggle_button_name",
-    option_select_button_name: "option_select_button_name",
+    toggle_button_name: 'toggle_button_name',
+    option_select_button_name: 'option_select_button_name',
 };
 export const WithError = Template.bind({});
 WithError.args = {
@@ -143,8 +180,8 @@ WithError.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
-    toggle_button_name: "toggle_button_name",
-    option_select_button_name: "option_select_button_name",
+    toggle_button_name: 'toggle_button_name',
+    option_select_button_name: 'option_select_button_name',
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -158,6 +195,27 @@ Disabled.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
-    toggle_button_name: "toggle_button_name",
-    option_select_button_name: "option_select_button_name",
+    toggle_button_name: 'toggle_button_name',
+    option_select_button_name: 'option_select_button_name',
+};
+export const IdAndText = Template.bind({});
+IdAndText.args = {
+    label: 'Emirate',
+    options: JSON.stringify([
+        { id: 1, text: 'Dubai' },
+        { id: 2, text: 'Abu Dhabi' },
+        { id: 3, text: 'Sharjah' },
+    ]),
+    selected: '2',
+    placeholder: 'Select an emirate',
+    disabled: false,
+    helper_text: '',
+    error_message: '',
+    size: 'default',
+    custom_class: '',
+    component_mode: '',
+    button_id: 'button',
+    aria_label: 'select',
+    toggle_button_name: 'toggle_button_name',
+    option_select_button_name: 'option_select_button_name',
 };

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

@@ -78,12 +78,12 @@ export class DdaStickyFooter {
         const rightItems = parseJsonProp(this.rightLink, 'right-link');
         return (
         // An <aside>, not a <footer>: the page footer (dda-footer) is the only contentinfo landmark.
-        h("aside", { key: '98e82e7acac0d1fdced65fe2546e5d257490b188', class: { 'dda-footer': true, hidden: this.isHidden, 'has-more-button': !!this.moreIcon }, "aria-label": this.aria_label, "aria-hidden": this.isHidden ? 'true' : 'false', inert: this.isHidden }, h("div", { key: 'd258148342884ac034881435c6e2420710efd564', class: "footer-content" }, h("div", { key: '1e9e6fff6e2be9cdcf92e725381d8fc76076fa41', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '103330ac1c291614ce79d08ca262a93c4d350ea8' }, this.happinessIconSrc && (h("li", { key: '4056ba1c34d26f7f842b0fa3e6b23eafd692c172', class: "foot-icon-btn" }, h("dda-tooltip", { key: '2762fb68895c5c0c2b4a0495d62975a58c79ca27', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: 'cf40c7afe41bbb92ef1936126ffaf109a56e9ae9', href: this.happinessIconHref, id: this.happinessIconId }, h("img", { key: 'be106d991da1cf8ba76e1c9ad1576abe1db96fe9', src: this.img(this.happinessIconSrc, this.happinessIconSrcDark), alt: this.happinessIconAlt }))))), this.accessibilityIconSrc && (h("li", { key: '922ce8e7ac1d4c9336b939efbf112df4b70981a4', class: "foot-icon-btn" }, h("dda-tooltip", { key: '9c87d829d4df22939ad22c392ee3b67dcfaa12b6', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '0d79bf57f3c4388cb6b3edfd2f7d79609b76144d', href: this.accessibilityIconHref, id: this.accessibilityIconId }, h("img", { key: 'd1adceed79be93894994134052268e96589ffcd8', src: this.img(this.accessibilityIconSrc, this.accessibilityIconSrcDark), alt: this.accessibilityIconAlt }))))), (this.servicesIconSrc || this.servicesIconText) && (h("li", { key: '33f5966ee771f4f47f8c10213b8daa84b5e01230', class: "foot-icon-btn" }, h("dda-tooltip", { key: '4d5c0b2729afd7c9a9109102f0a5751928559817', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: '1eb5db319083a743976ecace4367ae8d231a1047', href: this.servicesIconHref, id: this.servicesIconId }, h("img", { key: '7b3008bc381efe03480b8ed9689608c16e9ca823', src: this.img(this.servicesIconSrc, this.servicesIconSrcDark), alt: this.servicesIconText ? '' : this.servicesIconAlt }), this.servicesIconText && h("span", { key: '61949470a1b493459e90196e0cc5c6f4d063bb50' }, this.servicesIconText))))))), !this.hideMiddleSection && middleLogos.length > 0 && (h("div", { key: 'ea2a35e9a890b6d909fcdad4a034d54b4c7f9e80', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '8400eef134e06fbf999b4bd31a1c22700ca49f4f', class: "foot-logo" }, middleLogos.map(logo => (h("li", null, h("dda-tooltip", { title_text: logo.tooltip, description: "", position: "top" }, h("a", { href: logo.href }, h("img", { src: logo.src, alt: logo.alt }))))))))), h("div", { key: '54d67beb3ff5041e0a855e526ebc05d987fd395f', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '1904a8afd5c0cb12c5f308d0c2b03618b01dff37', id: this.rightListId, class: { 'foot-right_links': true, 'show-dda-icon': this.rightOpen }, inert: !!this.moreIcon && !this.rightOpen && this.isMobile }, rightItems.length > 0
+        h("aside", { key: '3646462dd78e1e15798cbde5a74d75191cdd1086', class: { 'dda-footer': true, hidden: this.isHidden, 'has-more-button': !!this.moreIcon }, "aria-label": this.aria_label, "aria-hidden": this.isHidden ? 'true' : 'false', inert: this.isHidden }, h("div", { key: 'cef204100853f69250b15c7e71ef2d6b97df7fce', class: "footer-content" }, h("div", { key: '0bc5c97a4406ff13f240becca20212f78d2e96fc', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '70d02e19f02c4dd54cf533351dd70e28f9b9d00f' }, this.happinessIconSrc && (h("li", { key: 'e0202043b9b94772dec0ecce445ab1fff71545a2', class: "foot-icon-btn" }, h("dda-tooltip", { key: '0d3fb7aa55adca64a1b2cd5adb7c6d323ab358fd', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: 'b6617f12a5834e8c2edd86addc03416f19ea7af3', href: this.happinessIconHref, id: this.happinessIconId }, h("img", { key: '1689a7b0fa925862d7083870c1d90b6e2dbbc4ba', src: this.img(this.happinessIconSrc, this.happinessIconSrcDark), alt: this.happinessIconAlt }))))), this.accessibilityIconSrc && (h("li", { key: 'b2abd53e38316dffba4081fbdc2f32e2733e0f65', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'd59ddfeac093c7e213e5847a645a98cae907efbc', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '81fcac6b35eed1caf49017d18aa0960871ada04c', href: this.accessibilityIconHref, id: this.accessibilityIconId }, h("img", { key: '1fbec3dc783c99e16a66aec2edf6e09bf68e64aa', src: this.img(this.accessibilityIconSrc, this.accessibilityIconSrcDark), alt: this.accessibilityIconAlt }))))), (this.servicesIconSrc || this.servicesIconText) && (h("li", { key: '4a8bfc4edf865cab5d0dfd271d537a2bd889a170', class: "foot-icon-btn" }, h("dda-tooltip", { key: '48bccd2fc8736481a8446c9db30a014ac63d6ad8', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: '15c07ad10e9b29434ed40e1a0db429bb90e9531d', href: this.servicesIconHref, id: this.servicesIconId }, h("img", { key: '3ec96b68cd44f4468e219e46764a84d967ed3989', src: this.img(this.servicesIconSrc, this.servicesIconSrcDark), alt: this.servicesIconText ? '' : this.servicesIconAlt }), this.servicesIconText && h("span", { key: 'c8ebfa04088a46d883e920900ecb8f6880042be4' }, this.servicesIconText))))))), !this.hideMiddleSection && middleLogos.length > 0 && (h("div", { key: 'ffbce0f6070b63588bdf52b5660bdafd02937dc4', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '7b1ffaa87a43a549d5ff7c09acc7eedda8289776', class: "foot-logo" }, middleLogos.map(logo => (h("li", null, h("dda-tooltip", { title_text: logo.tooltip, description: "", position: "top" }, h("a", { href: logo.href }, h("img", { src: logo.src, alt: logo.alt }))))))))), h("div", { key: '1177349fa3617cc0a60cc36569e2005bd8d161b4', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '28cf955988ea1a1b4897015dbeddbcd19913c523', id: this.rightListId, class: { 'foot-right_links': true, 'show-dda-icon': this.rightOpen }, inert: !!this.moreIcon && !this.rightOpen && this.isMobile }, rightItems.length > 0
             ? rightItems.map(item => (h("li", { class: "foot-icon-btn" }, h("dda-tooltip", { title_text: item.RightLinkTooltip || item.LinkText, description: "", position: "top" }, h("a", { href: item.href, id: item.itemId, title: item.title }, item.IconName && (h("i", { class: item.IconFamily || 'material-icons', "aria-hidden": "true" }, item.IconName)), h("span", null, item.LinkText))))))
             : [
                 (this.locationLogoSrc || this.locationButtonIcon) && (h("li", { class: "foot-icon-btn" }, h("dda-tooltip", { title_text: this.locationButtonText, description: "", position: "top" }, h("a", { href: this.locationButtonHref }, this.renderLinkGraphic(this.locationLogoSrc, this.locationButtonIcon, this.locationButtonText))))),
                 (this.newsButtonSrc || this.newsButtonIcon) && (h("li", { class: "foot-icon-btn" }, h("dda-tooltip", { title_text: this.newsButtonText, description: "", position: "top" }, h("a", { href: this.newsButtonHref }, this.renderLinkGraphic(this.newsButtonSrc, this.newsButtonIcon, this.newsButtonText))))),
-            ], this.dubaiaeIconSrc && this.dubaiaeIconSmallSrc && (h("li", { key: '46e2339738039f1c72bf33774cdcbc691da90cf0', class: "foot-icon-btn" }, h("dda-tooltip", { key: '8cff02f4d003888c9f216aa80602ee107a0e7c5f', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: 'a0327d42a75196f4ad37b7a49d713e9eb08bffdf', href: this.dubaiaeIconHref, id: this.dubaiaeIconId }, h("img", { key: '831261649bdfd70e15718c45dcc85432fe069582', class: "dubaiae-text-icon", src: this.img(this.dubaiaeIconSrc, this.dubaiaeIconSrcDark), alt: this.dubaiaeIconAlt }), h("img", { key: 'ef212c8912b467bfdde01a090e82f355fd39e5dd', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: this.dubaiaeIconAlt }))))), this.aiIconSrc && (h("li", { key: 'fdc1ba032f6e0fcdb44f9cd71763797f86cc3b98', class: "foot-icon-btn" }, h("dda-tooltip", { key: '1f16f4968cae849c7ebce8199b8f29b613d67d55', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: '331c9e786c7f01cbb0f2ab5730c3f6fccd4dac16', href: this.aiIconHref, id: this.aiIconId }, h("img", { key: 'e15e6a11f0d07eb5c3e03e633f1f70bdecacf7c8', src: this.img(this.aiIconSrc, this.aiIconSrcDark), alt: this.aiIconAlt }))))), this.chatIconSrc && (h("li", { key: 'baa12806b144c59248bebc1fd97345f85fd04924', class: "foot-icon-btn" }, h("dda-tooltip", { key: '277dba6416abc5dfbd4bbf610c95c4d6cc730722', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '04867496deec0f284cf8cc583af32f19c6ba2a47', href: this.chatIconHref, id: this.chatIconId }, h("img", { key: '1dc1dad2f2323441660636bc3294a720bd0fb273', src: this.img(this.chatIconSrc, this.chatIconSrcDark), alt: this.chatIconAlt })))))), this.moreIcon && (h("button", { key: 'bfcd9e5aa6ce3a33632df965668954741471e25e', type: "button", class: "show-right-icon", "aria-label": this.more_button_label || 'More', "aria-expanded": this.rightOpen ? 'true' : 'false', "aria-controls": this.rightListId, onClick: () => (this.rightOpen = !this.rightOpen) }, h("i", { key: '6138d7b0a8f1923f603439fa2225e0c3f19a7566', class: this.moreIconFamily || 'material-icons', "aria-hidden": "true" }, this.moreIcon)))))));
+            ], this.dubaiaeIconSrc && this.dubaiaeIconSmallSrc && (h("li", { key: 'edc740c6c800ef96bc14f5543923f82a041d446c', class: "foot-icon-btn" }, h("dda-tooltip", { key: '827b9a1300bde258043c55733fd3547a9390abda', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: '5d8e8ed55f43e3615722365b9d26ec8f6e1c4b2f', href: this.dubaiaeIconHref, id: this.dubaiaeIconId }, h("img", { key: '4a1f27125a148e86f50f53afa1b930e0de090dd9', class: "dubaiae-text-icon", src: this.img(this.dubaiaeIconSrc, this.dubaiaeIconSrcDark), alt: this.dubaiaeIconAlt }), h("img", { key: '665af1359538e8355621f813a138f0eb9d7bd84b', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: this.dubaiaeIconAlt }))))), this.aiIconSrc && (h("li", { key: '01fee43f185be8bf1294aecbe52b055398b7b543', class: "foot-icon-btn" }, h("dda-tooltip", { key: '820c78282e14472ca990b12041db4ec4e642083e', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: '54eb1224021a028677e9b8d23006fbd9beb11fbf', href: this.aiIconHref, id: this.aiIconId }, h("img", { key: '6d1feb742d0ca78e690351535bbd9cbeebe0d5f5', src: this.img(this.aiIconSrc, this.aiIconSrcDark), alt: this.aiIconAlt }))))), this.chatIconSrc && (h("li", { key: 'af4d7ad217827506e99407da3a8101f32d7bde78', class: "foot-icon-btn" }, h("dda-tooltip", { key: '7478d66901785ce407d0a51ab8e80fa538f67768', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '4c8b819b05e00738e6b6a2a2c5361ba3480ec956', href: this.chatIconHref, id: this.chatIconId }, h("img", { key: '316c1e6691521684e21ca55ee6199a959f20528a', src: this.img(this.chatIconSrc, this.chatIconSrcDark), alt: this.chatIconAlt })))))), this.moreIcon && (h("button", { key: '2fc1d6684a5c59a364edf3cd3e7a7c1c03e097a9', type: "button", class: "show-right-icon", "aria-label": this.more_button_label || 'More', "aria-expanded": this.rightOpen ? 'true' : 'false', "aria-controls": this.rightListId, onClick: () => (this.rightOpen = !this.rightOpen) }, h("i", { key: 'e7b3e9c6ba9dec1af710039255832e5a2242b8bd', class: this.moreIconFamily || 'material-icons', "aria-hidden": "true" }, this.moreIcon)))))));
     }
     static get is() { return "dda-sticky-footer"; }
     static get originalStyleUrls() {

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

@@ -44,7 +44,7 @@ export class DdaTabs {
         }
     }
     render() {
-        return (h(Host, { key: '5e604aeca69071b4163a54f8f5a6f3a49c36112b' }, h("div", { key: '9b08673fc84df116c5b5c055e4ce1ff47127b978', role: "group", "aria-label": this.aria_label, class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.button_id, name: this.button_name, type: "button", "aria-pressed": this.active_tab === index ? 'true' : 'false', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, 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: 'cd618ae51b42c4b3537c9d79f9d0722c6fedcdf3' }, h("div", { key: '6c5ce0c1e8742ad322d845da606224b0caa9286c', role: "group", "aria-label": this.aria_label, class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.button_id, name: this.button_name, type: "button", "aria-pressed": this.active_tab === index ? 'true' : 'false', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, 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

@@ -119,7 +119,7 @@ export class DdaTextarea {
             this.custom_class, this.component_mode, this.textarea_name,
         ].filter(Boolean).join(' ');
         const id = this.inputId;
-        return (h(Host, { key: 'c5edab142a6817b728721f1a12e6582050d29410' }, h("div", { key: '67bf7f7bbef0f412b85f5040cce9c5cafcb8c890', class: textareaClass }, this.label && h("label", { key: 'e41f2bb1556278cd8bc733418eea6031ca66cc3d', id: this.labelId, htmlFor: this.enable_rich_editor ? undefined : id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
+        return (h(Host, { key: '22ab5c9ede23feedead5b61e2ed4963c1851ecbc' }, h("div", { key: 'cef06c4a45c19a9ae0eefddd2609b9e9e9f1e48c', class: textareaClass }, this.label && h("label", { key: '76fb6bce4a0510aab2a79209f450d201a24ef9a6', id: this.labelId, htmlFor: this.enable_rich_editor ? undefined : id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
         // F-015: previously a bare `<div id="editor">` — the visible
         // label's `for` cannot target a non-labelable <div>, and even
         // aria-labelledby here would be wrong: Quill turns this
@@ -127,7 +127,7 @@ export class DdaTextarea {
         // as a child `.ql-editor`, which is what AT and Tab actually
         // land on. The ARIA lives on quill.root (.ql-editor), applied
         // imperatively in syncRichEditorA11y() after mount.
-        h("div", { id: id, class: "dda-richeditor-field" })) : (h("textarea", { id: id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && (h("div", { key: 'f31f3c2467bcf9b65296f5c0117ebc5d27c4fdab', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '6e419e51c55c6427a7f9ae33d93b7b7a1639ea54', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: 'c9804b5734d99b02abf438119aa668b8facf8110', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: 'da29cc16cd25173e1834b61c5bfc1d11e878fa1d', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: 'a9e908888326a4bf968798fdc58df5706732ef12', id: this.errorId, class: "dda-error-message" }, h("span", { key: 'a03685c802486a01e2797740e459b636365778f8', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '845e5de4faceee90c1ce7f828eb298344f152418', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: '044631e0c851953de8334d51087d5c7cb430a1e3', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
+        h("div", { id: id, class: "dda-richeditor-field" })) : (h("textarea", { id: id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && (h("div", { key: '382ba6b5dc9755bf262adb033a118c1be6941bd8', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '5d07ab9a7f7698528fc731778bc668c69fa0e5ec', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '33236593cdafdf4ed5694e272f5c4fcf85ca2f68', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: '2845bd3bface431badd534f44f12faa748c1a718', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: 'cc1fabc27cd1bf0f87cfe6e3194c68a0d43ac7f7', id: this.errorId, class: "dda-error-message" }, h("span", { key: '731658aad2027ae1ae107ad58962acb6bbf40eb2', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '80c26defc477ed47439939cbb23875e0373c9598', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: 'e4f4ca076692226881b259322af66f87b18ccc38', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
     }
     static get is() { return "dda-textarea"; }
     static get originalStyleUrls() {

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

@@ -11,7 +11,7 @@ export class DdaToggle {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '594a044248a1ea4f445ed239d97c56a1976e167a' }, h("label", { key: '2d20d01b337379355004d902b60d9b499f9055fc', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '081734cff68c6228fc7daa23ce821e7ac5bc817f', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '7c41a8ece7705f6fb3bb779dcdca7e09ca7df610', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: 'cdf4855501fa3d62d2371179fdb7a28070b1f0ce' }, this.title_text && h("span", { key: '019febd23f5964bd936d3edca64e7d2010a7dfab', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: 'a5bdee7e1ccc27ab2279e5ae9e5cab37aa32f709', class: "toggle-supporting" }, this.supporting))))));
+        return (h(Host, { key: '034a0d08e3c605fe38f0f0b3244e1d5cc7442472' }, h("label", { key: '93539da2d2ccfa1e51d0eebf4cc1b234e1e03606', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '21c0ca32b52ed5cb69da4339f1fce9c26dcaf1fa', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '8d2def2951a2566625276ba4d350d2407c19af77', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: 'e56ce02068c3e3c87f3b7452a81b741560297274' }, this.title_text && h("span", { key: 'faeea2f00ee0c50f0b96b5e24c09da088a98f183', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: '7999b6126c0fefb6cb09ac67930e311dad18d2b2', class: "toggle-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {

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

@@ -31,7 +31,7 @@ export class DdaTooltip {
         this.el.removeEventListener('mouseleave', this.resetDismissed);
     }
     render() {
-        return (h(Host, { key: '6f9ecc5f00431d9bcd4d94ac3ec2636901540a6c' }, h("div", { key: 'cd08883c43bf2b03965b0d3c96a13e78aa690f02', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: '21ee3779a3bdef7ac2f53089e2e43b57634a60e0' }), h("div", { key: 'cda784b2367e27f3b6856ec67ad2a68058a7aed2', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: 'c8dc3672a03fc16589aadc1da1757bbb72f699c5' }, this.title_text), h("p", { key: 'a5082ddd48a0e60d07007bad1909ec7605d6ef95' }, this.description)))));
+        return (h(Host, { key: 'e77ebb12700ccbbef52e2d2138e0950d65127778' }, h("div", { key: 'ea64d67136e615b33138a61f1f1a4ba804db5eea', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: 'c191a8ff9be73014c2da7b1a4fdbcce57e94ba4d' }), h("div", { key: 'c6733ebddb99c659db89027384a50ba9c7836341', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '47c45f8411f5803c4ba59d0b9b4ac5c830b403c7' }, this.title_text), h("p", { key: '4f08ecda01307162262d7c79aa26e795ff03251b' }, this.description)))));
     }
     static get is() { return "dda-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-ui-card/dda-ui-card.js

@@ -28,7 +28,7 @@ export class DdaUiCard {
     }
     render() {
         const HeadingTag = this.headingTag;
-        return (h(Host, { key: '1bbdb967a31df80eb8d5bc04764a1caf1fa198b3' }, h("div", { key: 'daf4a4e9096e7a2bbd17b90e890cd12b034fb0fa', class: 'dda-card' }, h("div", { key: '36a0c9f0f2744a761d951e245741fe427a17d0c1', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '9062bafbd3168c130be10eb44d8154a8f66c68e8' }, !!this.icon && (h("span", { key: '2c0b9b94601f3a53dd9fe0480b8dbd95d427afea', class: 'dda-card-icon' }, h("i", { key: 'd1f692ab879ca203c0361ca96f1e92694417bf8d', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: '63b3fd072c5417695eba7b883be27b1f1d848841', class: 'dda-card-icon' }, h("img", { key: '7860e1a3df40a4fa4d35b06c1fb58f66f554563c', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: '0202e3ef4cc6dbed859f11c63d76c9df5a2c2340', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'd376be8224e3f0c48bf56d0e067e3e875352df98', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: '47be07e6756f019a12385aab8ee5063848fc2f56', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '5ee32e96529e3d5badad707cb9c1293b113e3370' }, h("i", { key: 'd1eb863f78293d3af3ed4b1df56c18126538c4b0', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: 'd0c885254ad24cbfda489377950ae178bf0cb134' })))));
+        return (h(Host, { key: 'd82fda87340a70612440a60808a854297d749883' }, h("div", { key: '8cb77a42b82ed7121af29a234e4c065a416887d5', class: 'dda-card' }, h("div", { key: 'e25298c9dbb2d9247bdc238f9c505180aae45b67', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '3d6d6e4b66a787270593fc53ecb9432ef87cd144' }, !!this.icon && (h("span", { key: '17d02a755a1a6345961ba4c922d2c5205ca79dcd', class: 'dda-card-icon' }, h("i", { key: 'a4eea58a0b1511548c2d60b12bc05068326ce339', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: 'fe5b33c447adb2a06c20495b576d185258a98bca', class: 'dda-card-icon' }, h("img", { key: '7db29168e53eebe578fb8241795a47862d732d13', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'c2c0a5bd81432dad7b5400c9011998f30823adbf', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '9620bfa353acba31cb43d4a818c11d17bb58ea6d', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'd81101699701091f7d952c6f38637a621fb27324', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: 'e7304fca873531077bb4cafda43e462b8d3403d4' }, h("i", { key: 'd13a118077f9a11b76ba06f5cb4f1ab20f9b5472', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: '995bf90013e00498354bfb9a3bfd6950032dd924' })))));
     }
     static get is() { return "dda-ui-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.js

@@ -69,7 +69,7 @@ export class DdaSegmentedTabs {
         this.segmentChange.emit(index);
     }
     render() {
-        return (h("div", { key: '53f6f24a1b70fed2a4b1bf12f01d04ea40a61cc6', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
+        return (h("div", { key: '4a72982d49270f6c04cee7fdeaafcba7cccc6d3c', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
             const isSelected = index === this.active_index;
             const className = `dda-segmented-item${isSelected ? ' active' : ''}`;
             return item.startsWith('fo') ? (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', "aria-label": this.iconLabel(item, index), onClick: () => this.selectSegment(index) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, item))) : (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, item));

package/dist/collection/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.js

@@ -20,7 +20,7 @@ export class DdaHorizontalStepper {
         }
     }
     render() {
-        return (h(Host, { key: '10e1418182c1cf52a9415bf84fbceae00b011add' }, h("div", { key: 'dbbc4fb5892954834c15512f76c551a7827b81e1', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
+        return (h(Host, { key: '30afa97eccb87ee8595802f451f2ca2f0624da2a' }, h("div", { key: '70d6126c99005e54565473c574bde94545584b58', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
     }
     static get is() { return "dda-horizontal-stepper"; }
     static get originalStyleUrls() {

package/dist/collection/components/stepper/dda-vertical-stepper/dda-vertical-stepper.js

@@ -24,7 +24,7 @@ export class DdaVerticalStepper {
     render() {
         var _a;
         const current = (_a = this.current_step) !== null && _a !== void 0 ? _a : this.current_Step;
-        return (h(Host, { key: '8d8d30895491f4053370c1fa392f81a8c8df91ac' }, h("div", { key: '558f122ea5c72cadb35efc70d31cd18ec1271ca1', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= current ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
+        return (h(Host, { key: '9aefae11819e6581b65a39af851806fb2c4cfd75' }, h("div", { key: 'b9f812a1626f99993e07a3cf07c0a0a15ed42f11', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= current ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
     }
     static get is() { return "dda-vertical-stepper"; }
     static get originalStyleUrls() {