@nuralyui/button 0.0.17 → 0.0.19
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.
- package/bundle.js +585 -6
- package/button.component.d.ts +2 -2
- package/button.component.js +2 -2
- package/button.component.js.map +1 -1
- package/button.style.js +73 -36
- package/button.style.js.map +1 -1
- package/button.types.d.ts +2 -6
- package/button.types.js.map +1 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1,27 +1,606 @@
|
|
|
1
|
-
import{css as t,LitElement as
|
|
1
|
+
import{css as t,LitElement as r,nothing as o,html as e}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{ifDefined as i}from"lit/directives/if-defined.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";const s="",c=t`
|
|
2
|
+
:host {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
vertical-align: middle;
|
|
5
|
+
|
|
6
|
+
/* Force CSS custom property inheritance to ensure theme switching works properly */
|
|
7
|
+
color: var(--nuraly-color-text);
|
|
8
|
+
background-color: var(--nuraly-color-background);
|
|
9
|
+
border-color: var(--nuraly-color-border);
|
|
10
|
+
|
|
11
|
+
/* Ensure clean state transitions when theme changes */
|
|
12
|
+
* {
|
|
13
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* Force re-evaluation of theme-dependent properties on theme change */
|
|
18
|
+
:host([data-theme]) {
|
|
19
|
+
color: inherit;
|
|
20
|
+
background-color: inherit;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
button {
|
|
24
|
+
display: inline-flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
position: relative;
|
|
28
|
+
font-family: var(--nuraly-font-family);
|
|
29
|
+
font-size: 0.875rem;
|
|
30
|
+
font-weight: var(--nuraly-font-weight-regular);
|
|
31
|
+
line-height: 1.125rem;
|
|
32
|
+
letter-spacing: 0.16px;
|
|
33
|
+
height: 3rem;
|
|
34
|
+
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
35
|
+
border: 1px solid transparent;
|
|
36
|
+
border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));
|
|
37
|
+
background-color: var(--nuraly-color-background);
|
|
38
|
+
color: var(--nuraly-color-text);
|
|
39
|
+
text-decoration: none;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
42
|
+
white-space: nowrap;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
text-overflow: ellipsis;
|
|
45
|
+
|
|
46
|
+
/* Reset any inherited styles that might interfere with theme switching */
|
|
47
|
+
box-shadow: none;
|
|
48
|
+
text-shadow: none;
|
|
49
|
+
|
|
50
|
+
&:focus {
|
|
51
|
+
/* outline: var(--nuraly-focus-outline); */
|
|
52
|
+
/* outline-offset: var(--nuraly-focus-outline-offset); */
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&:disabled {
|
|
56
|
+
cursor: not-allowed;
|
|
57
|
+
/* Remove generic opacity - use specific disabled colors instead */
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Icon styling */
|
|
61
|
+
nr-icon {
|
|
62
|
+
flex-shrink: 0;
|
|
63
|
+
width: var(--nuraly-button-icon-size, 1rem);
|
|
64
|
+
height: var(--nuraly-button-icon-size, 1rem);
|
|
65
|
+
display: inline-flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
/* Better text alignment */
|
|
69
|
+
vertical-align: middle;
|
|
70
|
+
line-height: 1;
|
|
71
|
+
/* Ensure icon inherits text color */
|
|
72
|
+
color: inherit;
|
|
73
|
+
/* Override any size attribute with CSS variable */
|
|
74
|
+
font-size: var(--nuraly-button-icon-size, 1rem) !important;
|
|
75
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
76
|
+
/* Inherit cursor from button */
|
|
77
|
+
cursor: inherit;
|
|
78
|
+
/* Prevent icon from being focusable */
|
|
79
|
+
pointer-events: none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Icon focus state */
|
|
83
|
+
&:focus:not(:disabled) nr-icon {
|
|
84
|
+
opacity: 1;
|
|
85
|
+
filter: brightness(1.1);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Icon active state */
|
|
89
|
+
&:active:not(:disabled) nr-icon {
|
|
90
|
+
opacity: 0.9;
|
|
91
|
+
transform: scale(0.95);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Icon hover state */
|
|
95
|
+
&:hover:not(:disabled) nr-icon {
|
|
96
|
+
opacity: 1;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Icon spacing - use gap for cleaner spacing */
|
|
100
|
+
gap: 0.5rem;
|
|
101
|
+
|
|
102
|
+
/* Ensure proper alignment of content */
|
|
103
|
+
#container, [part="container"] {
|
|
104
|
+
display: flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
gap: inherit;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Primary Button - Carbon Design System compliant */
|
|
112
|
+
:host([type="primary"]) button {
|
|
113
|
+
background-color: var(--nuraly-color-button-primary);
|
|
114
|
+
border-color: var(--nuraly-color-button-primary);
|
|
115
|
+
color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));
|
|
116
|
+
|
|
117
|
+
/* Ensure icons inherit the white text color for primary buttons */
|
|
118
|
+
nr-icon {
|
|
119
|
+
fill: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
|
|
120
|
+
color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
|
|
121
|
+
--nuraly-color-icon: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&:hover:not(:disabled) {
|
|
125
|
+
background-color: var(--nuraly-color-button-primary-hover);
|
|
126
|
+
border-color: var(--nuraly-color-button-primary-hover);
|
|
127
|
+
color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&:active:not(:disabled) {
|
|
131
|
+
background-color: var(--nuraly-color-button-primary-active);
|
|
132
|
+
border-color: var(--nuraly-color-button-primary-active);
|
|
133
|
+
color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&:focus:not(:disabled) {
|
|
137
|
+
/* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
|
|
138
|
+
/* outline-offset: 2px; */
|
|
139
|
+
/* box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring)); */
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&:disabled {
|
|
143
|
+
background-color: var(--nuraly-color-button-disabled);
|
|
144
|
+
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
145
|
+
color: var(--nuraly-color-button-disabled-text);
|
|
146
|
+
cursor: not-allowed;
|
|
147
|
+
opacity: 1; /* Reset opacity for proper disabled state */
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* Secondary Button - Carbon Design System compliant */
|
|
152
|
+
:host([type="secondary"]) button {
|
|
153
|
+
background-color: var(--nuraly-color-button-secondary);
|
|
154
|
+
border-color: var(--nuraly-color-button-secondary);
|
|
155
|
+
color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));
|
|
156
|
+
|
|
157
|
+
&:hover:not(:disabled) {
|
|
158
|
+
background-color: var(--nuraly-color-button-secondary-hover);
|
|
159
|
+
border-color: var(--nuraly-color-button-secondary-hover);
|
|
160
|
+
color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
&:active:not(:disabled) {
|
|
164
|
+
background-color: var(--nuraly-color-button-secondary-active);
|
|
165
|
+
border-color: var(--nuraly-color-button-secondary-active);
|
|
166
|
+
color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&:focus:not(:disabled) {
|
|
170
|
+
/* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
|
|
171
|
+
/* outline-offset: 2px; */
|
|
172
|
+
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
&:disabled {
|
|
176
|
+
background-color: var(--nuraly-color-button-disabled);
|
|
177
|
+
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
178
|
+
color: var(--nuraly-color-button-disabled-text);
|
|
179
|
+
cursor: not-allowed;
|
|
180
|
+
opacity: 1; /* Reset opacity for proper disabled state */
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* Default Button - Clean white/light style with defined border */
|
|
185
|
+
:host([type="default"]) button {
|
|
186
|
+
background-color: var(--nuraly-color-background, #ffffff);
|
|
187
|
+
border-color: var(--nuraly-color-border, #d0d0d0);
|
|
188
|
+
color: var(--nuraly-color-text, #161616);
|
|
189
|
+
|
|
190
|
+
&:hover:not(:disabled) {
|
|
191
|
+
background-color: var(--nuraly-color-background-hover, #f4f4f4);
|
|
192
|
+
border-color: var(--nuraly-color-border-hover, #a8a8a8);
|
|
193
|
+
color: var(--nuraly-color-text, #161616);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
&:active:not(:disabled) {
|
|
197
|
+
background-color: var(--nuraly-color-background-active, #e0e0e0);
|
|
198
|
+
border-color: var(--nuraly-color-border-active, #8d8d8d);
|
|
199
|
+
color: var(--nuraly-color-text, #161616);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
&:focus:not(:disabled) {
|
|
203
|
+
/* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
|
|
204
|
+
/* outline-offset: 2px; */
|
|
205
|
+
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
&:disabled {
|
|
209
|
+
background-color: var(--nuraly-color-button-disabled, #f4f4f4);
|
|
210
|
+
border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);
|
|
211
|
+
color: var(--nuraly-color-button-disabled-text, #c6c6c6);
|
|
212
|
+
cursor: not-allowed;
|
|
213
|
+
opacity: 1; /* Reset opacity for proper disabled state */
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* Ghost Button - Transparent with border */
|
|
218
|
+
:host([type="ghost"]) button {
|
|
219
|
+
background-color: var(--nuraly-color-button-outline, transparent);
|
|
220
|
+
border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));
|
|
221
|
+
color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-primary));
|
|
222
|
+
|
|
223
|
+
&:hover:not(:disabled) {
|
|
224
|
+
background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));
|
|
225
|
+
border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-primary));
|
|
226
|
+
color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-primary-hover));
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
&:active:not(:disabled) {
|
|
230
|
+
background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));
|
|
231
|
+
border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-primary-active));
|
|
232
|
+
color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-primary-active));
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
&:focus:not(:disabled) {
|
|
236
|
+
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
&:disabled {
|
|
240
|
+
background-color: transparent;
|
|
241
|
+
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
242
|
+
color: var(--nuraly-color-button-disabled-text);
|
|
243
|
+
cursor: not-allowed;
|
|
244
|
+
opacity: 1;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* Danger Button - Carbon Design System compliant */
|
|
249
|
+
:host([type="danger"]) button {
|
|
250
|
+
background-color: var(--nuraly-color-button-danger);
|
|
251
|
+
border-color: var(--nuraly-color-button-danger);
|
|
252
|
+
color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));
|
|
253
|
+
|
|
254
|
+
&:hover:not(:disabled) {
|
|
255
|
+
background-color: var(--nuraly-color-button-danger-hover);
|
|
256
|
+
border-color: var(--nuraly-color-button-danger-hover);
|
|
257
|
+
color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
&:active:not(:disabled) {
|
|
261
|
+
background-color: var(--nuraly-color-button-danger-active);
|
|
262
|
+
border-color: var(--nuraly-color-button-danger-active);
|
|
263
|
+
color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
&:focus:not(:disabled) {
|
|
267
|
+
/* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
|
|
268
|
+
/* outline-offset: 2px; */
|
|
269
|
+
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
&:disabled {
|
|
273
|
+
background-color: var(--nuraly-color-button-disabled);
|
|
274
|
+
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
275
|
+
color: var(--nuraly-color-button-disabled-text);
|
|
276
|
+
cursor: not-allowed;
|
|
277
|
+
opacity: 1; /* Reset opacity for proper disabled state */
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/* Default size when no size attribute is provided (medium) */
|
|
282
|
+
:host(:not([size])) button {
|
|
283
|
+
height: var(--nuraly-size-md);
|
|
284
|
+
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
285
|
+
min-width: var(--nuraly-button-min-width, 5rem);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* Size variants */
|
|
289
|
+
:host([size="small"]) button {
|
|
290
|
+
height: var(--nuraly-size-sm);
|
|
291
|
+
padding: var(--nuraly-button-padding-small, 0.375rem 0.75rem);
|
|
292
|
+
font-size: 0.75rem;
|
|
293
|
+
min-width: var(--nuraly-button-min-width, 4.5rem);
|
|
294
|
+
gap: 0.375rem;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
:host([size="small"]) button nr-icon {
|
|
298
|
+
width: 0.875rem;
|
|
299
|
+
height: 0.875rem;
|
|
300
|
+
font-size: 0.875rem !important;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
:host([size="medium"]) button {
|
|
304
|
+
height: var(--nuraly-size-md);
|
|
305
|
+
padding: var(--nuraly-button-padding-medium, var(--nuraly-spacing-2) var(--nuraly-spacing-4));
|
|
306
|
+
min-width: var(--nuraly-button-min-width, 5rem);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
:host([size="large"]) button {
|
|
310
|
+
height: var(--nuraly-size-lg);
|
|
311
|
+
padding: var(--nuraly-button-padding-large, var(--nuraly-spacing-05) var(--nuraly-spacing-06));
|
|
312
|
+
font-size: 1rem;
|
|
313
|
+
min-width: var(--nuraly-button-min-width, 6rem);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
:host([size="large"]) button nr-icon {
|
|
317
|
+
width: 1.25rem;
|
|
318
|
+
height: 1.25rem;
|
|
319
|
+
font-size: 1.25rem !important;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
/* Full width */
|
|
323
|
+
:host([full-width]) {
|
|
324
|
+
width: 100%;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
:host([full-width]) button {
|
|
328
|
+
width: 100%;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
/* Loading state */
|
|
332
|
+
:host([loading]) button {
|
|
333
|
+
cursor: not-allowed;
|
|
334
|
+
opacity: 0.7;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
/* Shape variants */
|
|
338
|
+
|
|
339
|
+
/* Round - Pill-shaped with rounded ends */
|
|
340
|
+
:host([shape="round"]) button {
|
|
341
|
+
border-radius: 9999px;
|
|
342
|
+
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-5);
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
:host([shape="round"][size="small"]) button {
|
|
346
|
+
padding: var(--nuraly-spacing-1-5) var(--nuraly-spacing-4);
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
:host([shape="round"][size="large"]) button {
|
|
350
|
+
padding: var(--nuraly-spacing-3) var(--nuraly-spacing-6);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
/* Circle - Perfect circle for icon-only buttons */
|
|
354
|
+
:host([shape="circle"]) button {
|
|
355
|
+
border-radius: 50%;
|
|
356
|
+
min-width: auto;
|
|
357
|
+
width: var(--nuraly-size-md);
|
|
358
|
+
height: var(--nuraly-size-md);
|
|
359
|
+
aspect-ratio: 1;
|
|
360
|
+
padding: 0;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
:host([shape="circle"][size="small"]) button {
|
|
364
|
+
width: var(--nuraly-size-sm);
|
|
365
|
+
height: var(--nuraly-size-sm);
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
:host([shape="circle"][size="medium"]) button {
|
|
369
|
+
width: var(--nuraly-size-md);
|
|
370
|
+
height: var(--nuraly-size-md);
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
:host([shape="circle"][size="large"]) button {
|
|
374
|
+
width: var(--nuraly-size-lg);
|
|
375
|
+
height: var(--nuraly-size-lg);
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
/* Enhanced Ripple Effect Animation - Theme-aware */
|
|
379
|
+
.ripple {
|
|
380
|
+
position: absolute;
|
|
381
|
+
border-radius: 50%;
|
|
382
|
+
background: rgba(255, 255, 255, 0.6);
|
|
383
|
+
transform: scale(0);
|
|
384
|
+
animation: ripple-animation 0.6s linear;
|
|
385
|
+
pointer-events: none;
|
|
386
|
+
z-index: 1;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
@keyframes ripple-animation {
|
|
390
|
+
0% {
|
|
391
|
+
transform: scale(0);
|
|
392
|
+
opacity: 1;
|
|
393
|
+
}
|
|
394
|
+
70% {
|
|
395
|
+
transform: scale(3);
|
|
396
|
+
opacity: 0.5;
|
|
397
|
+
}
|
|
398
|
+
100% {
|
|
399
|
+
transform: scale(4);
|
|
400
|
+
opacity: 0;
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
/* Ripple effect for different button types - Carbon Design System compliant */
|
|
405
|
+
:host([type="primary"]) .ripple {
|
|
406
|
+
background: rgba(255, 255, 255, 0.4);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
:host([type="secondary"]) .ripple {
|
|
410
|
+
background: rgba(255, 255, 255, 0.3);
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
:host([type="default"]) .ripple {
|
|
414
|
+
background: var(--nuraly-color-text, #161616);
|
|
415
|
+
opacity: 0.1;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
:host([type="ghost"]) .ripple {
|
|
419
|
+
background: var(--nuraly-color-button-primary, #0f62fe);
|
|
420
|
+
opacity: 0.2;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
:host([type="danger"]) .ripple {
|
|
424
|
+
background: rgba(255, 255, 255, 0.4);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
/* Theme-specific ripple adjustments for dark theme */
|
|
428
|
+
[data-theme="carbon-dark"] :host([type="default"]) .ripple {
|
|
429
|
+
background: var(--nuraly-color-text, #f4f4f4);
|
|
430
|
+
opacity: 0.1;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
[data-theme="carbon-dark"] :host([type="ghost"]) .ripple {
|
|
434
|
+
background: var(--nuraly-color-button-primary, #78a9ff);
|
|
435
|
+
opacity: 0.2;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
[data-theme="carbon-dark"] :host([type="primary"]) .ripple {
|
|
439
|
+
background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
[data-theme="carbon-dark"] :host([type="secondary"]) .ripple {
|
|
443
|
+
background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
[data-theme="carbon-dark"] :host([type="danger"]) .ripple {
|
|
447
|
+
background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
/* ========================================
|
|
451
|
+
* CARBON THEME SPECIFIC STYLING
|
|
452
|
+
* Enhanced padding and icon centering for Carbon Design System
|
|
453
|
+
* ======================================== */
|
|
454
|
+
|
|
455
|
+
/* Carbon theme button styling - apply to all carbon themes */
|
|
456
|
+
:host([data-theme*="carbon"]) button,
|
|
457
|
+
[data-theme*="carbon"] :host button {
|
|
458
|
+
/* Better baseline alignment for icon and text */
|
|
459
|
+
align-items: center;
|
|
460
|
+
|
|
461
|
+
/* Enhanced icon alignment and spacing for Carbon */
|
|
462
|
+
nr-icon {
|
|
463
|
+
width: var(--nuraly-button-icon-size, 1rem);
|
|
464
|
+
height: var(--nuraly-button-icon-size, 1rem);
|
|
465
|
+
display: inline-flex;
|
|
466
|
+
align-items: center;
|
|
467
|
+
justify-content: center;
|
|
468
|
+
flex-shrink: 0;
|
|
469
|
+
/* Perfect vertical alignment with text baseline */
|
|
470
|
+
vertical-align: middle;
|
|
471
|
+
line-height: 1;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
/* Icon spacing for Carbon theme - improved approach */
|
|
475
|
+
gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
/* Specific Carbon theme selectors for better targeting */
|
|
479
|
+
[data-theme="carbon-light"] nr-button button,
|
|
480
|
+
[data-theme="carbon-dark"] nr-button button,
|
|
481
|
+
[data-theme="carbon"] nr-button button {
|
|
482
|
+
/* Better baseline alignment for icon and text */
|
|
483
|
+
align-items: center;
|
|
484
|
+
|
|
485
|
+
/* Enhanced icon alignment and spacing for Carbon */
|
|
486
|
+
nr-icon {
|
|
487
|
+
width: var(--nuraly-button-icon-size, 1rem);
|
|
488
|
+
height: var(--nuraly-button-icon-size, 1rem);
|
|
489
|
+
display: inline-flex;
|
|
490
|
+
align-items: center;
|
|
491
|
+
justify-content: center;
|
|
492
|
+
flex-shrink: 0;
|
|
493
|
+
/* Perfect vertical alignment with text baseline */
|
|
494
|
+
vertical-align: middle;
|
|
495
|
+
line-height: 1;
|
|
496
|
+
/* Slight adjustment for perfect optical centering */
|
|
497
|
+
margin-top: -1px;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
/* Target the SVG inside nr-icon for better alignment */
|
|
501
|
+
nr-icon svg {
|
|
502
|
+
display: block;
|
|
503
|
+
margin: 0 auto;
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
/* Icon spacing for Carbon theme */
|
|
507
|
+
gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
|
|
508
|
+
|
|
509
|
+
/* Ensure text is also properly centered */
|
|
510
|
+
span#container {
|
|
511
|
+
display: flex;
|
|
512
|
+
align-items: center;
|
|
513
|
+
justify-content: center;
|
|
514
|
+
width: 100%;
|
|
515
|
+
height: 100%;
|
|
516
|
+
line-height: 1;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
/* Ensure slot content aligns properly */
|
|
520
|
+
slot#slot {
|
|
521
|
+
display: inline-block;
|
|
522
|
+
line-height: inherit;
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
`;
|
|
2
526
|
/**
|
|
3
527
|
* @license
|
|
4
528
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
529
|
* SPDX-License-Identifier: MIT
|
|
6
530
|
*/
|
|
7
|
-
class
|
|
531
|
+
class u{constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}handleError(t,r){console.error(`[ButtonController:${this.constructor.name}] Error in ${r}:`,t),this._host.dispatchEvent(new CustomEvent("nr-button-error",{detail:{error:t.message,context:r,controller:this.constructor.name},bubbles:!0,composed:!0}))}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}}
|
|
8
532
|
/**
|
|
9
533
|
* @license
|
|
10
534
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
11
535
|
* SPDX-License-Identifier: MIT
|
|
12
|
-
*/class
|
|
536
|
+
*/class d extends u{createRipple(t){try{if(!this.host.ripple||this.host.disabled)return;const r=t.currentTarget,o=r.getBoundingClientRect(),e=2*Math.max(o.width,o.height),a=t.clientX-o.left-e/2,n=t.clientY-o.top-e/2,i=document.createElement("span");i.className="ripple",i.style.width=i.style.height=e+"px",i.style.left=a+"px",i.style.top=n+"px";r.querySelectorAll(".ripple").forEach(t=>t.remove()),r.appendChild(i),setTimeout(()=>{i.remove()},600)}catch(t){this.handleError(t,"createRipple")}}handleRippleClick(t){try{this.createRipple(t),this.dispatchEvent(new CustomEvent("button-click",{detail:{disabled:this.host.disabled,timestamp:Date.now(),coordinates:{x:t.clientX,y:t.clientY}},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleRippleClick")}}}
|
|
13
537
|
/**
|
|
14
538
|
* @license
|
|
15
539
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
16
540
|
* SPDX-License-Identifier: MIT
|
|
17
|
-
*/class
|
|
541
|
+
*/class h extends u{handleKeyboardActivation(t){try{if(this.host.disabled)return;this.isActivationKey(t)&&(t.preventDefault(),this.host.click(),this.dispatchEvent(new CustomEvent("keyboard-activation",{detail:{key:t.key,timestamp:Date.now(),target:this.host},bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"handleKeyboardActivation")}}handleKeydown(t){try{if(this.host.disabled){if(!this.isReadonlyKeyAllowed(t))return void t.preventDefault()}this.handleKeyboardActivation(t)}catch(t){this.handleError(t,"handleKeydown")}}isActivationKey(t){return"Enter"===t.key||" "===t.key}isReadonlyKeyAllowed(t){return["Tab","Shift","Escape","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End"].includes(t.key)}}
|
|
18
542
|
/**
|
|
19
543
|
* @license
|
|
20
544
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
21
545
|
* SPDX-License-Identifier: MIT
|
|
22
|
-
*/class
|
|
546
|
+
*/class b extends u{isLinkType(){return!!this.host.href}getElementTag(){return this.isLinkType()?"a":"button"}getLinkAttributes(){try{const t={};return this.isLinkType()?(t.href=this.host.href,this.host.target&&(t.target=this.host.target,"_blank"===this.host.target&&(t.rel="noopener noreferrer")),t.role="link"):t.role="button",t}catch(t){return this.handleError(t,"getLinkAttributes"),{role:"button"}}}handleLinkNavigation(t){try{this.isLinkType()&&this.dispatchEvent(new CustomEvent("link-navigation",{detail:{href:this.host.href,target:this.host.target,timestamp:Date.now(),originalEvent:t},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleLinkNavigation")}}}
|
|
23
547
|
/**
|
|
24
548
|
* @license
|
|
25
549
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
26
550
|
* SPDX-License-Identifier: MIT
|
|
27
|
-
*/var y=function(t,
|
|
551
|
+
*/var y=function(t,r,o,e){for(var a,n=arguments.length,i=n<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,o):e,l=t.length-1;l>=0;l--)(a=t[l])&&(i=(n<3?a(i):n>3?a(r,o,i):a(r,o))||i);return n>3&&i&&Object.defineProperty(r,o,i),i};let p=class extends(l(r)){constructor(){super(...arguments),this.disabled=!1,this.loading=!1,this.size=s,this.type="default",this.shape="default",this.block=!1,this.dashed=!1,this.icon=[],this.iconPosition="left",this.href=s,this.target=s,this.ripple=!0,this.buttonAriaLabel=s,this.ariaDescribedBy=s,this.htmlType=s,this.requiredComponents=["nr-icon"],this.rippleController=new d(this),this.keyboardController=new h(this),this.linkController=new b(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies()}getCommonAttributes(){return{"data-type":this.type,"data-shape":this.shape,"data-size":this.size||o,"data-state":this.loading?"loading":o,"data-theme":this.currentTheme,"data-block":this.block?"true":o,class:this.dashed?"button-dashed":"","aria-disabled":this.disabled?"true":"false","aria-label":this.buttonAriaLabel||o,"aria-describedby":this.ariaDescribedBy||o,tabindex:this.disabled?"-1":"0"}}renderIcon(t){if(!this.isComponentAvailable("nr-icon")){const r="string"==typeof t?t:t.name;return console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${r}" will not render. Ensure the icon component is imported and registered.`),o}const r=()=>{switch(this.size){case"small":return"small";case"medium":default:return"medium";case"large":return"large"}};if("string"==typeof t){const o=r();return e`<nr-icon name=${t} size=${i(o)}></nr-icon>`}const{name:a,type:n="solid",size:l,color:s,alt:c}=t,u=l||r();return e`<nr-icon
|
|
552
|
+
name=${a}
|
|
553
|
+
type=${n}
|
|
554
|
+
alt=${c||""}
|
|
555
|
+
size=${i(u)}
|
|
556
|
+
color=${s||""}
|
|
557
|
+
></nr-icon>`}handleClick(t){this.disabled?t.preventDefault():(this.rippleController.handleRippleClick(t),this.linkController.isLinkType()&&this.linkController.handleLinkNavigation(t),this.dispatchEventWithMetadata("button-clicked",{type:this.type,disabled:this.disabled,loading:this.loading,href:this.href||null}))}handleKeydown(t){this.keyboardController.handleKeydown(t)}getResolvedLeftIcon(){var t,r;return this.iconLeft?this.iconLeft:(null===(t=this.icons)||void 0===t?void 0:t.left)?this.icons.left:(null===(r=this.icon)||void 0===r?void 0:r.length)>0?this.icon[0]:void 0}getResolvedRightIcon(){var t,r;return this.iconRight?this.iconRight:(null===(t=this.icons)||void 0===t?void 0:t.right)?this.icons.right:2===(null===(r=this.icon)||void 0===r?void 0:r.length)?this.icon[1]:void 0}render(){const t=this.linkController.getElementTag(),r=this.getCommonAttributes(),a=this.linkController.getLinkAttributes(),n=this.getResolvedLeftIcon(),i=this.getResolvedRightIcon(),l=e`
|
|
558
|
+
<span id="container" part="container">
|
|
559
|
+
${n?this.renderIcon(n):o}
|
|
560
|
+
<slot id="slot"></slot>
|
|
561
|
+
${i?this.renderIcon(i):o}
|
|
562
|
+
</span>
|
|
563
|
+
`;return"a"===t?e`
|
|
564
|
+
<a
|
|
565
|
+
href="${a.href}"
|
|
566
|
+
target="${a.target||o}"
|
|
567
|
+
rel="${a.rel||o}"
|
|
568
|
+
role="${a.role}"
|
|
569
|
+
data-type="${r["data-type"]}"
|
|
570
|
+
data-shape="${r["data-shape"]}"
|
|
571
|
+
data-size="${r["data-size"]}"
|
|
572
|
+
data-state="${r["data-state"]}"
|
|
573
|
+
data-theme="${r["data-theme"]}"
|
|
574
|
+
data-block="${r["data-block"]}"
|
|
575
|
+
class="${r.class}"
|
|
576
|
+
aria-disabled="${this.disabled}"
|
|
577
|
+
aria-label="${this.buttonAriaLabel||o}"
|
|
578
|
+
aria-describedby="${this.ariaDescribedBy||o}"
|
|
579
|
+
tabindex="${this.disabled?-1:0}"
|
|
580
|
+
@click="${this.handleClick}"
|
|
581
|
+
@keydown="${this.handleKeydown}"
|
|
582
|
+
>
|
|
583
|
+
${l}
|
|
584
|
+
</a>
|
|
585
|
+
`:e`
|
|
586
|
+
<button
|
|
587
|
+
?disabled="${this.disabled}"
|
|
588
|
+
type="${this.htmlType||"button"}"
|
|
589
|
+
role="${a.role}"
|
|
590
|
+
data-type="${r["data-type"]}"
|
|
591
|
+
data-shape="${r["data-shape"]}"
|
|
592
|
+
data-size="${r["data-size"]}"
|
|
593
|
+
data-state="${r["data-state"]}"
|
|
594
|
+
data-theme="${r["data-theme"]}"
|
|
595
|
+
data-block="${r["data-block"]}"
|
|
596
|
+
class="${r.class}"
|
|
597
|
+
aria-disabled="${this.disabled}"
|
|
598
|
+
aria-label="${this.buttonAriaLabel||o}"
|
|
599
|
+
aria-describedby="${this.ariaDescribedBy||o}"
|
|
600
|
+
tabindex="${this.disabled?-1:0}"
|
|
601
|
+
@click="${this.handleClick}"
|
|
602
|
+
@keydown="${this.handleKeydown}"
|
|
603
|
+
>
|
|
604
|
+
${l}
|
|
605
|
+
</button>
|
|
606
|
+
`}};p.styles=c,y([a({type:Boolean})],p.prototype,"disabled",void 0),y([a({type:Boolean})],p.prototype,"loading",void 0),y([a({type:String})],p.prototype,"size",void 0),y([a({type:String,reflect:!0})],p.prototype,"type",void 0),y([a({type:String})],p.prototype,"shape",void 0),y([a({type:Boolean})],p.prototype,"block",void 0),y([a({type:Boolean})],p.prototype,"dashed",void 0),y([a({type:Array})],p.prototype,"icon",void 0),y([a({type:Object})],p.prototype,"iconLeft",void 0),y([a({type:Object})],p.prototype,"iconRight",void 0),y([a({type:Object})],p.prototype,"icons",void 0),y([a({reflect:!0})],p.prototype,"iconPosition",void 0),y([a({type:String})],p.prototype,"href",void 0),y([a({type:String})],p.prototype,"target",void 0),y([a({type:Boolean})],p.prototype,"ripple",void 0),y([a({type:String})],p.prototype,"buttonAriaLabel",void 0),y([a({type:String})],p.prototype,"ariaDescribedBy",void 0),y([a({type:String})],p.prototype,"htmlType",void 0),p=y([n("nr-button")],p);export{p as NrButtonElement};
|
package/button.component.d.ts
CHANGED
|
@@ -43,7 +43,7 @@ export declare class NrButtonElement extends NrButtonElement_base implements But
|
|
|
43
43
|
loading: boolean;
|
|
44
44
|
/** Button size (small, medium, large) */
|
|
45
45
|
size: ButtonSize | '';
|
|
46
|
-
/** Button type (default, primary, secondary, danger, ghost
|
|
46
|
+
/** Button type (default, primary, secondary, danger, ghost) */
|
|
47
47
|
type: ButtonType;
|
|
48
48
|
/** Button shape (default, circle, round) */
|
|
49
49
|
shape: ButtonShape;
|
|
@@ -90,7 +90,7 @@ export declare class NrButtonElement extends NrButtonElement_base implements But
|
|
|
90
90
|
* Get the resolved right icon from various sources
|
|
91
91
|
*/
|
|
92
92
|
private getResolvedRightIcon;
|
|
93
|
-
render(): import("lit").TemplateResult<1>;
|
|
93
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
94
94
|
}
|
|
95
95
|
export {};
|
|
96
96
|
//# sourceMappingURL=button.component.d.ts.map
|
package/button.component.js
CHANGED
|
@@ -54,7 +54,7 @@ let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement
|
|
|
54
54
|
this.loading = false;
|
|
55
55
|
/** Button size (small, medium, large) */
|
|
56
56
|
this.size = EMPTY_STRING;
|
|
57
|
-
/** Button type (default, primary, secondary, danger, ghost
|
|
57
|
+
/** Button type (default, primary, secondary, danger, ghost) */
|
|
58
58
|
this.type = "default" /* ButtonType.Default */;
|
|
59
59
|
/** Button shape (default, circle, round) */
|
|
60
60
|
this.shape = "default" /* ButtonShape.Default */;
|
|
@@ -261,7 +261,7 @@ __decorate([
|
|
|
261
261
|
property({ type: String })
|
|
262
262
|
], NrButtonElement.prototype, "size", void 0);
|
|
263
263
|
__decorate([
|
|
264
|
-
property({ type: String })
|
|
264
|
+
property({ type: String, reflect: true })
|
|
265
265
|
], NrButtonElement.prototype, "type", void 0);
|
|
266
266
|
__decorate([
|
|
267
267
|
property({ type: String })
|
package/button.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonType, ButtonSize, ButtonShape, EMPTY_STRING, IconPosition, ButtonIcons, ButtonIcon, ButtonIconsConfig } from './button.types.js';\nimport { styles } from './button.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n// Import controllers\nimport {\n ButtonRippleController,\n ButtonKeyboardController,\n ButtonLinkController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { ButtonHost } from './interfaces/index.js';\n\n/**\n * Versatile button component with multiple variants, loading states, and enhanced icon support.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-button type=\"primary\">Click me</nr-button>\n * \n * <!-- Array-based icons (original API) -->\n * <nr-button type=\"primary\" .icon=${['add']}>Add Item</nr-button>\n * <nr-button type=\"primary\" .icon=${['home', 'arrow-right']}>Home</nr-button>\n * \n * <!-- Separate icon properties (new API) -->\n * <nr-button type=\"primary\" iconLeft=\"home\" iconRight=\"arrow-right\">Navigate</nr-button>\n * <nr-button type=\"primary\" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>\n * \n * <!-- Object-based icons (new API) -->\n * <nr-button type=\"primary\" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>\n * \n * <!-- Loading state -->\n * <nr-button loading>Processing...</nr-button>\n * ```\n * \n * @fires button-clicked - Button clicked\n * @fires link-navigation - Link navigation\n * \n * @slot default - Button text content\n */\n@customElement('nr-button')\nexport class NrButtonElement extends NuralyUIBaseMixin(LitElement) implements ButtonHost {\n static override styles = styles;\n /** Disables the button */\n @property({ type: Boolean })\n disabled = false;\n\n /** Shows loading spinner */\n @property({ type: Boolean })\n loading = false;\n\n /** Button size (small, medium, large) */\n @property({ type: String })\n size: ButtonSize | '' = EMPTY_STRING;\n\n /** Button type (default, primary, secondary, danger, ghost, link) */\n @property({ type: String })\n type: ButtonType = ButtonType.Default;\n\n /** Button shape (default, circle, round) */\n @property({ type: String })\n shape: ButtonShape = ButtonShape.Default;\n\n /** Makes button full width */\n @property({ type: Boolean })\n block = false;\n\n /** Applies dashed border */\n @property({ type: Boolean })\n dashed = false;\n\n /** Icon configuration (supports strings or enhanced config objects) */\n @property({ type: Array })\n icon: ButtonIcons = [];\n\n /** Left icon (alternative to icon array) */\n @property({ type: Object })\n iconLeft?: ButtonIcon;\n\n /** Right icon (alternative to icon array) */\n @property({ type: Object })\n iconRight?: ButtonIcon;\n\n /** Icon configuration object (alternative to icon array) */\n @property({ type: Object })\n icons?: ButtonIconsConfig;\n\n /** Icon position relative to text */\n @property({ reflect: true })\n iconPosition: IconPosition = IconPosition.Left;\n\n /** URL for link-type buttons */\n @property({ type: String })\n href = EMPTY_STRING;\n\n /** Target attribute for links */\n @property({ type: String })\n target = EMPTY_STRING;\n\n /** Enables ripple effect */\n @property({ type: Boolean })\n ripple = true;\n\n /** Custom aria-label */\n @property({ type: String })\n buttonAriaLabel = EMPTY_STRING;\n\n /** References to descriptive elements */\n @property({ type: String })\n ariaDescribedBy = EMPTY_STRING;\n\n /** HTML button type */\n @property({ type: String })\n htmlType = EMPTY_STRING;\n\n override requiredComponents = ['nr-icon'];\n\n // Controllers\n private rippleController = new ButtonRippleController(this);\n private keyboardController = new ButtonKeyboardController(this);\n private linkController = new ButtonLinkController(this);\n\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n }\n\n private getCommonAttributes() {\n return {\n 'data-type': this.type,\n 'data-shape': this.shape,\n 'data-size': this.size || nothing,\n 'data-state': this.loading ? 'loading' : nothing,\n 'data-theme': this.currentTheme,\n 'data-block': this.block ? 'true' : nothing,\n 'class': this.dashed ? 'button-dashed' : '',\n 'aria-disabled': this.disabled ? 'true' : 'false',\n 'aria-label': this.buttonAriaLabel || nothing,\n 'aria-describedby': this.ariaDescribedBy || nothing,\n 'tabindex': this.disabled ? '-1' : '0'\n };\n }\n\n private renderIcon(iconConfig: ButtonIcon) {\n if (!this.isComponentAvailable('nr-icon')) {\n const iconName = typeof iconConfig === 'string' ? iconConfig : iconConfig.name;\n console.warn(\n `[nr-button] Icon component 'nr-icon' not available. Icon \"${iconName}\" will not render. ` +\n `Ensure the icon component is imported and registered.`\n );\n return nothing;\n }\n\n // Get appropriate icon size based on button size\n const getIconSizeForButtonSize = (): 'small' | 'medium' | 'large' | undefined => {\n switch (this.size) {\n case ButtonSize.Small:\n return 'small';\n case ButtonSize.Medium:\n return 'medium';\n case ButtonSize.Large:\n return 'large';\n default:\n return 'medium'; // Default to medium if no size specified\n }\n };\n\n // Handle simple string input (backward compatibility)\n if (typeof iconConfig === 'string') {\n const iconSize = getIconSizeForButtonSize();\n return html`<nr-icon name=${iconConfig} size=${ifDefined(iconSize)}></nr-icon>`;\n }\n\n // Handle enhanced icon configuration\n const {\n name,\n type = 'solid',\n size,\n color,\n alt\n } = iconConfig;\n\n // Use explicit size if provided, otherwise use size based on button size\n const resolvedSize = size || getIconSizeForButtonSize();\n const iconSize = resolvedSize as 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | undefined;\n\n return html`<nr-icon \n name=${name}\n type=${type}\n alt=${alt || ''}\n size=${ifDefined(iconSize)}\n color=${color || ''}\n ></nr-icon>`;\n }\n\n private handleClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.rippleController.handleRippleClick(event);\n \n if (this.linkController.isLinkType()) {\n this.linkController.handleLinkNavigation(event);\n }\n \n this.dispatchEventWithMetadata('button-clicked', {\n type: this.type,\n disabled: this.disabled,\n loading: this.loading,\n href: this.href || null\n });\n }\n\n private handleKeydown(event: KeyboardEvent) {\n this.keyboardController.handleKeydown(event);\n }\n\n /**\n * Get the resolved left icon from various sources\n */\n private getResolvedLeftIcon(): ButtonIcon | undefined {\n // Priority: iconLeft > icons.left > icon[0]\n if (this.iconLeft) return this.iconLeft;\n if (this.icons?.left) return this.icons.left;\n if (this.icon?.length > 0) return this.icon[0];\n return undefined;\n }\n\n /**\n * Get the resolved right icon from various sources\n */\n private getResolvedRightIcon(): ButtonIcon | undefined {\n // Priority: iconRight > icons.right > icon[1]\n if (this.iconRight) return this.iconRight;\n if (this.icons?.right) return this.icons.right;\n if (this.icon?.length === 2) return this.icon[1];\n return undefined;\n }\n\n override render() {\n const elementTag = this.linkController.getElementTag();\n const commonAttributes = this.getCommonAttributes();\n const linkAttributes = this.linkController.getLinkAttributes();\n \n const leftIcon = this.getResolvedLeftIcon();\n const rightIcon = this.getResolvedRightIcon();\n \n const content = html`\n <span id=\"container\" part=\"container\">\n ${leftIcon ? this.renderIcon(leftIcon) : nothing}\n <slot id=\"slot\"></slot>\n ${rightIcon ? this.renderIcon(rightIcon) : nothing}\n </span>\n `;\n if (elementTag === 'a') {\n return html`\n <a\n href=\"${linkAttributes.href}\"\n target=\"${linkAttributes.target || nothing}\"\n rel=\"${linkAttributes.rel || nothing}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\"\n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </a>\n `;\n }\n \n return html`\n <button\n ?disabled=\"${this.disabled}\"\n type=\"${(this.htmlType || 'button') as 'button' | 'submit' | 'reset'}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\" \n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </button>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../../src/components/button/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,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAuC,YAAY,EAA4D,MAAM,mBAAmB,CAAC;AAChJ,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,qBAAqB;AACrB,OAAO,EACH,sBAAsB,EACtB,wBAAwB,EACxB,oBAAoB,EACvB,MAAM,wBAAwB,CAAC;AAKhC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAEE,0BAA0B;QAE1B,aAAQ,GAAG,KAAK,CAAC;QAEjB,4BAA4B;QAE5B,YAAO,GAAG,KAAK,CAAC;QAEhB,yCAAyC;QAEzC,SAAI,GAAoB,YAAY,CAAC;QAErC,+DAA+D;QAE/D,SAAI,sCAAkC;QAEtC,4CAA4C;QAE5C,UAAK,uCAAoC;QAEzC,8BAA8B;QAE9B,UAAK,GAAG,KAAK,CAAC;QAEd,4BAA4B;QAE5B,WAAM,GAAG,KAAK,CAAC;QAEf,uEAAuE;QAEvE,SAAI,GAAgB,EAAE,CAAC;QAcvB,qCAAqC;QAErC,iBAAY,kCAAmC;QAE/C,gCAAgC;QAEhC,SAAI,GAAG,YAAY,CAAC;QAEpB,iCAAiC;QAEjC,WAAM,GAAG,YAAY,CAAC;QAEtB,4BAA4B;QAE5B,WAAM,GAAG,IAAI,CAAC;QAEd,wBAAwB;QAExB,oBAAe,GAAG,YAAY,CAAC;QAE/B,yCAAyC;QAEzC,oBAAe,GAAG,YAAY,CAAC;QAE/B,uBAAuB;QAEvB,aAAQ,GAAG,YAAY,CAAC;QAEf,uBAAkB,GAAG,CAAC,SAAS,CAAC,CAAC;QAE1C,cAAc;QACN,qBAAgB,GAAG,IAAI,sBAAsB,CAAC,IAAI,CAAC,CAAC;QACpD,uBAAkB,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC;QACxD,mBAAc,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAyL1D,CAAC;IAvLU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,mBAAmB;QACzB,OAAO;YACL,WAAW,EAAE,IAAI,CAAC,IAAI;YACtB,YAAY,EAAE,IAAI,CAAC,KAAK;YACxB,WAAW,EAAE,IAAI,CAAC,IAAI,IAAI,OAAO;YACjC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;YAChD,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAC3C,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;YAC3C,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YACjD,YAAY,EAAE,IAAI,CAAC,eAAe,IAAI,OAAO;YAC7C,kBAAkB,EAAE,IAAI,CAAC,eAAe,IAAI,OAAO;YACnD,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;SACvC,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,UAAsB;QACvC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,EAAE;YACzC,MAAM,QAAQ,GAAG,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC;YAC/E,OAAO,CAAC,IAAI,CACV,6DAA6D,QAAQ,qBAAqB;gBAC1F,uDAAuD,CACxD,CAAC;YACF,OAAO,OAAO,CAAC;SAChB;QAED,iDAAiD;QACjD,MAAM,wBAAwB,GAAG,GAA6C,EAAE;YAC9E,QAAQ,IAAI,CAAC,IAAI,EAAE;gBACjB;oBACE,OAAO,OAAO,CAAC;gBACjB;oBACE,OAAO,QAAQ,CAAC;gBAClB;oBACE,OAAO,OAAO,CAAC;gBACjB;oBACE,OAAO,QAAQ,CAAC,CAAC,yCAAyC;aAC7D;QACH,CAAC,CAAC;QAEF,sDAAsD;QACtD,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;YAClC,MAAM,QAAQ,GAAG,wBAAwB,EAAE,CAAC;YAC5C,OAAO,IAAI,CAAA,iBAAiB,UAAU,SAAS,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC;SACjF;QAED,qCAAqC;QACrC,MAAM,EACJ,IAAI,EACJ,IAAI,GAAG,OAAO,EACd,IAAI,EACJ,KAAK,EACL,GAAG,EACJ,GAAG,UAAU,CAAC;QAEf,yEAAyE;QACzE,MAAM,YAAY,GAAG,IAAI,IAAI,wBAAwB,EAAE,CAAC;QACxD,MAAM,QAAQ,GAAG,YAA+E,CAAC;QAEjG,OAAO,IAAI,CAAA;aACF,IAAI;aACJ,IAAI;YACL,GAAG,IAAI,EAAE;aACR,SAAS,CAAC,QAAQ,CAAC;cAClB,KAAK,IAAI,EAAE;gBACT,CAAC;IACf,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;SACR;QAED,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAE/C,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,EAAE;YACpC,IAAI,CAAC,cAAc,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;SACjD;QAED,IAAI,CAAC,yBAAyB,CAAC,gBAAgB,EAAE;YAC/C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;SACxB,CAAC,CAAC;IACL,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC;IAED;;OAEG;IACK,mBAAmB;;QACzB,4CAA4C;QAC5C,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,QAAQ,CAAC;QACxC,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QAC7C,IAAI,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,IAAG,CAAC;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC/C,OAAO,SAAS,CAAC;IACnB,CAAC;IAED;;OAEG;IACK,oBAAoB;;QAC1B,8CAA8C;QAC9C,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1C,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAC/C,IAAI,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,MAAK,CAAC;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACjD,OAAO,SAAS,CAAC;IACnB,CAAC;IAEQ,MAAM;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC;QACvD,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACpD,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC;QAE/D,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE9C,MAAM,OAAO,GAAG,IAAI,CAAA;;UAEd,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;;UAE9C,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO;;KAErD,CAAC;QACF,IAAI,UAAU,KAAK,GAAG,EAAE;YACtB,OAAO,IAAI,CAAA;;kBAEC,cAAc,CAAC,IAAI;oBACjB,cAAc,CAAC,MAAM,IAAI,OAAO;iBACnC,cAAc,CAAC,GAAG,IAAI,OAAO;kBAC5B,cAAc,CAAC,IAAI;uBACd,gBAAgB,CAAC,WAAW,CAAC;wBAC5B,gBAAgB,CAAC,YAAY,CAAC;uBAC/B,gBAAgB,CAAC,WAAW,CAAC;wBAC5B,gBAAgB,CAAC,YAAY,CAAC;wBAC9B,gBAAgB,CAAC,YAAY,CAAC;wBAC9B,gBAAgB,CAAC,YAAY,CAAC;mBACnC,gBAAgB,CAAC,KAAK;2BACd,IAAI,CAAC,QAAQ;wBAChB,IAAI,CAAC,eAAe,IAAI,OAAO;8BACzB,IAAI,CAAC,eAAe,IAAI,OAAO;sBACvC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACxB,IAAI,CAAC,WAAW;sBACd,IAAI,CAAC,aAAa;;YAE5B,OAAO;;OAEZ,CAAC;SACH;QAED,OAAO,IAAI,CAAA;;qBAEM,IAAI,CAAC,QAAQ;gBAClB,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAkC;gBAC5D,cAAc,CAAC,IAAI;qBACd,gBAAgB,CAAC,WAAW,CAAC;sBAC5B,gBAAgB,CAAC,YAAY,CAAC;qBAC/B,gBAAgB,CAAC,WAAW,CAAC;sBAC5B,gBAAgB,CAAC,YAAY,CAAC;sBAC9B,gBAAgB,CAAC,YAAY,CAAC;sBAC9B,gBAAgB,CAAC,YAAY,CAAC;iBACnC,gBAAgB,CAAC,KAAK;yBACd,IAAI,CAAC,QAAQ;sBAChB,IAAI,CAAC,eAAe,IAAI,OAAO;4BACzB,IAAI,CAAC,eAAe,IAAI,OAAO;oBACvC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;kBACxB,IAAI,CAAC,WAAW;oBACd,IAAI,CAAC,aAAa;;UAE5B,OAAO;;KAEZ,CAAC;IACJ,CAAC;CACF,CAAA;AAvQiB,sBAAM,GAAG,MAAO,CAAA;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACX;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACZ;AAIhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACU;AAIrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACJ;AAItC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACc;AAIzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACd;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACb;AAIf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CACH;AAIvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACJ;AAIvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACD;AAI1B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACmB;AAI/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACP;AAIpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACd;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACI;AAI/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACI;AAI/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACH;AAxEb,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAwQ3B;SAxQY,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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonType, ButtonSize, ButtonShape, EMPTY_STRING, IconPosition, ButtonIcons, ButtonIcon, ButtonIconsConfig } from './button.types.js';\nimport { styles } from './button.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n// Import controllers\nimport {\n ButtonRippleController,\n ButtonKeyboardController,\n ButtonLinkController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { ButtonHost } from './interfaces/index.js';\n\n/**\n * Versatile button component with multiple variants, loading states, and enhanced icon support.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-button type=\"primary\">Click me</nr-button>\n * \n * <!-- Array-based icons (original API) -->\n * <nr-button type=\"primary\" .icon=${['add']}>Add Item</nr-button>\n * <nr-button type=\"primary\" .icon=${['home', 'arrow-right']}>Home</nr-button>\n * \n * <!-- Separate icon properties (new API) -->\n * <nr-button type=\"primary\" iconLeft=\"home\" iconRight=\"arrow-right\">Navigate</nr-button>\n * <nr-button type=\"primary\" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>\n * \n * <!-- Object-based icons (new API) -->\n * <nr-button type=\"primary\" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>\n * \n * <!-- Loading state -->\n * <nr-button loading>Processing...</nr-button>\n * ```\n * \n * @fires button-clicked - Button clicked\n * @fires link-navigation - Link navigation\n * \n * @slot default - Button text content\n */\n@customElement('nr-button')\nexport class NrButtonElement extends NuralyUIBaseMixin(LitElement) implements ButtonHost {\n static override styles = styles;\n /** Disables the button */\n @property({ type: Boolean })\n disabled = false;\n\n /** Shows loading spinner */\n @property({ type: Boolean })\n loading = false;\n\n /** Button size (small, medium, large) */\n @property({ type: String })\n size: ButtonSize | '' = EMPTY_STRING;\n\n /** Button type (default, primary, secondary, danger, ghost) */\n @property({ type: String, reflect: true })\n type: ButtonType = ButtonType.Default;\n\n /** Button shape (default, circle, round) */\n @property({ type: String })\n shape: ButtonShape = ButtonShape.Default;\n\n /** Makes button full width */\n @property({ type: Boolean })\n block = false;\n\n /** Applies dashed border */\n @property({ type: Boolean })\n dashed = false;\n\n /** Icon configuration (supports strings or enhanced config objects) */\n @property({ type: Array })\n icon: ButtonIcons = [];\n\n /** Left icon (alternative to icon array) */\n @property({ type: Object })\n iconLeft?: ButtonIcon;\n\n /** Right icon (alternative to icon array) */\n @property({ type: Object })\n iconRight?: ButtonIcon;\n\n /** Icon configuration object (alternative to icon array) */\n @property({ type: Object })\n icons?: ButtonIconsConfig;\n\n /** Icon position relative to text */\n @property({ reflect: true })\n iconPosition: IconPosition = IconPosition.Left;\n\n /** URL for link-type buttons */\n @property({ type: String })\n href = EMPTY_STRING;\n\n /** Target attribute for links */\n @property({ type: String })\n target = EMPTY_STRING;\n\n /** Enables ripple effect */\n @property({ type: Boolean })\n ripple = true;\n\n /** Custom aria-label */\n @property({ type: String })\n buttonAriaLabel = EMPTY_STRING;\n\n /** References to descriptive elements */\n @property({ type: String })\n ariaDescribedBy = EMPTY_STRING;\n\n /** HTML button type */\n @property({ type: String })\n htmlType = EMPTY_STRING;\n\n override requiredComponents = ['nr-icon'];\n\n // Controllers\n private rippleController = new ButtonRippleController(this);\n private keyboardController = new ButtonKeyboardController(this);\n private linkController = new ButtonLinkController(this);\n\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n }\n\n private getCommonAttributes() {\n return {\n 'data-type': this.type,\n 'data-shape': this.shape,\n 'data-size': this.size || nothing,\n 'data-state': this.loading ? 'loading' : nothing,\n 'data-theme': this.currentTheme,\n 'data-block': this.block ? 'true' : nothing,\n 'class': this.dashed ? 'button-dashed' : '',\n 'aria-disabled': this.disabled ? 'true' : 'false',\n 'aria-label': this.buttonAriaLabel || nothing,\n 'aria-describedby': this.ariaDescribedBy || nothing,\n 'tabindex': this.disabled ? '-1' : '0'\n };\n }\n\n private renderIcon(iconConfig: ButtonIcon) {\n if (!this.isComponentAvailable('nr-icon')) {\n const iconName = typeof iconConfig === 'string' ? iconConfig : iconConfig.name;\n console.warn(\n `[nr-button] Icon component 'nr-icon' not available. Icon \"${iconName}\" will not render. ` +\n `Ensure the icon component is imported and registered.`\n );\n return nothing;\n }\n\n // Get appropriate icon size based on button size\n const getIconSizeForButtonSize = (): 'small' | 'medium' | 'large' | undefined => {\n switch (this.size) {\n case ButtonSize.Small:\n return 'small';\n case ButtonSize.Medium:\n return 'medium';\n case ButtonSize.Large:\n return 'large';\n default:\n return 'medium'; // Default to medium if no size specified\n }\n };\n\n // Handle simple string input (backward compatibility)\n if (typeof iconConfig === 'string') {\n const iconSize = getIconSizeForButtonSize();\n return html`<nr-icon name=${iconConfig} size=${ifDefined(iconSize)}></nr-icon>`;\n }\n\n // Handle enhanced icon configuration\n const {\n name,\n type = 'solid',\n size,\n color,\n alt\n } = iconConfig;\n\n // Use explicit size if provided, otherwise use size based on button size\n const resolvedSize = size || getIconSizeForButtonSize();\n const iconSize = resolvedSize as 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | undefined;\n\n return html`<nr-icon \n name=${name}\n type=${type}\n alt=${alt || ''}\n size=${ifDefined(iconSize)}\n color=${color || ''}\n ></nr-icon>`;\n }\n\n private handleClick(event: MouseEvent) {\n if (this.disabled) {\n event.preventDefault();\n return;\n }\n\n this.rippleController.handleRippleClick(event);\n \n if (this.linkController.isLinkType()) {\n this.linkController.handleLinkNavigation(event);\n }\n \n this.dispatchEventWithMetadata('button-clicked', {\n type: this.type,\n disabled: this.disabled,\n loading: this.loading,\n href: this.href || null\n });\n }\n\n private handleKeydown(event: KeyboardEvent) {\n this.keyboardController.handleKeydown(event);\n }\n\n /**\n * Get the resolved left icon from various sources\n */\n private getResolvedLeftIcon(): ButtonIcon | undefined {\n // Priority: iconLeft > icons.left > icon[0]\n if (this.iconLeft) return this.iconLeft;\n if (this.icons?.left) return this.icons.left;\n if (this.icon?.length > 0) return this.icon[0];\n return undefined;\n }\n\n /**\n * Get the resolved right icon from various sources\n */\n private getResolvedRightIcon(): ButtonIcon | undefined {\n // Priority: iconRight > icons.right > icon[1]\n if (this.iconRight) return this.iconRight;\n if (this.icons?.right) return this.icons.right;\n if (this.icon?.length === 2) return this.icon[1];\n return undefined;\n }\n\n override render() {\n const elementTag = this.linkController.getElementTag();\n const commonAttributes = this.getCommonAttributes();\n const linkAttributes = this.linkController.getLinkAttributes();\n \n const leftIcon = this.getResolvedLeftIcon();\n const rightIcon = this.getResolvedRightIcon();\n \n const content = html`\n <span id=\"container\" part=\"container\">\n ${leftIcon ? this.renderIcon(leftIcon) : nothing}\n <slot id=\"slot\"></slot>\n ${rightIcon ? this.renderIcon(rightIcon) : nothing}\n </span>\n `;\n if (elementTag === 'a') {\n return html`\n <a\n href=\"${linkAttributes.href}\"\n target=\"${linkAttributes.target || nothing}\"\n rel=\"${linkAttributes.rel || nothing}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\"\n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </a>\n `;\n }\n \n return html`\n <button\n ?disabled=\"${this.disabled}\"\n type=\"${(this.htmlType || 'button') as 'button' | 'submit' | 'reset'}\"\n role=\"${linkAttributes.role}\"\n data-type=\"${commonAttributes['data-type']}\"\n data-shape=\"${commonAttributes['data-shape']}\"\n data-size=\"${commonAttributes['data-size']}\" \n data-state=\"${commonAttributes['data-state']}\"\n data-theme=\"${commonAttributes['data-theme']}\"\n data-block=\"${commonAttributes['data-block']}\"\n class=\"${commonAttributes.class}\"\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${this.buttonAriaLabel || nothing}\"\n aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n @click=\"${this.handleClick}\"\n @keydown=\"${this.handleKeydown}\"\n >\n ${content}\n </button>\n `;\n }\n}\n"]}
|
package/button.style.js
CHANGED
|
@@ -38,7 +38,6 @@ export const buttonStyles = css `
|
|
|
38
38
|
font-weight: var(--nuraly-font-weight-regular);
|
|
39
39
|
line-height: 1.125rem;
|
|
40
40
|
letter-spacing: 0.16px;
|
|
41
|
-
min-width: 5rem;
|
|
42
41
|
height: 3rem;
|
|
43
42
|
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
44
43
|
border: 1px solid transparent;
|
|
@@ -57,8 +56,8 @@ export const buttonStyles = css `
|
|
|
57
56
|
text-shadow: none;
|
|
58
57
|
|
|
59
58
|
&:focus {
|
|
60
|
-
outline: var(--nuraly-focus-outline);
|
|
61
|
-
outline-offset: var(--nuraly-focus-outline-offset);
|
|
59
|
+
/* outline: var(--nuraly-focus-outline); */
|
|
60
|
+
/* outline-offset: var(--nuraly-focus-outline-offset); */
|
|
62
61
|
}
|
|
63
62
|
|
|
64
63
|
&:disabled {
|
|
@@ -123,6 +122,13 @@ export const buttonStyles = css `
|
|
|
123
122
|
border-color: var(--nuraly-color-button-primary);
|
|
124
123
|
color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));
|
|
125
124
|
|
|
125
|
+
/* Ensure icons inherit the white text color for primary buttons */
|
|
126
|
+
nr-icon {
|
|
127
|
+
fill: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
|
|
128
|
+
color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
|
|
129
|
+
--nuraly-color-icon: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;
|
|
130
|
+
}
|
|
131
|
+
|
|
126
132
|
&:hover:not(:disabled) {
|
|
127
133
|
background-color: var(--nuraly-color-button-primary-hover);
|
|
128
134
|
border-color: var(--nuraly-color-button-primary-hover);
|
|
@@ -136,9 +142,9 @@ export const buttonStyles = css `
|
|
|
136
142
|
}
|
|
137
143
|
|
|
138
144
|
&:focus:not(:disabled) {
|
|
139
|
-
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
140
|
-
outline-offset: 2px;
|
|
141
|
-
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
145
|
+
/* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
|
|
146
|
+
/* outline-offset: 2px; */
|
|
147
|
+
/* box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring)); */
|
|
142
148
|
}
|
|
143
149
|
|
|
144
150
|
&:disabled {
|
|
@@ -169,8 +175,8 @@ export const buttonStyles = css `
|
|
|
169
175
|
}
|
|
170
176
|
|
|
171
177
|
&:focus:not(:disabled) {
|
|
172
|
-
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
173
|
-
outline-offset: 2px;
|
|
178
|
+
/* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
|
|
179
|
+
/* outline-offset: 2px; */
|
|
174
180
|
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
175
181
|
}
|
|
176
182
|
|
|
@@ -202,8 +208,8 @@ export const buttonStyles = css `
|
|
|
202
208
|
}
|
|
203
209
|
|
|
204
210
|
&:focus:not(:disabled) {
|
|
205
|
-
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
206
|
-
outline-offset: 2px;
|
|
211
|
+
/* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
|
|
212
|
+
/* outline-offset: 2px; */
|
|
207
213
|
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
208
214
|
}
|
|
209
215
|
|
|
@@ -216,27 +222,25 @@ export const buttonStyles = css `
|
|
|
216
222
|
}
|
|
217
223
|
}
|
|
218
224
|
|
|
219
|
-
/*
|
|
220
|
-
:host([type="
|
|
225
|
+
/* Ghost Button - Transparent with border */
|
|
226
|
+
:host([type="ghost"]) button {
|
|
221
227
|
background-color: var(--nuraly-color-button-outline, transparent);
|
|
222
228
|
border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));
|
|
223
|
-
color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-
|
|
229
|
+
color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-primary));
|
|
224
230
|
|
|
225
231
|
&:hover:not(:disabled) {
|
|
226
232
|
background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));
|
|
227
|
-
border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-
|
|
228
|
-
color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-
|
|
233
|
+
border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-primary));
|
|
234
|
+
color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-primary-hover));
|
|
229
235
|
}
|
|
230
236
|
|
|
231
237
|
&:active:not(:disabled) {
|
|
232
238
|
background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));
|
|
233
|
-
border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-
|
|
234
|
-
color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-
|
|
239
|
+
border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-primary-active));
|
|
240
|
+
color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-primary-active));
|
|
235
241
|
}
|
|
236
242
|
|
|
237
243
|
&:focus:not(:disabled) {
|
|
238
|
-
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
239
|
-
outline-offset: 2px;
|
|
240
244
|
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
241
245
|
}
|
|
242
246
|
|
|
@@ -245,7 +249,7 @@ export const buttonStyles = css `
|
|
|
245
249
|
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
246
250
|
color: var(--nuraly-color-button-disabled-text);
|
|
247
251
|
cursor: not-allowed;
|
|
248
|
-
opacity: 1;
|
|
252
|
+
opacity: 1;
|
|
249
253
|
}
|
|
250
254
|
}
|
|
251
255
|
|
|
@@ -268,8 +272,8 @@ export const buttonStyles = css `
|
|
|
268
272
|
}
|
|
269
273
|
|
|
270
274
|
&:focus:not(:disabled) {
|
|
271
|
-
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
272
|
-
outline-offset: 2px;
|
|
275
|
+
/* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */
|
|
276
|
+
/* outline-offset: 2px; */
|
|
273
277
|
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
274
278
|
}
|
|
275
279
|
|
|
@@ -286,26 +290,41 @@ export const buttonStyles = css `
|
|
|
286
290
|
:host(:not([size])) button {
|
|
287
291
|
height: var(--nuraly-size-md);
|
|
288
292
|
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
293
|
+
min-width: var(--nuraly-button-min-width, 5rem);
|
|
289
294
|
}
|
|
290
295
|
|
|
291
296
|
/* Size variants */
|
|
292
297
|
:host([size="small"]) button {
|
|
293
298
|
height: var(--nuraly-size-sm);
|
|
294
|
-
padding: var(--nuraly-
|
|
299
|
+
padding: var(--nuraly-button-padding-small, 0.375rem 0.75rem);
|
|
295
300
|
font-size: 0.75rem;
|
|
296
|
-
min-width:
|
|
301
|
+
min-width: var(--nuraly-button-min-width, 4.5rem);
|
|
302
|
+
gap: 0.375rem;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
:host([size="small"]) button nr-icon {
|
|
306
|
+
width: 0.875rem;
|
|
307
|
+
height: 0.875rem;
|
|
308
|
+
font-size: 0.875rem !important;
|
|
297
309
|
}
|
|
298
310
|
|
|
299
311
|
:host([size="medium"]) button {
|
|
300
312
|
height: var(--nuraly-size-md);
|
|
301
|
-
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
313
|
+
padding: var(--nuraly-button-padding-medium, var(--nuraly-spacing-2) var(--nuraly-spacing-4));
|
|
314
|
+
min-width: var(--nuraly-button-min-width, 5rem);
|
|
302
315
|
}
|
|
303
316
|
|
|
304
317
|
:host([size="large"]) button {
|
|
305
318
|
height: var(--nuraly-size-lg);
|
|
306
|
-
padding: var(--nuraly-spacing-05) var(--nuraly-spacing-06);
|
|
319
|
+
padding: var(--nuraly-button-padding-large, var(--nuraly-spacing-05) var(--nuraly-spacing-06));
|
|
307
320
|
font-size: 1rem;
|
|
308
|
-
min-width: 6rem;
|
|
321
|
+
min-width: var(--nuraly-button-min-width, 6rem);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
:host([size="large"]) button nr-icon {
|
|
325
|
+
width: 1.25rem;
|
|
326
|
+
height: 1.25rem;
|
|
327
|
+
font-size: 1.25rem !important;
|
|
309
328
|
}
|
|
310
329
|
|
|
311
330
|
/* Full width */
|
|
@@ -324,24 +343,44 @@ export const buttonStyles = css `
|
|
|
324
343
|
}
|
|
325
344
|
|
|
326
345
|
/* Shape variants */
|
|
346
|
+
|
|
347
|
+
/* Round - Pill-shaped with rounded ends */
|
|
327
348
|
:host([shape="round"]) button {
|
|
349
|
+
border-radius: 9999px;
|
|
350
|
+
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-5);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
:host([shape="round"][size="small"]) button {
|
|
354
|
+
padding: var(--nuraly-spacing-1-5) var(--nuraly-spacing-4);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
:host([shape="round"][size="large"]) button {
|
|
358
|
+
padding: var(--nuraly-spacing-3) var(--nuraly-spacing-6);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
/* Circle - Perfect circle for icon-only buttons */
|
|
362
|
+
:host([shape="circle"]) button {
|
|
328
363
|
border-radius: 50%;
|
|
329
364
|
min-width: auto;
|
|
330
365
|
width: var(--nuraly-size-md);
|
|
366
|
+
height: var(--nuraly-size-md);
|
|
331
367
|
aspect-ratio: 1;
|
|
332
368
|
padding: 0;
|
|
333
369
|
}
|
|
334
370
|
|
|
335
|
-
:host([shape="
|
|
371
|
+
:host([shape="circle"][size="small"]) button {
|
|
336
372
|
width: var(--nuraly-size-sm);
|
|
373
|
+
height: var(--nuraly-size-sm);
|
|
337
374
|
}
|
|
338
375
|
|
|
339
|
-
:host([shape="
|
|
376
|
+
:host([shape="circle"][size="medium"]) button {
|
|
340
377
|
width: var(--nuraly-size-md);
|
|
378
|
+
height: var(--nuraly-size-md);
|
|
341
379
|
}
|
|
342
380
|
|
|
343
|
-
:host([shape="
|
|
381
|
+
:host([shape="circle"][size="large"]) button {
|
|
344
382
|
width: var(--nuraly-size-lg);
|
|
383
|
+
height: var(--nuraly-size-lg);
|
|
345
384
|
}
|
|
346
385
|
|
|
347
386
|
/* Enhanced Ripple Effect Animation - Theme-aware */
|
|
@@ -384,9 +423,8 @@ export const buttonStyles = css `
|
|
|
384
423
|
opacity: 0.1;
|
|
385
424
|
}
|
|
386
425
|
|
|
387
|
-
:host([type="ghost"]) .ripple
|
|
388
|
-
|
|
389
|
-
background: var(--nuraly-color-button-tertiary, #0f62fe);
|
|
426
|
+
:host([type="ghost"]) .ripple {
|
|
427
|
+
background: var(--nuraly-color-button-primary, #0f62fe);
|
|
390
428
|
opacity: 0.2;
|
|
391
429
|
}
|
|
392
430
|
|
|
@@ -400,9 +438,8 @@ export const buttonStyles = css `
|
|
|
400
438
|
opacity: 0.1;
|
|
401
439
|
}
|
|
402
440
|
|
|
403
|
-
[data-theme="carbon-dark"] :host([type="ghost"]) .ripple
|
|
404
|
-
|
|
405
|
-
background: var(--nuraly-color-button-tertiary, #78a9ff);
|
|
441
|
+
[data-theme="carbon-dark"] :host([type="ghost"]) .ripple {
|
|
442
|
+
background: var(--nuraly-color-button-primary, #78a9ff);
|
|
406
443
|
opacity: 0.2;
|
|
407
444
|
}
|
|
408
445
|
|
package/button.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../../src/components/button/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAue9B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Button component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-button component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const buttonStyles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n \n /* Force CSS custom property inheritance to ensure theme switching works properly */\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n border-color: var(--nuraly-color-border);\n \n /* Ensure clean state transitions when theme changes */\n * {\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n }\n }\n\n /* Force re-evaluation of theme-dependent properties on theme change */\n :host([data-theme]) {\n color: inherit;\n background-color: inherit;\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n font-family: var(--nuraly-font-family);\n font-size: 0.875rem;\n font-weight: var(--nuraly-font-weight-regular);\n line-height: 1.125rem;\n letter-spacing: 0.16px;\n min-width: 5rem;\n height: 3rem;\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n border: 1px solid transparent;\n border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));\n background-color: var(--nuraly-color-background);\n color: var(--nuraly-color-text);\n text-decoration: none;\n cursor: pointer;\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n /* Reset any inherited styles that might interfere with theme switching */\n box-shadow: none;\n text-shadow: none;\n \n &:focus {\n outline: var(--nuraly-focus-outline);\n outline-offset: var(--nuraly-focus-outline-offset);\n }\n\n &:disabled {\n cursor: not-allowed;\n /* Remove generic opacity - use specific disabled colors instead */\n }\n\n /* Icon styling */\n nr-icon {\n flex-shrink: 0;\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Better text alignment */\n vertical-align: middle;\n line-height: 1;\n /* Ensure icon inherits text color */\n color: inherit;\n /* Override any size attribute with CSS variable */\n font-size: var(--nuraly-button-icon-size, 1rem) !important;\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n /* Inherit cursor from button */\n cursor: inherit;\n /* Prevent icon from being focusable */\n pointer-events: none;\n }\n\n /* Icon focus state */\n &:focus:not(:disabled) nr-icon {\n opacity: 1;\n filter: brightness(1.1);\n }\n\n /* Icon active state */\n &:active:not(:disabled) nr-icon {\n opacity: 0.9;\n transform: scale(0.95);\n }\n\n /* Icon hover state */\n &:hover:not(:disabled) nr-icon {\n opacity: 1;\n }\n\n /* Icon spacing - use gap for cleaner spacing */\n gap: 0.5rem;\n \n /* Ensure proper alignment of content */\n #container, [part=\"container\"] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: inherit;\n }\n }\n\n /* Primary Button - Carbon Design System compliant */\n :host([type=\"primary\"]) button {\n background-color: var(--nuraly-color-button-primary);\n border-color: var(--nuraly-color-button-primary);\n color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-primary-hover);\n border-color: var(--nuraly-color-button-primary-hover);\n color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-primary-active);\n border-color: var(--nuraly-color-button-primary-active);\n color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n outline-offset: 2px;\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Secondary Button - Carbon Design System compliant */\n :host([type=\"secondary\"]) button {\n background-color: var(--nuraly-color-button-secondary);\n border-color: var(--nuraly-color-button-secondary);\n color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-secondary-hover);\n border-color: var(--nuraly-color-button-secondary-hover);\n color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-secondary-active);\n border-color: var(--nuraly-color-button-secondary-active);\n color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n outline-offset: 2px;\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Default Button - Clean white/light style with defined border */\n :host([type=\"default\"]) button {\n background-color: var(--nuraly-color-background, #ffffff);\n border-color: var(--nuraly-color-border, #d0d0d0);\n color: var(--nuraly-color-text, #161616);\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-background-hover, #f4f4f4);\n border-color: var(--nuraly-color-border-hover, #a8a8a8);\n color: var(--nuraly-color-text, #161616);\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-background-active, #e0e0e0);\n border-color: var(--nuraly-color-border-active, #8d8d8d);\n color: var(--nuraly-color-text, #161616);\n }\n\n &:focus:not(:disabled) {\n outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n outline-offset: 2px;\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled, #f4f4f4);\n border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);\n color: var(--nuraly-color-button-disabled-text, #c6c6c6);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Tertiary/Ghost Button - Carbon Design System compliant */\n :host([type=\"tertiary\"]), :host([type=\"ghost\"]) button {\n background-color: var(--nuraly-color-button-outline, transparent);\n border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));\n color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-tertiary, var(--nuraly-color-button-primary)));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));\n border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary)));\n color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary-hover)));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));\n border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));\n color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));\n }\n\n &:focus:not(:disabled) {\n outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n outline-offset: 2px;\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: transparent;\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Danger Button - Carbon Design System compliant */\n :host([type=\"danger\"]) button {\n background-color: var(--nuraly-color-button-danger);\n border-color: var(--nuraly-color-button-danger);\n color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-danger-hover);\n border-color: var(--nuraly-color-button-danger-hover);\n color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-danger-active);\n border-color: var(--nuraly-color-button-danger-active);\n color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n outline-offset: 2px;\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Default size when no size attribute is provided (medium) */\n :host(:not([size])) button {\n height: var(--nuraly-size-md);\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n }\n\n /* Size variants */\n :host([size=\"small\"]) button {\n height: var(--nuraly-size-sm);\n padding: var(--nuraly-spacing-01) var(--nuraly-spacing-03);\n font-size: 0.75rem;\n min-width: 4rem;\n }\n\n :host([size=\"medium\"]) button {\n height: var(--nuraly-size-md);\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n }\n\n :host([size=\"large\"]) button {\n height: var(--nuraly-size-lg);\n padding: var(--nuraly-spacing-05) var(--nuraly-spacing-06);\n font-size: 1rem;\n min-width: 6rem;\n }\n\n /* Full width */\n :host([full-width]) {\n width: 100%;\n }\n\n :host([full-width]) button {\n width: 100%;\n }\n\n /* Loading state */\n :host([loading]) button {\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n /* Shape variants */\n :host([shape=\"round\"]) button {\n border-radius: 50%;\n min-width: auto;\n width: var(--nuraly-size-md);\n aspect-ratio: 1;\n padding: 0;\n }\n\n :host([shape=\"round\"][size=\"small\"]) button {\n width: var(--nuraly-size-sm);\n }\n\n :host([shape=\"round\"][size=\"medium\"]) button {\n width: var(--nuraly-size-md);\n }\n\n :host([shape=\"round\"][size=\"large\"]) button {\n width: var(--nuraly-size-lg);\n }\n\n /* Enhanced Ripple Effect Animation - Theme-aware */\n .ripple {\n position: absolute;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.6);\n transform: scale(0);\n animation: ripple-animation 0.6s linear;\n pointer-events: none;\n z-index: 1;\n }\n\n @keyframes ripple-animation {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 70% {\n transform: scale(3);\n opacity: 0.5;\n }\n 100% {\n transform: scale(4);\n opacity: 0;\n }\n }\n\n /* Ripple effect for different button types - Carbon Design System compliant */\n :host([type=\"primary\"]) .ripple {\n background: rgba(255, 255, 255, 0.4);\n }\n\n :host([type=\"secondary\"]) .ripple {\n background: rgba(255, 255, 255, 0.3);\n }\n\n :host([type=\"default\"]) .ripple {\n background: var(--nuraly-color-text, #161616);\n opacity: 0.1;\n }\n\n :host([type=\"ghost\"]) .ripple,\n :host([type=\"tertiary\"]) .ripple {\n background: var(--nuraly-color-button-tertiary, #0f62fe);\n opacity: 0.2;\n }\n\n :host([type=\"danger\"]) .ripple {\n background: rgba(255, 255, 255, 0.4);\n }\n\n /* Theme-specific ripple adjustments for dark theme */\n [data-theme=\"carbon-dark\"] :host([type=\"default\"]) .ripple {\n background: var(--nuraly-color-text, #f4f4f4);\n opacity: 0.1;\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"ghost\"]) .ripple,\n [data-theme=\"carbon-dark\"] :host([type=\"tertiary\"]) .ripple {\n background: var(--nuraly-color-button-tertiary, #78a9ff);\n opacity: 0.2;\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"primary\"]) .ripple {\n background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"secondary\"]) .ripple {\n background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"danger\"]) .ripple {\n background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */\n }\n\n /* ========================================\n * CARBON THEME SPECIFIC STYLING\n * Enhanced padding and icon centering for Carbon Design System\n * ======================================== */\n \n /* Carbon theme button styling - apply to all carbon themes */\n :host([data-theme*=\"carbon\"]) button,\n [data-theme*=\"carbon\"] :host button {\n /* Better baseline alignment for icon and text */\n align-items: center;\n \n /* Enhanced icon alignment and spacing for Carbon */\n nr-icon {\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n /* Perfect vertical alignment with text baseline */\n vertical-align: middle;\n line-height: 1;\n }\n \n /* Icon spacing for Carbon theme - improved approach */\n gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));\n }\n \n /* Specific Carbon theme selectors for better targeting */\n [data-theme=\"carbon-light\"] nr-button button,\n [data-theme=\"carbon-dark\"] nr-button button,\n [data-theme=\"carbon\"] nr-button button {\n /* Better baseline alignment for icon and text */\n align-items: center;\n \n /* Enhanced icon alignment and spacing for Carbon */\n nr-icon {\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n /* Perfect vertical alignment with text baseline */\n vertical-align: middle;\n line-height: 1;\n /* Slight adjustment for perfect optical centering */\n margin-top: -1px;\n }\n \n /* Target the SVG inside nr-icon for better alignment */\n nr-icon svg {\n display: block;\n margin: 0 auto;\n }\n \n /* Icon spacing for Carbon theme */\n gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));\n \n /* Ensure text is also properly centered */\n span#container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n line-height: 1;\n }\n \n /* Ensure slot content aligns properly */\n slot#slot {\n display: inline-block;\n line-height: inherit;\n }\n }\n`;\n\nexport const styles = buttonStyles;\n"]}
|
|
1
|
+
{"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../../../src/components/button/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4gB9B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Button component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-button component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const buttonStyles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n \n /* Force CSS custom property inheritance to ensure theme switching works properly */\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n border-color: var(--nuraly-color-border);\n \n /* Ensure clean state transitions when theme changes */\n * {\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n }\n }\n\n /* Force re-evaluation of theme-dependent properties on theme change */\n :host([data-theme]) {\n color: inherit;\n background-color: inherit;\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n font-family: var(--nuraly-font-family);\n font-size: 0.875rem;\n font-weight: var(--nuraly-font-weight-regular);\n line-height: 1.125rem;\n letter-spacing: 0.16px;\n height: 3rem;\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n border: 1px solid transparent;\n border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));\n background-color: var(--nuraly-color-background);\n color: var(--nuraly-color-text);\n text-decoration: none;\n cursor: pointer;\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n /* Reset any inherited styles that might interfere with theme switching */\n box-shadow: none;\n text-shadow: none;\n \n &:focus {\n /* outline: var(--nuraly-focus-outline); */\n /* outline-offset: var(--nuraly-focus-outline-offset); */\n }\n\n &:disabled {\n cursor: not-allowed;\n /* Remove generic opacity - use specific disabled colors instead */\n }\n\n /* Icon styling */\n nr-icon {\n flex-shrink: 0;\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Better text alignment */\n vertical-align: middle;\n line-height: 1;\n /* Ensure icon inherits text color */\n color: inherit;\n /* Override any size attribute with CSS variable */\n font-size: var(--nuraly-button-icon-size, 1rem) !important;\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n /* Inherit cursor from button */\n cursor: inherit;\n /* Prevent icon from being focusable */\n pointer-events: none;\n }\n\n /* Icon focus state */\n &:focus:not(:disabled) nr-icon {\n opacity: 1;\n filter: brightness(1.1);\n }\n\n /* Icon active state */\n &:active:not(:disabled) nr-icon {\n opacity: 0.9;\n transform: scale(0.95);\n }\n\n /* Icon hover state */\n &:hover:not(:disabled) nr-icon {\n opacity: 1;\n }\n\n /* Icon spacing - use gap for cleaner spacing */\n gap: 0.5rem;\n \n /* Ensure proper alignment of content */\n #container, [part=\"container\"] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: inherit;\n }\n }\n\n /* Primary Button - Carbon Design System compliant */\n :host([type=\"primary\"]) button {\n background-color: var(--nuraly-color-button-primary);\n border-color: var(--nuraly-color-button-primary);\n color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));\n\n /* Ensure icons inherit the white text color for primary buttons */\n nr-icon {\n fill: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;\n color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;\n --nuraly-color-icon: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color, #ffffff)) !important;\n }\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-primary-hover);\n border-color: var(--nuraly-color-button-primary-hover);\n color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-primary-active);\n border-color: var(--nuraly-color-button-primary-active);\n color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */\n /* outline-offset: 2px; */\n /* box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring)); */\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Secondary Button - Carbon Design System compliant */\n :host([type=\"secondary\"]) button {\n background-color: var(--nuraly-color-button-secondary);\n border-color: var(--nuraly-color-button-secondary);\n color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-secondary-hover);\n border-color: var(--nuraly-color-button-secondary-hover);\n color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-secondary-active);\n border-color: var(--nuraly-color-button-secondary-active);\n color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */\n /* outline-offset: 2px; */\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Default Button - Clean white/light style with defined border */\n :host([type=\"default\"]) button {\n background-color: var(--nuraly-color-background, #ffffff);\n border-color: var(--nuraly-color-border, #d0d0d0);\n color: var(--nuraly-color-text, #161616);\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-background-hover, #f4f4f4);\n border-color: var(--nuraly-color-border-hover, #a8a8a8);\n color: var(--nuraly-color-text, #161616);\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-background-active, #e0e0e0);\n border-color: var(--nuraly-color-border-active, #8d8d8d);\n color: var(--nuraly-color-text, #161616);\n }\n\n &:focus:not(:disabled) {\n /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */\n /* outline-offset: 2px; */\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled, #f4f4f4);\n border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);\n color: var(--nuraly-color-button-disabled-text, #c6c6c6);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Ghost Button - Transparent with border */\n :host([type=\"ghost\"]) button {\n background-color: var(--nuraly-color-button-outline, transparent);\n border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));\n color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-primary));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));\n border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-primary));\n color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-primary-hover));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));\n border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-primary-active));\n color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-primary-active));\n }\n\n &:focus:not(:disabled) {\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: transparent;\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1;\n }\n }\n\n /* Danger Button - Carbon Design System compliant */\n :host([type=\"danger\"]) button {\n background-color: var(--nuraly-color-button-danger);\n border-color: var(--nuraly-color-button-danger);\n color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));\n\n &:hover:not(:disabled) {\n background-color: var(--nuraly-color-button-danger-hover);\n border-color: var(--nuraly-color-button-danger-hover);\n color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));\n }\n\n &:active:not(:disabled) {\n background-color: var(--nuraly-color-button-danger-active);\n border-color: var(--nuraly-color-button-danger-active);\n color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));\n }\n\n &:focus:not(:disabled) {\n /* outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color)); */\n /* outline-offset: 2px; */\n box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n }\n\n &:disabled {\n background-color: var(--nuraly-color-button-disabled);\n border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n color: var(--nuraly-color-button-disabled-text);\n cursor: not-allowed;\n opacity: 1; /* Reset opacity for proper disabled state */\n }\n }\n\n /* Default size when no size attribute is provided (medium) */\n :host(:not([size])) button {\n height: var(--nuraly-size-md);\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n min-width: var(--nuraly-button-min-width, 5rem);\n }\n\n /* Size variants */\n :host([size=\"small\"]) button {\n height: var(--nuraly-size-sm);\n padding: var(--nuraly-button-padding-small, 0.375rem 0.75rem);\n font-size: 0.75rem;\n min-width: var(--nuraly-button-min-width, 4.5rem);\n gap: 0.375rem;\n }\n\n :host([size=\"small\"]) button nr-icon {\n width: 0.875rem;\n height: 0.875rem;\n font-size: 0.875rem !important;\n }\n\n :host([size=\"medium\"]) button {\n height: var(--nuraly-size-md);\n padding: var(--nuraly-button-padding-medium, var(--nuraly-spacing-2) var(--nuraly-spacing-4));\n min-width: var(--nuraly-button-min-width, 5rem);\n }\n\n :host([size=\"large\"]) button {\n height: var(--nuraly-size-lg);\n padding: var(--nuraly-button-padding-large, var(--nuraly-spacing-05) var(--nuraly-spacing-06));\n font-size: 1rem;\n min-width: var(--nuraly-button-min-width, 6rem);\n }\n\n :host([size=\"large\"]) button nr-icon {\n width: 1.25rem;\n height: 1.25rem;\n font-size: 1.25rem !important;\n }\n\n /* Full width */\n :host([full-width]) {\n width: 100%;\n }\n\n :host([full-width]) button {\n width: 100%;\n }\n\n /* Loading state */\n :host([loading]) button {\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n /* Shape variants */\n\n /* Round - Pill-shaped with rounded ends */\n :host([shape=\"round\"]) button {\n border-radius: 9999px;\n padding: var(--nuraly-spacing-2) var(--nuraly-spacing-5);\n }\n\n :host([shape=\"round\"][size=\"small\"]) button {\n padding: var(--nuraly-spacing-1-5) var(--nuraly-spacing-4);\n }\n\n :host([shape=\"round\"][size=\"large\"]) button {\n padding: var(--nuraly-spacing-3) var(--nuraly-spacing-6);\n }\n\n /* Circle - Perfect circle for icon-only buttons */\n :host([shape=\"circle\"]) button {\n border-radius: 50%;\n min-width: auto;\n width: var(--nuraly-size-md);\n height: var(--nuraly-size-md);\n aspect-ratio: 1;\n padding: 0;\n }\n\n :host([shape=\"circle\"][size=\"small\"]) button {\n width: var(--nuraly-size-sm);\n height: var(--nuraly-size-sm);\n }\n\n :host([shape=\"circle\"][size=\"medium\"]) button {\n width: var(--nuraly-size-md);\n height: var(--nuraly-size-md);\n }\n\n :host([shape=\"circle\"][size=\"large\"]) button {\n width: var(--nuraly-size-lg);\n height: var(--nuraly-size-lg);\n }\n\n /* Enhanced Ripple Effect Animation - Theme-aware */\n .ripple {\n position: absolute;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.6);\n transform: scale(0);\n animation: ripple-animation 0.6s linear;\n pointer-events: none;\n z-index: 1;\n }\n\n @keyframes ripple-animation {\n 0% {\n transform: scale(0);\n opacity: 1;\n }\n 70% {\n transform: scale(3);\n opacity: 0.5;\n }\n 100% {\n transform: scale(4);\n opacity: 0;\n }\n }\n\n /* Ripple effect for different button types - Carbon Design System compliant */\n :host([type=\"primary\"]) .ripple {\n background: rgba(255, 255, 255, 0.4);\n }\n\n :host([type=\"secondary\"]) .ripple {\n background: rgba(255, 255, 255, 0.3);\n }\n\n :host([type=\"default\"]) .ripple {\n background: var(--nuraly-color-text, #161616);\n opacity: 0.1;\n }\n\n :host([type=\"ghost\"]) .ripple {\n background: var(--nuraly-color-button-primary, #0f62fe);\n opacity: 0.2;\n }\n\n :host([type=\"danger\"]) .ripple {\n background: rgba(255, 255, 255, 0.4);\n }\n\n /* Theme-specific ripple adjustments for dark theme */\n [data-theme=\"carbon-dark\"] :host([type=\"default\"]) .ripple {\n background: var(--nuraly-color-text, #f4f4f4);\n opacity: 0.1;\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"ghost\"]) .ripple {\n background: var(--nuraly-color-button-primary, #78a9ff);\n opacity: 0.2;\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"primary\"]) .ripple {\n background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"secondary\"]) .ripple {\n background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */\n }\n\n [data-theme=\"carbon-dark\"] :host([type=\"danger\"]) .ripple {\n background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */\n }\n\n /* ========================================\n * CARBON THEME SPECIFIC STYLING\n * Enhanced padding and icon centering for Carbon Design System\n * ======================================== */\n \n /* Carbon theme button styling - apply to all carbon themes */\n :host([data-theme*=\"carbon\"]) button,\n [data-theme*=\"carbon\"] :host button {\n /* Better baseline alignment for icon and text */\n align-items: center;\n \n /* Enhanced icon alignment and spacing for Carbon */\n nr-icon {\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n /* Perfect vertical alignment with text baseline */\n vertical-align: middle;\n line-height: 1;\n }\n \n /* Icon spacing for Carbon theme - improved approach */\n gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));\n }\n \n /* Specific Carbon theme selectors for better targeting */\n [data-theme=\"carbon-light\"] nr-button button,\n [data-theme=\"carbon-dark\"] nr-button button,\n [data-theme=\"carbon\"] nr-button button {\n /* Better baseline alignment for icon and text */\n align-items: center;\n \n /* Enhanced icon alignment and spacing for Carbon */\n nr-icon {\n width: var(--nuraly-button-icon-size, 1rem);\n height: var(--nuraly-button-icon-size, 1rem);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n /* Perfect vertical alignment with text baseline */\n vertical-align: middle;\n line-height: 1;\n /* Slight adjustment for perfect optical centering */\n margin-top: -1px;\n }\n \n /* Target the SVG inside nr-icon for better alignment */\n nr-icon svg {\n display: block;\n margin: 0 auto;\n }\n \n /* Icon spacing for Carbon theme */\n gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));\n \n /* Ensure text is also properly centered */\n span#container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n line-height: 1;\n }\n \n /* Ensure slot content aligns properly */\n slot#slot {\n display: inline-block;\n line-height: inherit;\n }\n }\n`;\n\nexport const styles = buttonStyles;\n"]}
|
package/button.types.d.ts
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
export declare const enum ButtonType {
|
|
2
2
|
Primary = "primary",
|
|
3
3
|
Secondary = "secondary",
|
|
4
|
-
Tertiary = "tertiary",
|
|
5
4
|
Danger = "danger",
|
|
6
5
|
Ghost = "ghost",
|
|
7
|
-
Default = "default"
|
|
8
|
-
Text = "text",
|
|
9
|
-
Link = "link"
|
|
6
|
+
Default = "default"
|
|
10
7
|
}
|
|
11
8
|
export declare const enum ButtonSize {
|
|
12
9
|
Small = "small",
|
|
13
10
|
Medium = "medium",
|
|
14
|
-
Large = "large"
|
|
15
|
-
Default = "medium"
|
|
11
|
+
Large = "large"
|
|
16
12
|
}
|
|
17
13
|
export declare const enum ButtonShape {
|
|
18
14
|
Default = "default",
|
package/button.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"button.types.js","sourceRoot":"","sources":["../../../../src/components/button/button.types.ts"],"names":[],"mappings":"AA+DA,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}\n\nexport const enum ButtonSize {\n Small = 'small', // 32px\n Medium = 'medium', // 40px (default)\n Large = 'large', // 48px\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}\n\n/**\n * Enhanced icon configuration for buttons\n */\nexport interface ButtonIconConfig {\n /** Icon name (required) */\n name: string;\n /** Icon type - solid or regular */\n type?: 'solid' | 'regular';\n /** Icon size override */\n size?: string;\n /** Icon color override */\n color?: string;\n /** Alternative text for accessibility */\n alt?: string;\n /** Custom attributes to pass to icon */\n attributes?: Record<string, string>;\n}\n\n/**\n * Union type for icon input - supports both simple string and enhanced config\n */\nexport type ButtonIcon = string | ButtonIconConfig;\n\n/**\n * Array of icons (supports 1-2 icons)\n */\nexport type ButtonIcons = ButtonIcon[];\n\n/**\n * Alternative icon configuration using positioned properties\n */\nexport interface ButtonIconsConfig {\n /** Left icon configuration */\n left?: ButtonIcon;\n /** Right icon configuration */\n right?: ButtonIcon;\n}\n\nexport const EMPTY_STRING = '';\n"]}
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
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
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
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"]}
|