@nuralyui/button 0.0.17 → 0.0.18
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 +548 -6
- package/package.json +1 -1
package/bundle.js
CHANGED
|
@@ -1,27 +1,569 @@
|
|
|
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
|
+
min-width: 5rem;
|
|
34
|
+
height: 3rem;
|
|
35
|
+
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
36
|
+
border: 1px solid transparent;
|
|
37
|
+
border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));
|
|
38
|
+
background-color: var(--nuraly-color-background);
|
|
39
|
+
color: var(--nuraly-color-text);
|
|
40
|
+
text-decoration: none;
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
43
|
+
white-space: nowrap;
|
|
44
|
+
overflow: hidden;
|
|
45
|
+
text-overflow: ellipsis;
|
|
46
|
+
|
|
47
|
+
/* Reset any inherited styles that might interfere with theme switching */
|
|
48
|
+
box-shadow: none;
|
|
49
|
+
text-shadow: none;
|
|
50
|
+
|
|
51
|
+
&:focus {
|
|
52
|
+
outline: var(--nuraly-focus-outline);
|
|
53
|
+
outline-offset: var(--nuraly-focus-outline-offset);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&:disabled {
|
|
57
|
+
cursor: not-allowed;
|
|
58
|
+
/* Remove generic opacity - use specific disabled colors instead */
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Icon styling */
|
|
62
|
+
nr-icon {
|
|
63
|
+
flex-shrink: 0;
|
|
64
|
+
width: var(--nuraly-button-icon-size, 1rem);
|
|
65
|
+
height: var(--nuraly-button-icon-size, 1rem);
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
/* Better text alignment */
|
|
70
|
+
vertical-align: middle;
|
|
71
|
+
line-height: 1;
|
|
72
|
+
/* Ensure icon inherits text color */
|
|
73
|
+
color: inherit;
|
|
74
|
+
/* Override any size attribute with CSS variable */
|
|
75
|
+
font-size: var(--nuraly-button-icon-size, 1rem) !important;
|
|
76
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
77
|
+
/* Inherit cursor from button */
|
|
78
|
+
cursor: inherit;
|
|
79
|
+
/* Prevent icon from being focusable */
|
|
80
|
+
pointer-events: none;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Icon focus state */
|
|
84
|
+
&:focus:not(:disabled) nr-icon {
|
|
85
|
+
opacity: 1;
|
|
86
|
+
filter: brightness(1.1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Icon active state */
|
|
90
|
+
&:active:not(:disabled) nr-icon {
|
|
91
|
+
opacity: 0.9;
|
|
92
|
+
transform: scale(0.95);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Icon hover state */
|
|
96
|
+
&:hover:not(:disabled) nr-icon {
|
|
97
|
+
opacity: 1;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Icon spacing - use gap for cleaner spacing */
|
|
101
|
+
gap: 0.5rem;
|
|
102
|
+
|
|
103
|
+
/* Ensure proper alignment of content */
|
|
104
|
+
#container, [part="container"] {
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
justify-content: center;
|
|
108
|
+
gap: inherit;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Primary Button - Carbon Design System compliant */
|
|
113
|
+
:host([type="primary"]) button {
|
|
114
|
+
background-color: var(--nuraly-color-button-primary);
|
|
115
|
+
border-color: var(--nuraly-color-button-primary);
|
|
116
|
+
color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));
|
|
117
|
+
|
|
118
|
+
&:hover:not(:disabled) {
|
|
119
|
+
background-color: var(--nuraly-color-button-primary-hover);
|
|
120
|
+
border-color: var(--nuraly-color-button-primary-hover);
|
|
121
|
+
color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&:active:not(:disabled) {
|
|
125
|
+
background-color: var(--nuraly-color-button-primary-active);
|
|
126
|
+
border-color: var(--nuraly-color-button-primary-active);
|
|
127
|
+
color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&:focus:not(:disabled) {
|
|
131
|
+
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
132
|
+
outline-offset: 2px;
|
|
133
|
+
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&:disabled {
|
|
137
|
+
background-color: var(--nuraly-color-button-disabled);
|
|
138
|
+
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
139
|
+
color: var(--nuraly-color-button-disabled-text);
|
|
140
|
+
cursor: not-allowed;
|
|
141
|
+
opacity: 1; /* Reset opacity for proper disabled state */
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* Secondary Button - Carbon Design System compliant */
|
|
146
|
+
:host([type="secondary"]) button {
|
|
147
|
+
background-color: var(--nuraly-color-button-secondary);
|
|
148
|
+
border-color: var(--nuraly-color-button-secondary);
|
|
149
|
+
color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));
|
|
150
|
+
|
|
151
|
+
&:hover:not(:disabled) {
|
|
152
|
+
background-color: var(--nuraly-color-button-secondary-hover);
|
|
153
|
+
border-color: var(--nuraly-color-button-secondary-hover);
|
|
154
|
+
color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
&:active:not(:disabled) {
|
|
158
|
+
background-color: var(--nuraly-color-button-secondary-active);
|
|
159
|
+
border-color: var(--nuraly-color-button-secondary-active);
|
|
160
|
+
color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
&:focus:not(:disabled) {
|
|
164
|
+
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
165
|
+
outline-offset: 2px;
|
|
166
|
+
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&:disabled {
|
|
170
|
+
background-color: var(--nuraly-color-button-disabled);
|
|
171
|
+
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
172
|
+
color: var(--nuraly-color-button-disabled-text);
|
|
173
|
+
cursor: not-allowed;
|
|
174
|
+
opacity: 1; /* Reset opacity for proper disabled state */
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* Default Button - Clean white/light style with defined border */
|
|
179
|
+
:host([type="default"]) button {
|
|
180
|
+
background-color: var(--nuraly-color-background, #ffffff);
|
|
181
|
+
border-color: var(--nuraly-color-border, #d0d0d0);
|
|
182
|
+
color: var(--nuraly-color-text, #161616);
|
|
183
|
+
|
|
184
|
+
&:hover:not(:disabled) {
|
|
185
|
+
background-color: var(--nuraly-color-background-hover, #f4f4f4);
|
|
186
|
+
border-color: var(--nuraly-color-border-hover, #a8a8a8);
|
|
187
|
+
color: var(--nuraly-color-text, #161616);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
&:active:not(:disabled) {
|
|
191
|
+
background-color: var(--nuraly-color-background-active, #e0e0e0);
|
|
192
|
+
border-color: var(--nuraly-color-border-active, #8d8d8d);
|
|
193
|
+
color: var(--nuraly-color-text, #161616);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
&:focus:not(:disabled) {
|
|
197
|
+
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
198
|
+
outline-offset: 2px;
|
|
199
|
+
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
&:disabled {
|
|
203
|
+
background-color: var(--nuraly-color-button-disabled, #f4f4f4);
|
|
204
|
+
border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);
|
|
205
|
+
color: var(--nuraly-color-button-disabled-text, #c6c6c6);
|
|
206
|
+
cursor: not-allowed;
|
|
207
|
+
opacity: 1; /* Reset opacity for proper disabled state */
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* Tertiary/Ghost Button - Carbon Design System compliant */
|
|
212
|
+
:host([type="tertiary"]), :host([type="ghost"]) button {
|
|
213
|
+
background-color: var(--nuraly-color-button-outline, transparent);
|
|
214
|
+
border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));
|
|
215
|
+
color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-tertiary, var(--nuraly-color-button-primary)));
|
|
216
|
+
|
|
217
|
+
&:hover:not(:disabled) {
|
|
218
|
+
background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));
|
|
219
|
+
border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary)));
|
|
220
|
+
color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary-hover)));
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
&:active:not(:disabled) {
|
|
224
|
+
background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));
|
|
225
|
+
border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
|
|
226
|
+
color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
&:focus:not(:disabled) {
|
|
230
|
+
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
231
|
+
outline-offset: 2px;
|
|
232
|
+
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
&:disabled {
|
|
236
|
+
background-color: transparent;
|
|
237
|
+
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
238
|
+
color: var(--nuraly-color-button-disabled-text);
|
|
239
|
+
cursor: not-allowed;
|
|
240
|
+
opacity: 1; /* Reset opacity for proper disabled state */
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* Danger Button - Carbon Design System compliant */
|
|
245
|
+
:host([type="danger"]) button {
|
|
246
|
+
background-color: var(--nuraly-color-button-danger);
|
|
247
|
+
border-color: var(--nuraly-color-button-danger);
|
|
248
|
+
color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));
|
|
249
|
+
|
|
250
|
+
&:hover:not(:disabled) {
|
|
251
|
+
background-color: var(--nuraly-color-button-danger-hover);
|
|
252
|
+
border-color: var(--nuraly-color-button-danger-hover);
|
|
253
|
+
color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
&:active:not(:disabled) {
|
|
257
|
+
background-color: var(--nuraly-color-button-danger-active);
|
|
258
|
+
border-color: var(--nuraly-color-button-danger-active);
|
|
259
|
+
color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
&:focus:not(:disabled) {
|
|
263
|
+
outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
|
|
264
|
+
outline-offset: 2px;
|
|
265
|
+
box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
&:disabled {
|
|
269
|
+
background-color: var(--nuraly-color-button-disabled);
|
|
270
|
+
border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
|
|
271
|
+
color: var(--nuraly-color-button-disabled-text);
|
|
272
|
+
cursor: not-allowed;
|
|
273
|
+
opacity: 1; /* Reset opacity for proper disabled state */
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/* Default size when no size attribute is provided (medium) */
|
|
278
|
+
:host(:not([size])) button {
|
|
279
|
+
height: var(--nuraly-size-md);
|
|
280
|
+
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
/* Size variants */
|
|
284
|
+
:host([size="small"]) button {
|
|
285
|
+
height: var(--nuraly-size-sm);
|
|
286
|
+
padding: var(--nuraly-spacing-01) var(--nuraly-spacing-03);
|
|
287
|
+
font-size: 0.75rem;
|
|
288
|
+
min-width: 4rem;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
:host([size="medium"]) button {
|
|
292
|
+
height: var(--nuraly-size-md);
|
|
293
|
+
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
:host([size="large"]) button {
|
|
297
|
+
height: var(--nuraly-size-lg);
|
|
298
|
+
padding: var(--nuraly-spacing-05) var(--nuraly-spacing-06);
|
|
299
|
+
font-size: 1rem;
|
|
300
|
+
min-width: 6rem;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/* Full width */
|
|
304
|
+
:host([full-width]) {
|
|
305
|
+
width: 100%;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
:host([full-width]) button {
|
|
309
|
+
width: 100%;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/* Loading state */
|
|
313
|
+
:host([loading]) button {
|
|
314
|
+
cursor: not-allowed;
|
|
315
|
+
opacity: 0.7;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
/* Shape variants */
|
|
319
|
+
:host([shape="round"]) button {
|
|
320
|
+
border-radius: 50%;
|
|
321
|
+
min-width: auto;
|
|
322
|
+
width: var(--nuraly-size-md);
|
|
323
|
+
aspect-ratio: 1;
|
|
324
|
+
padding: 0;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
:host([shape="round"][size="small"]) button {
|
|
328
|
+
width: var(--nuraly-size-sm);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
:host([shape="round"][size="medium"]) button {
|
|
332
|
+
width: var(--nuraly-size-md);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
:host([shape="round"][size="large"]) button {
|
|
336
|
+
width: var(--nuraly-size-lg);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/* Enhanced Ripple Effect Animation - Theme-aware */
|
|
340
|
+
.ripple {
|
|
341
|
+
position: absolute;
|
|
342
|
+
border-radius: 50%;
|
|
343
|
+
background: rgba(255, 255, 255, 0.6);
|
|
344
|
+
transform: scale(0);
|
|
345
|
+
animation: ripple-animation 0.6s linear;
|
|
346
|
+
pointer-events: none;
|
|
347
|
+
z-index: 1;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
@keyframes ripple-animation {
|
|
351
|
+
0% {
|
|
352
|
+
transform: scale(0);
|
|
353
|
+
opacity: 1;
|
|
354
|
+
}
|
|
355
|
+
70% {
|
|
356
|
+
transform: scale(3);
|
|
357
|
+
opacity: 0.5;
|
|
358
|
+
}
|
|
359
|
+
100% {
|
|
360
|
+
transform: scale(4);
|
|
361
|
+
opacity: 0;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/* Ripple effect for different button types - Carbon Design System compliant */
|
|
366
|
+
:host([type="primary"]) .ripple {
|
|
367
|
+
background: rgba(255, 255, 255, 0.4);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
:host([type="secondary"]) .ripple {
|
|
371
|
+
background: rgba(255, 255, 255, 0.3);
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
:host([type="default"]) .ripple {
|
|
375
|
+
background: var(--nuraly-color-text, #161616);
|
|
376
|
+
opacity: 0.1;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
:host([type="ghost"]) .ripple,
|
|
380
|
+
:host([type="tertiary"]) .ripple {
|
|
381
|
+
background: var(--nuraly-color-button-tertiary, #0f62fe);
|
|
382
|
+
opacity: 0.2;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
:host([type="danger"]) .ripple {
|
|
386
|
+
background: rgba(255, 255, 255, 0.4);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
/* Theme-specific ripple adjustments for dark theme */
|
|
390
|
+
[data-theme="carbon-dark"] :host([type="default"]) .ripple {
|
|
391
|
+
background: var(--nuraly-color-text, #f4f4f4);
|
|
392
|
+
opacity: 0.1;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
[data-theme="carbon-dark"] :host([type="ghost"]) .ripple,
|
|
396
|
+
[data-theme="carbon-dark"] :host([type="tertiary"]) .ripple {
|
|
397
|
+
background: var(--nuraly-color-button-tertiary, #78a9ff);
|
|
398
|
+
opacity: 0.2;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
[data-theme="carbon-dark"] :host([type="primary"]) .ripple {
|
|
402
|
+
background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
[data-theme="carbon-dark"] :host([type="secondary"]) .ripple {
|
|
406
|
+
background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
[data-theme="carbon-dark"] :host([type="danger"]) .ripple {
|
|
410
|
+
background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/* ========================================
|
|
414
|
+
* CARBON THEME SPECIFIC STYLING
|
|
415
|
+
* Enhanced padding and icon centering for Carbon Design System
|
|
416
|
+
* ======================================== */
|
|
417
|
+
|
|
418
|
+
/* Carbon theme button styling - apply to all carbon themes */
|
|
419
|
+
:host([data-theme*="carbon"]) button,
|
|
420
|
+
[data-theme*="carbon"] :host button {
|
|
421
|
+
/* Better baseline alignment for icon and text */
|
|
422
|
+
align-items: center;
|
|
423
|
+
|
|
424
|
+
/* Enhanced icon alignment and spacing for Carbon */
|
|
425
|
+
nr-icon {
|
|
426
|
+
width: var(--nuraly-button-icon-size, 1rem);
|
|
427
|
+
height: var(--nuraly-button-icon-size, 1rem);
|
|
428
|
+
display: inline-flex;
|
|
429
|
+
align-items: center;
|
|
430
|
+
justify-content: center;
|
|
431
|
+
flex-shrink: 0;
|
|
432
|
+
/* Perfect vertical alignment with text baseline */
|
|
433
|
+
vertical-align: middle;
|
|
434
|
+
line-height: 1;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
/* Icon spacing for Carbon theme - improved approach */
|
|
438
|
+
gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
/* Specific Carbon theme selectors for better targeting */
|
|
442
|
+
[data-theme="carbon-light"] nr-button button,
|
|
443
|
+
[data-theme="carbon-dark"] nr-button button,
|
|
444
|
+
[data-theme="carbon"] nr-button button {
|
|
445
|
+
/* Better baseline alignment for icon and text */
|
|
446
|
+
align-items: center;
|
|
447
|
+
|
|
448
|
+
/* Enhanced icon alignment and spacing for Carbon */
|
|
449
|
+
nr-icon {
|
|
450
|
+
width: var(--nuraly-button-icon-size, 1rem);
|
|
451
|
+
height: var(--nuraly-button-icon-size, 1rem);
|
|
452
|
+
display: inline-flex;
|
|
453
|
+
align-items: center;
|
|
454
|
+
justify-content: center;
|
|
455
|
+
flex-shrink: 0;
|
|
456
|
+
/* Perfect vertical alignment with text baseline */
|
|
457
|
+
vertical-align: middle;
|
|
458
|
+
line-height: 1;
|
|
459
|
+
/* Slight adjustment for perfect optical centering */
|
|
460
|
+
margin-top: -1px;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
/* Target the SVG inside nr-icon for better alignment */
|
|
464
|
+
nr-icon svg {
|
|
465
|
+
display: block;
|
|
466
|
+
margin: 0 auto;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
/* Icon spacing for Carbon theme */
|
|
470
|
+
gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
|
|
471
|
+
|
|
472
|
+
/* Ensure text is also properly centered */
|
|
473
|
+
span#container {
|
|
474
|
+
display: flex;
|
|
475
|
+
align-items: center;
|
|
476
|
+
justify-content: center;
|
|
477
|
+
width: 100%;
|
|
478
|
+
height: 100%;
|
|
479
|
+
line-height: 1;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
/* Ensure slot content aligns properly */
|
|
483
|
+
slot#slot {
|
|
484
|
+
display: inline-block;
|
|
485
|
+
line-height: inherit;
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
`;
|
|
2
489
|
/**
|
|
3
490
|
* @license
|
|
4
491
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
492
|
* SPDX-License-Identifier: MIT
|
|
6
493
|
*/
|
|
7
|
-
class
|
|
494
|
+
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
495
|
/**
|
|
9
496
|
* @license
|
|
10
497
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
11
498
|
* SPDX-License-Identifier: MIT
|
|
12
|
-
*/class
|
|
499
|
+
*/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
500
|
/**
|
|
14
501
|
* @license
|
|
15
502
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
16
503
|
* SPDX-License-Identifier: MIT
|
|
17
|
-
*/class
|
|
504
|
+
*/class b 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
505
|
/**
|
|
19
506
|
* @license
|
|
20
507
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
21
508
|
* SPDX-License-Identifier: MIT
|
|
22
|
-
*/class
|
|
509
|
+
*/class h extends u{isLinkType(){return"link"===this.host.type&&!!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
510
|
/**
|
|
24
511
|
* @license
|
|
25
512
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
26
513
|
* SPDX-License-Identifier: MIT
|
|
27
|
-
*/var y=function(t,
|
|
514
|
+
*/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 b(this),this.linkController=new h(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
|
|
515
|
+
name=${a}
|
|
516
|
+
type=${n}
|
|
517
|
+
alt=${c||""}
|
|
518
|
+
size=${i(u)}
|
|
519
|
+
color=${s||""}
|
|
520
|
+
></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`
|
|
521
|
+
<span id="container" part="container">
|
|
522
|
+
${n?this.renderIcon(n):o}
|
|
523
|
+
<slot id="slot"></slot>
|
|
524
|
+
${i?this.renderIcon(i):o}
|
|
525
|
+
</span>
|
|
526
|
+
`;return"a"===t?e`
|
|
527
|
+
<a
|
|
528
|
+
href="${a.href}"
|
|
529
|
+
target="${a.target||o}"
|
|
530
|
+
rel="${a.rel||o}"
|
|
531
|
+
role="${a.role}"
|
|
532
|
+
data-type="${r["data-type"]}"
|
|
533
|
+
data-shape="${r["data-shape"]}"
|
|
534
|
+
data-size="${r["data-size"]}"
|
|
535
|
+
data-state="${r["data-state"]}"
|
|
536
|
+
data-theme="${r["data-theme"]}"
|
|
537
|
+
data-block="${r["data-block"]}"
|
|
538
|
+
class="${r.class}"
|
|
539
|
+
aria-disabled="${this.disabled}"
|
|
540
|
+
aria-label="${this.buttonAriaLabel||o}"
|
|
541
|
+
aria-describedby="${this.ariaDescribedBy||o}"
|
|
542
|
+
tabindex="${this.disabled?-1:0}"
|
|
543
|
+
@click="${this.handleClick}"
|
|
544
|
+
@keydown="${this.handleKeydown}"
|
|
545
|
+
>
|
|
546
|
+
${l}
|
|
547
|
+
</a>
|
|
548
|
+
`:e`
|
|
549
|
+
<button
|
|
550
|
+
?disabled="${this.disabled}"
|
|
551
|
+
type="${this.htmlType||"button"}"
|
|
552
|
+
role="${a.role}"
|
|
553
|
+
data-type="${r["data-type"]}"
|
|
554
|
+
data-shape="${r["data-shape"]}"
|
|
555
|
+
data-size="${r["data-size"]}"
|
|
556
|
+
data-state="${r["data-state"]}"
|
|
557
|
+
data-theme="${r["data-theme"]}"
|
|
558
|
+
data-block="${r["data-block"]}"
|
|
559
|
+
class="${r.class}"
|
|
560
|
+
aria-disabled="${this.disabled}"
|
|
561
|
+
aria-label="${this.buttonAriaLabel||o}"
|
|
562
|
+
aria-describedby="${this.ariaDescribedBy||o}"
|
|
563
|
+
tabindex="${this.disabled?-1:0}"
|
|
564
|
+
@click="${this.handleClick}"
|
|
565
|
+
@keydown="${this.handleKeydown}"
|
|
566
|
+
>
|
|
567
|
+
${l}
|
|
568
|
+
</button>
|
|
569
|
+
`}};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})],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};
|