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

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

@@ -0,0 +1,442 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"dda-split-button.js","sourceRoot":"","sources":["../../../src/components/dda-split-button/dda-split-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Host, Component, Prop, h, Event, EventEmitter, 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

@@ -0,0 +1,144 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"dda-split-button.stories.js","sourceRoot":"","sources":["../../../src/components/dda-split-button/dda-split-button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\r\n  title: 'Components/DDA Split Button/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"]}