@nuralyui/button 0.0.11 → 0.0.13

package/{nr-button.component.d.ts → button.component.d.ts}

@@ -4,16 +4,21 @@
  * SPDX-License-Identifier: MIT
  */
 import { LitElement } from 'lit';
-import { ButtonType, IconPosition } from './nr-button.types.js';
+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;
 export declare class NrButtonElement extends NrButtonElement_base {
     disabled: boolean;
     loading: boolean;
     size: string;
     type: ButtonType;
+    shape: ButtonShape;
+    block: boolean;
     dashed: boolean;
     icon: string[];
     iconPosition: IconPosition;
+    href: string;
+    target: string;
+    ripple: boolean;
     /**
      * Required components that must be registered for this component to work properly
      * Can be overridden by parent implementations
@@ -23,14 +28,35 @@ export declare class NrButtonElement extends NrButtonElement_base {
      * Check for required dependencies when component is connected to DOM
      */
     connectedCallback(): void;
+    /**
+     * Get the appropriate element tag based on button type
+     */
+    private getElementTag;
+    /**
+     * Get attributes for accessibility and functionality
+     */
+    private getElementAttributes;
+    buttonAriaLabel: string;
+    ariaDescribedBy: string;
+    htmlType: string;
     /**
      * Renders an icon if the hy-icon component is available
      * @param iconName - The name of the icon to render
      * @returns TemplateResult or nothing
      */
     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
+     */
+    private handleClick;
     render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export {};
-//# sourceMappingURL=nr-button.component.d.ts.map
+//# sourceMappingURL=button.component.d.ts.map

package/button.component.d.ts.map

@@ -0,0 +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"}

package/button.component.js

@@ -0,0 +1,240 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, nothing } from 'lit';
+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) {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.loading = false;
+        this.size = EMPTY_STRING;
+        this.type = "default" /* ButtonType.Default */;
+        this.shape = "default" /* ButtonShape.Default */;
+        this.block = false;
+        this.dashed = false;
+        this.icon = [];
+        this.iconPosition = "left" /* IconPosition.Left */;
+        this.href = EMPTY_STRING;
+        this.target = EMPTY_STRING;
+        this.ripple = true;
+        /**
+         * 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
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        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
+     */
+    getElementAttributes() {
+        const attributes = {
+            '?disabled': this.disabled && this.type !== "link" /* ButtonType.Link */,
+            'data-type': this.type,
+            'data-shape': this.shape,
+            'data-size': this.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,
+        };
+        // 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
+     * @param iconName - The name of the icon to render
+     * @returns TemplateResult or nothing
+     */
+    renderIcon(iconName) {
+        if (!this.isComponentAvailable('hy-icon')) {
+            console.warn(`hy-icon component not found. Icon "${iconName}" will not be displayed. ` +
+                `Please import hy-icon component.`);
+            return nothing;
+        }
+        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
+     */
+    handleClick(event) {
+        this.createRipple(event);
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const elementTag = this.getElementTag();
+        const attributes = this.getElementAttributes();
+        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']}"
+        >
+          <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>
+        </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']}"
+        @click="${this.handleClick}"
+      >
+        <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>
+      </button>
+    `;
+    }
+};
+NrButtonElement.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "block", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "dashed", void 0);
+__decorate([
+    property({ type: Array })
+], NrButtonElement.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true })
+], NrButtonElement.prototype, "iconPosition", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "ripple", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "buttonAriaLabel", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "htmlType", void 0);
+NrButtonElement = __decorate([
+    customElement('nr-button')
+], NrButtonElement);
+export { NrButtonElement };
+//# sourceMappingURL=button.component.js.map

package/button.component.js.map

@@ -0,0 +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"]}

package/{nr-button.style.d.ts → button.style.d.ts}

@@ -3,7 +3,7 @@
  *
  * @description
  * This export provides the complete styling system for the button component,
- * including all variants, states, sizes, and theme support.
+ * including all variants, states, sizes, theme support, and CSS custom properties.
  *
  * @usage
  * Import and use in the component's styles property:
@@ -16,4 +16,4 @@
  * ```
  */
 export declare const styles: import("lit").CSSResult[];
-//# sourceMappingURL=nr-button.style.d.ts.map
+//# sourceMappingURL=button.style.d.ts.map

package/button.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.style.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.style.ts"],"names":[],"mappings":"AA4mBA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM,2BAAkC,CAAC"}