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

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

@@ -1,442 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class DdaSplitButton {
-    constructor() {
-        this.text_button_type = 'button';
-        this.disabled = false;
-        this.start_icon_family = '';
-        this.start_icon = '';
-        this.button_text = '';
-        this.aria_label = '';
-        this.button_color = 'primary';
-        this.button_shape = '';
-        this.toggle_button_shape = '';
-        this.custom_class = '';
-        this.text_button_name = '';
-        this.is_open = false;
-        this.handleClick = (event) => {
-            if (this.disabled)
-                return;
-            this.buttonClick.emit({
-                event,
-                id: this.text_button_id,
-                value: this.value,
-                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 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-icon-btn-shape-${this.button_shape}` : '',
-            this.gap ? `dda-gap-${this.gap}` : '',
-            this.custom_class,
-            this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        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 properties() {
-        return {
-            "text_button_type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "text_button_type",
-                "reflect": false,
-                "defaultValue": "'button'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "disabled",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "start_icon_family": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "start_icon_family",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "start_icon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "start_icon",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "button_text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "button_text",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "aria_label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "aria_label",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "button_color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "button_color",
-                "reflect": false,
-                "defaultValue": "'primary'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "size",
-                "reflect": false
-            },
-            "button_shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "button_shape",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "toggle_button_shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "toggle_button_shape",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "gap": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "gap",
-                "reflect": false
-            },
-            "custom_class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "custom_class",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "component_mode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
-            },
-            "text_button_id": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "text_button_id",
-                "reflect": false
-            },
-            "text_button_name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "text_button_name",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "value",
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "is_open": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "buttonClick",
-                "name": "buttonClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ event: MouseEvent, id: string, value: string, name: string }",
-                    "resolved": "{ event: MouseEvent; id: string; value: string; name: string; }",
-                    "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=dda-split-button.js.map

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

@@ -1 +0,0 @@
-{"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,144 +0,0 @@
-export default {
-    title: 'Components/DDA Split Button/DDA Split Button',
-    tags: ['autodocs'],
-    parameters: {
-        docs: {
-            description: {
-                component: `
-To use the \`<dda-split-button>\` component, pass the following props:
-
-\`\`\`html
-<dda-split-button
-    button_color="default-primary"
-    start_icon="sentiment_satisfied"
-    button_text: "Button"
-    end_icon="arrow_forward"
-    custom_class=""
-    component_mode=""
-    text_button_id="button"
-    aria_label="button"
-    text_button_name="button"
-    value="my-value"
-    >
-</dda-split-button>
-\`\`\`
-
-To listen for click events:
-
-\`\`\`javascript
-document.querySelector('dda-split-button').addEventListener('buttonClick', (e) => {
-  const { event, id, value, name } = e.detail;
-  console.log('Button clicked:', { id, value, name });
-});
-\`\`\`
-        `,
-            },
-        },
-    },
-    argTypes: {
-        button_color: {
-            control: { type: 'select' },
-            options: [
-                'default-primary', 'default-secondary', 'default-tertiary', 'default-link',
-                'error-primary', 'error-secondary', 'error-tertiary', 'error-link',
-                'onsurface-primary', 'onsurface-secondary', 'onsurface-tertiary', 'onsurface-link',
-                'secondary', 'success', 'warning', 'surface', 'surface-variant', 'disabled',
-            ],
-        },
-        text_button_type: { control: 'select', options: ['button', 'submit', 'reset'] },
-        size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'] },
-        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: ['dark-mode', 'light-mode'],
-            description: 'Mode of the button component',
-        },
-        text_button_id: { control: 'text', description: 'ID of the button' },
-        aria_label: { control: 'text', description: 'Aria label for 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' },
-    },
-};
-const Template = (args) => {
-    const attributes = Object.entries(args)
-        .filter(([key, value]) => value !== undefined && key !== 'text')
-        .map(([key, value]) => {
-        if (key === 'onClick') {
-            return `onclick="${value}"`; // inject raw JS string
-        }
-        return `${key}="${value}"`;
-    })
-        .join(' ');
-    // Manually add the onclick attribute with a placeholder JS snippet or text
-    const onclickAttr = 'onclick="console.log(\'native click\')"';
-    // Create the button element HTML string including onclick
-    const buttonHtml = `<dda-split-button ${attributes} ${onclickAttr}></dda-split-button>`;
-    // Add event listener after the element is created (unchanged)
-    setTimeout(() => {
-        const button = document.querySelector(`dda-split-button[button_id="${args.text_button_id}"]`);
-        if (button) {
-            button.removeEventListener('buttonClick', handleButtonClick);
-            button.addEventListener('buttonClick', handleButtonClick);
-        }
-    }, 0);
-    return buttonHtml;
-};
-const handleButtonClick = (e) => {
-    const { event, id, value, name } = e.detail;
-    console.log('Button clicked:', { id, value, name });
-    console.log('Mouse event:', event);
-    if (id === 'error-button') {
-        alert('Hello! I am an alert box!!');
-    }
-    else if (id === 'console-button') {
-        console.log('Button clicked via custom event');
-    }
-};
-export const DefaultPrimary = Template.bind({});
-DefaultPrimary.args = {
-    text_button_type: "button",
-    button_color: 'default-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 ErrorPrimary = Template.bind({});
-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', 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', 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 +0,0 @@
-{"version":3,"file":"dda-split-button.stories.js","sourceRoot":"","sources":["../../../src/components/dda-split-button/dda-split-button.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,8CAA8C;IACrD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;SA2BV;aACF;SACF;KACF;IACD,QAAQ,EAAE;QACR,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE;gBACP,iBAAiB,EAAC,mBAAmB,EAAC,kBAAkB,EAAC,cAAc;gBACvE,eAAe,EAAC,iBAAiB,EAAC,gBAAgB,EAAC,YAAY;gBAC/D,mBAAmB,EAAC,qBAAqB,EAAC,oBAAoB,EAAC,gBAAgB;gBAC/E,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,iBAAiB,EAAC,UAAU;aACvE;SACF;QACD,gBAAgB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;QAC/E,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;QAC9D,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE;QACnE,mBAAmB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE;QAC1E,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;QAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACjC,cAAc,EAAE;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC;YACpC,WAAW,EAAE,8BAA8B;SAC5C;QACD,cAAc,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE;QACpE,UAAU,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,2BAA2B,EAAE;QACzE,gBAAgB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,oBAAoB,EAAE;QACxE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,qBAAqB,EAAE;QAC9D,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,oBAAoB,EAAE;KACpE;CACF,CAAC;AAIF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SACpC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,IAAI,GAAG,KAAK,MAAM,CAAC;SAC/D,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACpB,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YACtB,OAAO,YAAY,KAAK,GAAG,CAAC,CAAC,uBAAuB;QACtD,CAAC;QACD,OAAO,GAAG,GAAG,KAAK,KAAK,GAAG,CAAC;IAC7B,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,2EAA2E;IAC3E,MAAM,WAAW,GAAG,yCAAyC,CAAC;IAE9D,0DAA0D;IAC1D,MAAM,UAAU,GAAG,qBAAqB,UAAU,IAAI,WAAW,sBAAsB,CAAC;IAExF,8DAA8D;IAC9D,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,+BAA+B,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC;QAC9F,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;YAC7D,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC,EAAE,CAAC,CAAC,CAAC;IAEN,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,EAAE;IAC9B,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;IAC5C,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAEnC,IAAI,EAAE,KAAK,cAAc,EAAE,CAAC;QAC1B,KAAK,CAAC,4BAA4B,CAAC,CAAC;IACtC,CAAC;SAAM,IAAI,EAAE,KAAK,gBAAgB,EAAE,CAAC;QACnC,OAAO,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;IACjD,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,gBAAgB,EAAE,QAAQ;IAC1B,YAAY,EAAE,iBAAiB;IAC/B,UAAU,EAAE,qBAAqB;IACjC,WAAW,EAAE,QAAQ;IACrB,cAAc,EAAE,qBAAqB;IACrC,UAAU,EAAE,wBAAwB;IACpC,gBAAgB,EAAE,sBAAsB;IACxC,KAAK,EAAE,uBAAuB;IAC9B,YAAY,EAAE,SAAS;IACvB,IAAI,EAAE,IAAI;IACV,GAAG,EAAE,CAAC;IACN,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,EAAE;IAChB,cAAc,EAAE,EAAE;IAClB,OAAO,EAAE,6BAA6B;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,mCACZ,cAAc,CAAC,IAAI,KACtB,YAAY,EAAE,eAAe,EAC7B,UAAU,EAAE,qBAAqB,EACjC,WAAW,EAAE,QAAQ,EACrB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,wBAAwB,EACpC,gBAAgB,EAAE,sBAAsB,EACxC,KAAK,EAAE,uBAAuB,EAC9B,YAAY,EAAE,SAAS,EACvB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,KAAK,EACf,YAAY,EAAE,EAAE,EAChB,cAAc,EAAE,EAAE,EAClB,OAAO,EAAE,6BAA6B,GACvC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,mCACd,cAAc,CAAC,IAAI,KACtB,YAAY,EAAE,mBAAmB,EACjC,UAAU,EAAE,qBAAqB,EACjC,WAAW,EAAE,QAAQ,EACrB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,wBAAwB,EACpC,gBAAgB,EAAE,sBAAsB,EACxC,KAAK,EAAE,uBAAuB,EAC9B,YAAY,EAAE,SAAS,EACvB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,KAAK,EACf,YAAY,EAAE,EAAE,EAChB,cAAc,EAAE,EAAE,EAClB,OAAO,EAAE,6BAA6B,GACvC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,mCACR,cAAc,CAAC,IAAI,KACtB,YAAY,EAAE,UAAU,EACxB,cAAc,EAAE,iBAAiB,EACjC,QAAQ,EAAE,IAAI,EACd,YAAY,EAAE,EAAE,EAChB,cAAc,EAAE,EAAE,EAClB,OAAO,EAAE,6BAA6B,GACvC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IAChB,gBAAgB,EAAE,QAAQ;IAC1B,YAAY,EAAE,iBAAiB;IAC/B,UAAU,EAAE,qBAAqB;IACjC,cAAc,EAAE,aAAa;IAC7B,UAAU,EAAE,aAAa;IACzB,gBAAgB,EAAE,YAAY;IAC9B,KAAK,EAAE,YAAY;IACnB,mBAAmB,EAAE,SAAS;IAC9B,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,EAAE;IAChB,cAAc,EAAE,EAAE;IAClB,OAAO,EAAE,6BAA6B;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,kBAAkB,CAAC,IAAI,mCAClB,UAAU,CAAC,IAAI,KAClB,YAAY,EAAE,UAAU,EACxB,cAAc,EAAE,sBAAsB,EACtC,QAAQ,EAAE,IAAI,EACd,YAAY,EAAE,EAAE,EAChB,cAAc,EAAE,EAAE,EAClB,OAAO,EAAE,6BAA6B,GACvC,CAAC","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"]}