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

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

@@ -119,14 +119,24 @@ export class Ddaselect {
     render() {
         const labelId = `${this.button_id}-label`;
         const valueId = `${this.button_id}-value`;
-        return (h(Host, { key: 'ecf43cd602ef0f98974d1c76cfd50ac7357b6a08' }, h("div", { key: '4c15c3048ad62d235b7259cbf3f39921909ce5e5', class: `
+        return (h(Host, { key: '1695d610ca724cf642bf21a10e5fd449719e7148' }, h("div", { key: '262e8921a9993aaae454624119a6b5382e15b7bf', class: `
             dda-input-container ${this.custom_class} 
             ${this.component_mode} 
             ${this.disabled ? 'dda-input-disabled' : ''} 
             dda-input-size-${this.size} dda-validation-${this.validation_type}
-          ` }, this.label && (h("span", { key: 'e58cda1941ef732a951dc06f7c01f7d904a1c8c3', id: labelId, class: "dda-input-label" }, this.label)), h("div", { key: '6885ef524717d3b8f9850b3995f56ae5194e748a', class: "dda-dropdown-container" }, h("button", { key: 'a4e6e30acdf55e12aa4742f9dc824c9e1eec0b57', name: this.toggle_button_name, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", "aria-labelledby": `${labelId} ${this.button_id}`, disabled: this.disabled, onClick: () => this.toggleSelect(), onBlur: this.handleBlur }, h("span", { key: '8f67e50593affdb2b558200091c2aecd53e9c387', id: valueId, class: "dda-select-button-label" }, this.selectedText || this.placeholder), h("i", { key: '423ca7dcd2b51118ffa5e5cddaa86d05ae981e5d', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: 'ffcefb669f4400f26ffff871092cf22ac977a2d4', class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: `option${this.numberToWord(index + 1)}`, type: "button", class: `dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`, role: "option", "aria-selected": this.selectedId === option.id ? 'true' : 'false', onClick: () => this.selectOption(option) }, option.text)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.validation_type === 'error' && this.error_message ? (h("span", { class: "dda-error-message", id: this.validation_id, role: "alert" }, this.error_message)) : (this.helper_text && (h("span", { class: "dda-helper-text", id: this.validation_id }, this.helper_text))))));
+          ` }, this.label && (h("span", { key: '3de023aee88b99523b18072bdd523232b4541203', id: labelId, class: "dda-input-label" }, this.label)), h("div", { key: 'e47bc1b665903cdda4432c59aea76fa33350de9c', class: "dda-dropdown-container" }, h("button", { key: '31ee45ed59da1db07ba971e3fee6b0766a96762b', name: this.toggle_button_name, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", "aria-labelledby": `${labelId} ${this.button_id}`, disabled: this.disabled, onClick: () => this.toggleSelect(), onBlur: this.handleBlur }, h("span", { key: '50c26dcecd11aa6c98ee98cf0cba349a430b3bd2', id: valueId, class: "dda-select-button-label" }, this.selectedText || this.placeholder), h("i", { key: 'aceb250923afa0e5e18ca7622d96a192c04a8a7c', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '9e7514e189fa2f61c5b6b45f03e9d11b64b1aeea', class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: `option${this.numberToWord(index + 1)}`, type: "button", class: `dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`, role: "option", "aria-selected": this.selectedId === option.id ? 'true' : 'false', onClick: () => this.selectOption(option) }, option.text)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.validation_type === 'error' && this.error_message ? (h("span", { class: "dda-error-message", id: this.validation_id, role: "alert" }, this.error_message)) : (this.helper_text && (h("span", { class: "dda-helper-text", id: this.validation_id }, this.helper_text))))));
     }
     static get is() { return "dda-select"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../global/input.css", "../../global/global.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../global/input.css", "../../global/global.css"]
+        };
+    }
     static get properties() {
         return {
             "label": {

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

@@ -1 +1 @@
-{"version":3,"file":"dda-select.js","sourceRoot":"","sources":["../../../src/components/dda-select/dda-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element, Event, EventEmitter, Watch, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-select',\r\n  // styleUrls: ['../../global/input.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class Ddaselect {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() label: string;\r\n  @Prop() options: string;\r\n  @Prop() selected: string; // can be id or text\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() error?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() button_id: string;\r\n  @Prop() toggle_button_name: string;\r\n  @Prop() option_select_button_name: string;\r\n  @Prop() placeholder: string = '';\r\n  @Prop() main_aria_label: string = '';\r\n  @Prop() input_name: string = '';\r\n\r\n  @State() is_open: boolean = false;\r\n  @State() selectedId: number;\r\n  @State() selectedText: string;\r\n\r\n  @Event() selectChanged: EventEmitter<{ id: number; text: string }>;\r\n  @Event() onChanged: EventEmitter<any>;\r\n\r\n  @Event() selectBlurred: EventEmitter<{ name: string; value: string }>;\r\n  @Event() onBlurred: EventEmitter<any>;\r\n\r\n  private get parsedOptions(): { id: number; text: string }[] {\r\n    try {\r\n      return JSON.parse(this.options);\r\n    } catch {\r\n      return [];\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === this.selected || opt.text === this.selected);\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    }\r\n    if (this.selected) {\r\n      this.watchSelected(this.selected);\r\n    }\r\n  }\r\n\r\n  toggleSelect() {\r\n    if (!this.disabled) {\r\n      this.is_open = !this.is_open;\r\n    }\r\n  }\r\n\r\n  selectOption(option: { id: any; text: string }) {\r\n    if (!this.disabled) {\r\n      this.selectedId = option.id;\r\n      this.selectedText = option.text;\r\n      this.is_open = false;\r\n      this.selectChanged.emit(option);\r\n      this.onChanged.emit(option.id);\r\n\r\n      this.el.dispatchEvent(\r\n        new InputEvent('input', {\r\n          bubbles: true,\r\n          composed: true,\r\n          data: option.id,\r\n          inputType: 'select',\r\n        }),\r\n      );\r\n    }\r\n  }\r\n\r\n  handleClickOutside = (event: MouseEvent) => {\r\n    if (this.is_open && !this.el.contains(event.target as Node)) {\r\n      this.is_open = false;\r\n    }\r\n  };\r\n\r\n  handleBlur = () => {\r\n    this.selectBlurred.emit({\r\n      name: this.input_name || this.button_id,\r\n      value: this.selectedText || '',\r\n    });\r\n    this.onBlurred.emit(this.selectedId);\r\n\r\n    this.el.dispatchEvent(\r\n      new FocusEvent('blur', {\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  };\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  @Method()\r\n  async setSelected(value: string | number) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n      this.selected = selectedOption.id.toString();\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n      this.selected = '';\r\n    }\r\n  }\r\n\r\n  async setValue(value: string | number) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n      this.selected = selectedOption.id.toString();\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n      this.selected = '';\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async getSelectedText() {\r\n    return this.selectedText;\r\n  }\r\n\r\n  async getValue() {\r\n    return this.selectedText || '';\r\n  }\r\n\r\n  @Watch('selected')\r\n  watchSelected(newVal: string) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === newVal || opt.text === newVal);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n    }\r\n  }\r\n\r\n  private numberToWord(num: number): string {\r\n    const words = ['One', 'Two', 'Three', 'Four', 'Five'];\r\n    return words[num - 1] || num.toString();\r\n  }\r\n\r\n  render() {\r\n    const labelId = `${this.button_id}-label`;\r\n    const valueId = `${this.button_id}-value`;\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={`\r\n            dda-input-container ${this.custom_class} \r\n            ${this.component_mode} \r\n            ${this.disabled ? 'dda-input-disabled' : ''} \r\n            dda-input-size-${this.size} dda-validation-${this.validation_type}\r\n          `}\r\n        >\r\n          {this.label && (\r\n            <span id={labelId} class=\"dda-input-label\">\r\n              {this.label}\r\n            </span>\r\n          )}\r\n          <div class=\"dda-dropdown-container\">\r\n            <button\r\n              name={this.toggle_button_name}\r\n              id={this.button_id}\r\n              type=\"button\"\r\n              class=\"dda-input-field dda-select-header\"\r\n              aria-labelledby={`${labelId} ${this.button_id}`}\r\n              disabled={this.disabled}\r\n              onClick={() => this.toggleSelect()}\r\n              onBlur={this.handleBlur}\r\n            >\r\n              <span id={valueId} class=\"dda-select-button-label\">\r\n                {this.selectedText || this.placeholder}\r\n              </span>\r\n              <i class=\"material-icons\" aria-hidden=\"true\">\r\n                {this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n              </i>\r\n            </button>\r\n\r\n            {this.is_open && (\r\n              <div class=\"dda-input-dropdown-list dda-select-list\">\r\n                {this.parsedOptions.length > 0 ? (\r\n                  this.parsedOptions.map((option, index) => (\r\n                    <button\r\n                      name={`option${this.numberToWord(index + 1)}`}\r\n                      type=\"button\"\r\n                      class={`dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`}\r\n                      role=\"option\"\r\n                      aria-selected={this.selectedId === option.id ? 'true' : 'false'}\r\n                      onClick={() => this.selectOption(option)}\r\n                    >\r\n                      {option.text}\r\n                    </button>\r\n                  ))\r\n                ) : (\r\n                  <div class=\"dda-input-dropdown-item\">No options available</div>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {this.validation_type === 'error' && this.error_message ? (\r\n            <span class=\"dda-error-message\" id={this.validation_id} role=\"alert\">\r\n              {this.error_message}\r\n            </span>\r\n          ) : (\r\n            this.helper_text && (\r\n              <span class=\"dda-helper-text\" id={this.validation_id}>\r\n                {this.helper_text}\r\n              </span>\r\n            )\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dda-select.js","sourceRoot":"","sources":["../../../src/components/dda-select/dda-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element, Event, EventEmitter, Watch, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-select',\r\n  styleUrls: ['../../global/input.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class Ddaselect {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() label: string;\r\n  @Prop() options: string;\r\n  @Prop() selected: string; // can be id or text\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() error?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() button_id: string;\r\n  @Prop() toggle_button_name: string;\r\n  @Prop() option_select_button_name: string;\r\n  @Prop() placeholder: string = '';\r\n  @Prop() main_aria_label: string = '';\r\n  @Prop() input_name: string = '';\r\n\r\n  @State() is_open: boolean = false;\r\n  @State() selectedId: number;\r\n  @State() selectedText: string;\r\n\r\n  @Event() selectChanged: EventEmitter<{ id: number; text: string }>;\r\n  @Event() onChanged: EventEmitter<any>;\r\n\r\n  @Event() selectBlurred: EventEmitter<{ name: string; value: string }>;\r\n  @Event() onBlurred: EventEmitter<any>;\r\n\r\n  private get parsedOptions(): { id: number; text: string }[] {\r\n    try {\r\n      return JSON.parse(this.options);\r\n    } catch {\r\n      return [];\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === this.selected || opt.text === this.selected);\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    }\r\n    if (this.selected) {\r\n      this.watchSelected(this.selected);\r\n    }\r\n  }\r\n\r\n  toggleSelect() {\r\n    if (!this.disabled) {\r\n      this.is_open = !this.is_open;\r\n    }\r\n  }\r\n\r\n  selectOption(option: { id: any; text: string }) {\r\n    if (!this.disabled) {\r\n      this.selectedId = option.id;\r\n      this.selectedText = option.text;\r\n      this.is_open = false;\r\n      this.selectChanged.emit(option);\r\n      this.onChanged.emit(option.id);\r\n\r\n      this.el.dispatchEvent(\r\n        new InputEvent('input', {\r\n          bubbles: true,\r\n          composed: true,\r\n          data: option.id,\r\n          inputType: 'select',\r\n        }),\r\n      );\r\n    }\r\n  }\r\n\r\n  handleClickOutside = (event: MouseEvent) => {\r\n    if (this.is_open && !this.el.contains(event.target as Node)) {\r\n      this.is_open = false;\r\n    }\r\n  };\r\n\r\n  handleBlur = () => {\r\n    this.selectBlurred.emit({\r\n      name: this.input_name || this.button_id,\r\n      value: this.selectedText || '',\r\n    });\r\n    this.onBlurred.emit(this.selectedId);\r\n\r\n    this.el.dispatchEvent(\r\n      new FocusEvent('blur', {\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  };\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  @Method()\r\n  async setSelected(value: string | number) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n      this.selected = selectedOption.id.toString();\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n      this.selected = '';\r\n    }\r\n  }\r\n\r\n  async setValue(value: string | number) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n      this.selected = selectedOption.id.toString();\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n      this.selected = '';\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async getSelectedText() {\r\n    return this.selectedText;\r\n  }\r\n\r\n  async getValue() {\r\n    return this.selectedText || '';\r\n  }\r\n\r\n  @Watch('selected')\r\n  watchSelected(newVal: string) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === newVal || opt.text === newVal);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n    }\r\n  }\r\n\r\n  private numberToWord(num: number): string {\r\n    const words = ['One', 'Two', 'Three', 'Four', 'Five'];\r\n    return words[num - 1] || num.toString();\r\n  }\r\n\r\n  render() {\r\n    const labelId = `${this.button_id}-label`;\r\n    const valueId = `${this.button_id}-value`;\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={`\r\n            dda-input-container ${this.custom_class} \r\n            ${this.component_mode} \r\n            ${this.disabled ? 'dda-input-disabled' : ''} \r\n            dda-input-size-${this.size} dda-validation-${this.validation_type}\r\n          `}\r\n        >\r\n          {this.label && (\r\n            <span id={labelId} class=\"dda-input-label\">\r\n              {this.label}\r\n            </span>\r\n          )}\r\n          <div class=\"dda-dropdown-container\">\r\n            <button\r\n              name={this.toggle_button_name}\r\n              id={this.button_id}\r\n              type=\"button\"\r\n              class=\"dda-input-field dda-select-header\"\r\n              aria-labelledby={`${labelId} ${this.button_id}`}\r\n              disabled={this.disabled}\r\n              onClick={() => this.toggleSelect()}\r\n              onBlur={this.handleBlur}\r\n            >\r\n              <span id={valueId} class=\"dda-select-button-label\">\r\n                {this.selectedText || this.placeholder}\r\n              </span>\r\n              <i class=\"material-icons\" aria-hidden=\"true\">\r\n                {this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n              </i>\r\n            </button>\r\n\r\n            {this.is_open && (\r\n              <div class=\"dda-input-dropdown-list dda-select-list\">\r\n                {this.parsedOptions.length > 0 ? (\r\n                  this.parsedOptions.map((option, index) => (\r\n                    <button\r\n                      name={`option${this.numberToWord(index + 1)}`}\r\n                      type=\"button\"\r\n                      class={`dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`}\r\n                      role=\"option\"\r\n                      aria-selected={this.selectedId === option.id ? 'true' : 'false'}\r\n                      onClick={() => this.selectOption(option)}\r\n                    >\r\n                      {option.text}\r\n                    </button>\r\n                  ))\r\n                ) : (\r\n                  <div class=\"dda-input-dropdown-item\">No options available</div>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {this.validation_type === 'error' && this.error_message ? (\r\n            <span class=\"dda-error-message\" id={this.validation_id} role=\"alert\">\r\n              {this.error_message}\r\n            </span>\r\n          ) : (\r\n            this.helper_text && (\r\n              <span class=\"dda-helper-text\" id={this.validation_id}>\r\n                {this.helper_text}\r\n              </span>\r\n            )\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class DdaSplitButton {
     constructor() {
-        this.button_type = 'button';
+        this.text_button_type = 'button';
         this.disabled = false;
         this.start_icon_family = '';
         this.start_icon = '';
@@ -9,49 +9,90 @@ export class DdaSplitButton {
         this.aria_label = '';
         this.button_color = 'primary';
         this.button_shape = '';
-        this.icon_button_shape = '';
+        this.toggle_button_shape = '';
         this.custom_class = '';
-        this.button_name = '';
+        this.text_button_name = '';
+        this.is_open = false;
         this.handleClick = (event) => {
             if (this.disabled)
                 return;
             this.buttonClick.emit({
                 event,
-                id: this.button_id,
+                id: this.text_button_id,
                 value: this.value,
-                name: this.button_name,
+                name: this.text_button_name,
             });
         };
+        this.handleClickOutside = (event) => {
+            if (this.is_open && !this.el.contains(event.target)) {
+                this.is_open = false;
+            }
+        };
+    }
+    toggleSelect() {
+        if (!this.disabled) {
+            this.is_open = !this.is_open;
+        }
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+    componentDidLoad() {
+        // after first render, move slotted menu inside container
+        this.moveMenuToContainer();
+    }
+    componentDidRender() {
+        // ensure menu stays inside container after re-renders (defensive)
+        this.moveMenuToContainer();
+    }
+    moveMenuToContainer() {
+        // find the visible container inside this component
+        const container = this.el.querySelector('.split-btn-list');
+        if (!container)
+            return;
+        // Only consider direct children of host that carry slot="menu".
+        const hostChildren = Array.from(this.el.children);
+        const slotted = hostChildren.filter((c) => c.getAttribute && c.getAttribute('slot') === 'menu');
+        slotted.forEach((node) => {
+            // if it's already inside container, skip
+            if (node.parentElement !== container) {
+                container.appendChild(node);
+            }
+        });
     }
     render() {
-        const buttonClass = [
-            'dda-split-btn',
+        const textButtonClass = [
+            'dda-split-btn', // unique for main button
+            `btn-color-${this.button_color}`,
+            this.size ? `btn-size-${this.size}` : '',
+            this.button_shape ? `split-btn-main-shape-${this.button_shape}` : '',
+            this.gap ? `dda-gap-${this.gap}` : '',
+            this.custom_class,
+            this.component_mode,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const toggleButtonClass = [
+            'dda-split-btn dda-split-btn-toggle', // unique for toggle button
             `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.button_shape ? `split-icon-btn-shape-${this.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" }))));
+        const listClass = `split-btn-list ${this.is_open ? 'open' : 'closed'}`;
+        return (h(Host, { key: '557dd738ecda2ea9b887f26a649545d636739162' }, h("div", { key: '8cf1af27d4518266bcfa3ad973e5caf747752e4a', class: "split-btn-container" }, h("button", { key: '7d37f0b271365ad447a605f87f4933ade5c51bba', id: this.text_button_id, type: this.text_button_type, class: textButtonClass, disabled: this.disabled, "aria-label": this.aria_label || this.button_text, name: this.text_button_name, value: this.value, onClick: this.handleClick }, this.start_icon && (h("i", { key: 'f6244bede898854205902c83febd164f2a8c7772', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, this.start_icon)), h("span", { key: '5785f0550374e9b71225111c1473bc3a40808490' }, this.button_text)), h("button", { key: 'a8158ad76834a12c564771a91237a452ae917323', type: "button", class: toggleButtonClass, disabled: this.disabled, onClick: () => this.toggleSelect() }, h("i", { key: '632d4c992c4da668770292d9b2b0881d0d85a557', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), h("div", { key: '88988abe9f2a3173f34356a030fdd03055c94139', class: listClass, "aria-hidden": !this.is_open, role: "menu" }, h("slot", { key: 'b7c9e16e3c36b64d6aa185ced7da41ff1f02cc76', name: "menu" })))));
     }
     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": {
+            "text_button_type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -67,7 +108,7 @@ export class DdaSplitButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_type",
+                "attribute": "text_button_type",
                 "reflect": false,
                 "defaultValue": "'button'"
             },
@@ -230,7 +271,7 @@ export class DdaSplitButton {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "icon_button_shape": {
+            "toggle_button_shape": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -246,7 +287,7 @@ export class DdaSplitButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon_button_shape",
+                "attribute": "toggle_button_shape",
                 "reflect": false,
                 "defaultValue": "''"
             },
@@ -308,7 +349,7 @@ export class DdaSplitButton {
                 "attribute": "component_mode",
                 "reflect": false
             },
-            "button_id": {
+            "text_button_id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -324,10 +365,10 @@ export class DdaSplitButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
+                "attribute": "text_button_id",
                 "reflect": false
             },
-            "button_name": {
+            "text_button_name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -343,7 +384,7 @@ export class DdaSplitButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_name",
+                "attribute": "text_button_name",
                 "reflect": false,
                 "defaultValue": "''"
             },
@@ -368,6 +409,11 @@ export class DdaSplitButton {
             }
         };
     }
+    static get states() {
+        return {
+            "is_open": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "buttonClick",
@@ -391,5 +437,6 @@ export class DdaSplitButton {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=dda-split-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dda-split-button.js","sourceRoot":"","sources":["../../../src/components/dda-split-button/dda-split-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,cAAc;IAL3B;QAMU,gBAAW,GAAW,QAAQ,CAAC;QAC/B,aAAQ,GAAY,KAAK,CAAC;QAC1B,sBAAiB,GAAW,EAAE,CAAC;QAC/B,eAAU,GAAW,EAAE,CAAC;QACxB,gBAAW,GAAW,EAAE,CAAC;QACzB,eAAU,GAAY,EAAE,CAAC;QACzB,iBAAY,GAAW,SAAS,CAAC;QAEjC,iBAAY,GAAY,EAAE,CAAC;QAC3B,sBAAiB,GAAY,EAAE,CAAC;QAEhC,iBAAY,GAAY,EAAE,CAAC;QAG3B,gBAAW,GAAY,EAAE,CAAC;QAK1B,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK;gBACL,EAAE,EAAE,IAAI,CAAC,SAAS;gBAClB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,WAAW;aACvB,CAAC,CAAC;QACL,CAAC,CAAC;KA6CH;IA1CC,MAAM;QACJ,MAAM,WAAW,GAAG;YAClB,eAAe;YACf,aAAa,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;YACxC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE;YAC/D,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;YAClE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE;YACrC,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB;aAEA,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEX,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,+DACA,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAC/C,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW;oBAExB,IAAI,CAAC,UAAU,IAAI,CAChB,0DAAG,KAAK,EAAC,0CAA0C,iBAAa,MAAM,IACrE,IAAI,CAAC,UAAU,CACZ,CACP;oBACA,IAAI,CAAC,WAAW,CACR;gBACT,+DAAQ,KAAK,EAAC,iBAAiB,GAEtB,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}
+{"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, State, Element } 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() text_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() toggle_button_shape?: string = '';\r\n  @Prop() gap?: number;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() text_button_id: string;\r\n  @Prop() text_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  /*toogle Button*/\r\n  @Element() el: HTMLElement;\r\n  @State() is_open: boolean = false;\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.text_button_id,\r\n      value: this.value,\r\n      name: this.text_button_name,\r\n    });\r\n  };\r\n \r\n  toggleSelect() {\r\n    if (!this.disabled) {\r\n      this.is_open = !this.is_open;\r\n    }\r\n  }\r\n  handleClickOutside = (event: MouseEvent) => {\r\n    if (this.is_open && !this.el.contains(event.target as Node)) {\r\n      this.is_open = false;\r\n    }\r\n  };\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // after first render, move slotted menu inside container\r\n    this.moveMenuToContainer();\r\n  }\r\n\r\n  componentDidRender() {\r\n    // ensure menu stays inside container after re-renders (defensive)\r\n    this.moveMenuToContainer();\r\n  }\r\n\r\n  private moveMenuToContainer() {\r\n    // find the visible container inside this component\r\n    const container = this.el.querySelector('.split-btn-list') as HTMLElement | null;\r\n    if (!container) return;\r\n\r\n    // Only consider direct children of host that carry slot=\"menu\".\r\n    const hostChildren = Array.from(this.el.children) as Element[];\r\n    const slotted = hostChildren.filter((c) => c.getAttribute && c.getAttribute('slot') === 'menu');\r\n\r\n    slotted.forEach((node) => {\r\n      // if it's already inside container, skip\r\n      if (node.parentElement !== container) {\r\n        container.appendChild(node);\r\n      }\r\n    });\r\n  }\r\n\r\n\r\n\r\n  render() {\r\n  const textButtonClass = [\r\n    'dda-split-btn',                  // unique for main button\r\n    `btn-color-${this.button_color}`,\r\n    this.size ? `btn-size-${this.size}` : '',\r\n    this.button_shape ? `split-btn-main-shape-${this.button_shape}` : '',\r\n    this.gap ? `dda-gap-${this.gap}` : '',\r\n    this.custom_class,\r\n    this.component_mode,\r\n  ]\r\n  .filter(Boolean)\r\n  .join(' ');\r\n\r\n  const toggleButtonClass = [\r\n    'dda-split-btn dda-split-btn-toggle',                // unique for toggle button\r\n    `btn-color-${this.button_color}`,\r\n    this.size ? `btn-size-${this.size}` : '',\r\n    this.button_shape ? `split-icon-btn-shape-${this.button_shape}` : '',\r\n    this.gap ? `dda-gap-${this.gap}` : '',\r\n    this.custom_class,\r\n    this.component_mode,\r\n  ]\r\n  .filter(Boolean)\r\n  .join(' ');\r\n\r\n   const listClass = `split-btn-list ${this.is_open ? 'open' : 'closed'}`;\r\n\r\n  return (\r\n    <Host>\r\n      <div class=\"split-btn-container\">\r\n        {/* Main action button */}\r\n        <button\r\n          id={this.text_button_id}\r\n          type={this.text_button_type}\r\n          class={textButtonClass}\r\n          disabled={this.disabled}\r\n          aria-label={this.aria_label || this.button_text}\r\n          name={this.text_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          <span>{this.button_text}</span>\r\n        </button>\r\n\r\n        {/* Dropdown toggle button */}\r\n        <button \r\n          type=\"button\"\r\n          class={toggleButtonClass}\r\n          disabled={this.disabled}\r\n          onClick={() => this.toggleSelect()}\r\n        >\r\n          <i class=\"material-icons\" aria-hidden=\"true\">\r\n            {this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n          </i>\r\n        </button>\r\n\r\n        <div class={listClass} aria-hidden={!this.is_open} role=\"menu\">\r\n            <slot name=\"menu\"></slot>\r\n        </div>\r\n\r\n\r\n        {/* {this.is_open && (\r\n          <div class=\"split-btn-list\">\r\n            <slot name=\"menu\"></slot>\r\n          </div>\r\n        )} */}\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

@@ -1,5 +1,5 @@
 export default {
-    title: 'Components/DDA Split Button',
+    title: 'Components/DDA Split Button/DDA Split Button',
     tags: ['autodocs'],
     parameters: {
         docs: {
@@ -12,11 +12,12 @@ To use the \`<dda-split-button>\` component, pass the following props:
     button_color="default-primary"
     start_icon="sentiment_satisfied"
     button_text: "Button"
+    end_icon="arrow_forward"
     custom_class=""
     component_mode=""
-    button_id="button"
+    text_button_id="button"
     aria_label="button"
-    button_name="button"
+    text_button_name="button"
     value="my-value"
     >
 </dda-split-button>
@@ -44,21 +45,21 @@ document.querySelector('dda-split-button').addEventListener('buttonClick', (e) =
                 'secondary', 'success', 'warning', 'surface', 'surface-variant', 'disabled',
             ],
         },
-        button_type: { control: 'select', options: ['button', 'submit', 'reset'] },
+        text_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'] },
+        toggle_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'],
+            options: ['dark-mode', 'light-mode'],
             description: 'Mode of the button component',
         },
-        button_id: { control: 'text', description: 'ID of the button' },
+        text_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' },
+        text_button_name: { control: 'text', description: 'Name of the button' },
         value: { control: 'text', description: 'Value of the button' },
         disabled: { control: 'boolean', description: 'Disable the button' },
     },
@@ -79,7 +80,7 @@ const Template = (args) => {
     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}"]`);
+        const button = document.querySelector(`dda-split-button[button_id="${args.text_button_id}"]`);
         if (button) {
             button.removeEventListener('buttonClick', handleButtonClick);
             button.addEventListener('buttonClick', handleButtonClick);
@@ -100,13 +101,13 @@ const handleButtonClick = (e) => {
 };
 export const DefaultPrimary = Template.bind({});
 DefaultPrimary.args = {
-    button_type: "button",
+    text_button_type: "button",
     button_color: 'default-primary',
     start_icon: 'sentiment_satisfied',
     button_text: 'Button',
-    button_id: 'default-primary-btn',
+    text_button_id: 'default-primary-btn',
     aria_label: 'default primary button',
-    button_name: 'defaultPrimaryButton',
+    text_button_name: 'defaultPrimaryButton',
     value: 'default-primary-value',
     button_shape: 'default',
     size: 'md',
@@ -117,9 +118,27 @@ DefaultPrimary.args = {
     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')" });
+ErrorPrimary.args = Object.assign(Object.assign({}, DefaultPrimary.args), { button_color: 'error-primary', start_icon: 'sentiment_satisfied', button_text: 'Button', text_button_id: 'default-primary-btn', aria_label: 'default primary button', text_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')" });
+SurfacePrimary.args = Object.assign(Object.assign({}, DefaultPrimary.args), { button_color: 'onsurface-primary', start_icon: 'sentiment_satisfied', button_text: 'Button', text_button_id: 'default-primary-btn', aria_label: 'default primary button', text_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')" });
+Disabled.args = Object.assign(Object.assign({}, DefaultPrimary.args), { button_color: 'disabled', text_button_id: 'disabled-button', disabled: true, custom_class: '', component_mode: '', onclick: "console.log('native click')" });
+export const IconButton = Template.bind({});
+IconButton.args = {
+    text_button_type: "button",
+    button_color: 'default-primary',
+    start_icon: 'sentiment_satisfied',
+    text_button_id: 'icon-button',
+    aria_label: 'icon button',
+    text_button_name: 'iconButton',
+    value: 'icon-value',
+    toggle_button_shape: "default",
+    size: 'md',
+    disabled: false,
+    custom_class: '',
+    component_mode: '',
+    onclick: "console.log('native click')"
+};
+export const IconButtonDisabled = Template.bind({});
+IconButtonDisabled.args = Object.assign(Object.assign({}, IconButton.args), { button_color: 'disabled', text_button_id: 'icon-button-disabled', 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

@@ -1 +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"]}
+{"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/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    end_icon=\"arrow_forward\"\r\n    custom_class=\"\"\r\n    component_mode=\"\"\r\n    text_button_id=\"button\"\r\n    aria_label=\"button\"\r\n    text_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    text_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    toggle_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: ['dark-mode', 'light-mode'],\r\n      description: 'Mode of the button component',\r\n    },\r\n    text_button_id: { control: 'text', description: 'ID of the button' },\r\n    aria_label: { control: 'text', description: 'Aria label for the button' },\r\n    text_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.text_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  text_button_type: \"button\",\r\n  button_color: 'default-primary',\r\n  start_icon: 'sentiment_satisfied',\r\n  button_text: 'Button',\r\n  text_button_id: 'default-primary-btn',\r\n  aria_label: 'default primary button',\r\n  text_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  text_button_id: 'default-primary-btn',\r\n  aria_label: 'default primary button',\r\n  text_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  text_button_id: 'default-primary-btn',\r\n  aria_label: 'default primary button',\r\n  text_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  text_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\nexport const IconButton = Template.bind({});\r\nIconButton.args = {\r\n  text_button_type: \"button\",\r\n  button_color: 'default-primary',\r\n  start_icon: 'sentiment_satisfied',\r\n  text_button_id: 'icon-button',\r\n  aria_label: 'icon button',\r\n  text_button_name: 'iconButton',\r\n  value: 'icon-value',\r\n  toggle_button_shape: \"default\",\r\n  size: 'md',\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 IconButtonDisabled = Template.bind({});\r\nIconButtonDisabled.args = {\r\n  ...IconButton.args,\r\n  button_color: 'disabled',\r\n  text_button_id: 'icon-button-disabled',\r\n  disabled: true,\r\n  custom_class: '',\r\n  component_mode: '',\r\n  onclick: \"console.log('native click')\"\r\n};\r\n"]}

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

@@ -75,7 +75,7 @@ export class DdaStickyFooter {
     render() {
         const footmiddlesection = this.parseJsonArray(this.middleLink);
         const footrightsection = this.parseJsonArray(this.rightLink);
-        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))))));
+        return (h("div", { key: '2c8c603c8d9a77b0fe438852b2d029fdec0eabfa', class: { 'dda-footer': true, 'hidden': this.isHidden } }, h("div", { key: '1465e988b3fdd71b3c5d46af57b36bdef32f6c25', class: "footer-content" }, h("div", { key: 'd8a62756f7060347b423e50515a92f9dd5f9038e', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '6243f8c0124cf89b2cf43486948bc40872157128' }, this.happinessIconSrc && (h("li", { key: '2df7302fb6cce0415071eef0e7340f33d808791c', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'f701d7d8fe4a143a5bc1c4b3845bcaf079029298', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: '2d7c2b024978ba9e40b84545752073e795690469', href: this.happinessIconHref, id: this.happinessIconId, onClick: this.happinessIconClick }, h("img", { key: 'a67456f116dc1228e9e755045039f1fd45b845ec', src: this.colorTheme == 'light' ? this.happinessIconSrc : this.happinessIconSrcDark, alt: this.happinessIconAlt }), h("span", { key: 'a70dd75c3cb3c0db3c1c740527034da266f45f66', class: "visually-hidden" }, this.happinessIconTooltip))))), this.accessibilityIconSrc && (h("li", { key: 'a652e3578709b1baa06929bec870d545aaff6cb5', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'c2a75c4013ab6fe2aedeb127371743c887c699db', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '050f73f62864322eab29c793d7899e4bac01ac45', href: this.accessibilityIconHref, id: this.accessibilityIconId, onClick: this.accessibilityIconClick }, h("img", { key: 'f18b4b7a059d7ec79e4e650da5eb6ff9af13317e', src: this.colorTheme == 'light' ? this.accessibilityIconSrc : this.accessibilityIconSrcDark, alt: this.accessibilityIconAlt }), h("span", { key: '6a31bcd8f57e3ae429e254004e3469c2b0796b29', class: "visually-hidden" }, this.accessibilityIconTooltip))))), this.servicesIconText && (h("li", { key: '07191215d98e48678df5f989ec5b6d95eec4612d', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'b45f6372cb4ffade791d8c12fbf4459654ddb085', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: 'b931a351348702593afc0f78b0a44b3e9bfc3a83', href: this.servicesIconHref, id: this.servicesIconId, onClick: this.servicesIconClick }, h("img", { key: '2a6ffadaede9b826f56bad68f3c6a73d3b7152e8', src: this.colorTheme == 'light' ? this.servicesIconSrc : this.servicesIconSrcDark, alt: this.servicesIconAlt }), h("span", { key: 'ffe989a39d04b9d97bf94ab4563693fdc57d3104' }, this.servicesIconText))))))), !this.hideMiddleSection && (h("div", { key: 'a682adf8291542d5e9f0d1b6fe32fd18371cdd0f', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '5bba39224a284a6fefd31e8aeeb659757d8254c3', 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: 'a578fd2467de48cf0b58568ccb19062e82f922a7', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '2f51dca596fe879996da4011f5cf211b18982a53', 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: 'd39c9964f72718321fcb10d4ba2b08b98d68cd29', class: "foot-icon-btn" }, h("dda-tooltip", { key: '10a9f74b03dab79f6a8c756365de254c722122f9', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: '6ad62624a41f91850d028ca1ba5d57dacf20c904', href: this.dubaiaeIconHref, onClick: this.dubaiAEClick, id: this.dubaiaeIconId }, h("img", { key: 'cab8f6083ee3321286bf792d5387671d21478bed', class: "dubaiae-text-icon", src: this.colorTheme == 'light' ? this.dubaiaeIconSrc : this.dubaiaeIconSrcDark, alt: `${this.dubaiaeIconAlt} icon desktop` }), h("img", { key: '20210718563718db8e160e55ae4a1c6c7d0ea752', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: `${this.dubaiaeIconAlt} icon mobile` }), h("span", { key: '3d445f04c6cae96b63eb30e53fa157a96a986182', class: "visually-hidden" }, this.dubaiaeIconTooltip))))), this.aiIconSrc && (h("li", { key: '49d50b71a4450eb8df3e9be7abd5024ec4da4b77', class: "foot-icon-btn" }, h("dda-tooltip", { key: '974b3e47a4d9e7a694e6e65f68826a2f2e5e281e', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: 'eb2aed45d6b7c427c8661987aa5c24eac834d696', href: this.aiIconHref, onClick: this.aiIconClick, id: this.aiIconId }, h("img", { key: '32793e4be5d24cc960db298f57316da61d6ce884', src: this.colorTheme == 'light' ? this.aiIconSrc : this.aiIconSrcDark, alt: this.aiIconAlt }), h("span", { key: 'a21f074687baa51f29ce80d8d9f90ce0a24ffdce', class: "visually-hidden" }, this.aiIconTooltip))))), this.chatIconSrc && (h("li", { key: '29bfe82296c11f88c67f89211961767947ee44f4', class: "foot-icon-btn" }, h("dda-tooltip", { key: '9347843238243ae56fc4a294ef2a48eb2417d281', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '75d99eb7dd401efc807e051e975b24447924c184', href: this.chatIconHref, onClick: this.chatIconClick, id: this.chatIconId }, h("img", { key: '7cb2ac7d2f553489f6f2d944e12104328f3a9b14', src: this.colorTheme == 'light' ? this.chatIconSrc : this.chatIconSrcDark, alt: this.chatIconAlt }), h("span", { key: '982a5fbde9aed840d735a4a9c5f8622ff2934b79', class: "visually-hidden" }, this.chatIconTooltip)))))), h("button", { key: '406dc5a29d2ccca4ae35d2c75d3f04d5114d7afa', type: "button", class: "show-right-icon", onClick: this.toggleFooterIcons }, h("i", { key: '11f084bd7a916e7598f16fe36af56467ed32fd4e', class: this.moreIconFamily }, this.moreIcon))))));
     }
     static get is() { return "dda-sticky-footer"; }
     static get originalStyleUrls() {

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

@@ -62,7 +62,7 @@ export class DdaTabs {
         this.tabClick.emit(index);
     }
     render() {
-        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)))))));
+        return (h(Host, { key: '0efe1c91e591dc0a7a8f2924a5b39cd48a905ab4' }, h("div", { key: 'c82c3e4f31765534c5f797682fe0097202a11a84', 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

@@ -92,7 +92,7 @@ export class DdaTextarea {
         ]
             .filter(Boolean)
             .join(' ');
-        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) => {
+        return (h(Host, { key: '0e08517cea3fe0f247facf0ec1bfde73f20d9234' }, h("div", { key: 'e5354b352ab7c3bad0a9a06f7f4315c8b8debb0d', class: textareaClass }, this.label && (h("label", { key: '418a4633ca45ae6d476ffefae2ba1d447bdd06d5', 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

@@ -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: '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 => {
+        return (h(Host, { key: '6c80c0acd2c4743411b6de02663c8b2b4f3e4953' }, h("label", { key: 'eb945d26b4a02f6f52c2879709a78f4c35af6e0d', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '756b613958049e61c24a3e7d25fe1e6f0733bba2', "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: '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")))));
+            } }), h("span", { key: 'ac8b85c8cab1d456b46b5c2d02e9fa2c908582db', class: "toggle" }), h("p", { key: '3270d9ed3e3f6d6214b9a937f856d0225f92e8af' }, h("span", { key: '00aa61f8f21640f76bc224c85611bc43837b301f', class: "toggle-title" }, "Radio Button Title"), h("span", { key: '354f2f4b4aeb8279b514693c0110a5a91ca44ec7', class: "toggle-supporting" }, "Supporting Text")))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {