@nuralyui/button 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/{nr-button.component.d.ts → button.component.d.ts} +28 -2
  2. package/button.component.d.ts.map +1 -0
  3. package/button.component.js +240 -0
  4. package/button.component.js.map +1 -0
  5. package/{nr-button.style.d.ts → button.style.d.ts} +2 -2
  6. package/button.style.d.ts.map +1 -0
  7. package/{nr-button.style.js → button.style.js} +176 -127
  8. package/button.style.js.map +1 -0
  9. package/button.style.variables.d.ts +11 -0
  10. package/button.style.variables.d.ts.map +1 -0
  11. package/button.style.variables.js +194 -0
  12. package/button.style.variables.js.map +1 -0
  13. package/{nr-button.types.d.ts → button.types.d.ts} +9 -2
  14. package/button.types.d.ts.map +1 -0
  15. package/button.types.js +2 -0
  16. package/button.types.js.map +1 -0
  17. package/demo/{nr-buttons-demo.d.ts → buttons-demo.d.ts} +2 -2
  18. package/demo/buttons-demo.d.ts.map +1 -0
  19. package/demo/{nr-buttons-demo.js → buttons-demo.js} +64 -2
  20. package/demo/buttons-demo.js.map +1 -0
  21. package/index.d.ts +1 -1
  22. package/index.d.ts.map +1 -1
  23. package/index.js +1 -1
  24. package/index.js.map +1 -1
  25. package/package.json +1 -1
  26. package/react.d.ts +1 -1
  27. package/react.d.ts.map +1 -1
  28. package/react.js +1 -1
  29. package/react.js.map +1 -1
  30. package/test/nr-button_test.d.ts +1 -1
  31. package/test/nr-button_test.d.ts.map +1 -1
  32. package/test/nr-button_test.js +2 -2
  33. package/test/nr-button_test.js.map +1 -1
  34. package/demo/nr-buttons-demo.d.ts.map +0 -1
  35. package/demo/nr-buttons-demo.js.map +0 -1
  36. package/nr-button.component.d.ts.map +0 -1
  37. package/nr-button.component.js +0 -99
  38. package/nr-button.component.js.map +0 -1
  39. package/nr-button.style.d.ts.map +0 -1
  40. package/nr-button.style.js.map +0 -1
  41. package/nr-button.types.d.ts.map +0 -1
  42. package/nr-button.types.js +0 -2
  43. package/nr-button.types.js.map +0 -1
package/button.style.variables.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.style.variables.js","sourceRoot":"","sources":["../../../src/components/button/button.style.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsLjC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Button component CSS custom properties (design tokens)\n * \n * This file contains all the CSS custom properties used by the nr-button component,\n * organized by functionality and including both light and dark theme variants.\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of button appearance.\n */\nexport const buttonVariables = css`\n :host {\n /* ----------------------------------------\n * DEFAULT BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-border-top: 2px solid #d0d0d0;\n --hybrid-button-local-border-bottom: 2px solid #d0d0d0;\n --hybrid-button-local-border-left: 2px solid #d0d0d0;\n --hybrid-button-local-border-right: 2px solid #d0d0d0;\n --hybrid-button-local-border-top-left-radius: 0px;\n --hybrid-button-local-border-top-right-radius: 0px;\n --hybrid-button-local-border-bottom-left-radius: 0px;\n --hybrid-button-local-border-bottom-right-radius: 0px;\n --hybrid-button-local-background-color: #f9f9f9;\n --hybrid-button-local-text-color: #393939;\n --hybrid-button-local-hover-border-color: #1677ff;\n --hybrid-button-local-hover-color: #1677ff;\n --hybrid-button-local-font-size: 0.9rem;\n --hybrid-button-local-font-weight: normal;\n --hybrid-button-local-text-transform: none;\n --hybrid-button-local-active-border-color: #1661b1;\n --hybrid-button-local-active-color: #184d86;\n --hybrid-button-local-disabled-background-color: #c6c6c6;\n --hybrid-button-local-disabled-text-color: #8d8d8d;\n --hybrid-button-local-disabled-border-color: #bbb;\n --hybrid-button-local-height: auto;\n --hybrid-button-local-width: auto;\n --hybrid-button-local-padding-y: 0.5rem;\n --hybrid-button-local-padding-x: 0.6rem;\n --hybrid-button-local-icon-width: 18px;\n --hybrid-button-local-icon-height: 14px;\n\n /* ----------------------------------------\n * PRIMARY BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-primary-border-color: #0f62fe;\n --hybrid-button-local-primary-background-color: #0f62fe;\n --hybrid-button-local-primary-text-color: #ffffff;\n --hybrid-button-local-primary-outline: 1px solid white;\n --hybrid-button-local-primary-outline-offset: -3px;\n --hybrid-button-local-primary-hover-background-color: #0353e9;\n --hybrid-button-local-primary-hover-border-color: #0353e9;\n --hybrid-button-local-primary-active-background-color: #0f62fe;\n --hybrid-button-local-primary-active-border-color: #0f62fe;\n --hybrid-button-local-primary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-primary-disabled-background-color: #c6c6c6;\n --hybrid-button-local-primary-disabled-border-color: #c6c6c6;\n --hybrid-button-local-primary-dashed-border-color: #ffffff;\n\n /* ----------------------------------------\n * DANGER BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-danger-background-color: #da1e28;\n --hybrid-button-local-danger-text-color: #ffffff;\n --hybrid-button-local-danger-border-color: #da1e28;\n --hybrid-button-local-danger-outline: 1px solid white;\n --hybrid-button-local-danger-outline-offset: -3px;\n --hybrid-button-local-danger-hover-background-color: #ba1b23;\n --hybrid-button-local-danger-hover-border-color: #ba1b23;\n --hybrid-button-local-danger-active-background-color: #da1e28;\n --hybrid-button-local-danger-active-border-color: #0f62fe;\n --hybrid-button-local-danger-disabled-background-color: #c6c6c6;\n --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n --hybrid-button-local-danger-disabled-border-color: #c6c6c6;\n --hybrid-button-local-danger-dashed-border-color: #ffffff;\n\n /* ----------------------------------------\n * GHOST BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-ghost-background-color: #ffffff;\n --hybrid-button-local-ghost-text-color: #0f62fe;\n --hybrid-button-local-ghost-border-color: #ffffff;\n --hybrid-button-local-ghost-active-background-color: #ffffff;\n --hybrid-button-local-ghost-active-text-color: #054ada;\n --hybrid-button-local-ghost-active-border-color: #0f62fe;\n --hybrid-button-local-ghost-hover-background-color: #e5e5e5;\n --hybrid-button-local-ghost-hover-border-color: #e5e5e5;\n --hybrid-button-local-ghost-hover-text-color: #054ada;\n --hybrid-button-local-ghost-disabled-background-color: #ffffff;\n --hybrid-button-local-ghost-disabled-text-color: #c6c6c6;\n --hybrid-button-local-ghost-disabled-border-color: #ffffff;\n --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n /* ----------------------------------------\n * SECONDARY BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-secondary-background-color: #393939;\n --hybrid-button-local-secondary-border-color: #393939;\n --hybrid-button-local-secondary-text-color: #ffffff;\n --hybrid-button-local-secondary-outline: 1px solid white;\n --hybrid-button-local-secondary-outline-offset: -3px;\n --hybrid-button-local-secondary-hover-background-color: #4c4c4c;\n --hybrid-button-local-secondary-hover-border-color: #4c4c4c;\n --hybrid-button-local-secondary-active-background-color: #393939;\n --hybrid-button-local-secondary-active-border-color: #0f62fe;\n --hybrid-button-local-secondary-disabled-background-color: #c6c6c6;\n --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-secondary-disabled-border-color: #c6c6c6;\n --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n /* ----------------------------------------\n * SIZE VARIANTS\n * ---------------------------------------- */\n /* Large button sizing */\n --hybrid-large-button-local-padding-y: 0.5rem;\n --hybrid-large-button-local-padding-x: 0.9rem;\n --hybrid-large-button-local-font-size: 1rem;\n\n /* Small button sizing */\n --hybrid-small-button-local-padding-y: 0.5rem;\n --hybrid-small-button-local-padding-x: 0.4rem;\n --hybrid-small-button-local-font-size: 0.7rem;\n }\n\n /* ========================================\n * DARK THEME OVERRIDES\n * ======================================== */\n \n /**\n * Dark theme styles using data-theme attribute on button element\n * These override the light theme defaults when data-theme=\"dark\" is applied\n */\n button[data-theme=\"dark\"] {\n /* Default button dark theme overrides */\n --hybrid-button-local-background-color: #000000;\n --hybrid-button-local-text-color: #ffffff;\n --hybrid-button-local-hover-border-color: #6f6f6f;\n --hybrid-button-local-hover-color: #6f6f6f;\n --hybrid-button-local-active-border-color: #c6c6c6;\n --hybrid-button-local-active-color: #c6c6c6;\n --hybrid-button-local-disabled-background-color: #c6c6c6;\n\n /* Primary button dark theme overrides */\n --hybrid-button-local-primary-outline: 1px solid black;\n --hybrid-button-local-primary-outline-offset: -3px;\n --hybrid-button-local-primary-active-border-color: #ffffff;\n --hybrid-button-local-primary-disabled-text-color: #c6c6c6;\n --hybrid-button-local-primary-disabled-background-color: #8d8d8d;\n --hybrid-button-local-primary-disabled-border-color: #8d8d8d;\n\n /* Secondary button dark theme overrides */\n --hybrid-button-local-secondary-background-color: #6f6f6f;\n --hybrid-button-local-secondary-border-color: #6f6f6f;\n --hybrid-button-local-secondary-text-color: #ffffff;\n --hybrid-button-local-secondary-active-border-color: #ffffff;\n --hybrid-button-local-secondary-active-background-color: #6f6f6f;\n --hybrid-button-local-secondary-outline: 1px solid black;\n --hybrid-button-local-secondary-outline-offset: -3px;\n --hybrid-button-local-secondary-hover-background-color: #606060;\n --hybrid-button-local-secondary-hover-border-color: #606060;\n --hybrid-button-local-secondary-disabled-background-color: #6f6f6f;\n --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;\n --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n /* Ghost button dark theme overrides */\n --hybrid-button-local-ghost-background-color: transparent;\n --hybrid-button-local-ghost-text-color: #78a9ff;\n --hybrid-button-local-ghost-border-color: transparent;\n --hybrid-button-local-ghost-active-background-color: transparent;\n --hybrid-button-local-ghost-active-text-color: #a6c8ff;\n --hybrid-button-local-ghost-active-border-color: #ffffff;\n --hybrid-button-local-ghost-hover-background-color: #4c4c4c;\n --hybrid-button-local-ghost-hover-border-color: #4c4c4c;\n --hybrid-button-local-ghost-hover-text-color: #a6c8ff;\n --hybrid-button-local-ghost-disabled-background-color: transparent;\n --hybrid-button-local-ghost-disabled-text-color: #6f6f6f;\n --hybrid-button-local-ghost-disabled-border-color: transparent;\n --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n /* Danger button dark theme overrides */\n --hybrid-button-local-danger-outline: 1px solid #000000;\n --hybrid-button-local-danger-outline-offset: -3px;\n --hybrid-button-local-danger-hover-background-color: #ba1b23;\n --hybrid-button-local-danger-hover-border-color: #ba1b23;\n --hybrid-button-local-danger-active-background-color: #da1e28;\n --hybrid-button-local-danger-active-border-color: #ffffff;\n --hybrid-button-local-danger-disabled-background-color: #6f6f6f;\n --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n --hybrid-button-local-danger-disabled-border-color: #6f6f6f;\n --hybrid-button-local-danger-dashed-border-color: #ffffff;\n }\n`;\n"]}
package/{nr-button.types.d.ts → button.types.d.ts} RENAMED
@@ -3,16 +3,23 @@ export declare const enum ButtonType {
3
3
  Secondary = "secondary",
4
4
  Danger = "danger",
5
5
  Ghost = "ghost",
6
- Default = "default"
6
+ Default = "default",
7
+ Text = "text",
8
+ Link = "link"
7
9
  }
8
10
  export declare const enum ButtonSize {
9
11
  Small = "small",
10
12
  Default = "default",
11
13
  Large = "large"
12
14
  }
15
+ export declare const enum ButtonShape {
16
+ Default = "default",
17
+ Circle = "circle",
18
+ Round = "round"
19
+ }
13
20
  export declare const enum IconPosition {
14
21
  Left = "left",
15
22
  Right = "right"
16
23
  }
17
24
  export declare const EMPTY_STRING = "";
18
- //# sourceMappingURL=nr-button.types.d.ts.map
25
+ //# sourceMappingURL=button.types.d.ts.map
package/button.types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,UAAU;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,0BAAkB,WAAW;IAC3B,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,0BAAkB,YAAY;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AACD,eAAO,MAAM,YAAY,KAAK,CAAC"}
package/button.types.js ADDED
@@ -0,0 +1,2 @@
1
+ export const EMPTY_STRING = '';
2
+ //# sourceMappingURL=button.types.js.map
package/button.types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.types.js","sourceRoot":"","sources":["../../../src/components/button/button.types.ts"],"names":[],"mappings":"AA0BA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum ButtonType {\n Primary = 'primary',\n Secondary = 'secondary',\n Danger = 'danger',\n Ghost = 'ghost',\n Default = 'default',\n Text = 'text',\n Link = 'link',\n}\n\nexport const enum ButtonSize {\n Small = 'small',\n Default = 'default',\n Large = 'large',\n}\n\nexport const enum ButtonShape {\n Default = 'default',\n Circle = 'circle',\n Round = 'round',\n}\n\nexport const enum IconPosition {\n Left = 'left',\n Right = 'right',\n}\nexport const EMPTY_STRING = '';\n"]}
package/demo/{nr-buttons-demo.d.ts → buttons-demo.d.ts} RENAMED
@@ -4,7 +4,7 @@
4
4
  * SPDX-License-Identifier: MIT
5
5
  */
6
6
  import { LitElement } from 'lit';
7
- import '../nr-button.component';
7
+ import '../button.component';
8
8
  import '../../../helpers/ThemeHandler';
9
9
  export declare class ElButtonDemoElement extends LitElement {
10
10
  render(): import("lit").TemplateResult<1>;
@@ -14,4 +14,4 @@ declare global {
14
14
  'nr-buttons-demo': ElButtonDemoElement;
15
15
  }
16
16
  }
17
- //# sourceMappingURL=nr-buttons-demo.d.ts.map
17
+ //# sourceMappingURL=buttons-demo.d.ts.map
package/demo/buttons-demo.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"buttons-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/button/demo/buttons-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,qBACa,mBAAoB,SAAQ,UAAU;IACxC,MAAM;CA2PhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,mBAAmB,CAAC;KACxC;CACF"}
package/demo/{nr-buttons-demo.js → buttons-demo.js} RENAMED
@@ -11,7 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
11
11
  };
12
12
  import { LitElement, html } from 'lit';
13
13
  import { customElement } from 'lit/decorators.js';
14
- import '../nr-button.component';
14
+ import '../button.component';
15
15
  import '../../../helpers/ThemeHandler';
16
16
  let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
17
17
  render() {
@@ -45,6 +45,8 @@ let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
45
45
  <td>Ghost</td>
46
46
  <td>Danger</td>
47
47
  <td>Default</td>
48
+ <td>Text</td>
49
+ <td>Link</td>
48
50
  </tr>
49
51
  <tr>
50
52
  <td>Default</td>
@@ -63,6 +65,12 @@ let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
63
65
  <td>
64
66
  <nr-button><span>Default Button</span></nr-button>
65
67
  </td>
68
+ <td>
69
+ <nr-button type="text"><span>Text Button</span></nr-button>
70
+ </td>
71
+ <td>
72
+ <nr-button type="link" href="https://example.com"><span>Link Button</span></nr-button>
73
+ </td>
66
74
  </tr>
67
75
  <tr>
68
76
  <td>Dashed</td>
@@ -81,6 +89,12 @@ let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
81
89
  <td>
82
90
  <nr-button ?dashed=${true}><span>Default dashed</span></nr-button>
83
91
  </td>
92
+ <td>
93
+ <nr-button type="text" ?dashed=${true}><span>Text dashed</span></nr-button>
94
+ </td>
95
+ <td>
96
+ <nr-button type="link" href="https://example.com" ?dashed=${true}><span>Link dashed</span></nr-button>
97
+ </td>
84
98
  </tr>
85
99
  <tr>
86
100
  <td>Loading</td>
@@ -197,9 +211,57 @@ let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
197
211
  <td><nr-button type="ghost" .icon="${['search']}"></nr-button></td>
198
212
  <td><nr-button type="danger" .icon="${['search']}"></nr-button></td>
199
213
  <td><nr-button .icon="${['search']}"></nr-button></td>
214
+ <td><nr-button type="text" .icon="${['search']}"></nr-button></td>
215
+ <td><nr-button type="link" href="https://example.com" .icon="${['search']}"></nr-button></td>
200
216
  </tr>
201
217
  </tbody>
202
218
  </table>
219
+
220
+ <h1>Button Shapes</h1>
221
+ <br />
222
+ <h3>Default Shape</h3>
223
+ <nr-button type="primary">Default Button</nr-button>
224
+ <nr-button type="primary" .icon="${['search']}">With Icon</nr-button>
225
+ <nr-button type="primary" .icon="${['search']}"></nr-button>
226
+
227
+ <h3>Round Shape</h3>
228
+ <nr-button type="primary" shape="round">Round Button</nr-button>
229
+ <nr-button type="primary" shape="round" .icon="${['search']}">Round With Icon</nr-button>
230
+ <nr-button type="primary" shape="round" .icon="${['search']}"></nr-button>
231
+
232
+ <h3>Circle Shape</h3>
233
+ <nr-button type="primary" shape="circle" .icon="${['search']}"></nr-button>
234
+ <nr-button type="secondary" shape="circle" .icon="${['user']}"></nr-button>
235
+ <nr-button type="danger" shape="circle" .icon="${['trash']}"></nr-button>
236
+
237
+ <h3>Circle Shape - Different Sizes</h3>
238
+ <nr-button type="primary" shape="circle" size="small" .icon="${['search']}"></nr-button>
239
+ <nr-button type="primary" shape="circle" .icon="${['search']}"></nr-button>
240
+ <nr-button type="primary" shape="circle" size="large" .icon="${['search']}"></nr-button>
241
+
242
+ <h1>Block Buttons</h1>
243
+ <br />
244
+ <nr-button type="primary" block>Primary Block Button</nr-button>
245
+ <br />
246
+ <nr-button type="secondary" block>Secondary Block Button</nr-button>
247
+ <br />
248
+ <nr-button type="text" block>Text Block Button</nr-button>
249
+ <br />
250
+ <nr-button type="link" href="https://example.com" block>Link Block Button</nr-button>
251
+ <br />
252
+
253
+ <h1>Link Buttons with Target</h1>
254
+ <br />
255
+ <nr-button type="link" href="https://example.com">Same Tab Link</nr-button>
256
+ <nr-button type="link" href="https://example.com" target="_blank">New Tab Link</nr-button>
257
+ <nr-button type="link" href="https://example.com" target="_blank" .icon="${['external-link']}">External Link</nr-button>
258
+ <br />
259
+
260
+ <h1>Accessibility Examples</h1>
261
+ <br />
262
+ <nr-button type="primary" buttonAriaLabel="Save document">Save</nr-button>
263
+ <nr-button type="danger" buttonAriaLabel="Delete item permanently" .icon="${['trash']}">Delete</nr-button>
264
+ <nr-button type="text" buttonAriaLabel="Close dialog" .icon="${['close']}"></nr-button>
203
265
  </theme-handler>
204
266
  `;
205
267
  }
@@ -208,4 +270,4 @@ ElButtonDemoElement = __decorate([
208
270
  customElement('nr-buttons-demo')
209
271
  ], ElButtonDemoElement);
210
272
  export { ElButtonDemoElement };
211
- //# sourceMappingURL=nr-buttons-demo.js.map
273
+ //# sourceMappingURL=buttons-demo.js.map
package/demo/buttons-demo.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"buttons-demo.js","sourceRoot":"","sources":["../../../../src/components/button/demo/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,qBAAqB,CAAC;AAC7B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDA6Cc,IAAI;;;sDAGF,IAAI;;;kDAGR,IAAI;;;mDAGH,IAAI;;;qCAGlB,IAAI;;;iDAGQ,IAAI;;;4EAGuB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA0C7B,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;kDACE,CAAC,QAAQ,CAAC;6EACiB,CAAC,QAAQ,CAAC;;;;;;;;;2CAS5C,CAAC,QAAQ,CAAC;2CACV,CAAC,QAAQ,CAAC;;;;yDAII,CAAC,QAAQ,CAAC;yDACV,CAAC,QAAQ,CAAC;;;0DAGT,CAAC,QAAQ,CAAC;4DACR,CAAC,MAAM,CAAC;yDACX,CAAC,OAAO,CAAC;;;uEAGK,CAAC,QAAQ,CAAC;0DACvB,CAAC,QAAQ,CAAC;uEACG,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;mFAiBE,CAAC,eAAe,CAAC;;;;;;oFAMhB,CAAC,OAAO,CAAC;uEACtB,CAAC,OAAO,CAAC;;KAE3E,CAAC;IACJ,CAAC;CACF,CAAA;AA5PY,mBAAmB;IAD/B,aAAa,CAAC,iBAAiB,CAAC;GACpB,mBAAmB,CA4P/B;SA5PY,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 '../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 <td>Text</td>\n <td>Link</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 <td>\n <nr-button type=\"text\"><span>Text Button</span></nr-button>\n </td>\n <td>\n <nr-button type=\"link\" href=\"https://example.com\"><span>Link 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 <td>\n <nr-button type=\"text\" ?dashed=${true}><span>Text dashed</span></nr-button>\n </td>\n <td>\n <nr-button type=\"link\" href=\"https://example.com\" ?dashed=${true}><span>Link 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 <td><nr-button type=\"text\" .icon=\"${['search']}\"></nr-button></td>\n <td><nr-button type=\"link\" href=\"https://example.com\" .icon=\"${['search']}\"></nr-button></td>\n </tr>\n </tbody>\n </table>\n\n <h1>Button Shapes</h1>\n <br />\n <h3>Default Shape</h3>\n <nr-button type=\"primary\">Default Button</nr-button>\n <nr-button type=\"primary\" .icon=\"${['search']}\">With Icon</nr-button>\n <nr-button type=\"primary\" .icon=\"${['search']}\"></nr-button>\n \n <h3>Round Shape</h3>\n <nr-button type=\"primary\" shape=\"round\">Round Button</nr-button>\n <nr-button type=\"primary\" shape=\"round\" .icon=\"${['search']}\">Round With Icon</nr-button>\n <nr-button type=\"primary\" shape=\"round\" .icon=\"${['search']}\"></nr-button>\n \n <h3>Circle Shape</h3>\n <nr-button type=\"primary\" shape=\"circle\" .icon=\"${['search']}\"></nr-button>\n <nr-button type=\"secondary\" shape=\"circle\" .icon=\"${['user']}\"></nr-button>\n <nr-button type=\"danger\" shape=\"circle\" .icon=\"${['trash']}\"></nr-button>\n\n <h3>Circle Shape - Different Sizes</h3>\n <nr-button type=\"primary\" shape=\"circle\" size=\"small\" .icon=\"${['search']}\"></nr-button>\n <nr-button type=\"primary\" shape=\"circle\" .icon=\"${['search']}\"></nr-button>\n <nr-button type=\"primary\" shape=\"circle\" size=\"large\" .icon=\"${['search']}\"></nr-button>\n\n <h1>Block Buttons</h1>\n <br />\n <nr-button type=\"primary\" block>Primary Block Button</nr-button>\n <br />\n <nr-button type=\"secondary\" block>Secondary Block Button</nr-button>\n <br />\n <nr-button type=\"text\" block>Text Block Button</nr-button>\n <br />\n <nr-button type=\"link\" href=\"https://example.com\" block>Link Block Button</nr-button>\n <br />\n\n <h1>Link Buttons with Target</h1>\n <br />\n <nr-button type=\"link\" href=\"https://example.com\">Same Tab Link</nr-button>\n <nr-button type=\"link\" href=\"https://example.com\" target=\"_blank\">New Tab Link</nr-button>\n <nr-button type=\"link\" href=\"https://example.com\" target=\"_blank\" .icon=\"${['external-link']}\">External Link</nr-button>\n <br />\n\n <h1>Accessibility Examples</h1>\n <br />\n <nr-button type=\"primary\" buttonAriaLabel=\"Save document\">Save</nr-button>\n <nr-button type=\"danger\" buttonAriaLabel=\"Delete item permanently\" .icon=\"${['trash']}\">Delete</nr-button>\n <nr-button type=\"text\" buttonAriaLabel=\"Close dialog\" .icon=\"${['close']}\"></nr-button>\n </theme-handler>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-buttons-demo': ElButtonDemoElement;\n }\n}\n"]}
package/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export * from './nr-button.component.js';
1
+ export * from './button.component.js';
2
2
  //# sourceMappingURL=index.d.ts.map
package/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
package/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export * from './nr-button.component.js';
1
+ export * from './button.component.js';
2
2
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"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"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './button.component.js';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/button",
3
- "version": "0.0.11",
3
+ "version": "0.0.13",
4
4
  "description": "Button component for NuralyUI library",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/react.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { NrButtonElement } from './nr-button.component.js';
1
+ import { NrButtonElement } from './button.component.js';
2
2
  export declare const NrButton: import("@lit-labs/react").ReactWebComponent<NrButtonElement, {
3
3
  click: string;
4
4
  }>;
package/react.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/button/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,eAAO,MAAM,QAAQ;;EAOnB,CAAC"}
1
+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/button/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,eAAO,MAAM,QAAQ;;EAOnB,CAAC"}
package/react.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { createComponent } from '@lit-labs/react';
2
2
  import * as React from 'react';
3
- import { NrButtonElement } from './nr-button.component.js';
3
+ import { NrButtonElement } from './button.component.js';
4
4
  export const NrButton = createComponent({
5
5
  tagName: 'nr-button',
6
6
  elementClass: NrButtonElement,
package/react.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/button/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrButtonElement } from './nr-button.component.js';\nexport const NrButton = createComponent({\n tagName: 'nr-button',\n elementClass: NrButtonElement,\n react: React,\n events: {\n click: 'click',\n },\n});\n"]}
1
+ {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/button/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrButtonElement } from './button.component.js';\nexport const NrButton = createComponent({\n tagName: 'nr-button',\n elementClass: NrButtonElement,\n react: React,\n events: {\n click: 'click',\n },\n});\n"]}
package/test/nr-button_test.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import '../nr-button.component';
1
+ import '../button.component';
2
2
  //# sourceMappingURL=nr-button_test.d.ts.map
package/test/nr-button_test.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nr-button_test.d.ts","sourceRoot":"","sources":["../../../../src/components/button/test/nr-button_test.ts"],"names":[],"mappings":"AAGA,OAAO,wBAAwB,CAAC"}
1
+ {"version":3,"file":"nr-button_test.d.ts","sourceRoot":"","sources":["../../../../src/components/button/test/nr-button_test.ts"],"names":[],"mappings":"AAGA,OAAO,qBAAqB,CAAC"}
package/test/nr-button_test.js CHANGED
@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
8
8
  });
9
9
  };
10
10
  import { html, fixture, expect } from '@open-wc/testing';
11
- import { EMPTY_STRING } from '../nr-button.types.js';
12
- import '../nr-button.component';
11
+ import { EMPTY_STRING } from '../button.types.js';
12
+ import '../button.component';
13
13
  suite('NrButtonElement', () => {
14
14
  test('has default properties', () => __awaiter(void 0, void 0, void 0, function* () {
15
15
  const el = yield fixture(html `<nr-button></nr-button>`);
package/test/nr-button_test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nr-button_test.js","sourceRoot":"","sources":["../../../../src/components/button/test/nr-button_test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { NrButtonElement } from '../nr-button.component';\nimport { ButtonSize, ButtonType, EMPTY_STRING } from '../nr-button.types.js';\nimport '../nr-button.component';\n\nsuite('NrButtonElement', () => {\n test('has default properties', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button></nr-button>`);\n const button: HTMLButtonElement = el.shadowRoot!.querySelector('button')!;\n const icon = el.shadowRoot!.querySelector('hy-icon');\n\n expect(el.disabled).to.be.false;\n expect(el.loading).to.be.false;\n expect(el.size).to.equal(EMPTY_STRING);\n expect(el.type).to.equal(ButtonType.Default);\n expect(el.dashed).to.be.false;\n expect(el.icon).to.equal(EMPTY_STRING);\n expect(button).to.not.have.class('button-dashed');\n expect(button).to.not.have.attribute('data-size');\n expect(button).to.not.have.attribute('data-state');\n expect(button).to.have.attribute('data-type', ButtonType.Default);\n expect(button.disabled).to.be.false;\n expect(icon).to.not.exist;\n });\n\n test('has a label', async () => {\n const buttonLabel = 'Test content';\n const el: NrButtonElement = await fixture(html`<nr-button>${buttonLabel}</nr-button>`);\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(assignedNode[0].textContent).to.equal(buttonLabel);\n });\n test('fires onClick event when clicked', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n let eventFired = false;\n el.addEventListener('click', () => {\n eventFired = true;\n });\n button.click();\n expect(eventFired).to.be.true;\n });\n\n test('has a disabled property on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button disabled></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button.disabled).to.be.true;\n });\n test('does not fire onClick event when disabled', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button disabled></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n let eventFired = false;\n el.addEventListener('click', () => {\n eventFired = true;\n });\n button.click();\n expect(eventFired).to.be.false;\n });\n\n test('renders the icon', async () => {\n const iconName = 'sample-icon';\n const el: NrButtonElement = await fixture(html`<nr-button icon=${iconName}></nr-button>`);\n const icon = el.shadowRoot!.querySelector('hy-icon');\n expect(icon).to.exist;\n expect(icon).to.have.attribute('name', iconName);\n });\n\n test('applies the correct classe for dashed', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button dashed></nr-button>`);\n const button = el.shadowRoot!.querySelector('button');\n expect(button).to.have.class('button-dashed');\n });\n test('reflects the loading property as data-state on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button loading></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-state', 'loading');\n });\n\n test('reflects the size property as data-size on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button size=${ButtonSize.Large}></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-size', ButtonSize.Large);\n });\n\n test('reflects the type property as data-type on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button type=${ButtonType.Primary}></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-type', ButtonType.Primary);\n });\n});\n"]}
1
+ {"version":3,"file":"nr-button_test.js","sourceRoot":"","sources":["../../../../src/components/button/test/nr-button_test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { NrButtonElement } from '../button.component';\nimport { ButtonSize, ButtonType, EMPTY_STRING } from '../button.types.js';\nimport '../button.component';\n\nsuite('NrButtonElement', () => {\n test('has default properties', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button></nr-button>`);\n const button: HTMLButtonElement = el.shadowRoot!.querySelector('button')!;\n const icon = el.shadowRoot!.querySelector('hy-icon');\n\n expect(el.disabled).to.be.false;\n expect(el.loading).to.be.false;\n expect(el.size).to.equal(EMPTY_STRING);\n expect(el.type).to.equal(ButtonType.Default);\n expect(el.dashed).to.be.false;\n expect(el.icon).to.equal(EMPTY_STRING);\n expect(button).to.not.have.class('button-dashed');\n expect(button).to.not.have.attribute('data-size');\n expect(button).to.not.have.attribute('data-state');\n expect(button).to.have.attribute('data-type', ButtonType.Default);\n expect(button.disabled).to.be.false;\n expect(icon).to.not.exist;\n });\n\n test('has a label', async () => {\n const buttonLabel = 'Test content';\n const el: NrButtonElement = await fixture(html`<nr-button>${buttonLabel}</nr-button>`);\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(assignedNode[0].textContent).to.equal(buttonLabel);\n });\n test('fires onClick event when clicked', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n let eventFired = false;\n el.addEventListener('click', () => {\n eventFired = true;\n });\n button.click();\n expect(eventFired).to.be.true;\n });\n\n test('has a disabled property on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button disabled></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button.disabled).to.be.true;\n });\n test('does not fire onClick event when disabled', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button disabled></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n let eventFired = false;\n el.addEventListener('click', () => {\n eventFired = true;\n });\n button.click();\n expect(eventFired).to.be.false;\n });\n\n test('renders the icon', async () => {\n const iconName = 'sample-icon';\n const el: NrButtonElement = await fixture(html`<nr-button icon=${iconName}></nr-button>`);\n const icon = el.shadowRoot!.querySelector('hy-icon');\n expect(icon).to.exist;\n expect(icon).to.have.attribute('name', iconName);\n });\n\n test('applies the correct classe for dashed', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button dashed></nr-button>`);\n const button = el.shadowRoot!.querySelector('button');\n expect(button).to.have.class('button-dashed');\n });\n test('reflects the loading property as data-state on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button loading></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-state', 'loading');\n });\n\n test('reflects the size property as data-size on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button size=${ButtonSize.Large}></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-size', ButtonSize.Large);\n });\n\n test('reflects the type property as data-type on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button type=${ButtonType.Primary}></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-type', ButtonType.Primary);\n });\n});\n"]}
package/demo/nr-buttons-demo.d.ts.map DELETED
@@ -1 +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.map DELETED
@@ -1 +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/nr-button.component.d.ts.map DELETED
@@ -1 +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/nr-button.component.js DELETED
@@ -1,99 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Nuraly, Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
7
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
8
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
9
- 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;
10
- return c > 3 && r && Object.defineProperty(target, key, r), r;
11
- };
12
- import { html, LitElement, nothing } from 'lit';
13
- import { customElement, property } from 'lit/decorators.js';
14
- import { EMPTY_STRING } from './nr-button.types.js';
15
- import { styles } from './nr-button.style.js';
16
- import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
17
- let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement) {
18
- constructor() {
19
- super(...arguments);
20
- this.disabled = false;
21
- this.loading = false;
22
- this.size = EMPTY_STRING;
23
- this.type = "default" /* ButtonType.Default */;
24
- this.dashed = false;
25
- this.icon = [];
26
- this.iconPosition = "left" /* IconPosition.Left */;
27
- /**
28
- * Required components that must be registered for this component to work properly
29
- * Can be overridden by parent implementations
30
- */
31
- this.requiredComponents = ['hy-icon'];
32
- }
33
- /**
34
- * Check for required dependencies when component is connected to DOM
35
- */
36
- connectedCallback() {
37
- super.connectedCallback();
38
- this.validateDependencies();
39
- }
40
- /**
41
- * Renders an icon if the hy-icon component is available
42
- * @param iconName - The name of the icon to render
43
- * @returns TemplateResult or nothing
44
- */
45
- renderIcon(iconName) {
46
- if (!this.isComponentAvailable('hy-icon')) {
47
- console.warn(`hy-icon component not found. Icon "${iconName}" will not be displayed. ` +
48
- `Please import hy-icon component.`);
49
- return nothing;
50
- }
51
- return html `<hy-icon name=${iconName}></hy-icon>`;
52
- }
53
- render() {
54
- var _a, _b;
55
- return html `
56
- <button
57
- ?disabled="${this.disabled}"
58
- data-type="${this.type}"
59
- data-size=${this.size ? this.size : nothing}
60
- data-state="${this.loading ? 'loading' : nothing}"
61
- data-theme="${this.currentTheme}"
62
- class="${this.dashed ? 'button-dashed' : ''}"
63
- >
64
- <span id="container">
65
- ${((_a = this.icon) === null || _a === void 0 ? void 0 : _a.length) ? this.renderIcon(this.icon[0]) : nothing}
66
- <slot id="slot"></slot>
67
- ${((_b = this.icon) === null || _b === void 0 ? void 0 : _b.length) == 2 ? this.renderIcon(this.icon[1]) : nothing}
68
- </span>
69
- </button>
70
- `;
71
- }
72
- };
73
- NrButtonElement.styles = styles;
74
- __decorate([
75
- property({ type: Boolean })
76
- ], NrButtonElement.prototype, "disabled", void 0);
77
- __decorate([
78
- property({ type: Boolean })
79
- ], NrButtonElement.prototype, "loading", void 0);
80
- __decorate([
81
- property({ type: String })
82
- ], NrButtonElement.prototype, "size", void 0);
83
- __decorate([
84
- property({ type: String })
85
- ], NrButtonElement.prototype, "type", void 0);
86
- __decorate([
87
- property({ type: Boolean })
88
- ], NrButtonElement.prototype, "dashed", void 0);
89
- __decorate([
90
- property({ type: Array })
91
- ], NrButtonElement.prototype, "icon", void 0);
92
- __decorate([
93
- property({ reflect: true })
94
- ], NrButtonElement.prototype, "iconPosition", void 0);
95
- NrButtonElement = __decorate([
96
- customElement('nr-button')
97
- ], NrButtonElement);
98
- export { NrButtonElement };
99
- //# sourceMappingURL=nr-button.component.js.map
package/nr-button.component.js.map DELETED
@@ -1 +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.map DELETED
@@ -1 +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"}
package/nr-button.style.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"nr-button.style.js","sourceRoot":"","sources":["../../../src/components/button/nr-button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AACH,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwiBvB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Button component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-button component, including:\n * - Base button styles with CSS custom properties for theming\n * - Multiple button variants (primary, secondary, ghost, danger)\n * - Size variations (small, large)\n * - State styles (hover, active, disabled, loading)\n * - Dark theme support\n * - Icon positioning and styling\n * - Responsive design considerations\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of button appearance.\n */\nconst buttonStyles = css`\n /* Container for button content and icon positioning */\n #container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n /* Icon positioned to the right of text when iconPosition='right' */\n :host([iconPosition='right']) #container {\n flex-direction: row-reverse;\n }\n\n /* Icon styling within button */\n hy-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2px;\n }\n\n /* \n * Base button element styles\n * Uses CSS custom properties with fallbacks for comprehensive theming support\n * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}\n */\n\n /* \n * Base button element styles\n * Uses CSS custom properties with fallbacks for comprehensive theming support\n * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}\n */\n button {\n /* Dimensions */\n height: var(--hybrid-button-height,var(--hybrid-button-local-height));\n width: var(--hybrid-button-width,var(--hybrid-button-local-width));\n \n /* Border properties - individual sides for granular control */\n border-left: var(--hybrid-button-border-left,var(--hybrid-button-local-border-left));\n border-right: var(--hybrid-button-border-right,var(--hybrid-button-local-border-right));\n border-top: var(--hybrid-button-border-top,var(--hybrid-button-local-border-top));\n border-bottom: var(--hybrid-button-border-bottom,var(--hybrid-button-local-border-bottom));\n \n /* Border radius - individual corners for design flexibility */\n border-top-left-radius:var(--hybrid-button-border-top-left-radius,var(--hybrid-button-local-border-top-left-radius)) ;\n border-top-right-radius: var(--hybrid-button-border-top-right-radius,var(--hybrid-button-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-button-border-bottom-left-radius,var(--hybrid-button-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-button-border-bottom-right-radius,var(--hybrid-button-local-border-bottom-right-radius));\n \n /* Colors */\n background-color: var(--hybrid-button-background-color,var(--hybrid-button-local-background-color));\n color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));\n \n /* Typography */\n font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));\n font-weight: var(--hybrid-button-font-weight,var(--hybrid-button-local-font-weight));\n text-transform: var(--hybrid-button-text-transform,var(--hybrid-button-local-text-transform));\n \n /* Spacing */\n padding-top: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));\n margin-top: var(--hybrid-button-margin-y,var(--hybrid-button-local-margin-y));\n padding-bottom: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));\n padding-right: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));\n padding-left: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));\n font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));\n }\n \n /* Icon styling within button - inherits text color and size */\n button hy-icon {\n --hybrid-icon-color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));\n --hybrid-icon-width: var(--hybrid-button-icon-width,var(--hybrid-button-local-icon-width));\n --hybrid-icon-height: var(--hybrid-button-icon-height,var(--hybrid-button-local-icon-height));\n }\n\n /* \n * Hover state styles\n * Applied when button is hovered but not disabled\n */\n\n /* \n * Hover state styles\n * Applied when button is hovered but not disabled\n */\n button:hover:not(:disabled) {\n cursor: pointer;\n border-color: var(--hybrid-button-hover-border-color,var(--hybrid-button-local-hover-border-color));\n background-color: var(--hybrid-button-hover-background-color,var(--hybrid-button-local-hover-background-color));\n color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));\n }\n \n /* Icon color on hover */\n button:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));\n }\n\n /* \n * Active state styles\n * Applied when button is being clicked/pressed but not disabled\n */\n button:active:not(:disabled) {\n outline: none;\n border-color: var(--hybrid-button-active-border-color,var(--hybrid-button-local-active-border-color));\n color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));\n }\n \n /* Icon color on active state */\n button:active:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));\n }\n\n /* \n * Disabled state styles\n * Applied when button is disabled - removes interactivity and applies muted colors\n */\n\n /* \n * Disabled state styles\n * Applied when button is disabled - removes interactivity and applies muted colors\n */\n button:disabled {\n cursor: auto;\n background-color: var(--hybrid-button-disabled-background-color,var(--hybrid-button-local-disabled-background-color));\n color: var(--hybrid-button-disabled-text-color,var(--hybrid-button-local-disabled-text-color));\n border-color: var(--hybrid-button-disabled-border-color,var(--hybrid-button-local-disabled-border-color));\n }\n\n /* ========================================\n * SIZE VARIATIONS\n * ======================================== */\n\n /* Small button size variant */\n\n /* Small button size variant */\n button[data-size='small'] {\n padding-top: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));\n padding-bottom: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));\n padding-right: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));\n padding-left: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));\n font-size: var(--hybrid-small-button-font-size,var(--hybrid-small-button-local-font-size));\n }\n\n /* Large button size variant */\n button[data-size='large'] {\n padding-top: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));\n padding-bottom: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));\n padding-right: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));\n padding-left: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));\n font-size: var(--hybrid-large-button-font-size,var(--hybrid-large-button-local-font-size));\n }\n\n /* ========================================\n * BUTTON STATES\n * ======================================== */\n\n /* Loading state - reduces opacity to indicate processing */\n button[data-state='loading'] {\n opacity: 0.5;\n }\n\n /* ========================================\n * BUTTON TYPE VARIANTS\n * ======================================== */\n\n /* DANGER BUTTON VARIANT */\n /* DANGER BUTTON VARIANT */\n \n /* Danger button base styles and icon */\n button[data-type='danger'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n button[data-type='danger'] {\n border-color: var(--hybrid-button-danger-border-color,var(--hybrid-button-local-danger-border-color));\n background-color: var(--hybrid-button-danger-background-color,var(--hybrid-button-local-danger-background-color));\n color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n \n /* Danger button with dashed border variant */\n button[data-type='danger'].button-dashed {\n border-color: var(--hybrid-button-danger-dashed-border-color,var(--hybrid-button-local-danger-dashed-border-color));\n }\n \n /* Danger button disabled state */\n button[data-type='danger']:disabled {\n border-color: var(--hybrid-button-danger-disabled-border-color,var(--hybrid-button-local-danger-disabled-border-color));\n background-color: var(--hybrid-button-danger-disabled-background-color,var(--hybrid-button-local-danger-disabled-background-color));\n color: var(--hybrid-button-danger-disabled-text-color,var(--hybrid-button-local-danger-disabled-text-color));\n }\n\n /* Danger button hover state */\n button[data-type='danger']:hover:not(:disabled) {\n background-color: var(--hybrid-button-danger-hover-background-color,var(--hybrid-button-local-danger-hover-background-color));\n border-color: var(--hybrid-button-danger-hover-border-color,var(--hybrid-button-local-danger-hover-border-color));\n color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n button[data-type='danger']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n\n /* Danger button active state */\n button[data-type='danger']:active:not(:disabled) {\n background-color: var(--hybrid-button-danger-active-background-color,var(--hybrid-button-local-danger-active-background-color));\n border-color: var(--hybrid-button-danger-active-border-color,var(--hybrid-button-local-danger-active-border-color));\n outline: var(--hybrid-button-danger-outline,var(--hybrid-button-local-danger-outline));\n outline-offset: var(--hybrid-button-danger-outline-offset,var(--hybrid-button-local-danger-outline-offset));\n }\n\n /* PRIMARY BUTTON VARIANT */\n /* PRIMARY BUTTON VARIANT */\n \n /* Primary button base styles and icon */\n button[data-type='primary'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n button[data-type='primary'] {\n border-color: var(--hybrid-button-primary-border-color,var(--hybrid-button-local-primary-border-color));\n background-color: var(--hybrid-button-primary-background-color,var(--hybrid-button-local-primary-background-color));\n color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n \n /* Primary button with dashed border variant */\n button[data-type='primary'].button-dashed {\n border-color: var(--hybrid-button-primary-dashed-border-color,var(--hybrid-button-local-primary-dashed-border-color));\n }\n\n /* Primary button disabled state */\n button[data-type='primary']:disabled {\n border-color: var(--hybrid-button-primary-disabled-border-color,var(--hybrid-button-local-primary-disabled-border-color));\n background-color: var(--hybrid-button-primary-disabled-background-color,var(--hybrid-button-local-primary-disabled-background-color));\n color: var(--hybrid-button-primary-disabled-text-color,var(--hybrid-button-local-primary-disabled-text-color));\n }\n\n /* Primary button hover state */\n button[data-type='primary']:hover:not(:disabled) {\n background-color: var(--hybrid-button-primary-hover-background-color,var(--hybrid-button-local-primary-hover-background-color));\n border-color: var(--hybrid-button-primary-hover-border-color,var(--hybrid-button-local-primary-hover-border-color));\n color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n button[data-type='primary']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n \n /* Primary button active state */\n button[data-type='primary']:active:not(:disabled) {\n border-color: var(--hybrid-button-primary-active-border-color,var(--hybrid-button-local-primary-active-border-color));\n background-color: var(--hybrid-button-primary-active-background-color,var(--hybrid-button-local-primary-active-background-color));\n outline: var(--hybrid-button-primary-outline,var(--hybrid-button-local-primary-outline));\n outline-offset: var(--hybrid-button-primary-outline-offset,var(--hybrid-button-local-primary-outline-offset));\n }\n\n /* GHOST BUTTON VARIANT */\n /* GHOST BUTTON VARIANT */\n \n /* Ghost button base styles and icon */\n button[data-type='ghost'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));\n }\n button[data-type='ghost'] {\n background-color: var(--hybrid-button-ghost-background-color,var(--hybrid-button-local-ghost-background-color));\n color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));\n border-color: var(--hybrid-button-ghost-border-color,var(--hybrid-button-local-ghost-border-color));\n }\n \n /* Ghost button with dashed border variant */\n button[data-type='ghost'].button-dashed {\n border-color: var(--hybrid-button-ghost-dashed-border-color,var(--hybrid-button-local-ghost-dashed-border-color));\n }\n \n /* Ghost button disabled state */\n button[data-type='ghost']:disabled {\n background-color: var(--hybrid-button-ghost-disabled-background-color,var(--hybrid-button-local-ghost-disabled-background-color));\n color: var(--hybrid-button-ghost-disabled-text-color,var(--hybrid-button-local-ghost-disabled-text-color));\n border-color: var(--hybrid-button-ghost-disabled-border-color,var(--hybrid-button-local-ghost-disabled-border-color));\n }\n\n /* Ghost button hover state */\n button[data-type='ghost']:hover:not(:disabled) {\n background-color: var(--hybrid-button-ghost-hover-background-color,var(--hybrid-button-local-ghost-hover-background-color));\n color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));\n border-color: var(--hybrid-button-local-ghost-hover-border-color,var(--hybrid-button-local-ghost-hover-border-color));\n }\n button[data-type='ghost']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));\n }\n \n /* Ghost button active state */\n button[data-type='ghost']:active:not(:disabled) {\n background-color: var(--hybrid-button-ghost-active-background-color,var(--hybrid-button-local-ghost-active-background-color));\n border-color: var(--hybrid-button-ghost-active-border-color,var(--hybrid-button-local-ghost-active-border-color));\n }\n\n /* SECONDARY BUTTON VARIANT */\n /* SECONDARY BUTTON VARIANT */\n \n /* Secondary button base styles and icon */\n button[data-type='secondary'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n }\n button[data-type='secondary'] {\n background-color: var(--hybrid-button-secondary-background-color,var(--hybrid-button-local-secondary-background-color));\n color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n border-color: var(--hybrid-button-secondary-border-color,var(--hybrid-button-local-secondary-border-color));\n }\n \n /* Secondary button with dashed border variant */\n button[data-type='secondary'].button-dashed {\n border-color: var(--hybrid-button-secondary-dashed-border-color,var(--hybrid-button-local-secondary-dashed-border-color));\n }\n \n /* Secondary button disabled state */\n button[data-type='secondary']:disabled {\n background-color: var(--hybrid-button-secondary-disabled-background-color,var(--hybrid-button-local-secondary-disabled-background-color));\n color: var(--hybrid-button-secondary-disabled-text-color,var(--hybrid-button-local-secondary-disabled-text-color));\n border-color: var(--hybrid-button-secondary-disabled-border-color,var(--hybrid-button-local-secondary-disabled-border-color));\n }\n \n /* Secondary button hover state */\n button[data-type='secondary']:hover:not(:disabled) {\n background-color: var(--hybrid-button-secondary-hover-background-color,var(--hybrid-button-local-secondary-hover-background-color));\n color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n border-color: var(--hybrid-button-secondary-hover-border-color,var(--hybrid-button-local-secondary-hover-border-color));\n }\n button[data-type='secondary']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n }\n\n /* Secondary button active state */\n button[data-type='secondary']:active:not(:disabled) {\n background-color: var(--hybrid-button-secondary-active-background-color,var(--hybrid-button-local-secondary-active-background-color));\n border-color: var(--hybrid-button-secondary-active-border-color,var(--hybrid-button-local-secondary-active-border-color));\n outline: var(--hybrid-button-secondary-outline,var(--hybrid-button-local-secondary-outline));\n outline-offset: var(--hybrid-button-secondary-outline-offset,var(--hybrid-button-local-secondary-outline-offset));\n }\n\n /* ========================================\n * UTILITY CLASSES\n * ======================================== */\n\n /* Dashed border style modifier */\n .button-dashed {\n border-style: dashed;\n }\n\n /* ========================================\n * CSS CUSTOM PROPERTIES (Design Tokens)\n * ======================================== */\n /* ========================================\n * CSS CUSTOM PROPERTIES (Design Tokens)\n * ======================================== */\n :host {\n /* ----------------------------------------\n * DEFAULT BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-border-top: 2px solid #d0d0d0;\n --hybrid-button-local-border-bottom: 2px solid #d0d0d0;\n --hybrid-button-local-border-left: 2px solid #d0d0d0;\n --hybrid-button-local-border-right: 2px solid #d0d0d0;\n --hybrid-button-local-border-top-left-radius: 0px;\n --hybrid-button-local-border-top-right-radius: 0px;\n --hybrid-button-local-border-bottom-left-radius: 0px;\n --hybrid-button-local-border-bottom-right-radius: 0px;\n --hybrid-button-local-background-color: #f9f9f9;\n --hybrid-button-local-text-color: #393939;\n --hybrid-button-local-hover-border-color: #1677ff;\n --hybrid-button-local-hover-color: #1677ff;\n --hybrid-button-local-font-size: 0.9rem;\n --hybrid-button-local-font-weight: normal;\n --hybrid-button-local-text-transform: none;\n --hybrid-button-local-active-border-color: #1661b1;\n --hybrid-button-local-active-color: #184d86;\n --hybrid-button-local-disabled-background-color: #c6c6c6;\n --hybrid-button-local-disabled-text-color: #8d8d8d;\n --hybrid-button-local-disabled-border-color: #bbb;\n --hybrid-button-local-height: auto;\n --hybrid-button-local-width: auto;\n --hybrid-button-local-padding-y: 0.5rem;\n --hybrid-button-local-padding-x: 0.6rem;\n --hybrid-button-local-icon-width: 18px;\n --hybrid-button-local-icon-height: 14px;\n\n /* ----------------------------------------\n * PRIMARY BUTTON STYLES\n * ---------------------------------------- */\n /* ----------------------------------------\n * PRIMARY BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-primary-border-color: #0f62fe;\n --hybrid-button-local-primary-background-color: #0f62fe;\n --hybrid-button-local-primary-text-color: #ffffff;\n --hybrid-button-local-primary-outline: 1px solid white;\n --hybrid-button-local-primary-outline-offset: -3px;\n --hybrid-button-local-primary-hover-background-color: #0353e9;\n --hybrid-button-local-primary-hover-border-color: #0353e9;\n --hybrid-button-local-primary-active-background-color: #0f62fe;\n --hybrid-button-local-primary-active-border-color: #0f62fe;\n --hybrid-button-local-primary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-primary-disabled-background-color: #c6c6c6;\n --hybrid-button-local-primary-disabled-border-color: #c6c6c6;\n --hybrid-button-local-primary-dashed-border-color: #ffffff;\n\n /* ----------------------------------------\n * DANGER BUTTON STYLES\n * ---------------------------------------- */\n /* ----------------------------------------\n * DANGER BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-danger-background-color: #da1e28;\n --hybrid-button-local-danger-text-color: #ffffff;\n --hybrid-button-local-danger-border-color: #da1e28;\n --hybrid-button-local-danger-outline: 1px solid white;\n --hybrid-button-local-danger-outline-offset: -3px;\n --hybrid-button-local-danger-hover-background-color: #ba1b23;\n --hybrid-button-local-danger-hover-border-color: #ba1b23;\n --hybrid-button-local-danger-active-background-color: #da1e28;\n --hybrid-button-local-danger-active-border-color: #0f62fe;\n --hybrid-button-local-danger-disabled-background-color: #c6c6c6;\n --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n --hybrid-button-local-danger-disabled-border-color: #c6c6c6;\n --hybrid-button-local-danger-dashed-border-color: #ffffff;\n\n /* ----------------------------------------\n * GHOST BUTTON STYLES\n * ---------------------------------------- */\n /* ----------------------------------------\n * GHOST BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-ghost-background-color: #ffffff;\n --hybrid-button-local-ghost-text-color: #0f62fe;\n --hybrid-button-local-ghost-border-color: #ffffff;\n --hybrid-button-local-ghost-active-background-color: #ffffff;\n --hybrid-button-local-ghost-active-text-color: #054ada;\n --hybrid-button-local-ghost-active-border-color: #0f62fe;\n --hybrid-button-local-ghost-hover-background-color: #e5e5e5;\n --hybrid-button-local-ghost-hover-border-color: #e5e5e5;\n --hybrid-button-local-ghost-hover-text-color: #054ada;\n --hybrid-button-local-ghost-disabled-background-color: #ffffff;\n --hybrid-button-local-ghost-disabled-text-color: #c6c6c6;\n --hybrid-button-local-ghost-disabled-border-color: #ffffff;\n --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n /* ----------------------------------------\n * SECONDARY BUTTON STYLES\n * ---------------------------------------- */\n\n /* ----------------------------------------\n * SECONDARY BUTTON STYLES\n * ---------------------------------------- */\n --hybrid-button-local-secondary-background-color: #393939;\n --hybrid-button-local-secondary-border-color: #393939;\n --hybrid-button-local-secondary-text-color: #ffffff;\n --hybrid-button-local-secondary-outline: 1px solid white;\n --hybrid-button-local-secondary-outline-offset: -3px;\n --hybrid-button-local-secondary-hover-background-color: #4c4c4c;\n --hybrid-button-local-secondary-hover-border-color: #4c4c4c;\n --hybrid-button-local-secondary-active-background-color: #393939;\n --hybrid-button-local-secondary-active-border-color: #0f62fe;\n --hybrid-button-local-secondary-disabled-background-color: #c6c6c6;\n --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-secondary-disabled-border-color: #c6c6c6;\n --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n /* ----------------------------------------\n * SIZE VARIANTS\n * ---------------------------------------- */\n\n /* ----------------------------------------\n * SIZE VARIANTS\n * ---------------------------------------- */\n /* Large button sizing */\n --hybrid-large-button-local-padding-y: 0.5rem;\n --hybrid-large-button-local-padding-x: 0.9rem;\n --hybrid-large-button-local-font-size: 1rem;\n\n /* Small button sizing */\n --hybrid-small-button-local-padding-y: 0.5rem;\n --hybrid-small-button-local-padding-x: 0.4rem;\n --hybrid-small-button-local-font-size: 0.7rem;\n }\n\n /* ========================================\n * DARK THEME OVERRIDES\n * ======================================== */\n \n /**\n * Dark theme styles using data-theme attribute on button element\n * These override the light theme defaults when data-theme=\"dark\" is applied\n */\n /**\n * Dark theme styles using data-theme attribute on button element\n * These override the light theme defaults when data-theme=\"dark\" is applied\n */\n button[data-theme=\"dark\"] {\n /* Default button dark theme overrides */\n --hybrid-button-local-background-color: #000000;\n --hybrid-button-local-text-color: #ffffff;\n --hybrid-button-local-hover-border-color: #6f6f6f;\n --hybrid-button-local-hover-color: #6f6f6f;\n --hybrid-button-local-active-border-color: #c6c6c6;\n --hybrid-button-local-active-color: #c6c6c6;\n --hybrid-button-local-disabled-background-color: #c6c6c6;\n\n /* Primary button dark theme overrides */\n --hybrid-button-local-primary-outline: 1px solid black;\n --hybrid-button-local-primary-outline-offset: -3px;\n --hybrid-button-local-primary-active-border-color: #ffffff;\n --hybrid-button-local-primary-disabled-text-color: #c6c6c6;\n --hybrid-button-local-primary-disabled-background-color: #8d8d8d;\n --hybrid-button-local-primary-disabled-border-color: #8d8d8d;\n\n /* Secondary button dark theme overrides */\n --hybrid-button-local-secondary-background-color: #6f6f6f;\n --hybrid-button-local-secondary-border-color: #6f6f6f;\n --hybrid-button-local-secondary-text-color: #ffffff;\n --hybrid-button-local-secondary-active-border-color: #ffffff;\n --hybrid-button-local-secondary-active-background-color: #6f6f6f;\n --hybrid-button-local-secondary-outline: 1px solid black;\n --hybrid-button-local-secondary-outline-offset: -3px;\n --hybrid-button-local-secondary-hover-background-color: #606060;\n --hybrid-button-local-secondary-hover-border-color: #606060;\n --hybrid-button-local-secondary-disabled-background-color: #6f6f6f;\n --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;\n --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n /* Ghost button dark theme overrides */\n --hybrid-button-local-ghost-background-color: transparent;\n --hybrid-button-local-ghost-text-color: #78a9ff;\n --hybrid-button-local-ghost-border-color: transparent;\n --hybrid-button-local-ghost-active-background-color: transparent;\n --hybrid-button-local-ghost-active-text-color: #a6c8ff;\n --hybrid-button-local-ghost-active-border-color: #ffffff;\n --hybrid-button-local-ghost-hover-background-color: #4c4c4c;\n --hybrid-button-local-ghost-hover-border-color: #4c4c4c;\n --hybrid-button-local-ghost-hover-text-color: #a6c8ff;\n --hybrid-button-local-ghost-disabled-background-color: transparent;\n --hybrid-button-local-ghost-disabled-text-color: #6f6f6f;\n --hybrid-button-local-ghost-disabled-border-color: transparent;\n --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n /* Danger button dark theme overrides */\n --hybrid-button-local-danger-outline: 1px solid #000000;\n --hybrid-button-local-danger-outline-offset: -3px;\n --hybrid-button-local-danger-hover-background-color: #ba1b23;\n --hybrid-button-local-danger-hover-border-color: #ba1b23;\n --hybrid-button-local-danger-active-background-color: #da1e28;\n --hybrid-button-local-danger-active-border-color: #ffffff;\n --hybrid-button-local-danger-disabled-background-color: #6f6f6f;\n --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n --hybrid-button-local-danger-disabled-border-color: #6f6f6f;\n --hybrid-button-local-danger-dashed-border-color: #ffffff;\n }\n`;\n\n/**\n * Exported styles for the nr-button component\n * \n * @description\n * This export provides the complete styling system for the button component,\n * including all variants, states, sizes, and theme support.\n * \n * @usage\n * Import and use in the component's styles property:\n * ```typescript\n * import { styles } from './nr-button.style.ts';\n * \n * @Component({\n * styles: styles\n * })\n * ```\n */\nexport const styles = [buttonStyles];\n"]}
package/nr-button.types.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"nr-button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/nr-button.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,UAAU;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,0BAAkB,YAAY;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AACD,eAAO,MAAM,YAAY,KAAK,CAAC"}
package/nr-button.types.js DELETED
@@ -1,2 +0,0 @@
1
- export const EMPTY_STRING = '';
2
- //# sourceMappingURL=nr-button.types.js.map