@nuralyui/button 0.0.10 → 0.0.11

package/demo/{hy-buttons-demo.d.ts → nr-buttons-demo.d.ts}

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: MIT
  */
 import { LitElement } from 'lit';
-import '../hy-button.component';
+import '../nr-button.component';
 import '../../../helpers/ThemeHandler';
 export declare class ElButtonDemoElement extends LitElement {
     render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'hy-buttons-demo': ElButtonDemoElement;
+        'nr-buttons-demo': ElButtonDemoElement;
     }
 }
-//# sourceMappingURL=hy-buttons-demo.d.ts.map
+//# sourceMappingURL=nr-buttons-demo.d.ts.map

package/demo/nr-buttons-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nr-buttons-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/button/demo/nr-buttons-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,wBAAwB,CAAC;AAChC,OAAO,+BAA+B,CAAC;AACvC,qBACa,mBAAoB,SAAQ,UAAU;IACxC,MAAM;CA6LhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,mBAAmB,CAAC;KACxC;CACF"}

package/demo/nr-buttons-demo.js

@@ -0,0 +1,211 @@
+/**
+ * @license
+ * Copyright 2023 Google 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 { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import '../nr-button.component';
+import '../../../helpers/ThemeHandler';
+let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
+    render() {
+        return html `
+      <theme-handler>
+        <h1>Sizes</h1>
+        <br />
+        <nr-button> Default Button</nr-button>
+        <nr-button size="small">Small Button</nr-button>
+        <nr-button size="large">Large Button</nr-button>
+        <br /><br />
+        <nr-button .icon="${['search']}"> Default Button</nr-button>
+        <nr-button .icon="${['search']}" size="small">Small Button</nr-button>
+        <nr-button .icon="${['search']}" size="large">Large Button</nr-button>
+
+        <br /><br />
+        <nr-button .icon="${['search']}"></nr-button>
+        <nr-button .icon="${['search']}" size="small"></nr-button>
+        <nr-button .icon="${['search']}" size="large"></nr-button>
+        <br /><br />
+
+        <h1>Types</h1>
+        <br /><br />
+
+        <table>
+          <tbody>
+            <tr>
+              <td></td>
+              <td>Primary</td>
+              <td>Secondary</td>
+              <td>Ghost</td>
+              <td>Danger</td>
+              <td>Default</td>
+            </tr>
+            <tr>
+              <td>Default</td>
+              <td>
+                <nr-button type="primary"><span>Primary Button</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="secondary"><span>Secondary Button </span></nr-button>
+              </td>
+              <td>
+                <nr-button type="ghost"> <span>Ghost button</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="danger"><span>Danger Button </span></nr-button>
+              </td>
+              <td>
+                <nr-button><span>Default Button</span></nr-button>
+              </td>
+            </tr>
+            <tr>
+              <td>Dashed</td>
+              <td>
+                <nr-button type="primary" ?dashed=${true}><span>Primary Button text only</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="secondary" ?dashed=${true}><span>Secondary dashed</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="ghost" ?dashed=${true}><span>Ghost dashed</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="danger" ?dashed=${true}><span>Danger dashed</span></nr-button>
+              </td>
+              <td>
+                <nr-button ?dashed=${true}><span>Default dashed</span></nr-button>
+              </td>
+            </tr>
+            <tr>
+              <td>Loading</td>
+              <td>
+                <nr-button type="primary" loading><span>Primary Button loading</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="secondary" loading><span>Secondary button loading </span></nr-button>
+              </td>
+              <td>
+                <nr-button type="ghost" loading><span>Ghost button loading</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="danger" loading><span>Danger button loading</span></nr-button>
+              </td>
+              <td>
+                <nr-button loading><span>Default button loading</span></nr-button>
+              </td>
+            </tr>
+            <tr>
+              <td>Disabled</td>
+              <td>
+                <nr-button type="primary" disabled><span>Primary Button disabled</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="secondary" disabled><span>Secondary Button disabled</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="ghost" disabled> <span>Ghost button disabled</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="danger" disabled><span>Danger Button disabled</span></nr-button>
+              </td>
+              <td>
+                <nr-button disabled><span>Default Button disabled</span></nr-button>
+              </td>
+            </tr>
+            <tr>
+              <td>Icon with text default: icon left</td>
+              <td>
+                <nr-button type="primary" .icon="${['search']}"><span> Primary button icon+text</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="secondary" .icon="${['search']}"><span> Secondary button icon+text</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="ghost" .icon="${['search']}"><span> Ghost button icon+text</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="danger" .icon="${['search']}"><span> Danger button icon+text</span></nr-button>
+              </td>
+              <td>
+                <nr-button .icon="${['search']}"><span> Default button icon+text</span></nr-button>
+              </td>
+            </tr>
+            <tr>
+              <td>Icon with text: icon right</td>
+              <td>
+                <nr-button type="primary" .icon="${['search']}" iconPosition="right"
+                  ><span> Primary button icon+text</span></nr-button
+                >
+              </td>
+              <td>
+                <nr-button type="secondary" .icon="${['search']}" iconPosition="right"
+                  ><span> Secondary button icon+text</span></nr-button
+                >
+              </td>
+              <td>
+                <nr-button type="ghost" .icon="${['search']}" iconPosition="right"
+                  ><span> Ghost button icon+text</span></nr-button
+                >
+              </td>
+              <td>
+                <nr-button type="danger" .icon="${['search']}" iconPosition="right"
+                  ><span> Danger button icon+text</span></nr-button
+                >
+              </td>
+              <td>
+                <nr-button .icon="${['search']}" iconPosition="right"><span> Default button icon+text</span></nr-button>
+              </td>
+            </tr>
+            <tr>
+              <td>Icon with text: icon both side</td>
+              <td>
+                <nr-button type="primary" .icon="${['search', 'bomb']}" iconPosition="right"
+                  ><span> Primary button icon+text</span></nr-button
+                >
+              </td>
+              <td>
+                <nr-button type="secondary" .icon="${['search', 'bomb']}" iconPosition="right"
+                  ><span> Secondary button icon+text</span></nr-button
+                >
+              </td>
+              <td>
+                <nr-button type="ghost" .icon="${['search', 'bomb']}" iconPosition="right"
+                  ><span> Ghost button icon+text</span></nr-button
+                >
+              </td>
+              <td>
+                <nr-button type="danger" .icon="${['search', 'bomb']}" iconPosition="right"
+                  ><span> Danger button icon+text</span></nr-button
+                >
+              </td>
+              <td>
+                <nr-button .icon="${['search', 'bomb']}" iconPosition="right"
+                  ><span> Default button icon+text</span></nr-button
+                >
+              </td>
+            </tr>
+            <tr>
+              <td>Icon only</td>
+              <td><nr-button type="primary" .icon="${['search']}"></nr-button></td>
+              <td><nr-button type="secondary" .icon="${['search']}"></nr-button></td>
+              <td><nr-button type="ghost" .icon="${['search']}"></nr-button></td>
+              <td><nr-button type="danger" .icon="${['search']}"></nr-button></td>
+              <td><nr-button .icon="${['search']}"></nr-button></td>
+            </tr>
+          </tbody>
+        </table>
+      </theme-handler>
+    `;
+    }
+};
+ElButtonDemoElement = __decorate([
+    customElement('nr-buttons-demo')
+], ElButtonDemoElement);
+export { ElButtonDemoElement };
+//# sourceMappingURL=nr-buttons-demo.js.map

package/demo/nr-buttons-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nr-buttons-demo.js","sourceRoot":"","sources":["../../../../src/components/button/demo/nr-buttons-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,wBAAwB,CAAC;AAChC,OAAO,+BAA+B,CAAC;AAEvC,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IACxC,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;4BAQa,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;;;4BAGV,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAqCc,IAAI;;;sDAGF,IAAI;;;kDAGR,IAAI;;;mDAGH,IAAI;;;qCAGlB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA0CU,CAAC,QAAQ,CAAC;;;qDAGR,CAAC,QAAQ,CAAC;;;iDAGd,CAAC,QAAQ,CAAC;;;kDAGT,CAAC,QAAQ,CAAC;;;oCAGxB,CAAC,QAAQ,CAAC;;;;;;mDAMK,CAAC,QAAQ,CAAC;;;;;qDAKR,CAAC,QAAQ,CAAC;;;;;iDAKd,CAAC,QAAQ,CAAC;;;;;kDAKT,CAAC,QAAQ,CAAC;;;;;oCAKxB,CAAC,QAAQ,CAAC;;;;;;mDAMK,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;qDAKhB,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;iDAKtB,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;kDAKjB,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;oCAKhC,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;;;qDAOD,CAAC,QAAQ,CAAC;uDACR,CAAC,QAAQ,CAAC;mDACd,CAAC,QAAQ,CAAC;oDACT,CAAC,QAAQ,CAAC;sCACxB,CAAC,QAAQ,CAAC;;;;;KAK3C,CAAC;IACJ,CAAC;CACF,CAAA;AA9LY,mBAAmB;IAD/B,aAAa,CAAC,iBAAiB,CAAC;GACpB,mBAAmB,CA8L/B;SA9LY,mBAAmB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport '../nr-button.component';\nimport '../../../helpers/ThemeHandler';\n@customElement('nr-buttons-demo')\nexport class ElButtonDemoElement extends LitElement {\n  override render() {\n    return html`\n      <theme-handler>\n        <h1>Sizes</h1>\n        <br />\n        <nr-button> Default Button</nr-button>\n        <nr-button size=\"small\">Small Button</nr-button>\n        <nr-button size=\"large\">Large Button</nr-button>\n        <br /><br />\n        <nr-button .icon=\"${['search']}\"> Default Button</nr-button>\n        <nr-button .icon=\"${['search']}\" size=\"small\">Small Button</nr-button>\n        <nr-button .icon=\"${['search']}\" size=\"large\">Large Button</nr-button>\n\n        <br /><br />\n        <nr-button .icon=\"${['search']}\"></nr-button>\n        <nr-button .icon=\"${['search']}\" size=\"small\"></nr-button>\n        <nr-button .icon=\"${['search']}\" size=\"large\"></nr-button>\n        <br /><br />\n\n        <h1>Types</h1>\n        <br /><br />\n\n        <table>\n          <tbody>\n            <tr>\n              <td></td>\n              <td>Primary</td>\n              <td>Secondary</td>\n              <td>Ghost</td>\n              <td>Danger</td>\n              <td>Default</td>\n            </tr>\n            <tr>\n              <td>Default</td>\n              <td>\n                <nr-button type=\"primary\"><span>Primary Button</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"secondary\"><span>Secondary Button </span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"ghost\"> <span>Ghost button</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"danger\"><span>Danger Button </span></nr-button>\n              </td>\n              <td>\n                <nr-button><span>Default Button</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Dashed</td>\n              <td>\n                <nr-button type=\"primary\" ?dashed=${true}><span>Primary Button text only</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"secondary\" ?dashed=${true}><span>Secondary dashed</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"ghost\" ?dashed=${true}><span>Ghost dashed</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"danger\" ?dashed=${true}><span>Danger dashed</span></nr-button>\n              </td>\n              <td>\n                <nr-button ?dashed=${true}><span>Default dashed</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Loading</td>\n              <td>\n                <nr-button type=\"primary\" loading><span>Primary Button loading</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"secondary\" loading><span>Secondary button loading </span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"ghost\" loading><span>Ghost button loading</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"danger\" loading><span>Danger button loading</span></nr-button>\n              </td>\n              <td>\n                <nr-button loading><span>Default button loading</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Disabled</td>\n              <td>\n                <nr-button type=\"primary\" disabled><span>Primary Button disabled</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"secondary\" disabled><span>Secondary Button disabled</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"ghost\" disabled> <span>Ghost button disabled</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"danger\" disabled><span>Danger Button disabled</span></nr-button>\n              </td>\n              <td>\n                <nr-button disabled><span>Default Button disabled</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Icon with text default: icon left</td>\n              <td>\n                <nr-button type=\"primary\" .icon=\"${['search']}\"><span> Primary button icon+text</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"secondary\" .icon=\"${['search']}\"><span> Secondary button icon+text</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"ghost\" .icon=\"${['search']}\"><span> Ghost button icon+text</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"danger\" .icon=\"${['search']}\"><span> Danger button icon+text</span></nr-button>\n              </td>\n              <td>\n                <nr-button .icon=\"${['search']}\"><span> Default button icon+text</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Icon with text: icon right</td>\n              <td>\n                <nr-button type=\"primary\" .icon=\"${['search']}\" iconPosition=\"right\"\n                  ><span> Primary button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"secondary\" .icon=\"${['search']}\" iconPosition=\"right\"\n                  ><span> Secondary button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"ghost\" .icon=\"${['search']}\" iconPosition=\"right\"\n                  ><span> Ghost button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"danger\" .icon=\"${['search']}\" iconPosition=\"right\"\n                  ><span> Danger button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button .icon=\"${['search']}\" iconPosition=\"right\"><span> Default button icon+text</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Icon with text: icon both side</td>\n              <td>\n                <nr-button type=\"primary\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n                  ><span> Primary button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"secondary\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n                  ><span> Secondary button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"ghost\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n                  ><span> Ghost button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"danger\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n                  ><span> Danger button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n                  ><span> Default button icon+text</span></nr-button\n                >\n              </td>\n            </tr>\n            <tr>\n              <td>Icon only</td>\n              <td><nr-button type=\"primary\" .icon=\"${['search']}\"></nr-button></td>\n              <td><nr-button type=\"secondary\" .icon=\"${['search']}\"></nr-button></td>\n              <td><nr-button type=\"ghost\" .icon=\"${['search']}\"></nr-button></td>\n              <td><nr-button type=\"danger\" .icon=\"${['search']}\"></nr-button></td>\n              <td><nr-button .icon=\"${['search']}\"></nr-button></td>\n            </tr>\n          </tbody>\n        </table>\n      </theme-handler>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-buttons-demo': ElButtonDemoElement;\n  }\n}\n"]}

package/index.d.ts

@@ -1,2 +1,2 @@
-export * from './hy-button.component.js';
+export * from './nr-button.component.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1,2 +1,2 @@
-export * from './hy-button.component.js';
+export * from './nr-button.component.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './hy-button.component.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './nr-button.component.js';\n"]}

package/nr-button.component.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { ButtonType, IconPosition } from './nr-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;
+    dashed: boolean;
+    icon: string[];
+    iconPosition: IconPosition;
+    /**
+     * Required components that must be registered for this component to work properly
+     * Can be overridden by parent implementations
+     */
+    requiredComponents: string[];
+    /**
+     * Check for required dependencies when component is connected to DOM
+     */
+    connectedCallback(): void;
+    /**
+     * 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;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export {};
+//# sourceMappingURL=nr-button.component.d.ts.map

package/nr-button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nr-button.component.d.ts","sourceRoot":"","sources":["../../../src/components/button/nr-button.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAgB,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAI9E,qBACa,eAAgB,SAAQ,oBAA6B;IAEhE,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,IAAI,SAAgB;IAGpB,IAAI,EAAE,UAAU,CAAsB;IAGtC,MAAM,UAAS;IAGf,IAAI,EAAE,MAAM,EAAE,CAAM;IAGpB,YAAY,eAAqB;IAEjC;;;OAGG;IACM,kBAAkB,WAAe;IAE1C;;OAEG;IACM,iBAAiB;IAK1B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAWT,MAAM;IAkBf,OAAgB,MAAM,4BAAU;CACjC"}

package/{hy-button.component.js → nr-button.component.js}

@@ -11,10 +11,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { EMPTY_STRING } from './hy-button.constants.js';
-import { styles } from './hy-button.style.js';
-import { ThemeAwareMixin } from '../../shared/theme-mixin.js';
-let HyButtonElement = class HyButtonElement extends ThemeAwareMixin(LitElement) {
+import { EMPTY_STRING } from './nr-button.types.js';
+import { styles } from './nr-button.style.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.disabled = false;
@@ -22,7 +22,33 @@ let HyButtonElement = class HyButtonElement extends ThemeAwareMixin(LitElement)
         this.size = EMPTY_STRING;
         this.type = "default" /* ButtonType.Default */;
         this.dashed = false;
+        this.icon = [];
         this.iconPosition = "left" /* IconPosition.Left */;
+        /**
+         * Required components that must be registered for this component to work properly
+         * Can be overridden by parent implementations
+         */
+        this.requiredComponents = ['hy-icon'];
+    }
+    /**
+     * Check for required dependencies when component is connected to DOM
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.validateDependencies();
+    }
+    /**
+     * 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>`;
     }
     render() {
         var _a, _b;
@@ -36,38 +62,38 @@ let HyButtonElement = class HyButtonElement extends ThemeAwareMixin(LitElement)
         class="${this.dashed ? 'button-dashed' : ''}"
       >
         <span id="container">
-          ${((_a = this.icon) === null || _a === void 0 ? void 0 : _a.length) ? html ` <hy-icon name=${this.icon[0]}></hy-icon>` : nothing}
+          ${((_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 ? html ` <hy-icon name=${this.icon[1]}></hy-icon>` : nothing}
+          ${((_b = this.icon) === null || _b === void 0 ? void 0 : _b.length) == 2 ? this.renderIcon(this.icon[1]) : nothing}
         </span>
       </button>
     `;
     }
 };
-HyButtonElement.styles = styles;
+NrButtonElement.styles = styles;
 __decorate([
     property({ type: Boolean })
-], HyButtonElement.prototype, "disabled", void 0);
+], NrButtonElement.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean })
-], HyButtonElement.prototype, "loading", void 0);
+], NrButtonElement.prototype, "loading", void 0);
 __decorate([
     property({ type: String })
-], HyButtonElement.prototype, "size", void 0);
+], NrButtonElement.prototype, "size", void 0);
 __decorate([
     property({ type: String })
-], HyButtonElement.prototype, "type", void 0);
+], NrButtonElement.prototype, "type", void 0);
 __decorate([
     property({ type: Boolean })
-], HyButtonElement.prototype, "dashed", void 0);
+], NrButtonElement.prototype, "dashed", void 0);
 __decorate([
     property({ type: Array })
-], HyButtonElement.prototype, "icon", void 0);
+], NrButtonElement.prototype, "icon", void 0);
 __decorate([
     property({ reflect: true })
-], HyButtonElement.prototype, "iconPosition", void 0);
-HyButtonElement = __decorate([
-    customElement('hy-button')
-], HyButtonElement);
-export { HyButtonElement };
-//# sourceMappingURL=hy-button.component.js.map
+], NrButtonElement.prototype, "iconPosition", void 0);
+NrButtonElement = __decorate([
+    customElement('nr-button')
+], NrButtonElement);
+export { NrButtonElement };
+//# sourceMappingURL=nr-button.component.js.map

package/nr-button.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nr-button.component.js","sourceRoot":"","sources":["../../../src/components/button/nr-button.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAc,YAAY,EAAgB,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAEE,aAAQ,GAAG,KAAK,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAGhB,SAAI,GAAG,YAAY,CAAC;QAGpB,SAAI,sCAAkC;QAGtC,WAAM,GAAG,KAAK,CAAC;QAGf,SAAI,GAAa,EAAE,CAAC;QAGpB,iBAAY,kCAAqB;QAEjC;;;WAGG;QACM,uBAAkB,GAAG,CAAC,SAAS,CAAC,CAAC;IA6C5C,CAAC;IA3CC;;OAEG;IACM,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACK,UAAU,CAAC,QAAgB;QACjC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,EAAE;YACzC,OAAO,CAAC,IAAI,CACV,sCAAsC,QAAQ,2BAA2B;gBACzE,kCAAkC,CACnC,CAAC;YACF,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA,iBAAiB,QAAQ,aAAa,CAAC;IACpD,CAAC;IAEQ,MAAM;;QACb,OAAO,IAAI,CAAA;;qBAEM,IAAI,CAAC,QAAQ;qBACb,IAAI,CAAC,IAAI;oBACV,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;sBAC7B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;sBAClC,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;;;YAGvC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;;YAE3D,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,KAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;;;KAGvE,CAAC;IACJ,CAAC;CAEF,CAAA;AADiB,sBAAM,GAAG,MAAO,CAAA;AApEhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDACT;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;gDACV;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACL;AAGpB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACa;AAGtC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;+CACX;AAGf;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;6CACJ;AAGpB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;qDACO;AApBtB,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAuE3B;SAvEY,eAAe","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, EMPTY_STRING, IconPosition } from './nr-button.types.js';\nimport { styles } from './nr-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: Boolean})\n  dashed = false;\n\n  @property({type: Array})\n  icon: string[] = [];\n\n  @property({reflect: true})\n  iconPosition = IconPosition.Left;\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   * 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  override render() {\n    return html`\n      <button\n        ?disabled=\"${this.disabled}\"\n        data-type=\"${this.type}\"\n        data-size=${this.size ? this.size : nothing}\n        data-state=\"${this.loading ? 'loading' : nothing}\"\n        data-theme=\"${this.currentTheme}\"\n        class=\"${this.dashed ? 'button-dashed' : ''}\"\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

@@ -0,0 +1,19 @@
+/**
+ * Exported styles for the nr-button component
+ *
+ * @description
+ * This export provides the complete styling system for the button component,
+ * including all variants, states, sizes, and theme support.
+ *
+ * @usage
+ * Import and use in the component's styles property:
+ * ```typescript
+ * import { styles } from './nr-button.style.ts';
+ *
+ * @Component({
+ *   styles: styles
+ * })
+ * ```
+ */
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=nr-button.style.d.ts.map

package/nr-button.style.d.ts.map

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