@weeehaoooz/talos-ui 0.1.0 → 0.1.1
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/fesm2022/weeehaoooz-talos-ui-button-button-group.mjs +25 -4
- package/fesm2022/weeehaoooz-talos-ui-button-button-group.mjs.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui-button-button.mjs +2 -1
- package/fesm2022/weeehaoooz-talos-ui-button-button.mjs.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui-data-display-data-grid.mjs +1627 -0
- package/fesm2022/weeehaoooz-talos-ui-data-display-data-grid.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-form-range-input.mjs +2 -2
- package/fesm2022/weeehaoooz-talos-ui-form-range-input.mjs.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui-form-rating.mjs +2 -2
- package/fesm2022/weeehaoooz-talos-ui-form-rating.mjs.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui-layout.mjs +4 -4
- package/fesm2022/weeehaoooz-talos-ui-layout.mjs.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui-nav.mjs +118 -71
- package/fesm2022/weeehaoooz-talos-ui-nav.mjs.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui.mjs +1765 -87
- package/fesm2022/weeehaoooz-talos-ui.mjs.map +1 -1
- package/package.json +5 -1
- package/styles/_button-group.scss +154 -6
- package/styles/_buttons.scss +105 -8
- package/styles/_variables.scss +4 -0
- package/types/weeehaoooz-talos-ui-button-button-group.d.ts +5 -2
- package/types/weeehaoooz-talos-ui-button-button-group.d.ts.map +1 -1
- package/types/weeehaoooz-talos-ui-button-button.d.ts +1 -1
- package/types/weeehaoooz-talos-ui-button-button.d.ts.map +1 -1
- package/types/weeehaoooz-talos-ui-data-display-data-grid.d.ts +272 -0
- package/types/weeehaoooz-talos-ui-data-display-data-grid.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-nav.d.ts +36 -10
- package/types/weeehaoooz-talos-ui-nav.d.ts.map +1 -1
- package/types/weeehaoooz-talos-ui.d.ts +309 -16
- package/types/weeehaoooz-talos-ui.d.ts.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@weeehaoooz/talos-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A modern, high-performance, and accessible UI component library for Angular 20+",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "weeehaoooz",
|
|
@@ -61,6 +61,10 @@
|
|
|
61
61
|
"types": "./types/weeehaoooz-talos-ui-data-display-badge.d.ts",
|
|
62
62
|
"default": "./fesm2022/weeehaoooz-talos-ui-data-display-badge.mjs"
|
|
63
63
|
},
|
|
64
|
+
"./data-display/data-grid": {
|
|
65
|
+
"types": "./types/weeehaoooz-talos-ui-data-display-data-grid.d.ts",
|
|
66
|
+
"default": "./fesm2022/weeehaoooz-talos-ui-data-display-data-grid.mjs"
|
|
67
|
+
},
|
|
64
68
|
"./data-display/status-tag": {
|
|
65
69
|
"types": "./types/weeehaoooz-talos-ui-data-display-status-tag.d.ts",
|
|
66
70
|
"default": "./fesm2022/weeehaoooz-talos-ui-data-display-status-tag.mjs"
|
|
@@ -4,6 +4,22 @@
|
|
|
4
4
|
display: inline-flex;
|
|
5
5
|
position: relative;
|
|
6
6
|
vertical-align: middle;
|
|
7
|
+
max-width: 100%;
|
|
8
|
+
min-width: 0;
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
|
|
11
|
+
/* Group item anti-crush & alignment rules */
|
|
12
|
+
>.talos-btn,
|
|
13
|
+
>button,
|
|
14
|
+
>a,
|
|
15
|
+
>.talos-button-group-item {
|
|
16
|
+
flex-shrink: 0;
|
|
17
|
+
white-space: nowrap;
|
|
18
|
+
display: inline-flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
box-sizing: border-box;
|
|
22
|
+
}
|
|
7
23
|
|
|
8
24
|
/* Sizing Controls for Group Items */
|
|
9
25
|
&.talos-button-group-sm {
|
|
@@ -61,6 +77,18 @@
|
|
|
61
77
|
&.talos-button-group-horizontal {
|
|
62
78
|
flex-direction: row;
|
|
63
79
|
align-items: center;
|
|
80
|
+
max-width: 100%;
|
|
81
|
+
|
|
82
|
+
&.talos-button-group-segmented,
|
|
83
|
+
&.talos-button-group-pill {
|
|
84
|
+
overflow-x: auto;
|
|
85
|
+
-webkit-overflow-scrolling: touch;
|
|
86
|
+
scrollbar-width: none;
|
|
87
|
+
|
|
88
|
+
&::-webkit-scrollbar {
|
|
89
|
+
display: none;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
64
92
|
|
|
65
93
|
/* Attached Border Overlaps & Radius rules */
|
|
66
94
|
&.talos-button-group-attached,
|
|
@@ -238,6 +266,14 @@
|
|
|
238
266
|
padding: 0.25rem;
|
|
239
267
|
border-radius: 0.5rem;
|
|
240
268
|
gap: 0.25rem;
|
|
269
|
+
max-width: 100%;
|
|
270
|
+
overflow-x: auto;
|
|
271
|
+
-webkit-overflow-scrolling: touch;
|
|
272
|
+
scrollbar-width: none;
|
|
273
|
+
|
|
274
|
+
&::-webkit-scrollbar {
|
|
275
|
+
display: none;
|
|
276
|
+
}
|
|
241
277
|
|
|
242
278
|
&.talos-button-group-pill {
|
|
243
279
|
border-radius: 9999px;
|
|
@@ -343,8 +379,9 @@
|
|
|
343
379
|
}
|
|
344
380
|
}
|
|
345
381
|
|
|
346
|
-
/* Subtle Segmented Active
|
|
347
|
-
&.talos-button-group-subtle
|
|
382
|
+
/* Subtle & Glow Segmented Active Variants */
|
|
383
|
+
&.talos-button-group-subtle,
|
|
384
|
+
&.talos-button-group-glow {
|
|
348
385
|
|
|
349
386
|
>.talos-btn,
|
|
350
387
|
>button,
|
|
@@ -355,12 +392,34 @@
|
|
|
355
392
|
&.is-selected {
|
|
356
393
|
background-color: var(--talos-card-bg, #ffffff);
|
|
357
394
|
color: var(--talos-primary-color, #2563eb);
|
|
358
|
-
font-weight:
|
|
359
|
-
border-color: rgba(
|
|
360
|
-
box-shadow: 0
|
|
395
|
+
font-weight: 600;
|
|
396
|
+
border-color: var(--talos-border-color, rgba(0, 0, 0, 0.08));
|
|
397
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
398
|
+
|
|
399
|
+
&.talos-btn-primary,
|
|
400
|
+
&.talos-btn-secondary,
|
|
401
|
+
&.talos-btn-outline,
|
|
402
|
+
&.talos-btn-ghost,
|
|
403
|
+
&.talos-btn-subtle {
|
|
404
|
+
background-color: var(--talos-card-bg, #ffffff);
|
|
405
|
+
color: var(--talos-primary-color, #2563eb);
|
|
406
|
+
border-color: var(--talos-border-color, rgba(0, 0, 0, 0.08));
|
|
407
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
408
|
+
|
|
409
|
+
svg {
|
|
410
|
+
stroke: var(--talos-primary-color, #2563eb);
|
|
411
|
+
color: var(--talos-primary-color, #2563eb);
|
|
412
|
+
}
|
|
413
|
+
}
|
|
361
414
|
|
|
362
415
|
&:hover:not(:disabled):not(.is-disabled) {
|
|
363
|
-
background-color: var(--talos-
|
|
416
|
+
background-color: var(--talos-card-bg, #ffffff);
|
|
417
|
+
color: var(--talos-primary-hover, #1d4ed8);
|
|
418
|
+
|
|
419
|
+
svg {
|
|
420
|
+
stroke: var(--talos-primary-hover, #1d4ed8);
|
|
421
|
+
color: var(--talos-primary-hover, #1d4ed8);
|
|
422
|
+
}
|
|
364
423
|
}
|
|
365
424
|
|
|
366
425
|
svg {
|
|
@@ -370,6 +429,31 @@
|
|
|
370
429
|
}
|
|
371
430
|
}
|
|
372
431
|
}
|
|
432
|
+
|
|
433
|
+
/* Glow Variant - active item highlights with ambient border/glow */
|
|
434
|
+
&.talos-button-group-glow {
|
|
435
|
+
|
|
436
|
+
>.talos-btn,
|
|
437
|
+
>button,
|
|
438
|
+
>a,
|
|
439
|
+
>.talos-button-group-item {
|
|
440
|
+
|
|
441
|
+
&.is-active,
|
|
442
|
+
&.is-selected {
|
|
443
|
+
border-color: rgba(var(--talos-primary-rgb, 37, 99, 235), 0.35);
|
|
444
|
+
box-shadow: 0 0 12px rgba(var(--talos-primary-rgb, 37, 99, 235), 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
445
|
+
|
|
446
|
+
&.talos-btn-primary,
|
|
447
|
+
&.talos-btn-secondary,
|
|
448
|
+
&.talos-btn-outline,
|
|
449
|
+
&.talos-btn-ghost,
|
|
450
|
+
&.talos-btn-subtle {
|
|
451
|
+
border-color: rgba(var(--talos-primary-rgb, 37, 99, 235), 0.35);
|
|
452
|
+
box-shadow: 0 0 12px rgba(var(--talos-primary-rgb, 37, 99, 235), 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
}
|
|
373
457
|
}
|
|
374
458
|
|
|
375
459
|
/* Active & Hover Selection Styling for Attached/Outline Button Groups */
|
|
@@ -446,6 +530,70 @@
|
|
|
446
530
|
}
|
|
447
531
|
|
|
448
532
|
[data-theme='dark'] {
|
|
533
|
+
.talos-button-group.talos-button-group-segmented {
|
|
534
|
+
background-color: rgba(15, 23, 42, 0.7);
|
|
535
|
+
border-color: var(--talos-border-color, rgba(255, 255, 255, 0.1));
|
|
536
|
+
|
|
537
|
+
&.talos-button-group-subtle,
|
|
538
|
+
&.talos-button-group-glow {
|
|
539
|
+
>.talos-btn,
|
|
540
|
+
>button,
|
|
541
|
+
>a,
|
|
542
|
+
>.talos-button-group-item {
|
|
543
|
+
&.is-active,
|
|
544
|
+
&.is-selected {
|
|
545
|
+
background-color: var(--talos-card-bg, #1e293b);
|
|
546
|
+
border-color: rgba(255, 255, 255, 0.08);
|
|
547
|
+
color: var(--talos-primary-color, #38bdf8);
|
|
548
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
|
549
|
+
|
|
550
|
+
&.talos-btn-primary,
|
|
551
|
+
&.talos-btn-secondary,
|
|
552
|
+
&.talos-btn-outline,
|
|
553
|
+
&.talos-btn-ghost,
|
|
554
|
+
&.talos-btn-subtle {
|
|
555
|
+
background-color: var(--talos-card-bg, #1e293b);
|
|
556
|
+
border-color: rgba(255, 255, 255, 0.08);
|
|
557
|
+
color: var(--talos-primary-color, #38bdf8);
|
|
558
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
|
559
|
+
|
|
560
|
+
svg {
|
|
561
|
+
stroke: currentColor;
|
|
562
|
+
color: currentColor;
|
|
563
|
+
}
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
svg {
|
|
567
|
+
stroke: currentColor;
|
|
568
|
+
color: currentColor;
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
&.talos-button-group-glow {
|
|
575
|
+
>.talos-btn,
|
|
576
|
+
>button,
|
|
577
|
+
>a,
|
|
578
|
+
>.talos-button-group-item {
|
|
579
|
+
&.is-active,
|
|
580
|
+
&.is-selected {
|
|
581
|
+
border-color: rgba(var(--talos-primary-rgb, 56, 189, 248), 0.4);
|
|
582
|
+
box-shadow: 0 0 16px rgba(var(--talos-primary-rgb, 56, 189, 248), 0.22), 0 2px 8px rgba(0, 0, 0, 0.35);
|
|
583
|
+
|
|
584
|
+
&.talos-btn-primary,
|
|
585
|
+
&.talos-btn-secondary,
|
|
586
|
+
&.talos-btn-outline,
|
|
587
|
+
&.talos-btn-ghost,
|
|
588
|
+
&.talos-btn-subtle {
|
|
589
|
+
border-color: rgba(var(--talos-primary-rgb, 56, 189, 248), 0.4);
|
|
590
|
+
box-shadow: 0 0 16px rgba(var(--talos-primary-rgb, 56, 189, 248), 0.22), 0 2px 8px rgba(0, 0, 0, 0.35);
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
}
|
|
596
|
+
|
|
449
597
|
.talos-btn-badge,
|
|
450
598
|
.talos-btn .talos-btn-badge,
|
|
451
599
|
.talos-btn > .talos-badge:not(.talos-badge-host > .talos-badge) {
|
package/styles/_buttons.scss
CHANGED
|
@@ -233,6 +233,15 @@
|
|
|
233
233
|
}
|
|
234
234
|
|
|
235
235
|
/* Sizes */
|
|
236
|
+
.talos-btn-xs,
|
|
237
|
+
.btn-xs {
|
|
238
|
+
height: var(--talos-btn-height-xs, 1.625rem);
|
|
239
|
+
padding: 0 var(--talos-btn-padding-x-xs, 0.5rem);
|
|
240
|
+
font-size: var(--talos-btn-font-size-xs, 0.6875rem);
|
|
241
|
+
gap: 0.35rem;
|
|
242
|
+
border-radius: var(--talos-btn-border-radius-xs, 0.25rem);
|
|
243
|
+
}
|
|
244
|
+
|
|
236
245
|
.talos-btn-sm,
|
|
237
246
|
.btn-sm {
|
|
238
247
|
height: var(--talos-btn-height-sm, 2rem);
|
|
@@ -254,6 +263,62 @@
|
|
|
254
263
|
font-size: var(--talos-btn-font-size-lg, 0.875rem);
|
|
255
264
|
}
|
|
256
265
|
|
|
266
|
+
/* Icon Sizing inside Buttons */
|
|
267
|
+
.talos-btn,
|
|
268
|
+
.btn {
|
|
269
|
+
svg,
|
|
270
|
+
[lucideIcon],
|
|
271
|
+
i,
|
|
272
|
+
.lucide {
|
|
273
|
+
display: block;
|
|
274
|
+
flex-shrink: 0;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
&.talos-btn-xs,
|
|
278
|
+
&.btn-xs {
|
|
279
|
+
svg,
|
|
280
|
+
[lucideIcon],
|
|
281
|
+
i,
|
|
282
|
+
.lucide {
|
|
283
|
+
width: 13px;
|
|
284
|
+
height: 13px;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
&.talos-btn-sm,
|
|
289
|
+
&.btn-sm {
|
|
290
|
+
svg,
|
|
291
|
+
[lucideIcon],
|
|
292
|
+
i,
|
|
293
|
+
.lucide {
|
|
294
|
+
width: 14px;
|
|
295
|
+
height: 14px;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
&.talos-btn-md,
|
|
300
|
+
&.btn-md {
|
|
301
|
+
svg,
|
|
302
|
+
[lucideIcon],
|
|
303
|
+
i,
|
|
304
|
+
.lucide {
|
|
305
|
+
width: 16px;
|
|
306
|
+
height: 16px;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
&.talos-btn-lg,
|
|
311
|
+
&.btn-lg {
|
|
312
|
+
svg,
|
|
313
|
+
[lucideIcon],
|
|
314
|
+
i,
|
|
315
|
+
.lucide {
|
|
316
|
+
width: 18px;
|
|
317
|
+
height: 18px;
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
|
|
257
322
|
.talos-btn-icon,
|
|
258
323
|
.btn-icon {
|
|
259
324
|
padding: 0 !important;
|
|
@@ -263,6 +328,13 @@
|
|
|
263
328
|
justify-content: center;
|
|
264
329
|
flex-shrink: 0;
|
|
265
330
|
|
|
331
|
+
&.talos-btn-xs,
|
|
332
|
+
&.btn-xs {
|
|
333
|
+
width: var(--talos-btn-height-xs, 1.625rem);
|
|
334
|
+
height: var(--talos-btn-height-xs, 1.625rem);
|
|
335
|
+
min-width: var(--talos-btn-height-xs, 1.625rem);
|
|
336
|
+
}
|
|
337
|
+
|
|
266
338
|
&.talos-btn-sm,
|
|
267
339
|
&.btn-sm {
|
|
268
340
|
width: var(--talos-btn-height-sm, 2rem);
|
|
@@ -302,6 +374,7 @@
|
|
|
302
374
|
from {
|
|
303
375
|
transform: rotate(0deg);
|
|
304
376
|
}
|
|
377
|
+
|
|
305
378
|
to {
|
|
306
379
|
transform: rotate(360deg);
|
|
307
380
|
}
|
|
@@ -311,9 +384,11 @@
|
|
|
311
384
|
0% {
|
|
312
385
|
transform: rotate(0deg) scale(0.92);
|
|
313
386
|
}
|
|
387
|
+
|
|
314
388
|
60% {
|
|
315
|
-
transform: rotate(380deg) scale(1.
|
|
389
|
+
transform: rotate(380deg) scale(1.0);
|
|
316
390
|
}
|
|
391
|
+
|
|
317
392
|
100% {
|
|
318
393
|
transform: rotate(360deg) scale(1);
|
|
319
394
|
}
|
|
@@ -323,31 +398,42 @@
|
|
|
323
398
|
0% {
|
|
324
399
|
transform: scale(0.85);
|
|
325
400
|
}
|
|
401
|
+
|
|
326
402
|
50% {
|
|
327
403
|
transform: scale(1.18);
|
|
328
404
|
}
|
|
405
|
+
|
|
329
406
|
100% {
|
|
330
407
|
transform: scale(1);
|
|
331
408
|
}
|
|
332
409
|
}
|
|
333
410
|
|
|
334
411
|
@keyframes talos-shake {
|
|
335
|
-
|
|
412
|
+
|
|
413
|
+
0%,
|
|
414
|
+
100% {
|
|
336
415
|
transform: translateX(0);
|
|
337
416
|
}
|
|
338
|
-
|
|
417
|
+
|
|
418
|
+
20%,
|
|
419
|
+
60% {
|
|
339
420
|
transform: translateX(-3px);
|
|
340
421
|
}
|
|
341
|
-
|
|
422
|
+
|
|
423
|
+
40%,
|
|
424
|
+
80% {
|
|
342
425
|
transform: translateX(3px);
|
|
343
426
|
}
|
|
344
427
|
}
|
|
345
428
|
|
|
346
429
|
@keyframes talos-pulse {
|
|
347
|
-
|
|
430
|
+
|
|
431
|
+
0%,
|
|
432
|
+
100% {
|
|
348
433
|
transform: scale(1);
|
|
349
434
|
opacity: 1;
|
|
350
435
|
}
|
|
436
|
+
|
|
351
437
|
50% {
|
|
352
438
|
transform: scale(1.06);
|
|
353
439
|
opacity: 0.88;
|
|
@@ -355,12 +441,16 @@
|
|
|
355
441
|
}
|
|
356
442
|
|
|
357
443
|
@keyframes talos-bounce {
|
|
358
|
-
|
|
444
|
+
|
|
445
|
+
0%,
|
|
446
|
+
100% {
|
|
359
447
|
transform: translateY(0);
|
|
360
448
|
}
|
|
449
|
+
|
|
361
450
|
40% {
|
|
362
451
|
transform: translateY(-4px);
|
|
363
452
|
}
|
|
453
|
+
|
|
364
454
|
60% {
|
|
365
455
|
transform: translateY(-2px);
|
|
366
456
|
}
|
|
@@ -370,6 +460,7 @@
|
|
|
370
460
|
.btn,
|
|
371
461
|
.talos-affix-btn,
|
|
372
462
|
.talos-affix-element {
|
|
463
|
+
|
|
373
464
|
/* Continuous spin on icon inside button/affix */
|
|
374
465
|
&.talos-anim-spin svg,
|
|
375
466
|
&.talos-anim-spin [lucideIcon],
|
|
@@ -424,7 +515,10 @@
|
|
|
424
515
|
color: var(--talos-success-color, #10b981) !important;
|
|
425
516
|
animation: talos-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
426
517
|
|
|
427
|
-
svg,
|
|
518
|
+
svg,
|
|
519
|
+
[lucideIcon],
|
|
520
|
+
i,
|
|
521
|
+
.lucide {
|
|
428
522
|
color: var(--talos-success-color, #10b981) !important;
|
|
429
523
|
}
|
|
430
524
|
}
|
|
@@ -435,7 +529,10 @@
|
|
|
435
529
|
color: var(--talos-error-color, #ef4444) !important;
|
|
436
530
|
animation: talos-shake 0.4s ease-in-out;
|
|
437
531
|
|
|
438
|
-
svg,
|
|
532
|
+
svg,
|
|
533
|
+
[lucideIcon],
|
|
534
|
+
i,
|
|
535
|
+
.lucide {
|
|
439
536
|
color: var(--talos-error-color, #ef4444) !important;
|
|
440
537
|
}
|
|
441
538
|
}
|
package/styles/_variables.scss
CHANGED
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
--talos-radius-full: 9999px;
|
|
22
22
|
|
|
23
23
|
/* Metric & Sizing Scale */
|
|
24
|
+
--talos-height-xs: 1.625rem; /* 26px */
|
|
24
25
|
--talos-height-sm: 2rem; /* 32px */
|
|
25
26
|
--talos-height-md: 2.25rem; /* 36px */
|
|
26
27
|
--talos-height-lg: 2.625rem; /* 42px */
|
|
@@ -295,14 +296,17 @@
|
|
|
295
296
|
--talos-btn-success-active: var(--talos-success-active);
|
|
296
297
|
--talos-btn-success-text: var(--talos-success-solid-text);
|
|
297
298
|
|
|
299
|
+
--talos-btn-height-xs: var(--talos-height-xs, 1.625rem);
|
|
298
300
|
--talos-btn-height-sm: var(--talos-height-sm);
|
|
299
301
|
--talos-btn-height-md: var(--talos-height-md);
|
|
300
302
|
--talos-btn-height-lg: var(--talos-height-lg);
|
|
301
303
|
|
|
304
|
+
--talos-btn-padding-x-xs: 0.5rem;
|
|
302
305
|
--talos-btn-padding-x-sm: 0.625rem;
|
|
303
306
|
--talos-btn-padding-x-md: 0.875rem;
|
|
304
307
|
--talos-btn-padding-x-lg: 1.125rem;
|
|
305
308
|
|
|
309
|
+
--talos-btn-font-size-xs: var(--talos-font-size-2xs, 0.6875rem);
|
|
306
310
|
--talos-btn-font-size-sm: var(--talos-font-size-xs);
|
|
307
311
|
--talos-btn-font-size-md: var(--talos-font-size-sm);
|
|
308
312
|
--talos-btn-font-size-lg: var(--talos-font-size-md);
|
|
@@ -17,7 +17,7 @@ declare class TalosButtonGroupItemDirective {
|
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
type ButtonGroupOrientation = 'horizontal' | 'vertical';
|
|
20
|
-
type ButtonGroupVariant = 'attached' | 'segmented' | 'outline' | 'subtle' | 'pill';
|
|
20
|
+
type ButtonGroupVariant = 'attached' | 'segmented' | 'outline' | 'subtle' | 'pill' | 'glow';
|
|
21
21
|
type ButtonGroupSelectionMode = 'none' | 'single' | 'multiple';
|
|
22
22
|
declare class TalosButtonGroupComponent {
|
|
23
23
|
private readonly elementRef;
|
|
@@ -33,6 +33,8 @@ declare class TalosButtonGroupComponent {
|
|
|
33
33
|
readonly value: _angular_core.ModelSignal<any>;
|
|
34
34
|
/** Apply fully rounded pill shape */
|
|
35
35
|
readonly pill: _angular_core.InputSignal<boolean>;
|
|
36
|
+
/** Allow mouse wheel vertical scrolling to translate to horizontal scrolling when overflowing on hover */
|
|
37
|
+
readonly mouseWheelScroll: _angular_core.InputSignal<boolean>;
|
|
36
38
|
/** Disable all buttons in group */
|
|
37
39
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
38
40
|
/** Child items using TalosButtonGroupItemDirective */
|
|
@@ -44,8 +46,9 @@ declare class TalosButtonGroupComponent {
|
|
|
44
46
|
private syncChildSelectionStates;
|
|
45
47
|
onClick(event: MouseEvent): void;
|
|
46
48
|
onKeydown(event: KeyboardEvent): void;
|
|
49
|
+
onWheel(event: WheelEvent): void;
|
|
47
50
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TalosButtonGroupComponent, never>;
|
|
48
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalosButtonGroupComponent, "talos-button-group", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["items", "buttons"], ["*"], true, never>;
|
|
51
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TalosButtonGroupComponent, "talos-button-group", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "mouseWheelScroll": { "alias": "mouseWheelScroll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["items", "buttons"], ["*"], true, never>;
|
|
49
52
|
}
|
|
50
53
|
|
|
51
54
|
declare class TalosButtonGroupModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"weeehaoooz-talos-ui-button-button-group.d.ts","sources":["../../../projects/talos-ui/button/button-group/button-group-item/button-group-item.directive.ts","../../../projects/talos-ui/button/button-group/button-group/button-group.component.ts","../../../projects/talos-ui/button/button-group/button-group.module.ts"],"mappings":";;;;;;AAEA,cASa,6BAA6B;yBACrB,UAAA,CAAA,WAAA;;oBAGL,aAAA,CAAA,WAAA;;uBAGG,aAAA,CAAA,cAAA;;AAGjB;oDAVW,6BAA6B;sDAA7B,6BAA6B;AAazC;;KCTW,sBAAsB;AAC5B,KAAM,kBAAkB;AACxB,KAAM,wBAAwB;AAEpC,
|
|
1
|
+
{"version":3,"file":"weeehaoooz-talos-ui-button-button-group.d.ts","sources":["../../../projects/talos-ui/button/button-group/button-group-item/button-group-item.directive.ts","../../../projects/talos-ui/button/button-group/button-group/button-group.component.ts","../../../projects/talos-ui/button/button-group/button-group.module.ts"],"mappings":";;;;;;AAEA,cASa,6BAA6B;yBACrB,UAAA,CAAA,WAAA;;oBAGL,aAAA,CAAA,WAAA;;uBAGG,aAAA,CAAA,cAAA;;AAGjB;oDAVW,6BAA6B;sDAA7B,6BAA6B;AAazC;;KCTW,sBAAsB;AAC5B,KAAM,kBAAkB;AACxB,KAAM,wBAAwB;AAEpC,cAuBa,yBAAyB;AACpC;;0BAGoB,aAAA,CAAA,WAAA,CAAA,sBAAA;;sBAGJ,aAAA,CAAA,WAAA,CAAA,kBAAA;;mBAGH,aAAA,CAAA,WAAA,CAAA,UAAA;;4BAGS,aAAA,CAAA,WAAA,CAAA,wBAAA;;oBAGR,aAAA,CAAA,WAAA;;mBAGD,aAAA,CAAA,WAAA;;+BAGY,aAAA,CAAA,WAAA;;uBAGR,aAAA,CAAA,WAAA;;oBAGH,aAAA,CAAA,MAAA,UAAA,6BAAA;;sBAGE,aAAA,CAAA,MAAA,UAAA,oBAAA;;;AAqChB;AAWA,mBAAe,UAAU;AA8CzB,qBAAiB,aAAa;AA+B9B,mBAAe,UAAU;oDA5Jd,yBAAyB;sDAAzB,yBAAyB;AA6KrC;;ACjND,cAgBa,sBAAsB;oDAAtB,sBAAsB;qDAAtB,sBAAsB,iBAAAA,yBAAA,SAAAC,6BAAA,SAAA,EAAA,CAAA,qBAAA,SAAA,EAAA,CAAA,qBAAA,SAAA,EAAA,CAAA,oBAAA,WAAAD,yBAAA,SAAAC,6BAAA,SAAA,EAAA,CAAA,qBAAA,SAAA,EAAA,CAAA,qBAAA,SAAA,EAAA,CAAA,oBAAA;qDAAtB,sBAAsB;AAAI;;;;","names":["i1.TalosButtonGroupComponent","i2.TalosButtonGroupItemDirective"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
|
|
3
3
|
type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'subtle' | 'danger' | 'success' | 'link';
|
|
4
|
-
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
4
|
+
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
5
5
|
type ButtonAnimation = 'spin' | 'spin-once' | 'pop' | 'shake' | 'pulse' | 'bounce' | 'none';
|
|
6
6
|
type ButtonFeedbackState = 'success' | 'error' | null;
|
|
7
7
|
declare class TalosButtonDirective {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"weeehaoooz-talos-ui-button-button.d.ts","sources":["../../../projects/talos-ui/button/button/button.directive.ts"],"mappings":";;KAEY,aAAa;AACnB,KAAM,UAAU;KACV,eAAe;AACrB,KAAM,mBAAmB;AAE/B,
|
|
1
|
+
{"version":3,"file":"weeehaoooz-talos-ui-button-button.d.ts","sources":["../../../projects/talos-ui/button/button/button.directive.ts"],"mappings":";;KAEY,aAAa;AACnB,KAAM,UAAU;KACV,eAAe;AACrB,KAAM,mBAAmB;AAE/B,cAgCa,oBAAoB;AAC/B;;sBAGgB,aAAA,CAAA,WAAA,CAAA,aAAA;;mBAGH,aAAA,CAAA,WAAA,CAAA,UAAA;;uBAGI,aAAA,CAAA,WAAA;;wBAGC,aAAA,CAAA,WAAA;;mBAGL,aAAA,CAAA,WAAA;;sBAGG,aAAA,CAAA,WAAA;;uBAGC,aAAA,CAAA,WAAA;;wBAGC,aAAA,CAAA,WAAA,CAAA,eAAA;;uBAGD,aAAA,CAAA,WAAA;;sBAGD,aAAA,CAAA,WAAA;;uBAGC,aAAA,CAAA,WAAA,CAAA,mBAAA;AAEjB,yBAAqB,KAAK;oDApCf,oBAAoB;sDAApB,oBAAoB;AA8ChC;;;;","names":[]}
|