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

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

@@ -1,34 +1,19 @@
 import { Host, h } from "@stencil/core";
 export class DdaLinkButton {
     constructor() {
+        /** Type of button, e.g., "button", "submit" */
+        this.type = 'button';
+        /** Disable the button */
         this.disabled = false;
+        /** Icon class for the starting icon */
         this.start_icon = '';
-        this.link_button_text = '';
-        this.link_button_title = '';
-        this.end_icon = '';
+        this.end_icon = ''; // icon class
         this.aria_label = '';
-        this.button_color = 'primary';
+        this.button_color = 'primary'; // e.g., 'primary', 'error'
         this.button_shape = '';
         this.icon_button_shape = '';
-        this.custom_class = '';
-        this.href = '#';
-        this.target = '';
-        this.rel = 'noopener noreferrer';
-        this.handleClick = (event) => {
-            // Block all click events when disabled
-            if (this.disabled) {
-                event.preventDefault();
-                event.stopPropagation();
-                event.stopImmediatePropagation();
-                return false;
-            }
-            // Emit custom event for parent components
-            this.ddaLinkClick.emit(event);
-            // Call custom click handler if provided
-            if (this.clickHandler) {
-                this.clickHandler(event);
-            }
-        };
+        this.custom_class = ''; // Custom class prop
+        this.href = '#'; // Custom class prop
     }
     render() {
         const linkbuttonClass = [
@@ -38,49 +23,27 @@ export class DdaLinkButton {
             this.button_shape ? `btn-shape-${this.button_shape}` : '',
             this.icon_button_shape ? `icon-btn-${this.icon_button_shape}` : '',
             this.gap ? `dda-gap-${this.gap}` : '',
-            this.disabled ? 'disabled' : '', // Add disabled class
-            this.custom_class,
+            this.custom_class, // Include custom class
             this.component_mode,
         ].filter(Boolean).join(' ');
-        // Generate aria-label if not provided
-        const ariaLabel = this.aria_label || this.link_button_text || 'Link button';
-        // Handle target security
-        const linkTarget = this.target;
-        const linkRel = this.target === '_blank' ? 'noopener noreferrer' : this.rel;
-        return (h(Host, { key: 'f3c12526f6fa0fd49d1d11a2406f69826da41003' }, h("a", { key: '65b66870f9683c276b3e20d8b8c20c817696d3fe', id: this.button_id, target: linkTarget, rel: linkRel, "data-fancybox": this.data_fancybox, title: this.link_button_title, href: this.disabled ? undefined : this.href, class: linkbuttonClass, "aria-label": ariaLabel, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : undefined, onClick: this.handleClick, onKeyDown: (event) => {
-                // Block keyboard navigation when disabled
-                if (this.disabled && (event.key === 'Enter' || event.key === ' ')) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    event.stopImmediatePropagation();
-                    return false;
-                }
-            }, style: this.disabled ? { pointerEvents: 'none', cursor: 'not-allowed' } : {} }, this.start_icon && (h("i", { key: '553ef0895f08aab5e94e91f6dd51bc45a985298b', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, this.start_icon)), this.link_button_text, this.end_icon && (h("i", { key: 'fd191ba6612d3c5cf4b8382182d20950d5361ca3', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, this.end_icon)))));
+        return (h(Host, { key: '48353384334580d3b87d21c97fe28bfa86c3715e' }, h("a", { key: 'fe3f1969cb31a53d775b5877a48613fb775cf47f',
+            //   type={this.type}
+            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: 'fc4981b276f2b51e0a4085e37685a952388d4dcd', class: "material-icons  material-symbols-outlined" }, this.start_icon), h("slot", { key: 'd48a10fcc4421f484e91b6209aa44b997dce0578' }), this.end_icon && h("i", { key: '9e2169cc158f3eed4930e328cc8a6d05559ab997', class: "material-icons  material-symbols-outlined" }, this.end_icon))));
     }
     static get is() { return "dda-link-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../global/dda-button.css", "../../global/global.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../global/dda-button.css", "../../global/global.css"]
+        };
+    }
     static get properties() {
         return {
-            "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": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -92,35 +55,35 @@ export class DdaLinkButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Type of button, e.g., \"button\", \"submit\""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "start_icon",
                 "reflect": false,
-                "defaultValue": "''"
+                "attribute": "type",
+                "defaultValue": "'button'"
             },
-            "link_button_text": {
-                "type": "string",
+            "disabled": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Disable the button"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "link_button_text",
                 "reflect": false,
-                "defaultValue": "''"
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
-            "link_button_title": {
+            "start_icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -132,12 +95,12 @@ export class DdaLinkButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Icon class for the starting icon"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "link_button_title",
                 "reflect": false,
+                "attribute": "start_icon",
                 "defaultValue": "''"
             },
             "end_icon": {
@@ -156,8 +119,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "end_icon",
                 "reflect": false,
+                "attribute": "end_icon",
                 "defaultValue": "''"
             },
             "aria_label": {
@@ -176,8 +139,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
                 "reflect": false,
+                "attribute": "aria_label",
                 "defaultValue": "''"
             },
             "button_color": {
@@ -196,8 +159,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_color",
                 "reflect": false,
+                "attribute": "button_color",
                 "defaultValue": "'primary'"
             },
             "size": {
@@ -216,8 +179,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "button_shape": {
                 "type": "string",
@@ -235,8 +198,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_shape",
                 "reflect": false,
+                "attribute": "button_shape",
                 "defaultValue": "''"
             },
             "icon_button_shape": {
@@ -255,8 +218,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon_button_shape",
                 "reflect": false,
+                "attribute": "icon_button_shape",
                 "defaultValue": "''"
             },
             "gap": {
@@ -275,8 +238,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "gap",
-                "reflect": false
+                "reflect": false,
+                "attribute": "gap"
             },
             "custom_class": {
                 "type": "string",
@@ -294,8 +257,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "href": {
@@ -314,8 +277,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
+                "attribute": "href",
                 "defaultValue": "'#'"
             },
             "component_mode": {
@@ -334,8 +297,8 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "button_id": {
                 "type": "string",
@@ -353,114 +316,9 @@ export class DdaLinkButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_id",
-                "reflect": false
-            },
-            "target": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "target",
                 "reflect": false,
-                "defaultValue": "''"
-            },
-            "rel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "rel",
-                "reflect": false,
-                "defaultValue": "'noopener noreferrer'"
-            },
-            "data_fancybox": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "data_fancybox",
-                "reflect": false
-            },
-            "clickHandler": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(event: MouseEvent) => void",
-                    "resolved": "(event: MouseEvent) => void",
-                    "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
+                "attribute": "button_id"
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "ddaLinkClick",
-                "name": "ddaLinkClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "MouseEvent",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
-                }
-            }];
-    }
 }
-//# sourceMappingURL=dda-link-button.js.map

package/dist/collection/components/dda-link-button/dda-link-button.stories.js

@@ -4,28 +4,22 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-link-button\` component, pass the following props:
-
-\`\`\`html
-<dda-link-button
-    button_color="default-primary"
-    start_icon="sentiment_satisfied"
-    end_icon="arrow_forward"
-    custom_class=""
-    href=""
-    target=""
-    rel=""
-    component_mode=""
-    button_id="link-button"
-    aria_label="link-Button"
-    disabled="false"
-    onclick="console.log('clicked')"
-    >Button
-</dda-link-button>
-  \`\`\`
-
-The component now properly handles disabled state, preventing navigation and click events when disabled is true.
+                component: `
+To use the \`dda-link-button\` component, pass the following props:
+
+\`\`\`html
+<dda-link-button
+    button_color="default-primary"
+    start_icon="sentiment_satisfied"
+    end_icon="arrow_forward"
+    custom_class=""
+    href=""
+    component_mode=""
+    button_id="link-button"
+    aria_label="link-Button"
+    >Button
+</dda-link-button>
+  \`\`\`
 `,
             },
         },
@@ -60,30 +54,14 @@ The component now properly handles disabled state, preventing navigation and cli
             control: { type: 'select' },
             options: ['1', '2'],
         },
-        link_button_text: {
-            control: { type: 'text' },
-            description: 'Text content for the link button',
-        },
-        link_button_title: {
-            control: { type: 'text' },
-            description: 'Title for the link button',
-        },
         custom_class: {
-            control: { type: 'text' },
+            control: { type: 'text' }, // Add control for custom class
             description: 'Custom class for the link button component',
         },
         href: {
-            control: { type: 'text' },
+            control: { type: 'text' }, // Add control for custom class
             description: 'Href to point to when the button is clicked',
         },
-        target: {
-            control: { type: 'text' },
-            description: 'Target attribute for the link (e.g., _blank)',
-        },
-        rel: {
-            control: { type: 'text' },
-            description: 'Relationship attribute for the link (e.g., noopener noreferrer)',
-        },
         component_mode: {
             control: { type: 'check' },
             options: ['light-mode'],
@@ -96,142 +74,73 @@ The component now properly handles disabled state, preventing navigation and cli
         aria_label: {
             control: { type: 'text' },
             description: 'Aria label for accessibility',
-        },
-        disabled: {
-            control: { type: 'boolean' },
-            description: 'Whether the link button is disabled',
-        },
-        onclick: {
-            control: { type: 'text' },
-            description: 'event handler for button',
-        },
+        }
     },
 };
 const Template = (args) => {
     const attributes = Object.entries(args)
         .filter(([key, value]) => value !== undefined && key !== 'text')
-        .map(([key, value]) => {
-        if (typeof value === 'boolean') {
-            return value ? key : '';
-        }
-        return `${key}="${value}"`;
-    })
-        .filter(Boolean)
+        .map(([key, value]) => `${key}="${value}"`)
         .join(' ');
-    return `<dda-link-button ${attributes}></dda-link-button>`;
+    return `<dda-link-button ${attributes}>${args.text}</dda-link-button>`;
 };
 export const DefaultPrimary = Template.bind({});
 DefaultPrimary.args = {
     button_color: 'default-primary',
     start_icon: 'sentiment_satisfied',
-    link_button_text: 'Button',
     end_icon: 'arrow_forward',
-    link_button_title: '',
+    text: 'Button',
+    custom_class: '', // Example: Add custom class here
+    href: '',
+    component_mode: '',
     button_id: 'link-button',
-    href: '#',
     aria_label: 'link-Button',
-    button_shape: 'default',
-    size: 'md',
-    gap: '1',
-    target: '',
-    rel: 'noopener noreferrer',
-    custom_class: '',
-    component_mode: '',
-    disabled: false,
-    onclick: "console.log('clicked')",
 };
 export const ErrorPrimary = Template.bind({});
 ErrorPrimary.args = {
     button_color: 'error-primary',
     start_icon: 'sentiment_satisfied',
-    link_button_text: 'Button',
     end_icon: 'arrow_forward',
-    link_button_title: '',
-    button_id: 'link-button',
-    href: '#',
-    aria_label: 'link-Button',
-    button_shape: 'default',
-    size: 'md',
-    gap: '1',
-    target: '',
-    rel: 'noopener noreferrer',
+    text: 'Button',
     custom_class: '',
+    href: '',
     component_mode: '',
-    disabled: false,
-    onclick: "console.log('clicked')",
+    button_id: 'link-button',
+    aria_label: 'link-Button',
 };
 export const SurfacePrimary = Template.bind({});
 SurfacePrimary.args = {
     button_color: 'onsurface-primary',
     start_icon: 'sentiment_satisfied',
-    link_button_text: 'Button',
     end_icon: 'arrow_forward',
-    link_button_title: '',
-    button_id: 'link-button',
-    href: '#',
-    aria_label: 'link-Button',
-    button_shape: 'default',
-    size: 'md',
-    gap: '1',
-    target: '',
-    rel: 'noopener noreferrer',
+    text: 'Button',
     custom_class: '',
+    href: '',
     component_mode: '',
-    disabled: false,
-    onclick: "console.log('clicked')",
+    button_id: 'link-button',
+    aria_label: 'link-Button',
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
     button_color: 'disabled',
     start_icon: 'sentiment_satisfied',
-    link_button_text: 'Button',
     end_icon: 'arrow_forward',
-    link_button_title: '',
-    button_id: 'link-button',
-    href: '#',
-    aria_label: 'link-Button',
-    button_shape: 'default',
-    size: 'md',
-    gap: '1',
-    target: '',
-    rel: 'noopener noreferrer',
+    text: 'Button',
     custom_class: '',
+    href: '',
     component_mode: '',
-    disabled: true,
-    onclick: "console.log('clicked')",
+    button_id: 'link-button',
+    aria_label: 'link-Button',
 };
 export const IconButton = Template.bind({});
 IconButton.args = {
     button_color: 'default-primary',
-    start_icon: 'sentiment_satisfied',
-    button_id: 'link-button',
-    link_button_title: '',
-    href: '#',
-    aria_label: 'link-Button',
     icon_button_shape: "default",
-    size: 'md',
-    target: '',
-    rel: 'noopener noreferrer',
+    start_icon: 'sentiment_satisfied',
+    text: '',
     custom_class: '',
+    href: '',
     component_mode: '',
-    disabled: false,
-    onclick: "console.log('clicked')",
-};
-export const IconButtonDisabled = Template.bind({});
-IconButtonDisabled.args = {
-    button_color: 'disabled',
-    start_icon: 'sentiment_satisfied',
     button_id: 'link-button',
-    link_button_title: '',
-    href: '#',
     aria_label: 'link-Button',
-    icon_button_shape: "default",
-    size: 'md',
-    target: '',
-    rel: 'noopener noreferrer',
-    custom_class: '',
-    component_mode: '',
-    disabled: true,
-    onclick: "console.log('clicked')",
 };
-//# sourceMappingURL=dda-link-button.stories.js.map