@nuralyui/button 0.0.14 → 0.0.16

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/bundle.js +619 -0
  2. package/button.component.d.ts +64 -25
  3. package/button.component.js +136 -52
  4. package/button.component.js.map +1 -1
  5. package/button.style.d.ts +6 -15
  6. package/button.style.js +406 -545
  7. package/button.style.js.map +1 -1
  8. package/button.types.d.ts +38 -2
  9. package/button.types.js.map +1 -1
  10. package/package.json +29 -2
  11. package/button.component.d.ts.map +0 -1
  12. package/button.style.d.ts.map +0 -1
  13. package/button.style.variables.d.ts +0 -11
  14. package/button.style.variables.d.ts.map +0 -1
  15. package/button.style.variables.js +0 -194
  16. package/button.style.variables.js.map +0 -1
  17. package/button.types.d.ts.map +0 -1
  18. package/demo/buttons-demo.d.ts +0 -17
  19. package/demo/buttons-demo.d.ts.map +0 -1
  20. package/demo/buttons-demo.js +0 -273
  21. package/demo/buttons-demo.js.map +0 -1
  22. package/index.d.ts.map +0 -1
  23. package/mixins/index.d.ts +0 -14
  24. package/mixins/index.d.ts.map +0 -1
  25. package/mixins/index.js +0 -10
  26. package/mixins/index.js.map +0 -1
  27. package/mixins/keyboard-mixin.d.ts +0 -52
  28. package/mixins/keyboard-mixin.d.ts.map +0 -1
  29. package/mixins/keyboard-mixin.js +0 -78
  30. package/mixins/keyboard-mixin.js.map +0 -1
  31. package/mixins/link-mixin.d.ts +0 -67
  32. package/mixins/link-mixin.d.ts.map +0 -1
  33. package/mixins/link-mixin.js +0 -87
  34. package/mixins/link-mixin.js.map +0 -1
  35. package/mixins/ripple-mixin.d.ts +0 -53
  36. package/mixins/ripple-mixin.d.ts.map +0 -1
  37. package/mixins/ripple-mixin.js +0 -77
  38. package/mixins/ripple-mixin.js.map +0 -1
  39. package/react.d.ts.map +0 -1
  40. package/test/nr-button_test.d.ts +0 -2
  41. package/test/nr-button_test.d.ts.map +0 -1
  42. package/test/nr-button_test.js +0 -91
  43. package/test/nr-button_test.js.map +0 -1
package/demo/buttons-demo.js DELETED
@@ -1,273 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Google 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 { LitElement, html } from 'lit';
13
- import { customElement } from 'lit/decorators.js';
14
- import '../button.component';
15
- import '../../../helpers/ThemeHandler';
16
- let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
17
- render() {
18
- return html `
19
- <theme-handler>
20
- <h1>Sizes</h1>
21
- <br />
22
- <nr-button> Default Button</nr-button>
23
- <nr-button size="small">Small Button</nr-button>
24
- <nr-button size="large">Large Button</nr-button>
25
- <br /><br />
26
- <nr-button .icon="${['search']}"> Default Button</nr-button>
27
- <nr-button .icon="${['search']}" size="small">Small Button</nr-button>
28
- <nr-button .icon="${['search']}" size="large">Large Button</nr-button>
29
-
30
- <br /><br />
31
- <nr-button .icon="${['search']}"></nr-button>
32
- <nr-button .icon="${['search']}" size="small"></nr-button>
33
- <nr-button .icon="${['search']}" size="large"></nr-button>
34
- <br /><br />
35
-
36
- <h1>Types</h1>
37
- <br /><br />
38
-
39
- <table>
40
- <tbody>
41
- <tr>
42
- <td></td>
43
- <td>Primary</td>
44
- <td>Secondary</td>
45
- <td>Ghost</td>
46
- <td>Danger</td>
47
- <td>Default</td>
48
- <td>Text</td>
49
- <td>Link</td>
50
- </tr>
51
- <tr>
52
- <td>Default</td>
53
- <td>
54
- <nr-button type="primary"><span>Primary Button</span></nr-button>
55
- </td>
56
- <td>
57
- <nr-button type="secondary"><span>Secondary Button </span></nr-button>
58
- </td>
59
- <td>
60
- <nr-button type="ghost"> <span>Ghost button</span></nr-button>
61
- </td>
62
- <td>
63
- <nr-button type="danger"><span>Danger Button </span></nr-button>
64
- </td>
65
- <td>
66
- <nr-button><span>Default Button</span></nr-button>
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>
74
- </tr>
75
- <tr>
76
- <td>Dashed</td>
77
- <td>
78
- <nr-button type="primary" ?dashed=${true}><span>Primary Button text only</span></nr-button>
79
- </td>
80
- <td>
81
- <nr-button type="secondary" ?dashed=${true}><span>Secondary dashed</span></nr-button>
82
- </td>
83
- <td>
84
- <nr-button type="ghost" ?dashed=${true}><span>Ghost dashed</span></nr-button>
85
- </td>
86
- <td>
87
- <nr-button type="danger" ?dashed=${true}><span>Danger dashed</span></nr-button>
88
- </td>
89
- <td>
90
- <nr-button ?dashed=${true}><span>Default dashed</span></nr-button>
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>
98
- </tr>
99
- <tr>
100
- <td>Loading</td>
101
- <td>
102
- <nr-button type="primary" loading><span>Primary Button loading</span></nr-button>
103
- </td>
104
- <td>
105
- <nr-button type="secondary" loading><span>Secondary button loading </span></nr-button>
106
- </td>
107
- <td>
108
- <nr-button type="ghost" loading><span>Ghost button loading</span></nr-button>
109
- </td>
110
- <td>
111
- <nr-button type="danger" loading><span>Danger button loading</span></nr-button>
112
- </td>
113
- <td>
114
- <nr-button loading><span>Default button loading</span></nr-button>
115
- </td>
116
- </tr>
117
- <tr>
118
- <td>Disabled</td>
119
- <td>
120
- <nr-button type="primary" disabled><span>Primary Button disabled</span></nr-button>
121
- </td>
122
- <td>
123
- <nr-button type="secondary" disabled><span>Secondary Button disabled</span></nr-button>
124
- </td>
125
- <td>
126
- <nr-button type="ghost" disabled> <span>Ghost button disabled</span></nr-button>
127
- </td>
128
- <td>
129
- <nr-button type="danger" disabled><span>Danger Button disabled</span></nr-button>
130
- </td>
131
- <td>
132
- <nr-button disabled><span>Default Button disabled</span></nr-button>
133
- </td>
134
- </tr>
135
- <tr>
136
- <td>Icon with text default: icon left</td>
137
- <td>
138
- <nr-button type="primary" .icon="${['search']}"><span> Primary button icon+text</span></nr-button>
139
- </td>
140
- <td>
141
- <nr-button type="secondary" .icon="${['search']}"><span> Secondary button icon+text</span></nr-button>
142
- </td>
143
- <td>
144
- <nr-button type="ghost" .icon="${['search']}"><span> Ghost button icon+text</span></nr-button>
145
- </td>
146
- <td>
147
- <nr-button type="danger" .icon="${['search']}"><span> Danger button icon+text</span></nr-button>
148
- </td>
149
- <td>
150
- <nr-button .icon="${['search']}"><span> Default button icon+text</span></nr-button>
151
- </td>
152
- </tr>
153
- <tr>
154
- <td>Icon with text: icon right</td>
155
- <td>
156
- <nr-button type="primary" .icon="${['search']}" iconPosition="right"
157
- ><span> Primary button icon+text</span></nr-button
158
- >
159
- </td>
160
- <td>
161
- <nr-button type="secondary" .icon="${['search']}" iconPosition="right"
162
- ><span> Secondary button icon+text</span></nr-button
163
- >
164
- </td>
165
- <td>
166
- <nr-button type="ghost" .icon="${['search']}" iconPosition="right"
167
- ><span> Ghost button icon+text</span></nr-button
168
- >
169
- </td>
170
- <td>
171
- <nr-button type="danger" .icon="${['search']}" iconPosition="right"
172
- ><span> Danger button icon+text</span></nr-button
173
- >
174
- </td>
175
- <td>
176
- <nr-button .icon="${['search']}" iconPosition="right"><span> Default button icon+text</span></nr-button>
177
- </td>
178
- </tr>
179
- <tr>
180
- <td>Icon with text: icon both side</td>
181
- <td>
182
- <nr-button type="primary" .icon="${['search', 'bomb']}" iconPosition="right"
183
- ><span> Primary button icon+text</span></nr-button
184
- >
185
- </td>
186
- <td>
187
- <nr-button type="secondary" .icon="${['search', 'bomb']}" iconPosition="right"
188
- ><span> Secondary button icon+text</span></nr-button
189
- >
190
- </td>
191
- <td>
192
- <nr-button type="ghost" .icon="${['search', 'bomb']}" iconPosition="right"
193
- ><span> Ghost button icon+text</span></nr-button
194
- >
195
- </td>
196
- <td>
197
- <nr-button type="danger" .icon="${['search', 'bomb']}" iconPosition="right"
198
- ><span> Danger button icon+text</span></nr-button
199
- >
200
- </td>
201
- <td>
202
- <nr-button .icon="${['search', 'bomb']}" iconPosition="right"
203
- ><span> Default button icon+text</span></nr-button
204
- >
205
- </td>
206
- </tr>
207
- <tr>
208
- <td>Icon only</td>
209
- <td><nr-button type="primary" .icon="${['search']}"></nr-button></td>
210
- <td><nr-button type="secondary" .icon="${['search']}"></nr-button></td>
211
- <td><nr-button type="ghost" .icon="${['search']}"></nr-button></td>
212
- <td><nr-button type="danger" .icon="${['search']}"></nr-button></td>
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>
216
- </tr>
217
- </tbody>
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>
265
- </theme-handler>
266
- `;
267
- }
268
- };
269
- ElButtonDemoElement = __decorate([
270
- customElement('nr-buttons-demo')
271
- ], ElButtonDemoElement);
272
- export { ElButtonDemoElement };
273
- //# sourceMappingURL=buttons-demo.js.map
package/demo/buttons-demo.js.map DELETED
@@ -1 +0,0 @@
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.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
package/mixins/index.d.ts DELETED
@@ -1,14 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Nuraly, Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- export { RippleMixin, type RippleCapable } from './ripple-mixin.js';
7
- export { KeyboardMixin, type KeyboardCapable } from './keyboard-mixin.js';
8
- export { LinkMixin, type LinkCapable } from './link-mixin.js';
9
- import type { RippleCapable } from './ripple-mixin.js';
10
- import type { KeyboardCapable } from './keyboard-mixin.js';
11
- import type { LinkCapable } from './link-mixin.js';
12
- export interface ButtonMixinCapable extends RippleCapable, KeyboardCapable, LinkCapable {
13
- }
14
- //# sourceMappingURL=index.d.ts.map
package/mixins/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,eAAe,EAAE,WAAW;CAAG"}
package/mixins/index.js DELETED
@@ -1,10 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Nuraly, Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- // Export all button-specific mixins
7
- export { RippleMixin } from './ripple-mixin.js';
8
- export { KeyboardMixin } from './keyboard-mixin.js';
9
- export { LinkMixin } from './link-mixin.js';
10
- //# sourceMappingURL=index.js.map
package/mixins/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,oCAAoC;AACpC,OAAO,EAAE,WAAW,EAAsB,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAwB,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAoB,MAAM,iBAAiB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n// Export all button-specific mixins\nexport { RippleMixin, type RippleCapable } from './ripple-mixin.js';\nexport { KeyboardMixin, type KeyboardCapable } from './keyboard-mixin.js';\nexport { LinkMixin, type LinkCapable } from './link-mixin.js';\n\n// Import types for combined interface\nimport type { RippleCapable } from './ripple-mixin.js';\nimport type { KeyboardCapable } from './keyboard-mixin.js';\nimport type { LinkCapable } from './link-mixin.js';\n\n// Combined interface for button components using all mixins\nexport interface ButtonMixinCapable extends RippleCapable, KeyboardCapable, LinkCapable {}\n"]}
package/mixins/keyboard-mixin.d.ts DELETED
@@ -1,52 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Nuraly, Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- import { LitElement } from 'lit';
7
- declare type Constructor<T = {}> = new (...args: any[]) => T;
8
- /**
9
- * Interface for components that support keyboard interaction
10
- */
11
- export interface KeyboardCapable {
12
- /**
13
- * Whether the component is disabled
14
- */
15
- disabled: boolean;
16
- /**
17
- * Handle keyboard activation (Enter/Space)
18
- */
19
- handleKeyboardActivation(event: KeyboardEvent): void;
20
- /**
21
- * Handle keydown events with proper focus management
22
- */
23
- handleKeydown(event: KeyboardEvent): void;
24
- }
25
- /**
26
- * Mixin that provides keyboard interaction capabilities for button-like components
27
- * Handles Enter and Space key activation following ARIA best practices
28
- *
29
- * @param superClass - The base class to extend
30
- * @returns Enhanced class with keyboard interaction capabilities
31
- *
32
- * @example
33
- * ```typescript
34
- * export class MyButton extends KeyboardMixin(LitElement) {
35
- * @property({ type: Boolean }) disabled = false;
36
- *
37
- * render() {
38
- * return html`
39
- * <button
40
- * @keydown="${this.handleKeydown}"
41
- * tabindex="${this.disabled ? '-1' : '0'}"
42
- * >
43
- * <slot></slot>
44
- * </button>
45
- * `;
46
- * }
47
- * }
48
- * ```
49
- */
50
- export declare const KeyboardMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<KeyboardCapable> & T;
51
- export {};
52
- //# sourceMappingURL=keyboard-mixin.d.ts.map
package/mixins/keyboard-mixin.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"keyboard-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/keyboard-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,wBAAwB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAErD;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;CAC3C;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,wFAwDzB,CAAC"}
package/mixins/keyboard-mixin.js DELETED
@@ -1,78 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Nuraly, Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- /**
7
- * Mixin that provides keyboard interaction capabilities for button-like components
8
- * Handles Enter and Space key activation following ARIA best practices
9
- *
10
- * @param superClass - The base class to extend
11
- * @returns Enhanced class with keyboard interaction capabilities
12
- *
13
- * @example
14
- * ```typescript
15
- * export class MyButton extends KeyboardMixin(LitElement) {
16
- * @property({ type: Boolean }) disabled = false;
17
- *
18
- * render() {
19
- * return html`
20
- * <button
21
- * @keydown="${this.handleKeydown}"
22
- * tabindex="${this.disabled ? '-1' : '0'}"
23
- * >
24
- * <slot></slot>
25
- * </button>
26
- * `;
27
- * }
28
- * }
29
- * ```
30
- */
31
- export const KeyboardMixin = (superClass) => {
32
- class KeyboardMixinClass extends superClass {
33
- /**
34
- * Handle keyboard activation (Enter/Space keys)
35
- * @param event - The keyboard event
36
- */
37
- handleKeyboardActivation(event) {
38
- if (this.disabled)
39
- return;
40
- // Check if EventHandlerMixin is available for proper key checking
41
- const isActivationKey = typeof this.isActivationKey === 'function'
42
- ? this.isActivationKey(event)
43
- : (event.key === 'Enter' || event.key === ' ');
44
- if (isActivationKey) {
45
- event.preventDefault();
46
- // Trigger click event for consistency
47
- this.click();
48
- // Dispatch custom keyboard activation event if EventHandling mixin is available
49
- if (typeof this.dispatchCustomEvent === 'function') {
50
- this.dispatchCustomEvent('keyboard-activation', {
51
- key: event.key,
52
- timestamp: Date.now(),
53
- target: this
54
- });
55
- }
56
- }
57
- }
58
- /**
59
- * Handle keydown events with proper disabled state checking
60
- * @param event - The keyboard event
61
- */
62
- handleKeydown(event) {
63
- if (this.disabled) {
64
- // Allow readonly navigation keys even when disabled
65
- const isNavigationKey = typeof this.isReadonlyKeyAllowed === 'function'
66
- ? this.isReadonlyKeyAllowed(event)
67
- : ['Tab', 'Shift', 'Escape', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key);
68
- if (!isNavigationKey) {
69
- event.preventDefault();
70
- return;
71
- }
72
- }
73
- this.handleKeyboardActivation(event);
74
- }
75
- }
76
- return KeyboardMixinClass;
77
- };
78
- //# sourceMappingURL=keyboard-mixin.js.map
package/mixins/keyboard-mixin.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"keyboard-mixin.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/keyboard-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0BH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAoC,UAAa,EAAE,EAAE;IAChF,MAAM,kBAAmB,SAAQ,UAAU;QAIzC;;;WAGG;QACH,wBAAwB,CAAC,KAAoB;YAC3C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,kEAAkE;YAClE,MAAM,eAAe,GAAG,OAAQ,IAAY,CAAC,eAAe,KAAK,UAAU;gBACzE,CAAC,CAAE,IAAY,CAAC,eAAe,CAAC,KAAK,CAAC;gBACtC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;YAEjD,IAAI,eAAe,EAAE;gBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,sCAAsC;gBACtC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAEb,gFAAgF;gBAChF,IAAI,OAAQ,IAAY,CAAC,mBAAmB,KAAK,UAAU,EAAE;oBAC1D,IAAY,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;wBACvD,GAAG,EAAE,KAAK,CAAC,GAAG;wBACd,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;wBACrB,MAAM,EAAE,IAAI;qBACb,CAAC,CAAC;iBACJ;aACF;QACH,CAAC;QAED;;;WAGG;QACH,aAAa,CAAC,KAAoB;YAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,oDAAoD;gBACpD,MAAM,eAAe,GAAG,OAAQ,IAAY,CAAC,oBAAoB,KAAK,UAAU;oBAC9E,CAAC,CAAE,IAAY,CAAC,oBAAoB,CAAC,KAAK,CAAC;oBAC3C,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAErH,IAAI,CAAC,eAAe,EAAE;oBACpB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,OAAO;iBACR;aACF;YAED,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;KACF;IAED,OAAO,kBAAsD,CAAC;AAChE,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support keyboard interaction\n */\nexport interface KeyboardCapable {\n /**\n * Whether the component is disabled\n */\n disabled: boolean;\n \n /**\n * Handle keyboard activation (Enter/Space)\n */\n handleKeyboardActivation(event: KeyboardEvent): void;\n \n /**\n * Handle keydown events with proper focus management\n */\n handleKeydown(event: KeyboardEvent): void;\n}\n\n/**\n * Mixin that provides keyboard interaction capabilities for button-like components\n * Handles Enter and Space key activation following ARIA best practices\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with keyboard interaction capabilities\n * \n * @example\n * ```typescript\n * export class MyButton extends KeyboardMixin(LitElement) {\n * @property({ type: Boolean }) disabled = false;\n * \n * render() {\n * return html`\n * <button \n * @keydown=\"${this.handleKeydown}\"\n * tabindex=\"${this.disabled ? '-1' : '0'}\"\n * >\n * <slot></slot>\n * </button>\n * `;\n * }\n * }\n * ```\n */\nexport const KeyboardMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n class KeyboardMixinClass extends superClass implements KeyboardCapable {\n \n declare disabled: boolean;\n \n /**\n * Handle keyboard activation (Enter/Space keys)\n * @param event - The keyboard event\n */\n handleKeyboardActivation(event: KeyboardEvent): void {\n if (this.disabled) return;\n \n // Check if EventHandlerMixin is available for proper key checking\n const isActivationKey = typeof (this as any).isActivationKey === 'function'\n ? (this as any).isActivationKey(event)\n : (event.key === 'Enter' || event.key === ' ');\n \n if (isActivationKey) {\n event.preventDefault();\n \n // Trigger click event for consistency\n this.click();\n \n // Dispatch custom keyboard activation event if EventHandling mixin is available\n if (typeof (this as any).dispatchCustomEvent === 'function') {\n (this as any).dispatchCustomEvent('keyboard-activation', {\n key: event.key,\n timestamp: Date.now(),\n target: this\n });\n }\n }\n }\n\n /**\n * Handle keydown events with proper disabled state checking\n * @param event - The keyboard event\n */\n handleKeydown(event: KeyboardEvent): void {\n if (this.disabled) {\n // Allow readonly navigation keys even when disabled\n const isNavigationKey = typeof (this as any).isReadonlyKeyAllowed === 'function'\n ? (this as any).isReadonlyKeyAllowed(event)\n : ['Tab', 'Shift', 'Escape', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key);\n \n if (!isNavigationKey) {\n event.preventDefault();\n return;\n }\n }\n \n this.handleKeyboardActivation(event);\n }\n }\n\n return KeyboardMixinClass as Constructor<KeyboardCapable> & T;\n};\n"]}
package/mixins/link-mixin.d.ts DELETED
@@ -1,67 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Nuraly, Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- import { LitElement } from 'lit';
7
- import { ButtonType } from '../button.types.js';
8
- declare type Constructor<T = {}> = new (...args: any[]) => T;
9
- /**
10
- * Interface for components that support link behavior
11
- */
12
- export interface LinkCapable {
13
- /**
14
- * Button type that determines if it should render as link
15
- */
16
- type: ButtonType;
17
- /**
18
- * URL for link buttons
19
- */
20
- href: string;
21
- /**
22
- * Target attribute for link buttons
23
- */
24
- target: string;
25
- /**
26
- * Get the appropriate element tag (button or a)
27
- */
28
- getElementTag(): string;
29
- /**
30
- * Get link-specific attributes
31
- */
32
- getLinkAttributes(): Record<string, any>;
33
- /**
34
- * Check if component should render as a link
35
- */
36
- isLinkType(): boolean;
37
- }
38
- /**
39
- * Mixin that provides link behavior for button components
40
- * Handles the distinction between button and anchor elements
41
- *
42
- * @param superClass - The base class to extend
43
- * @returns Enhanced class with link capabilities
44
- *
45
- * @example
46
- * ```typescript
47
- * export class MyButton extends LinkMixin(LitElement) {
48
- * @property({ type: String }) type = ButtonType.Default;
49
- * @property({ type: String }) href = '';
50
- * @property({ type: String }) target = '';
51
- *
52
- * render() {
53
- * const tag = this.getElementTag();
54
- * const attrs = this.getLinkAttributes();
55
- *
56
- * return html`
57
- * <${tag} ...${attrs}>
58
- * <slot></slot>
59
- * </${tag}>
60
- * `;
61
- * }
62
- * }
63
- * ```
64
- */
65
- export declare const LinkMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<LinkCapable> & T;
66
- export {};
67
- //# sourceMappingURL=link-mixin.d.ts.map
package/mixins/link-mixin.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"link-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/link-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,IAAI,MAAM,CAAC;IAExB;;OAEG;IACH,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAEzC;;OAEG;IACH,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS,oFAkErB,CAAC"}