@nuralyui/button 0.0.13 → 0.0.14

package/button.component.d.ts

@@ -5,7 +5,13 @@
  */
 import { LitElement } from 'lit';
 import { ButtonType, ButtonShape, IconPosition } from './button.types.js';
-declare const NrButtonElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & typeof LitElement;
+declare const NrButtonElement_base: (new (...args: any[]) => import("./mixins/ripple-mixin.js").RippleCapable) & (new (...args: any[]) => import("./mixins/keyboard-mixin.js").KeyboardCapable) & (new (...args: any[]) => import("./mixins/link-mixin.js").LinkCapable) & (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * - NuralyUIBaseMixin: Core functionality (theme, dependencies, events)
+ * - RippleMixin: Ripple effect handling
+ * - KeyboardMixin: Keyboard interaction (Enter/Space activation)
+ * - LinkMixin: Link-specific behavior for ButtonType.Link
+ */
 export declare class NrButtonElement extends NrButtonElement_base {
     disabled: boolean;
     loading: boolean;
@@ -19,9 +25,11 @@ export declare class NrButtonElement extends NrButtonElement_base {
     href: string;
     target: string;
     ripple: boolean;
+    buttonAriaLabel: string;
+    ariaDescribedBy: string;
+    htmlType: string;
     /**
      * Required components that must be registered for this component to work properly
-     * Can be overridden by parent implementations
      */
     requiredComponents: string[];
     /**
@@ -29,16 +37,9 @@ export declare class NrButtonElement extends NrButtonElement_base {
      */
     connectedCallback(): void;
     /**
-     * Get the appropriate element tag based on button type
-     */
-    private getElementTag;
-    /**
-     * Get attributes for accessibility and functionality
+     * Get common attributes for both button and anchor elements
      */
-    private getElementAttributes;
-    buttonAriaLabel: string;
-    ariaDescribedBy: string;
-    htmlType: string;
+    private getCommonAttributes;
     /**
      * Renders an icon if the hy-icon component is available
      * @param iconName - The name of the icon to render
@@ -46,13 +47,7 @@ export declare class NrButtonElement extends NrButtonElement_base {
      */
     private renderIcon;
     /**
-     * Creates ripple effect on button click
-     * @param event - The click event
-     */
-    private createRipple;
-    /**
-     * Handle click events with ripple effect
-     * @param event - The click event
+     * Handle comprehensive click events with proper event dispatching
      */
     private handleClick;
     render(): import("lit").TemplateResult<1>;

package/button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;;AAIxF,qBACa,eAAgB,SAAQ,oBAA6B;IAEhE,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,IAAI,SAAgB;IAGpB,IAAI,EAAE,UAAU,CAAsB;IAGtC,KAAK,EAAE,WAAW,CAAuB;IAGzC,KAAK,UAAS;IAGd,MAAM,UAAS;IAGf,IAAI,EAAE,MAAM,EAAE,CAAM;IAGpB,YAAY,eAAqB;IAGjC,IAAI,SAAgB;IAGpB,MAAM,SAAgB;IAGtB,MAAM,UAAQ;IAEd;;;OAGG;IACM,kBAAkB,WAAe;IAE1C;;OAEG;IACM,iBAAiB;IAK1B;;OAEG;IACH,OAAO,CAAC,aAAa;IAIrB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAoC5B,eAAe,SAAgB;IAG/B,eAAe,SAAgB;IAG/B,QAAQ,SAAgB;IAExB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAWlB;;;OAGG;IACH,OAAO,CAAC,YAAY;IA2BpB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAIV,MAAM;IAwDf,OAAgB,MAAM,4BAAU;CACjC"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;;AAKxF;;;;;GAKG;AACH,qBACa,eAAgB,SAAQ,oBAMpC;IAGU,QAAQ,UAAS;IAG1B,OAAO,UAAS;IAGhB,IAAI,SAAgB;IAGX,IAAI,EAAE,UAAU,CAAsB;IAG/C,KAAK,EAAE,WAAW,CAAuB;IAGzC,KAAK,UAAS;IAGd,MAAM,UAAS;IAIf,IAAI,EAAE,MAAM,EAAE,CAAM;IAGpB,YAAY,eAAqB;IAIxB,IAAI,SAAgB;IAGpB,MAAM,SAAgB;IAItB,MAAM,UAAQ;IAIvB,eAAe,SAAgB;IAG/B,eAAe,SAAgB;IAG/B,QAAQ,SAAgB;IAExB;;OAEG;IACM,kBAAkB,WAAe;IAE1C;;OAEG;IACM,iBAAiB;IAK1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAgB3B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAWlB;;OAEG;IACH,OAAO,CAAC,WAAW;IA4BV,MAAM;IA8Df,OAAgB,MAAM,4BAAU;CACjC"}

package/button.component.js

@@ -14,9 +14,17 @@ import { customElement, property } from 'lit/decorators.js';
 import { EMPTY_STRING } from './button.types.js';
 import { styles } from './button.style.js';
 import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
-let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement) {
+import { RippleMixin, KeyboardMixin, LinkMixin } from './mixins/index.js';
+/**
+ * - NuralyUIBaseMixin: Core functionality (theme, dependencies, events)
+ * - RippleMixin: Ripple effect handling
+ * - KeyboardMixin: Keyboard interaction (Enter/Space activation)
+ * - LinkMixin: Link-specific behavior for ButtonType.Link
+ */
+let NrButtonElement = class NrButtonElement extends RippleMixin(KeyboardMixin(LinkMixin(NuralyUIBaseMixin(LitElement)))) {
     constructor() {
         super(...arguments);
+        // Button state properties
         this.disabled = false;
         this.loading = false;
         this.size = EMPTY_STRING;
@@ -24,19 +32,22 @@ let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement
         this.shape = "default" /* ButtonShape.Default */;
         this.block = false;
         this.dashed = false;
+        // Icon properties
         this.icon = [];
         this.iconPosition = "left" /* IconPosition.Left */;
+        // Link properties (inherited from LinkMixin)
         this.href = EMPTY_STRING;
         this.target = EMPTY_STRING;
+        // Ripple property (inherited from RippleMixin)
         this.ripple = true;
+        // Accessibility properties
+        this.buttonAriaLabel = EMPTY_STRING;
+        this.ariaDescribedBy = EMPTY_STRING;
+        this.htmlType = EMPTY_STRING;
         /**
          * Required components that must be registered for this component to work properly
-         * Can be overridden by parent implementations
          */
         this.requiredComponents = ['hy-icon'];
-        this.buttonAriaLabel = EMPTY_STRING;
-        this.ariaDescribedBy = EMPTY_STRING;
-        this.htmlType = EMPTY_STRING;
     }
     /**
      * Check for required dependencies when component is connected to DOM
@@ -46,44 +57,22 @@ let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement
         this.validateDependencies();
     }
     /**
-     * Get the appropriate element tag based on button type
-     */
-    getElementTag() {
-        return this.type === "link" /* ButtonType.Link */ && this.href ? 'a' : 'button';
-    }
-    /**
-     * Get attributes for accessibility and functionality
+     * Get common attributes for both button and anchor elements
      */
-    getElementAttributes() {
-        const attributes = {
-            '?disabled': this.disabled && this.type !== "link" /* ButtonType.Link */,
+    getCommonAttributes() {
+        return {
             'data-type': this.type,
             'data-shape': this.shape,
-            'data-size': this.size ? this.size : nothing,
+            'data-size': this.size || nothing,
             'data-state': this.loading ? 'loading' : nothing,
             'data-theme': this.currentTheme,
             'data-block': this.block ? 'true' : nothing,
             'class': this.dashed ? 'button-dashed' : '',
-            'role': this.type === "link" /* ButtonType.Link */ ? 'link' : 'button',
             'aria-disabled': this.disabled ? 'true' : 'false',
             'aria-label': this.buttonAriaLabel || nothing,
             'aria-describedby': this.ariaDescribedBy || nothing,
+            'tabindex': this.disabled ? '-1' : '0'
         };
-        // Add link-specific attributes
-        if (this.type === "link" /* ButtonType.Link */ && this.href) {
-            attributes.href = this.href;
-            if (this.target) {
-                attributes.target = this.target;
-            }
-            if (this.target === '_blank') {
-                attributes.rel = 'noopener noreferrer';
-            }
-        }
-        // Add button-specific attributes
-        if (this.type !== "link" /* ButtonType.Link */) {
-            attributes.type = this.htmlType || 'button';
-        }
-        return attributes;
     }
     /**
      * Renders an icon if the hy-icon component is available
@@ -99,90 +88,89 @@ let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement
         return html `<hy-icon name=${iconName}></hy-icon>`;
     }
     /**
-     * Creates ripple effect on button click
-     * @param event - The click event
-     */
-    createRipple(event) {
-        if (!this.ripple || this.disabled)
-            return;
-        const button = event.currentTarget;
-        const rect = button.getBoundingClientRect();
-        const size = Math.max(rect.width, rect.height);
-        const x = event.clientX - rect.left - size / 2;
-        const y = event.clientY - rect.top - size / 2;
-        const ripple = document.createElement('span');
-        ripple.className = 'ripple';
-        ripple.style.width = ripple.style.height = size + 'px';
-        ripple.style.left = x + 'px';
-        ripple.style.top = y + 'px';
-        // Remove any existing ripples
-        const existingRipples = button.querySelectorAll('.ripple');
-        existingRipples.forEach(r => r.remove());
-        button.appendChild(ripple);
-        // Remove ripple after animation
-        setTimeout(() => {
-            ripple.remove();
-        }, 600);
-    }
-    /**
-     * Handle click events with ripple effect
-     * @param event - The click event
+     * Handle comprehensive click events with proper event dispatching
      */
     handleClick(event) {
-        this.createRipple(event);
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // Use RippleMixin method
+        this.handleRippleClick(event);
+        // Handle link navigation if it's a link type
+        if (this.isLinkType()) {
+            this.dispatchCustomEvent('link-navigation', {
+                href: this.href,
+                target: this.target,
+                timestamp: Date.now(),
+                originalEvent: event
+            });
+        }
+        // Dispatch button event with metadata using EventHandlerMixin
+        this.dispatchEventWithMetadata('button-clicked', {
+            type: this.type,
+            disabled: this.disabled,
+            loading: this.loading,
+            href: this.href || null
+        });
     }
     render() {
-        var _a, _b, _c, _d;
-        const elementTag = this.getElementTag();
-        const attributes = this.getElementAttributes();
+        var _a, _b;
+        const elementTag = this.getElementTag(); // From LinkMixin
+        const commonAttributes = this.getCommonAttributes();
+        const linkAttributes = this.getLinkAttributes(); // From LinkMixin
+        const content = html `
+      <span id="container">
+        ${((_a = this.icon) === null || _a === void 0 ? void 0 : _a.length) ? this.renderIcon(this.icon[0]) : nothing}
+        <slot id="slot"></slot>
+        ${((_b = this.icon) === null || _b === void 0 ? void 0 : _b.length) === 2 ? this.renderIcon(this.icon[1]) : nothing}
+      </span>
+    `;
         if (elementTag === 'a') {
             return html `
         <a
-          href="${attributes.href}"
-          target="${attributes.target || nothing}"
-          rel="${attributes.rel || nothing}"
-          data-type="${attributes['data-type']}"
-          data-shape="${attributes['data-shape']}"
-          data-size="${attributes['data-size']}"
-          data-state="${attributes['data-state']}"
-          data-theme="${attributes['data-theme']}"
-          data-block="${attributes['data-block']}"
-          class="${attributes.class}"
-          role="${attributes.role}"
-          aria-disabled="${attributes['aria-disabled']}"
-          aria-label="${attributes['aria-label']}"
-          aria-describedby="${attributes['aria-describedby']}"
+          href="${linkAttributes.href}"
+          target="${linkAttributes.target || nothing}"
+          rel="${linkAttributes.rel || nothing}"
+          role="${linkAttributes.role}"
+          data-type="${commonAttributes['data-type']}"
+          data-shape="${commonAttributes['data-shape']}"
+          data-size="${commonAttributes['data-size']}"
+          data-state="${commonAttributes['data-state']}"
+          data-theme="${commonAttributes['data-theme']}"
+          data-block="${commonAttributes['data-block']}"
+          class="${commonAttributes.class}"
+          aria-disabled="${this.disabled}"
+          aria-label="${this.buttonAriaLabel || nothing}"
+          aria-describedby="${this.ariaDescribedBy || nothing}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @click="${this.handleClick}"
+          @keydown="${this.handleKeydown}"
         >
-          <span id="container">
-            ${((_a = this.icon) === null || _a === void 0 ? void 0 : _a.length) ? this.renderIcon(this.icon[0]) : nothing}
-            <slot id="slot"></slot>
-            ${((_b = this.icon) === null || _b === void 0 ? void 0 : _b.length) == 2 ? this.renderIcon(this.icon[1]) : nothing}
-          </span>
+          ${content}
         </a>
       `;
         }
         return html `
       <button
-        ?disabled="${attributes['?disabled']}"
-        type="${attributes.type || nothing}"
-        data-type="${attributes['data-type']}"
-        data-shape="${attributes['data-shape']}"
-        data-size="${attributes['data-size']}"
-        data-state="${attributes['data-state']}"
-        data-theme="${attributes['data-theme']}"
-        data-block="${attributes['data-block']}"
-        class="${attributes.class}"
-        role="${attributes.role}"
-        aria-disabled="${attributes['aria-disabled']}"
-        aria-label="${attributes['aria-label']}"
-        aria-describedby="${attributes['aria-describedby']}"
+        ?disabled="${this.disabled}"
+        type="${(this.htmlType || 'button')}"
+        role="${linkAttributes.role}"
+        data-type="${commonAttributes['data-type']}"
+        data-shape="${commonAttributes['data-shape']}"
+        data-size="${commonAttributes['data-size']}" 
+        data-state="${commonAttributes['data-state']}"
+        data-theme="${commonAttributes['data-theme']}"
+        data-block="${commonAttributes['data-block']}"
+        class="${commonAttributes.class}"
+        aria-disabled="${this.disabled}"
+        aria-label="${this.buttonAriaLabel || nothing}"
+        aria-describedby="${this.ariaDescribedBy || nothing}"
+        tabindex="${this.disabled ? -1 : 0}"
         @click="${this.handleClick}"
+        @keydown="${this.handleKeydown}"
       >
-        <span id="container">
-          ${((_c = this.icon) === null || _c === void 0 ? void 0 : _c.length) ? this.renderIcon(this.icon[0]) : nothing}
-          <slot id="slot"></slot>
-          ${((_d = this.icon) === null || _d === void 0 ? void 0 : _d.length) == 2 ? this.renderIcon(this.icon[1]) : nothing}
-        </span>
+        ${content}
       </button>
     `;
     }

package/button.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ButtonType, ButtonShape, EMPTY_STRING, IconPosition } from './button.types.js';\nimport { styles } from './button.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\n\n@customElement('nr-button')\nexport class NrButtonElement extends NuralyUIBaseMixin(LitElement) {\n  @property({type: Boolean})\n  disabled = false;\n\n  @property({type: Boolean})\n  loading = false;\n\n  @property({type: String})\n  size = EMPTY_STRING;\n\n  @property({type: String})\n  type: ButtonType = ButtonType.Default;\n\n  @property({type: String})\n  shape: ButtonShape = ButtonShape.Default;\n\n  @property({type: Boolean})\n  block = false;\n\n  @property({type: Boolean})\n  dashed = false;\n\n  @property({type: Array})\n  icon: string[] = [];\n\n  @property({reflect: true})\n  iconPosition = IconPosition.Left;\n\n  @property({type: String})\n  href = EMPTY_STRING;\n\n  @property({type: String})\n  target = EMPTY_STRING;\n\n  @property({type: Boolean})\n  ripple = true;\n\n  /**\n   * Required components that must be registered for this component to work properly\n   * Can be overridden by parent implementations\n   */\n  override requiredComponents = ['hy-icon'];\n\n  /**\n   * Check for required dependencies when component is connected to DOM\n   */\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  /**\n   * Get the appropriate element tag based on button type\n   */\n  private getElementTag() {\n    return this.type === ButtonType.Link && this.href ? 'a' : 'button';\n  }\n\n  /**\n   * Get attributes for accessibility and functionality\n   */\n  private getElementAttributes() {\n    const attributes: any = {\n      '?disabled': this.disabled && this.type !== ButtonType.Link,\n      'data-type': this.type,\n      'data-shape': this.shape,\n      'data-size': this.size ? this.size : nothing,\n      'data-state': this.loading ? 'loading' : nothing,\n      'data-theme': this.currentTheme,\n      'data-block': this.block ? 'true' : nothing,\n      'class': this.dashed ? 'button-dashed' : '',\n      'role': this.type === ButtonType.Link ? 'link' : 'button',\n      'aria-disabled': this.disabled ? 'true' : 'false',\n      'aria-label': this.buttonAriaLabel || nothing,\n      'aria-describedby': this.ariaDescribedBy || nothing,\n    };\n\n    // Add link-specific attributes\n    if (this.type === ButtonType.Link && this.href) {\n      attributes.href = this.href;\n      if (this.target) {\n        attributes.target = this.target;\n      }\n      if (this.target === '_blank') {\n        attributes.rel = 'noopener noreferrer';\n      }\n    }\n\n    // Add button-specific attributes\n    if (this.type !== ButtonType.Link) {\n      attributes.type = this.htmlType || 'button';\n    }\n\n    return attributes;\n  }\n\n  @property({type: String})\n  buttonAriaLabel = EMPTY_STRING;\n\n  @property({type: String})\n  ariaDescribedBy = EMPTY_STRING;\n\n  @property({type: String})\n  htmlType = EMPTY_STRING;\n\n  /**\n   * Renders an icon if the hy-icon component is available\n   * @param iconName - The name of the icon to render\n   * @returns TemplateResult or nothing\n   */\n  private renderIcon(iconName: string) {\n    if (!this.isComponentAvailable('hy-icon')) {\n      console.warn(\n        `hy-icon component not found. Icon \"${iconName}\" will not be displayed. ` +\n        `Please import hy-icon component.`\n      );\n      return nothing;\n    }\n    return html`<hy-icon name=${iconName}></hy-icon>`;\n  }\n\n  /**\n   * Creates ripple effect on button click\n   * @param event - The click event\n   */\n  private createRipple(event: MouseEvent) {\n    if (!this.ripple || this.disabled) return;\n\n    const button = event.currentTarget as HTMLElement;\n    const rect = button.getBoundingClientRect();\n    const size = Math.max(rect.width, rect.height);\n    const x = event.clientX - rect.left - size / 2;\n    const y = event.clientY - rect.top - size / 2;\n\n    const ripple = document.createElement('span');\n    ripple.className = 'ripple';\n    ripple.style.width = ripple.style.height = size + 'px';\n    ripple.style.left = x + 'px';\n    ripple.style.top = y + 'px';\n\n    // Remove any existing ripples\n    const existingRipples = button.querySelectorAll('.ripple');\n    existingRipples.forEach(r => r.remove());\n\n    button.appendChild(ripple);\n\n    // Remove ripple after animation\n    setTimeout(() => {\n      ripple.remove();\n    }, 600);\n  }\n\n  /**\n   * Handle click events with ripple effect\n   * @param event - The click event\n   */\n  private handleClick(event: MouseEvent) {\n    this.createRipple(event);\n  }\n\n  override render() {\n    const elementTag = this.getElementTag();\n    const attributes = this.getElementAttributes();\n    \n    if (elementTag === 'a') {\n      return html`\n        <a\n          href=\"${attributes.href}\"\n          target=\"${attributes.target || nothing}\"\n          rel=\"${attributes.rel || nothing}\"\n          data-type=\"${attributes['data-type']}\"\n          data-shape=\"${attributes['data-shape']}\"\n          data-size=\"${attributes['data-size']}\"\n          data-state=\"${attributes['data-state']}\"\n          data-theme=\"${attributes['data-theme']}\"\n          data-block=\"${attributes['data-block']}\"\n          class=\"${attributes.class}\"\n          role=\"${attributes.role}\"\n          aria-disabled=\"${attributes['aria-disabled']}\"\n          aria-label=\"${attributes['aria-label']}\"\n          aria-describedby=\"${attributes['aria-describedby']}\"\n        >\n          <span id=\"container\">\n            ${this.icon?.length ? this.renderIcon(this.icon[0]) : nothing}\n            <slot id=\"slot\"></slot>\n            ${this.icon?.length == 2 ? this.renderIcon(this.icon[1]) : nothing}\n          </span>\n        </a>\n      `;\n    }\n    \n    return html`\n      <button\n        ?disabled=\"${attributes['?disabled']}\"\n        type=\"${attributes.type || nothing}\"\n        data-type=\"${attributes['data-type']}\"\n        data-shape=\"${attributes['data-shape']}\"\n        data-size=\"${attributes['data-size']}\"\n        data-state=\"${attributes['data-state']}\"\n        data-theme=\"${attributes['data-theme']}\"\n        data-block=\"${attributes['data-block']}\"\n        class=\"${attributes.class}\"\n        role=\"${attributes.role}\"\n        aria-disabled=\"${attributes['aria-disabled']}\"\n        aria-label=\"${attributes['aria-label']}\"\n        aria-describedby=\"${attributes['aria-describedby']}\"\n        @click=\"${this.handleClick}\"\n      >\n        <span id=\"container\">\n          ${this.icon?.length ? this.renderIcon(this.icon[0]) : nothing}\n          <slot id=\"slot\"></slot>\n          ${this.icon?.length == 2 ? this.renderIcon(this.icon[1]) : nothing}\n        </span>\n      </button>\n    `;\n  }\n  static override styles = styles;\n}\n"]}
+{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ButtonType, ButtonShape, EMPTY_STRING, IconPosition } from './button.types.js';\nimport { styles } from './button.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { RippleMixin, KeyboardMixin, LinkMixin } from './mixins/index.js';\n\n/**\n * - NuralyUIBaseMixin: Core functionality (theme, dependencies, events)\n * - RippleMixin: Ripple effect handling\n * - KeyboardMixin: Keyboard interaction (Enter/Space activation)\n * - LinkMixin: Link-specific behavior for ButtonType.Link\n */\n@customElement('nr-button')\nexport class NrButtonElement extends RippleMixin(\n  KeyboardMixin(\n    LinkMixin(\n      NuralyUIBaseMixin(LitElement)\n    )\n  )\n) {\n  // Button state properties\n  @property({ type: Boolean })\n  override disabled = false;\n\n  @property({ type: Boolean })\n  loading = false;\n\n  @property({ type: String })\n  size = EMPTY_STRING;\n\n  @property({ type: String })\n  override type: ButtonType = ButtonType.Default;\n\n  @property({ type: String })\n  shape: ButtonShape = ButtonShape.Default;\n\n  @property({ type: Boolean })\n  block = false;\n\n  @property({ type: Boolean })\n  dashed = false;\n\n  // Icon properties\n  @property({ type: Array })\n  icon: string[] = [];\n\n  @property({ reflect: true })\n  iconPosition = IconPosition.Left;\n\n  // Link properties (inherited from LinkMixin)\n  @property({ type: String })\n  override href = EMPTY_STRING;\n\n  @property({ type: String })\n  override target = EMPTY_STRING;\n\n  // Ripple property (inherited from RippleMixin)\n  @property({ type: Boolean })\n  override ripple = true;\n\n  // Accessibility properties\n  @property({ type: String })\n  buttonAriaLabel = EMPTY_STRING;\n\n  @property({ type: String })\n  ariaDescribedBy = EMPTY_STRING;\n\n  @property({ type: String })\n  htmlType = EMPTY_STRING;\n\n  /**\n   * Required components that must be registered for this component to work properly\n   */\n  override requiredComponents = ['hy-icon'];\n\n  /**\n   * Check for required dependencies when component is connected to DOM\n   */\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  /**\n   * Get common attributes for both button and anchor elements\n   */\n  private getCommonAttributes() {\n    return {\n      'data-type': this.type,\n      'data-shape': this.shape,\n      'data-size': this.size || nothing,\n      'data-state': this.loading ? 'loading' : nothing,\n      'data-theme': this.currentTheme,\n      'data-block': this.block ? 'true' : nothing,\n      'class': this.dashed ? 'button-dashed' : '',\n      'aria-disabled': this.disabled ? 'true' : 'false',\n      'aria-label': this.buttonAriaLabel || nothing,\n      'aria-describedby': this.ariaDescribedBy || nothing,\n      'tabindex': this.disabled ? '-1' : '0'\n    };\n  }\n\n  /**\n   * Renders an icon if the hy-icon component is available\n   * @param iconName - The name of the icon to render\n   * @returns TemplateResult or nothing\n   */\n  private renderIcon(iconName: string) {\n    if (!this.isComponentAvailable('hy-icon')) {\n      console.warn(\n        `hy-icon component not found. Icon \"${iconName}\" will not be displayed. ` +\n        `Please import hy-icon component.`\n      );\n      return nothing;\n    }\n    return html`<hy-icon name=${iconName}></hy-icon>`;\n  }\n\n  /**\n   * Handle comprehensive click events with proper event dispatching\n   */\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // Use RippleMixin method\n    this.handleRippleClick(event);\n    \n    // Handle link navigation if it's a link type\n    if (this.isLinkType()) {\n      this.dispatchCustomEvent('link-navigation', {\n        href: this.href,\n        target: this.target,\n        timestamp: Date.now(),\n        originalEvent: event\n      });\n    }\n    \n    // Dispatch button event with metadata using EventHandlerMixin\n    this.dispatchEventWithMetadata('button-clicked', {\n      type: this.type,\n      disabled: this.disabled,\n      loading: this.loading,\n      href: this.href || null\n    });\n  }\n\n  override render() {\n    const elementTag = this.getElementTag(); // From LinkMixin\n    const commonAttributes = this.getCommonAttributes();\n    const linkAttributes = this.getLinkAttributes(); // From LinkMixin\n    \n    const content = html`\n      <span id=\"container\">\n        ${this.icon?.length ? this.renderIcon(this.icon[0]) : nothing}\n        <slot id=\"slot\"></slot>\n        ${this.icon?.length === 2 ? this.renderIcon(this.icon[1]) : nothing}\n      </span>\n    `;\n    \n    if (elementTag === 'a') {\n      return html`\n        <a\n          href=\"${linkAttributes.href}\"\n          target=\"${linkAttributes.target || nothing}\"\n          rel=\"${linkAttributes.rel || nothing}\"\n          role=\"${linkAttributes.role}\"\n          data-type=\"${commonAttributes['data-type']}\"\n          data-shape=\"${commonAttributes['data-shape']}\"\n          data-size=\"${commonAttributes['data-size']}\"\n          data-state=\"${commonAttributes['data-state']}\"\n          data-theme=\"${commonAttributes['data-theme']}\"\n          data-block=\"${commonAttributes['data-block']}\"\n          class=\"${commonAttributes.class}\"\n          aria-disabled=\"${this.disabled}\"\n          aria-label=\"${this.buttonAriaLabel || nothing}\"\n          aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n          tabindex=\"${this.disabled ? -1 : 0}\"\n          @click=\"${this.handleClick}\"\n          @keydown=\"${this.handleKeydown}\"\n        >\n          ${content}\n        </a>\n      `;\n    }\n    \n    return html`\n      <button\n        ?disabled=\"${this.disabled}\"\n        type=\"${(this.htmlType || 'button') as 'button' | 'submit' | 'reset'}\"\n        role=\"${linkAttributes.role}\"\n        data-type=\"${commonAttributes['data-type']}\"\n        data-shape=\"${commonAttributes['data-shape']}\"\n        data-size=\"${commonAttributes['data-size']}\" \n        data-state=\"${commonAttributes['data-state']}\"\n        data-theme=\"${commonAttributes['data-theme']}\"\n        data-block=\"${commonAttributes['data-block']}\"\n        class=\"${commonAttributes.class}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-label=\"${this.buttonAriaLabel || nothing}\"\n        aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        @click=\"${this.handleClick}\"\n        @keydown=\"${this.handleKeydown}\"\n      >\n        ${content}\n      </button>\n    `;\n  }\n  static override styles = styles;\n}\n"]}

package/mixins/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { RippleMixin, type RippleCapable } from './ripple-mixin.js';
+export { KeyboardMixin, type KeyboardCapable } from './keyboard-mixin.js';
+export { LinkMixin, type LinkCapable } from './link-mixin.js';
+import type { RippleCapable } from './ripple-mixin.js';
+import type { KeyboardCapable } from './keyboard-mixin.js';
+import type { LinkCapable } from './link-mixin.js';
+export interface ButtonMixinCapable extends RippleCapable, KeyboardCapable, LinkCapable {
+}
+//# sourceMappingURL=index.d.ts.map

package/mixins/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,eAAe,EAAE,WAAW;CAAG"}

package/mixins/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Export all button-specific mixins
+export { RippleMixin } from './ripple-mixin.js';
+export { KeyboardMixin } from './keyboard-mixin.js';
+export { LinkMixin } from './link-mixin.js';
+//# sourceMappingURL=index.js.map

package/mixins/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,oCAAoC;AACpC,OAAO,EAAE,WAAW,EAAsB,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAwB,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAoB,MAAM,iBAAiB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n// Export all button-specific mixins\nexport { RippleMixin, type RippleCapable } from './ripple-mixin.js';\nexport { KeyboardMixin, type KeyboardCapable } from './keyboard-mixin.js';\nexport { LinkMixin, type LinkCapable } from './link-mixin.js';\n\n// Import types for combined interface\nimport type { RippleCapable } from './ripple-mixin.js';\nimport type { KeyboardCapable } from './keyboard-mixin.js';\nimport type { LinkCapable } from './link-mixin.js';\n\n// Combined interface for button components using all mixins\nexport interface ButtonMixinCapable extends RippleCapable, KeyboardCapable, LinkCapable {}\n"]}

package/mixins/keyboard-mixin.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+declare type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Interface for components that support keyboard interaction
+ */
+export interface KeyboardCapable {
+    /**
+     * Whether the component is disabled
+     */
+    disabled: boolean;
+    /**
+     * Handle keyboard activation (Enter/Space)
+     */
+    handleKeyboardActivation(event: KeyboardEvent): void;
+    /**
+     * Handle keydown events with proper focus management
+     */
+    handleKeydown(event: KeyboardEvent): void;
+}
+/**
+ * Mixin that provides keyboard interaction capabilities for button-like components
+ * Handles Enter and Space key activation following ARIA best practices
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with keyboard interaction capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyButton extends KeyboardMixin(LitElement) {
+ *   @property({ type: Boolean }) disabled = false;
+ *
+ *   render() {
+ *     return html`
+ *       <button
+ *         @keydown="${this.handleKeydown}"
+ *         tabindex="${this.disabled ? '-1' : '0'}"
+ *       >
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare const KeyboardMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<KeyboardCapable> & T;
+export {};
+//# sourceMappingURL=keyboard-mixin.d.ts.map

package/mixins/keyboard-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/keyboard-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,wBAAwB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAErD;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;CAC3C;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,wFAwDzB,CAAC"}

package/mixins/keyboard-mixin.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides keyboard interaction capabilities for button-like components
+ * Handles Enter and Space key activation following ARIA best practices
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with keyboard interaction capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyButton extends KeyboardMixin(LitElement) {
+ *   @property({ type: Boolean }) disabled = false;
+ *
+ *   render() {
+ *     return html`
+ *       <button
+ *         @keydown="${this.handleKeydown}"
+ *         tabindex="${this.disabled ? '-1' : '0'}"
+ *       >
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export const KeyboardMixin = (superClass) => {
+    class KeyboardMixinClass extends superClass {
+        /**
+         * Handle keyboard activation (Enter/Space keys)
+         * @param event - The keyboard event
+         */
+        handleKeyboardActivation(event) {
+            if (this.disabled)
+                return;
+            // Check if EventHandlerMixin is available for proper key checking
+            const isActivationKey = typeof this.isActivationKey === 'function'
+                ? this.isActivationKey(event)
+                : (event.key === 'Enter' || event.key === ' ');
+            if (isActivationKey) {
+                event.preventDefault();
+                // Trigger click event for consistency
+                this.click();
+                // Dispatch custom keyboard activation event if EventHandling mixin is available
+                if (typeof this.dispatchCustomEvent === 'function') {
+                    this.dispatchCustomEvent('keyboard-activation', {
+                        key: event.key,
+                        timestamp: Date.now(),
+                        target: this
+                    });
+                }
+            }
+        }
+        /**
+         * Handle keydown events with proper disabled state checking
+         * @param event - The keyboard event
+         */
+        handleKeydown(event) {
+            if (this.disabled) {
+                // Allow readonly navigation keys even when disabled
+                const isNavigationKey = typeof this.isReadonlyKeyAllowed === 'function'
+                    ? this.isReadonlyKeyAllowed(event)
+                    : ['Tab', 'Shift', 'Escape', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key);
+                if (!isNavigationKey) {
+                    event.preventDefault();
+                    return;
+                }
+            }
+            this.handleKeyboardActivation(event);
+        }
+    }
+    return KeyboardMixinClass;
+};
+//# sourceMappingURL=keyboard-mixin.js.map

package/mixins/keyboard-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-mixin.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/keyboard-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0BH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAoC,UAAa,EAAE,EAAE;IAChF,MAAM,kBAAmB,SAAQ,UAAU;QAIzC;;;WAGG;QACH,wBAAwB,CAAC,KAAoB;YAC3C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,kEAAkE;YAClE,MAAM,eAAe,GAAG,OAAQ,IAAY,CAAC,eAAe,KAAK,UAAU;gBACzE,CAAC,CAAE,IAAY,CAAC,eAAe,CAAC,KAAK,CAAC;gBACtC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;YAEjD,IAAI,eAAe,EAAE;gBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,sCAAsC;gBACtC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAEb,gFAAgF;gBAChF,IAAI,OAAQ,IAAY,CAAC,mBAAmB,KAAK,UAAU,EAAE;oBAC1D,IAAY,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;wBACvD,GAAG,EAAE,KAAK,CAAC,GAAG;wBACd,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;wBACrB,MAAM,EAAE,IAAI;qBACb,CAAC,CAAC;iBACJ;aACF;QACH,CAAC;QAED;;;WAGG;QACH,aAAa,CAAC,KAAoB;YAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,oDAAoD;gBACpD,MAAM,eAAe,GAAG,OAAQ,IAAY,CAAC,oBAAoB,KAAK,UAAU;oBAC9E,CAAC,CAAE,IAAY,CAAC,oBAAoB,CAAC,KAAK,CAAC;oBAC3C,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAErH,IAAI,CAAC,eAAe,EAAE;oBACpB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,OAAO;iBACR;aACF;YAED,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;KACF;IAED,OAAO,kBAAsD,CAAC;AAChE,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support keyboard interaction\n */\nexport interface KeyboardCapable {\n  /**\n   * Whether the component is disabled\n   */\n  disabled: boolean;\n  \n  /**\n   * Handle keyboard activation (Enter/Space)\n   */\n  handleKeyboardActivation(event: KeyboardEvent): void;\n  \n  /**\n   * Handle keydown events with proper focus management\n   */\n  handleKeydown(event: KeyboardEvent): void;\n}\n\n/**\n * Mixin that provides keyboard interaction capabilities for button-like components\n * Handles Enter and Space key activation following ARIA best practices\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with keyboard interaction capabilities\n * \n * @example\n * ```typescript\n * export class MyButton extends KeyboardMixin(LitElement) {\n *   @property({ type: Boolean }) disabled = false;\n *   \n *   render() {\n *     return html`\n *       <button \n *         @keydown=\"${this.handleKeydown}\"\n *         tabindex=\"${this.disabled ? '-1' : '0'}\"\n *       >\n *         <slot></slot>\n *       </button>\n *     `;\n *   }\n * }\n * ```\n */\nexport const KeyboardMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class KeyboardMixinClass extends superClass implements KeyboardCapable {\n    \n    declare disabled: boolean;\n    \n    /**\n     * Handle keyboard activation (Enter/Space keys)\n     * @param event - The keyboard event\n     */\n    handleKeyboardActivation(event: KeyboardEvent): void {\n      if (this.disabled) return;\n      \n      // Check if EventHandlerMixin is available for proper key checking\n      const isActivationKey = typeof (this as any).isActivationKey === 'function'\n        ? (this as any).isActivationKey(event)\n        : (event.key === 'Enter' || event.key === ' ');\n      \n      if (isActivationKey) {\n        event.preventDefault();\n        \n        // Trigger click event for consistency\n        this.click();\n        \n        // Dispatch custom keyboard activation event if EventHandling mixin is available\n        if (typeof (this as any).dispatchCustomEvent === 'function') {\n          (this as any).dispatchCustomEvent('keyboard-activation', {\n            key: event.key,\n            timestamp: Date.now(),\n            target: this\n          });\n        }\n      }\n    }\n\n    /**\n     * Handle keydown events with proper disabled state checking\n     * @param event - The keyboard event\n     */\n    handleKeydown(event: KeyboardEvent): void {\n      if (this.disabled) {\n        // Allow readonly navigation keys even when disabled\n        const isNavigationKey = typeof (this as any).isReadonlyKeyAllowed === 'function'\n          ? (this as any).isReadonlyKeyAllowed(event)\n          : ['Tab', 'Shift', 'Escape', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key);\n        \n        if (!isNavigationKey) {\n          event.preventDefault();\n          return;\n        }\n      }\n      \n      this.handleKeyboardActivation(event);\n    }\n  }\n\n  return KeyboardMixinClass as Constructor<KeyboardCapable> & T;\n};\n"]}

package/mixins/link-mixin.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { ButtonType } from '../button.types.js';
+declare type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Interface for components that support link behavior
+ */
+export interface LinkCapable {
+    /**
+     * Button type that determines if it should render as link
+     */
+    type: ButtonType;
+    /**
+     * URL for link buttons
+     */
+    href: string;
+    /**
+     * Target attribute for link buttons
+     */
+    target: string;
+    /**
+     * Get the appropriate element tag (button or a)
+     */
+    getElementTag(): string;
+    /**
+     * Get link-specific attributes
+     */
+    getLinkAttributes(): Record<string, any>;
+    /**
+     * Check if component should render as a link
+     */
+    isLinkType(): boolean;
+}
+/**
+ * Mixin that provides link behavior for button components
+ * Handles the distinction between button and anchor elements
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with link capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyButton extends LinkMixin(LitElement) {
+ *   @property({ type: String }) type = ButtonType.Default;
+ *   @property({ type: String }) href = '';
+ *   @property({ type: String }) target = '';
+ *
+ *   render() {
+ *     const tag = this.getElementTag();
+ *     const attrs = this.getLinkAttributes();
+ *
+ *     return html`
+ *       <${tag} ...${attrs}>
+ *         <slot></slot>
+ *       </${tag}>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare const LinkMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<LinkCapable> & T;
+export {};
+//# sourceMappingURL=link-mixin.d.ts.map

package/mixins/link-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/link-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,IAAI,MAAM,CAAC;IAExB;;OAEG;IACH,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAEzC;;OAEG;IACH,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS,oFAkErB,CAAC"}

package/mixins/link-mixin.js

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides link behavior for button components
+ * Handles the distinction between button and anchor elements
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with link capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyButton extends LinkMixin(LitElement) {
+ *   @property({ type: String }) type = ButtonType.Default;
+ *   @property({ type: String }) href = '';
+ *   @property({ type: String }) target = '';
+ *
+ *   render() {
+ *     const tag = this.getElementTag();
+ *     const attrs = this.getLinkAttributes();
+ *
+ *     return html`
+ *       <${tag} ...${attrs}>
+ *         <slot></slot>
+ *       </${tag}>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export const LinkMixin = (superClass) => {
+    class LinkMixinClass extends superClass {
+        /**
+         * Check if the button should render as a link
+         */
+        isLinkType() {
+            return this.type === "link" /* ButtonType.Link */ && !!this.href;
+        }
+        /**
+         * Get the appropriate element tag based on button type
+         */
+        getElementTag() {
+            return this.isLinkType() ? 'a' : 'button';
+        }
+        /**
+         * Get link-specific attributes for anchor elements
+         */
+        getLinkAttributes() {
+            const attributes = {};
+            if (this.isLinkType()) {
+                attributes.href = this.href;
+                if (this.target) {
+                    attributes.target = this.target;
+                    // Add security attributes for external links
+                    if (this.target === '_blank') {
+                        attributes.rel = 'noopener noreferrer';
+                    }
+                }
+                attributes.role = 'link';
+            }
+            else {
+                attributes.role = 'button';
+            }
+            return attributes;
+        }
+        /**
+         * Handle link navigation with proper event dispatching
+         */
+        handleLinkNavigation(event) {
+            if (this.isLinkType()) {
+                // Dispatch custom navigation event if EventHandling mixin is available
+                if (typeof this.dispatchCustomEvent === 'function') {
+                    this.dispatchCustomEvent('link-navigation', {
+                        href: this.href,
+                        target: this.target,
+                        timestamp: Date.now(),
+                        originalEvent: event
+                    });
+                }
+            }
+        }
+    }
+    return LinkMixinClass;
+};
+//# sourceMappingURL=link-mixin.js.map

package/mixins/link-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-mixin.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/link-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0CH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAoC,UAAa,EAAE,EAAE;IAC5E,MAAM,cAAe,SAAQ,UAAU;QAMrC;;WAEG;QACH,UAAU;YACR,OAAO,IAAI,CAAC,IAAI,iCAAoB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QACtD,CAAC;QAED;;WAEG;QACH,aAAa;YACX,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC5C,CAAC;QAED;;WAEG;QACH,iBAAiB;YACf,MAAM,UAAU,GAAwB,EAAE,CAAC;YAE3C,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;gBACrB,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBAE5B,IAAI,IAAI,CAAC,MAAM,EAAE;oBACf,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;oBAEhC,6CAA6C;oBAC7C,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;wBAC5B,UAAU,CAAC,GAAG,GAAG,qBAAqB,CAAC;qBACxC;iBACF;gBAED,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC;aAC1B;iBAAM;gBACL,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;aAC5B;YAED,OAAO,UAAU,CAAC;QACpB,CAAC;QAED;;WAEG;QACH,oBAAoB,CAAC,KAAY;YAC/B,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;gBACrB,uEAAuE;gBACvE,IAAI,OAAQ,IAAY,CAAC,mBAAmB,KAAK,UAAU,EAAE;oBAC1D,IAAY,CAAC,mBAAmB,CAAC,iBAAiB,EAAE;wBACnD,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;wBACrB,aAAa,EAAE,KAAK;qBACrB,CAAC,CAAC;iBACJ;aACF;QACH,CAAC;KACF;IAED,OAAO,cAA8C,CAAC;AACxD,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\nimport { ButtonType } from '../button.types.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support link behavior\n */\nexport interface LinkCapable {\n  /**\n   * Button type that determines if it should render as link\n   */\n  type: ButtonType;\n  \n  /**\n   * URL for link buttons\n   */\n  href: string;\n  \n  /**\n   * Target attribute for link buttons\n   */\n  target: string;\n  \n  /**\n   * Get the appropriate element tag (button or a)\n   */\n  getElementTag(): string;\n  \n  /**\n   * Get link-specific attributes\n   */\n  getLinkAttributes(): Record<string, any>;\n  \n  /**\n   * Check if component should render as a link\n   */\n  isLinkType(): boolean;\n}\n\n/**\n * Mixin that provides link behavior for button components\n * Handles the distinction between button and anchor elements\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with link capabilities\n * \n * @example\n * ```typescript\n * export class MyButton extends LinkMixin(LitElement) {\n *   @property({ type: String }) type = ButtonType.Default;\n *   @property({ type: String }) href = '';\n *   @property({ type: String }) target = '';\n *   \n *   render() {\n *     const tag = this.getElementTag();\n *     const attrs = this.getLinkAttributes();\n *     \n *     return html`\n *       <${tag} ...${attrs}>\n *         <slot></slot>\n *       </${tag}>\n *     `;\n *   }\n * }\n * ```\n */\nexport const LinkMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class LinkMixinClass extends superClass implements LinkCapable {\n    \n    declare type: ButtonType;\n    declare href: string;\n    declare target: string;\n    \n    /**\n     * Check if the button should render as a link\n     */\n    isLinkType(): boolean {\n      return this.type === ButtonType.Link && !!this.href;\n    }\n    \n    /**\n     * Get the appropriate element tag based on button type\n     */\n    getElementTag(): string {\n      return this.isLinkType() ? 'a' : 'button';\n    }\n    \n    /**\n     * Get link-specific attributes for anchor elements\n     */\n    getLinkAttributes(): Record<string, any> {\n      const attributes: Record<string, any> = {};\n      \n      if (this.isLinkType()) {\n        attributes.href = this.href;\n        \n        if (this.target) {\n          attributes.target = this.target;\n          \n          // Add security attributes for external links\n          if (this.target === '_blank') {\n            attributes.rel = 'noopener noreferrer';\n          }\n        }\n        \n        attributes.role = 'link';\n      } else {\n        attributes.role = 'button';\n      }\n      \n      return attributes;\n    }\n    \n    /**\n     * Handle link navigation with proper event dispatching\n     */\n    handleLinkNavigation(event: Event): void {\n      if (this.isLinkType()) {\n        // Dispatch custom navigation event if EventHandling mixin is available\n        if (typeof (this as any).dispatchCustomEvent === 'function') {\n          (this as any).dispatchCustomEvent('link-navigation', {\n            href: this.href,\n            target: this.target,\n            timestamp: Date.now(),\n            originalEvent: event\n          });\n        }\n      }\n    }\n  }\n\n  return LinkMixinClass as Constructor<LinkCapable> & T;\n};\n"]}

package/mixins/ripple-mixin.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+declare type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Interface for components that support ripple effect
+ */
+export interface RippleCapable {
+    /**
+     * Whether ripple effect is enabled
+     */
+    ripple: boolean;
+    /**
+     * Whether the component is disabled (affects ripple)
+     */
+    disabled: boolean;
+    /**
+     * Create ripple effect at click position
+     */
+    createRipple(event: MouseEvent): void;
+    /**
+     * Handle click events with ripple effect
+     */
+    handleRippleClick(event: MouseEvent): void;
+}
+/**
+ * Mixin that provides ripple effect functionality for button-like components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with ripple effect capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyButton extends RippleMixin(LitElement) {
+ *   @property({ type: Boolean }) ripple = true;
+ *   @property({ type: Boolean }) disabled = false;
+ *
+ *   render() {
+ *     return html`
+ *       <button @click="${this.handleRippleClick}">
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare const RippleMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<RippleCapable> & T;
+export {};
+//# sourceMappingURL=ripple-mixin.d.ts.map

package/mixins/ripple-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/ripple-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACH,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC5C;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,sFA2DvB,CAAC"}

package/mixins/ripple-mixin.js

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides ripple effect functionality for button-like components
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with ripple effect capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyButton extends RippleMixin(LitElement) {
+ *   @property({ type: Boolean }) ripple = true;
+ *   @property({ type: Boolean }) disabled = false;
+ *
+ *   render() {
+ *     return html`
+ *       <button @click="${this.handleRippleClick}">
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export const RippleMixin = (superClass) => {
+    class RippleMixinClass extends superClass {
+        /**
+         * Creates ripple effect on button click
+         * @param event - The click event
+         */
+        createRipple(event) {
+            if (!this.ripple || this.disabled)
+                return;
+            const button = event.currentTarget;
+            const rect = button.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = event.clientX - rect.left - size / 2;
+            const y = event.clientY - rect.top - size / 2;
+            const ripple = document.createElement('span');
+            ripple.className = 'ripple';
+            ripple.style.width = ripple.style.height = size + 'px';
+            ripple.style.left = x + 'px';
+            ripple.style.top = y + 'px';
+            // Remove any existing ripples
+            const existingRipples = button.querySelectorAll('.ripple');
+            existingRipples.forEach(r => r.remove());
+            button.appendChild(ripple);
+            // Remove ripple after animation
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        }
+        /**
+         * Handle click events with ripple effect and dispatch custom event
+         * @param event - The click event
+         */
+        handleRippleClick(event) {
+            this.createRipple(event);
+            // Dispatch custom button click event if EventHandling mixin is available
+            if (typeof this.dispatchCustomEvent === 'function') {
+                this.dispatchCustomEvent('button-click', {
+                    disabled: this.disabled,
+                    timestamp: Date.now(),
+                    coordinates: {
+                        x: event.clientX,
+                        y: event.clientY
+                    }
+                });
+            }
+        }
+    }
+    return RippleMixinClass;
+};
+//# sourceMappingURL=ripple-mixin.js.map

package/mixins/ripple-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-mixin.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/ripple-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA+BH;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAoC,UAAa,EAAE,EAAE;IAC9E,MAAM,gBAAiB,SAAQ,UAAU;QAKvC;;;WAGG;QACH,YAAY,CAAC,KAAiB;YAC5B,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1C,MAAM,MAAM,GAAG,KAAK,CAAC,aAA4B,CAAC;YAClD,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;YAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC;YAC/C,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC;YAE9C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC9C,MAAM,CAAC,SAAS,GAAG,QAAQ,CAAC;YAC5B,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;YACvD,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;YAC7B,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;YAE5B,8BAA8B;YAC9B,MAAM,eAAe,GAAG,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC3D,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;YAEzC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;YAE3B,gCAAgC;YAChC,UAAU,CAAC,GAAG,EAAE;gBACd,MAAM,CAAC,MAAM,EAAE,CAAC;YAClB,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;QAED;;;WAGG;QACH,iBAAiB,CAAC,KAAiB;YACjC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YAEzB,yEAAyE;YACzE,IAAI,OAAQ,IAAY,CAAC,mBAAmB,KAAK,UAAU,EAAE;gBAC1D,IAAY,CAAC,mBAAmB,CAAC,cAAc,EAAE;oBAChD,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;oBACrB,WAAW,EAAE;wBACX,CAAC,EAAE,KAAK,CAAC,OAAO;wBAChB,CAAC,EAAE,KAAK,CAAC,OAAO;qBACjB;iBACF,CAAC,CAAC;aACJ;QACH,CAAC;KACF;IAED,OAAO,gBAAkD,CAAC;AAC5D,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support ripple effect\n */\nexport interface RippleCapable {\n  /**\n   * Whether ripple effect is enabled\n   */\n  ripple: boolean;\n  \n  /**\n   * Whether the component is disabled (affects ripple)\n   */\n  disabled: boolean;\n  \n  /**\n   * Create ripple effect at click position\n   */\n  createRipple(event: MouseEvent): void;\n  \n  /**\n   * Handle click events with ripple effect\n   */\n  handleRippleClick(event: MouseEvent): void;\n}\n\n/**\n * Mixin that provides ripple effect functionality for button-like components\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with ripple effect capabilities\n * \n * @example\n * ```typescript\n * export class MyButton extends RippleMixin(LitElement) {\n *   @property({ type: Boolean }) ripple = true;\n *   @property({ type: Boolean }) disabled = false;\n *   \n *   render() {\n *     return html`\n *       <button @click=\"${this.handleRippleClick}\">\n *         <slot></slot>\n *       </button>\n *     `;\n *   }\n * }\n * ```\n */\nexport const RippleMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class RippleMixinClass extends superClass implements RippleCapable {\n    \n    declare ripple: boolean;\n    declare disabled: boolean;\n    \n    /**\n     * Creates ripple effect on button click\n     * @param event - The click event\n     */\n    createRipple(event: MouseEvent): void {\n      if (!this.ripple || this.disabled) return;\n\n      const button = event.currentTarget as HTMLElement;\n      const rect = button.getBoundingClientRect();\n      const size = Math.max(rect.width, rect.height);\n      const x = event.clientX - rect.left - size / 2;\n      const y = event.clientY - rect.top - size / 2;\n\n      const ripple = document.createElement('span');\n      ripple.className = 'ripple';\n      ripple.style.width = ripple.style.height = size + 'px';\n      ripple.style.left = x + 'px';\n      ripple.style.top = y + 'px';\n\n      // Remove any existing ripples\n      const existingRipples = button.querySelectorAll('.ripple');\n      existingRipples.forEach(r => r.remove());\n\n      button.appendChild(ripple);\n\n      // Remove ripple after animation\n      setTimeout(() => {\n        ripple.remove();\n      }, 600);\n    }\n\n    /**\n     * Handle click events with ripple effect and dispatch custom event\n     * @param event - The click event\n     */\n    handleRippleClick(event: MouseEvent): void {\n      this.createRipple(event);\n      \n      // Dispatch custom button click event if EventHandling mixin is available\n      if (typeof (this as any).dispatchCustomEvent === 'function') {\n        (this as any).dispatchCustomEvent('button-click', {\n          disabled: this.disabled,\n          timestamp: Date.now(),\n          coordinates: {\n            x: event.clientX,\n            y: event.clientY\n          }\n        });\n      }\n    }\n  }\n\n  return RippleMixinClass as Constructor<RippleCapable> & T;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/button",
-    "version": "0.0.13",
+    "version": "0.0.14",
     "description": "Button component for NuralyUI library",
     "main": "index.js",
     "type": "module",