@joanroucoux/cairn-ui 0.9.1 → 0.10.0
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/CHANGELOG.md +42 -0
- package/fesm2022/joanroucoux-cairn-ui-action-bar.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-alert.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-amount.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-async.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-avatar.mjs +6 -6
- package/fesm2022/joanroucoux-cairn-ui-back-link.mjs +4 -4
- package/fesm2022/joanroucoux-cairn-ui-back-link.mjs.map +1 -1
- package/fesm2022/joanroucoux-cairn-ui-badge.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-button.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-card.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-choice-chips.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-delta.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-dialog.mjs +4 -4
- package/fesm2022/joanroucoux-cairn-ui-dialog.mjs.map +1 -1
- package/fesm2022/joanroucoux-cairn-ui-donut.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-drawer.mjs +9 -8
- package/fesm2022/joanroucoux-cairn-ui-drawer.mjs.map +1 -1
- package/fesm2022/joanroucoux-cairn-ui-empty.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-external-link.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-fact.mjs +6 -6
- package/fesm2022/joanroucoux-cairn-ui-field.mjs +9 -9
- package/fesm2022/joanroucoux-cairn-ui-filter-chips.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-group-header.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-icon-toggle.mjs +43 -0
- package/fesm2022/joanroucoux-cairn-ui-icon-toggle.mjs.map +1 -0
- package/fesm2022/joanroucoux-cairn-ui-input.mjs +6 -6
- package/fesm2022/joanroucoux-cairn-ui-line-chart.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-menu.mjs +9 -9
- package/fesm2022/joanroucoux-cairn-ui-meter.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-motion.mjs +29 -20
- package/fesm2022/joanroucoux-cairn-ui-motion.mjs.map +1 -1
- package/fesm2022/joanroucoux-cairn-ui-nav-item.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-result-group.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-row.mjs +16 -16
- package/fesm2022/joanroucoux-cairn-ui-row.mjs.map +1 -1
- package/fesm2022/joanroucoux-cairn-ui-segmented.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-select-pill.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-select.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-skeleton.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-stale-link.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-stat.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-switch.mjs +3 -3
- package/fesm2022/joanroucoux-cairn-ui-tab-bar.mjs +6 -6
- package/fesm2022/joanroucoux-cairn-ui-table.mjs +29 -29
- package/fesm2022/joanroucoux-cairn-ui-table.mjs.map +1 -1
- package/fesm2022/joanroucoux-cairn-ui-toast.mjs +6 -6
- package/package.json +5 -1
- package/styles/theme.css +1 -0
- package/styles/tokens.css +1 -0
- package/types/joanroucoux-cairn-ui-drawer.d.ts +2 -0
- package/types/joanroucoux-cairn-ui-icon-toggle.d.ts +13 -0
- package/types/joanroucoux-cairn-ui-motion.d.ts +5 -1
|
@@ -16,7 +16,7 @@ var UiStaleLink = class UiStaleLink {
|
|
|
16
16
|
classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}${this.chevron() ? ` ${CHEVRON_CLASSES}` : ""}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
17
17
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
18
18
|
minVersion: "12.0.0",
|
|
19
|
-
version: "22.2.
|
|
19
|
+
version: "22.2.1",
|
|
20
20
|
ngImport: i0,
|
|
21
21
|
type: UiStaleLink,
|
|
22
22
|
deps: [],
|
|
@@ -24,7 +24,7 @@ var UiStaleLink = class UiStaleLink {
|
|
|
24
24
|
});
|
|
25
25
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
26
26
|
minVersion: "17.1.0",
|
|
27
|
-
version: "22.2.
|
|
27
|
+
version: "22.2.1",
|
|
28
28
|
type: UiStaleLink,
|
|
29
29
|
isStandalone: true,
|
|
30
30
|
selector: "a[uiStaleLink]",
|
|
@@ -50,7 +50,7 @@ var UiStaleLink = class UiStaleLink {
|
|
|
50
50
|
};
|
|
51
51
|
i0.ɵɵngDeclareClassMetadata({
|
|
52
52
|
minVersion: "12.0.0",
|
|
53
|
-
version: "22.2.
|
|
53
|
+
version: "22.2.1",
|
|
54
54
|
ngImport: i0,
|
|
55
55
|
type: UiStaleLink,
|
|
56
56
|
decorators: [{
|
|
@@ -21,7 +21,7 @@ var UiStat = class UiStat {
|
|
|
21
21
|
valueClasses = computed(() => VALUE_CLASSES[this.size()], ...ngDevMode ? [{ debugName: "valueClasses" }] : /* istanbul ignore next */ []);
|
|
22
22
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
23
23
|
minVersion: "12.0.0",
|
|
24
|
-
version: "22.2.
|
|
24
|
+
version: "22.2.1",
|
|
25
25
|
ngImport: i0,
|
|
26
26
|
type: UiStat,
|
|
27
27
|
deps: [],
|
|
@@ -29,7 +29,7 @@ var UiStat = class UiStat {
|
|
|
29
29
|
});
|
|
30
30
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
31
31
|
minVersion: "17.1.0",
|
|
32
|
-
version: "22.2.
|
|
32
|
+
version: "22.2.1",
|
|
33
33
|
type: UiStat,
|
|
34
34
|
isStandalone: true,
|
|
35
35
|
selector: "ui-stat",
|
|
@@ -74,7 +74,7 @@ var UiStat = class UiStat {
|
|
|
74
74
|
};
|
|
75
75
|
i0.ɵɵngDeclareClassMetadata({
|
|
76
76
|
minVersion: "12.0.0",
|
|
77
|
-
version: "22.2.
|
|
77
|
+
version: "22.2.1",
|
|
78
78
|
ngImport: i0,
|
|
79
79
|
type: UiStat,
|
|
80
80
|
decorators: [{
|
|
@@ -9,7 +9,7 @@ var UiSwitch = class UiSwitch {
|
|
|
9
9
|
}
|
|
10
10
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
11
11
|
minVersion: "12.0.0",
|
|
12
|
-
version: "22.2.
|
|
12
|
+
version: "22.2.1",
|
|
13
13
|
ngImport: i0,
|
|
14
14
|
type: UiSwitch,
|
|
15
15
|
deps: [],
|
|
@@ -17,7 +17,7 @@ var UiSwitch = class UiSwitch {
|
|
|
17
17
|
});
|
|
18
18
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
19
19
|
minVersion: "14.0.0",
|
|
20
|
-
version: "22.2.
|
|
20
|
+
version: "22.2.1",
|
|
21
21
|
type: UiSwitch,
|
|
22
22
|
isStandalone: true,
|
|
23
23
|
selector: "input[type=checkbox][uiSwitch]",
|
|
@@ -30,7 +30,7 @@ var UiSwitch = class UiSwitch {
|
|
|
30
30
|
};
|
|
31
31
|
i0.ɵɵngDeclareClassMetadata({
|
|
32
32
|
minVersion: "12.0.0",
|
|
33
|
-
version: "22.2.
|
|
33
|
+
version: "22.2.1",
|
|
34
34
|
ngImport: i0,
|
|
35
35
|
type: UiSwitch,
|
|
36
36
|
decorators: [{
|
|
@@ -14,7 +14,7 @@ var UiTabBar = class UiTabBar {
|
|
|
14
14
|
}
|
|
15
15
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
16
16
|
minVersion: "12.0.0",
|
|
17
|
-
version: "22.2.
|
|
17
|
+
version: "22.2.1",
|
|
18
18
|
ngImport: i0,
|
|
19
19
|
type: UiTabBar,
|
|
20
20
|
deps: [],
|
|
@@ -22,7 +22,7 @@ var UiTabBar = class UiTabBar {
|
|
|
22
22
|
});
|
|
23
23
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
24
24
|
minVersion: "14.0.0",
|
|
25
|
-
version: "22.2.
|
|
25
|
+
version: "22.2.1",
|
|
26
26
|
type: UiTabBar,
|
|
27
27
|
isStandalone: true,
|
|
28
28
|
selector: "nav[ui-tab-bar]",
|
|
@@ -34,7 +34,7 @@ var UiTabBar = class UiTabBar {
|
|
|
34
34
|
};
|
|
35
35
|
i0.ɵɵngDeclareClassMetadata({
|
|
36
36
|
minVersion: "12.0.0",
|
|
37
|
-
version: "22.2.
|
|
37
|
+
version: "22.2.1",
|
|
38
38
|
ngImport: i0,
|
|
39
39
|
type: UiTabBar,
|
|
40
40
|
decorators: [{
|
|
@@ -55,7 +55,7 @@ var UiTab = class UiTab {
|
|
|
55
55
|
classes = computed(() => `${TAB_CLASSES} ${this.active() ? ACTIVE_TAB_CLASSES : INACTIVE_TAB_CLASSES}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
56
56
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
57
57
|
minVersion: "12.0.0",
|
|
58
|
-
version: "22.2.
|
|
58
|
+
version: "22.2.1",
|
|
59
59
|
ngImport: i0,
|
|
60
60
|
type: UiTab,
|
|
61
61
|
deps: [],
|
|
@@ -63,7 +63,7 @@ var UiTab = class UiTab {
|
|
|
63
63
|
});
|
|
64
64
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
65
65
|
minVersion: "17.1.0",
|
|
66
|
-
version: "22.2.
|
|
66
|
+
version: "22.2.1",
|
|
67
67
|
type: UiTab,
|
|
68
68
|
isStandalone: true,
|
|
69
69
|
selector: "a[ui-tab]",
|
|
@@ -88,7 +88,7 @@ var UiTab = class UiTab {
|
|
|
88
88
|
};
|
|
89
89
|
i0.ɵɵngDeclareClassMetadata({
|
|
90
90
|
minVersion: "12.0.0",
|
|
91
|
-
version: "22.2.
|
|
91
|
+
version: "22.2.1",
|
|
92
92
|
ngImport: i0,
|
|
93
93
|
type: UiTab,
|
|
94
94
|
decorators: [{
|
|
@@ -43,7 +43,7 @@ var UiTable = class UiTable {
|
|
|
43
43
|
}
|
|
44
44
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
45
45
|
minVersion: "12.0.0",
|
|
46
|
-
version: "22.2.
|
|
46
|
+
version: "22.2.1",
|
|
47
47
|
ngImport: i0,
|
|
48
48
|
type: UiTable,
|
|
49
49
|
deps: [],
|
|
@@ -51,7 +51,7 @@ var UiTable = class UiTable {
|
|
|
51
51
|
});
|
|
52
52
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
53
53
|
minVersion: "17.1.0",
|
|
54
|
-
version: "22.2.
|
|
54
|
+
version: "22.2.1",
|
|
55
55
|
type: UiTable,
|
|
56
56
|
isStandalone: true,
|
|
57
57
|
selector: "table[uiTable]",
|
|
@@ -84,7 +84,7 @@ var UiTable = class UiTable {
|
|
|
84
84
|
};
|
|
85
85
|
i0.ɵɵngDeclareClassMetadata({
|
|
86
86
|
minVersion: "12.0.0",
|
|
87
|
-
version: "22.2.
|
|
87
|
+
version: "22.2.1",
|
|
88
88
|
ngImport: i0,
|
|
89
89
|
type: UiTable,
|
|
90
90
|
decorators: [{
|
|
@@ -129,7 +129,7 @@ var UiGroup = class UiGroup {
|
|
|
129
129
|
});
|
|
130
130
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
131
131
|
minVersion: "12.0.0",
|
|
132
|
-
version: "22.2.
|
|
132
|
+
version: "22.2.1",
|
|
133
133
|
ngImport: i0,
|
|
134
134
|
type: UiGroup,
|
|
135
135
|
deps: [],
|
|
@@ -137,7 +137,7 @@ var UiGroup = class UiGroup {
|
|
|
137
137
|
});
|
|
138
138
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
139
139
|
minVersion: "17.1.0",
|
|
140
|
-
version: "22.2.
|
|
140
|
+
version: "22.2.1",
|
|
141
141
|
type: UiGroup,
|
|
142
142
|
isStandalone: true,
|
|
143
143
|
selector: "tbody[uiGroup]",
|
|
@@ -154,7 +154,7 @@ var UiGroup = class UiGroup {
|
|
|
154
154
|
};
|
|
155
155
|
i0.ɵɵngDeclareClassMetadata({
|
|
156
156
|
minVersion: "12.0.0",
|
|
157
|
-
version: "22.2.
|
|
157
|
+
version: "22.2.1",
|
|
158
158
|
ngImport: i0,
|
|
159
159
|
type: UiGroup,
|
|
160
160
|
decorators: [{
|
|
@@ -198,7 +198,7 @@ var UiTr = class UiTr {
|
|
|
198
198
|
}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
199
199
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
200
200
|
minVersion: "12.0.0",
|
|
201
|
-
version: "22.2.
|
|
201
|
+
version: "22.2.1",
|
|
202
202
|
ngImport: i0,
|
|
203
203
|
type: UiTr,
|
|
204
204
|
deps: [],
|
|
@@ -206,7 +206,7 @@ var UiTr = class UiTr {
|
|
|
206
206
|
});
|
|
207
207
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
208
208
|
minVersion: "17.1.0",
|
|
209
|
-
version: "22.2.
|
|
209
|
+
version: "22.2.1",
|
|
210
210
|
type: UiTr,
|
|
211
211
|
isStandalone: true,
|
|
212
212
|
selector: "tr[uiTr]",
|
|
@@ -243,7 +243,7 @@ var UiTr = class UiTr {
|
|
|
243
243
|
};
|
|
244
244
|
i0.ɵɵngDeclareClassMetadata({
|
|
245
245
|
minVersion: "12.0.0",
|
|
246
|
-
version: "22.2.
|
|
246
|
+
version: "22.2.1",
|
|
247
247
|
ngImport: i0,
|
|
248
248
|
type: UiTr,
|
|
249
249
|
decorators: [{
|
|
@@ -315,7 +315,7 @@ var UiTh = class UiTh {
|
|
|
315
315
|
classes = computed(() => cellClasses(`${this.tall() ? "[--table-head:2.5rem]" : "[--table-head:2.25rem]"} ${TH_CLASSES}`, this.numeric(), this.primary(), this.from(), this.secondary()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
316
316
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
317
317
|
minVersion: "12.0.0",
|
|
318
|
-
version: "22.2.
|
|
318
|
+
version: "22.2.1",
|
|
319
319
|
ngImport: i0,
|
|
320
320
|
type: UiTh,
|
|
321
321
|
deps: [],
|
|
@@ -323,7 +323,7 @@ var UiTh = class UiTh {
|
|
|
323
323
|
});
|
|
324
324
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
325
325
|
minVersion: "17.1.0",
|
|
326
|
-
version: "22.2.
|
|
326
|
+
version: "22.2.1",
|
|
327
327
|
type: UiTh,
|
|
328
328
|
isStandalone: true,
|
|
329
329
|
selector: "th[uiTh]",
|
|
@@ -381,7 +381,7 @@ var UiTh = class UiTh {
|
|
|
381
381
|
};
|
|
382
382
|
i0.ɵɵngDeclareClassMetadata({
|
|
383
383
|
minVersion: "12.0.0",
|
|
384
|
-
version: "22.2.
|
|
384
|
+
version: "22.2.1",
|
|
385
385
|
ngImport: i0,
|
|
386
386
|
type: UiTh,
|
|
387
387
|
decorators: [{
|
|
@@ -463,7 +463,7 @@ var UiTd = class UiTd {
|
|
|
463
463
|
classes = computed(() => cellClasses(TD_CLASSES, this.numeric(), this.primary(), this.from(), this.secondary()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
464
464
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
465
465
|
minVersion: "12.0.0",
|
|
466
|
-
version: "22.2.
|
|
466
|
+
version: "22.2.1",
|
|
467
467
|
ngImport: i0,
|
|
468
468
|
type: UiTd,
|
|
469
469
|
deps: [],
|
|
@@ -471,7 +471,7 @@ var UiTd = class UiTd {
|
|
|
471
471
|
});
|
|
472
472
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
473
473
|
minVersion: "17.1.0",
|
|
474
|
-
version: "22.2.
|
|
474
|
+
version: "22.2.1",
|
|
475
475
|
type: UiTd,
|
|
476
476
|
isStandalone: true,
|
|
477
477
|
selector: "td[uiTd]",
|
|
@@ -511,7 +511,7 @@ var UiTd = class UiTd {
|
|
|
511
511
|
};
|
|
512
512
|
i0.ɵɵngDeclareClassMetadata({
|
|
513
513
|
minVersion: "12.0.0",
|
|
514
|
-
version: "22.2.
|
|
514
|
+
version: "22.2.1",
|
|
515
515
|
ngImport: i0,
|
|
516
516
|
type: UiTd,
|
|
517
517
|
decorators: [{
|
|
@@ -577,7 +577,7 @@ var UiGroupCell = class UiGroupCell {
|
|
|
577
577
|
}
|
|
578
578
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
579
579
|
minVersion: "12.0.0",
|
|
580
|
-
version: "22.2.
|
|
580
|
+
version: "22.2.1",
|
|
581
581
|
ngImport: i0,
|
|
582
582
|
type: UiGroupCell,
|
|
583
583
|
deps: [],
|
|
@@ -585,7 +585,7 @@ var UiGroupCell = class UiGroupCell {
|
|
|
585
585
|
});
|
|
586
586
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
587
587
|
minVersion: "17.0.0",
|
|
588
|
-
version: "22.2.
|
|
588
|
+
version: "22.2.1",
|
|
589
589
|
type: UiGroupCell,
|
|
590
590
|
isStandalone: true,
|
|
591
591
|
selector: "td[ui-group-cell]",
|
|
@@ -648,7 +648,7 @@ var UiGroupCell = class UiGroupCell {
|
|
|
648
648
|
@if (collapsible()) {
|
|
649
649
|
<h2 class="m-0 font-normal">
|
|
650
650
|
<button
|
|
651
|
-
class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
|
|
651
|
+
class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left transition-[background-color] duration-(--duration-fast) ease-out not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
|
|
652
652
|
data-group-heading
|
|
653
653
|
type="button"
|
|
654
654
|
[attr.aria-controls]="controls() || null"
|
|
@@ -716,7 +716,7 @@ var UiGroupCell = class UiGroupCell {
|
|
|
716
716
|
};
|
|
717
717
|
i0.ɵɵngDeclareClassMetadata({
|
|
718
718
|
minVersion: "12.0.0",
|
|
719
|
-
version: "22.2.
|
|
719
|
+
version: "22.2.1",
|
|
720
720
|
ngImport: i0,
|
|
721
721
|
type: UiGroupCell,
|
|
722
722
|
decorators: [{
|
|
@@ -730,7 +730,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
730
730
|
@if (collapsible()) {
|
|
731
731
|
<h2 class="m-0 font-normal">
|
|
732
732
|
<button
|
|
733
|
-
class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
|
|
733
|
+
class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left transition-[background-color] duration-(--duration-fast) ease-out not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
|
|
734
734
|
data-group-heading
|
|
735
735
|
type="button"
|
|
736
736
|
[attr.aria-controls]="controls() || null"
|
|
@@ -859,7 +859,7 @@ var UiRowLink = class UiRowLink {
|
|
|
859
859
|
classes = computed(() => this.stretch() ? "block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)" : "block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
860
860
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
861
861
|
minVersion: "12.0.0",
|
|
862
|
-
version: "22.2.
|
|
862
|
+
version: "22.2.1",
|
|
863
863
|
ngImport: i0,
|
|
864
864
|
type: UiRowLink,
|
|
865
865
|
deps: [],
|
|
@@ -867,7 +867,7 @@ var UiRowLink = class UiRowLink {
|
|
|
867
867
|
});
|
|
868
868
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
869
869
|
minVersion: "17.1.0",
|
|
870
|
-
version: "22.2.
|
|
870
|
+
version: "22.2.1",
|
|
871
871
|
type: UiRowLink,
|
|
872
872
|
isStandalone: true,
|
|
873
873
|
selector: "a[uiRowLink], button[uiRowLink]",
|
|
@@ -896,7 +896,7 @@ var UiRowLink = class UiRowLink {
|
|
|
896
896
|
};
|
|
897
897
|
i0.ɵɵngDeclareClassMetadata({
|
|
898
898
|
minVersion: "12.0.0",
|
|
899
|
-
version: "22.2.
|
|
899
|
+
version: "22.2.1",
|
|
900
900
|
ngImport: i0,
|
|
901
901
|
type: UiRowLink,
|
|
902
902
|
decorators: [{
|
|
@@ -931,7 +931,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
931
931
|
var UiRowAction = class UiRowAction {
|
|
932
932
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
933
933
|
minVersion: "12.0.0",
|
|
934
|
-
version: "22.2.
|
|
934
|
+
version: "22.2.1",
|
|
935
935
|
ngImport: i0,
|
|
936
936
|
type: UiRowAction,
|
|
937
937
|
deps: [],
|
|
@@ -939,7 +939,7 @@ var UiRowAction = class UiRowAction {
|
|
|
939
939
|
});
|
|
940
940
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
941
941
|
minVersion: "14.0.0",
|
|
942
|
-
version: "22.2.
|
|
942
|
+
version: "22.2.1",
|
|
943
943
|
type: UiRowAction,
|
|
944
944
|
isStandalone: true,
|
|
945
945
|
selector: "[uiRowAction]",
|
|
@@ -949,7 +949,7 @@ var UiRowAction = class UiRowAction {
|
|
|
949
949
|
};
|
|
950
950
|
i0.ɵɵngDeclareClassMetadata({
|
|
951
951
|
minVersion: "12.0.0",
|
|
952
|
-
version: "22.2.
|
|
952
|
+
version: "22.2.1",
|
|
953
953
|
ngImport: i0,
|
|
954
954
|
type: UiRowAction,
|
|
955
955
|
decorators: [{
|
|
@@ -979,7 +979,7 @@ var UiCellSub = class UiCellSub {
|
|
|
979
979
|
classes = computed(() => `${this.narrow() ? "lg:hidden " : ""}block truncate text-caption tabular-nums ${SUB_TONE_CLASSES[this.tone()]}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
980
980
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
981
981
|
minVersion: "12.0.0",
|
|
982
|
-
version: "22.2.
|
|
982
|
+
version: "22.2.1",
|
|
983
983
|
ngImport: i0,
|
|
984
984
|
type: UiCellSub,
|
|
985
985
|
deps: [],
|
|
@@ -987,7 +987,7 @@ var UiCellSub = class UiCellSub {
|
|
|
987
987
|
});
|
|
988
988
|
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
989
989
|
minVersion: "17.1.0",
|
|
990
|
-
version: "22.2.
|
|
990
|
+
version: "22.2.1",
|
|
991
991
|
type: UiCellSub,
|
|
992
992
|
isStandalone: true,
|
|
993
993
|
selector: "[uiCellSub]",
|
|
@@ -1013,7 +1013,7 @@ var UiCellSub = class UiCellSub {
|
|
|
1013
1013
|
};
|
|
1014
1014
|
i0.ɵɵngDeclareClassMetadata({
|
|
1015
1015
|
minVersion: "12.0.0",
|
|
1016
|
-
version: "22.2.
|
|
1016
|
+
version: "22.2.1",
|
|
1017
1017
|
ngImport: i0,
|
|
1018
1018
|
type: UiCellSub,
|
|
1019
1019
|
decorators: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"joanroucoux-cairn-ui-table.mjs","names":[],"sources":["../../../projects/ui/table/table.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, Directive, booleanAttribute, computed, inject, input, model } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Breakpoints a secondary column can be held back until. */\nexport const CELL_BREAKPOINTS = ['md', 'lg'] as const;\nexport type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];\n\n/** Body row heights. */\nexport const TABLE_ROWS = ['48', '52', '60'] as const;\nexport type TableRow = (typeof TABLE_ROWS)[number];\n\nconst ROW_CLASSES: Record<TableRow, string> = {\n '48': '[--table-row:3rem]',\n '52': '[--table-row:3.25rem]',\n '60': '[--table-row:3.75rem]',\n};\n\nconst FROM_CLASSES: Record<CellBreakpoint, string> = {\n md: 'hidden md:table-cell',\n lg: 'hidden lg:table-cell',\n};\n\nconst TH_CLASSES =\n 'h-[calc(var(--table-head)+var(--table-head-gap))] border-b-(length:--table-head-gap) border-transparent px-2 align-middle text-caption font-medium text-(--subtle-foreground) shadow-(--table-rule)';\nconst TD_CLASSES = 'h-(--table-row) px-2 align-middle text-body';\nconst NUMERIC_CLASSES = 'text-right tabular-nums whitespace-nowrap';\nconst TEXTUAL_CLASSES = 'text-left';\nconst PRIMARY_CLASSES = 'w-full max-w-0';\n\n/**\n * Styled native table. `row` sets the height of every body row, `rule` draws or drops the hairline\n * under the header, `spaced` leaves a gap between the header and the first row.\n *\n * @example\n * <table uiTable row=\"60\" [rule]=\"false\">\n */\n@Directive({\n selector: 'table[uiTable]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiTable {\n readonly row = input<TableRow>('48');\n readonly rule = input(true, { transform: booleanAttribute });\n readonly spaced = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() =>\n [\n 'w-full border-separate border-spacing-0',\n ROW_CLASSES[this.row()],\n this.rule() ? '[--table-rule:inset_0_-1px_0_var(--hairline)]' : '[--table-rule:none]',\n this.spaced() ? '[--table-head-gap:0.25rem]' : '[--table-head-gap:0px]',\n ].join(' '),\n );\n\n constructor() {\n holdTransitionsUntilRendered();\n }\n}\n\n/**\n * Body of one group of rows. `collapsed` hides every `tr[uiTr]` but the group row with `hidden`: the rows\n * stay in the DOM, so a `uiFlipList` around the table sees no item added or removed and slides\n * nothing. A plain `tr` without `uiTr` is not hidden.\n *\n * @example\n * <tbody uiGroup [collapsed]=\"!open()\">\n */\n@Directive({\n selector: 'tbody[uiGroup]',\n host: { class: 'after:table-row after:h-1 after:content-[\"\"]' },\n})\nexport class UiGroup {\n readonly collapsed = input(false, { transform: booleanAttribute });\n}\n\n/**\n * Body or group row. `selected` takes the soft fill, `interactive` (a row that opens something) also\n * presses to it. `group` marks the row that holds a group band: it has no hover state.\n *\n * @example\n * <tr uiTr [selected]=\"open\">...\n * <tr uiTr group><td ui-group-cell name=\"Brokerage\">...\n */\n@Directive({\n selector: 'tr[uiTr]',\n host: {\n '[class]': 'classes()',\n '[attr.aria-selected]': 'selected() ? \"true\" : null',\n '[hidden]': '!group() && body?.collapsed()',\n },\n})\nexport class UiTr {\n protected readonly body = inject(UiGroup, { optional: true });\n\n readonly group = input(false, { transform: booleanAttribute });\n readonly selected = input(false, { transform: booleanAttribute });\n readonly interactive = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() => {\n if (this.group()) {\n return '';\n }\n return [\n 'relative [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control',\n this.selected() ? '[&>td]:bg-(--soft)' : '',\n 'hover:[&>td]:bg-(--glow) [&>td]:transition-colors [&>td]:duration-(--duration-fast) [&>td]:ease-out',\n this.interactive()\n ? 'active:[&>td]:bg-(--soft) transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale)'\n : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n}\n\nconst cellClasses = (\n base: string,\n numeric: boolean,\n primary: boolean,\n from: CellBreakpoint | null,\n secondary: boolean,\n): string => {\n const breakpoint = from ?? (secondary ? 'lg' : null);\n return [\n base,\n numeric ? NUMERIC_CLASSES : TEXTUAL_CLASSES,\n primary ? PRIMARY_CLASSES : '',\n breakpoint ? FROM_CLASSES[breakpoint] : '',\n ]\n .filter(Boolean)\n .join(' ');\n};\n\n/**\n * Column header. `numeric` right-aligns, `secondary` (or `from`) hides the column below a\n * breakpoint, `primary` makes it the column that absorbs the free width, `tall` is a 40px header,\n * `width` fixes the column width.\n *\n * @example\n * <th uiTh numeric secondary width=\"108px\">Quantity</th>\n */\n@Directive({\n selector: 'th[uiTh]',\n host: {\n '[class]': 'classes()',\n '[style.width]': 'width()',\n '[style.min-width]': 'width()',\n },\n})\nexport class UiTh {\n readonly width = input<string | null>(null);\n readonly numeric = input(false, { transform: booleanAttribute });\n readonly primary = input(false, { transform: booleanAttribute });\n readonly secondary = input(false, { transform: booleanAttribute });\n readonly tall = input(false, { transform: booleanAttribute });\n readonly from = input<CellBreakpoint | null>(null);\n\n protected readonly classes = computed(() =>\n cellClasses(\n `${this.tall() ? '[--table-head:2.5rem]' : '[--table-head:2.25rem]'} ${TH_CLASSES}`,\n this.numeric(),\n this.primary(),\n this.from(),\n this.secondary(),\n ),\n );\n}\n\n/** Body cell. Same inputs as `UiTh` bar `tall` and `width`, which must be set on both to match. */\n@Directive({\n selector: 'td[uiTd]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiTd {\n readonly numeric = input(false, { transform: booleanAttribute });\n readonly primary = input(false, { transform: booleanAttribute });\n readonly secondary = input(false, { transform: booleanAttribute });\n readonly from = input<CellBreakpoint | null>(null);\n\n protected readonly classes = computed(() =>\n cellClasses(TD_CLASSES, this.numeric(), this.primary(), this.from(), this.secondary()),\n );\n}\n\n/** Group band sizes. */\nexport const GROUP_SIZES = ['md', 'lg'] as const;\nexport type GroupSize = (typeof GROUP_SIZES)[number];\n\n/**\n * The band that opens a group of rows: name, meta beside it, the projected total on the right.\n * Spans the whole row through `colspan`.\n *\n * With `collapsible` the band is a button inside the heading, with a chevron that turns when the\n * group is folded. `expanded` is a model: the page keeps the fold memory and sets `collapsed` on the\n * `tbody[uiGroup]`. `toggleDisabled` keeps the button focusable and announced, but a click changes\n * nothing (a filter holds the group open). `controls` is the id of the group it folds.\n *\n * @example\n * <tr uiTr group><td ui-group-cell colspan=\"4\" name=\"Brokerage\" meta=\"Savings plan\">...total...</td></tr>\n * <tr uiTr group><td ui-group-cell collapsible [(expanded)]=\"open\" controls=\"brokerage\" colspan=\"4\" name=\"Brokerage\">...</td></tr>\n */\n@Component({\n selector: 'td[ui-group-cell]',\n imports: [NgTemplateOutlet],\n host: {\n '[class]': 'hostClasses()',\n },\n template: `\n <ng-template #total><ng-content /></ng-template>\n @if (collapsible()) {\n <h2 class=\"m-0 font-normal\">\n <button\n class=\"rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)\"\n data-group-heading\n type=\"button\"\n [attr.aria-controls]=\"controls() || null\"\n [attr.aria-disabled]=\"toggleDisabled() ? 'true' : null\"\n [attr.aria-expanded]=\"expanded()\"\n [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n (click)=\"toggle()\"\n >\n <span class=\"flex min-w-0 items-center gap-2.5\">\n <svg\n aria-hidden=\"true\"\n class=\"flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out\"\n fill=\"none\"\n height=\"18\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"1.75\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n [class.-rotate-90]=\"!expanded()\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n <span class=\"flex min-w-0 items-baseline gap-3\">\n <span class=\"text-body font-semibold whitespace-nowrap\">{{ name() }}</span>\n @if (meta()) {\n <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n }\n </span>\n </span>\n <span class=\"text-body font-semibold whitespace-nowrap tabular-nums\">\n <ng-container [ngTemplateOutlet]=\"total\" />\n </span>\n </button>\n </h2>\n } @else {\n <div\n class=\"rounded-control flex items-center justify-between gap-4 bg-(--muted) px-2\"\n [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n >\n <div class=\"flex min-w-0 items-baseline gap-3\">\n <h2 class=\"text-body m-0 font-semibold whitespace-nowrap outline-none\" data-group-heading tabindex=\"-1\">\n {{ name() }}\n </h2>\n @if (meta()) {\n <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n }\n </div>\n <span class=\"font-semibold whitespace-nowrap tabular-nums\"><ng-container [ngTemplateOutlet]=\"total\" /></span>\n </div>\n }\n `,\n})\nexport class UiGroupCell {\n readonly name = input.required<string>();\n readonly meta = input<string>();\n readonly size = input<GroupSize>('md');\n readonly collapsible = input(false, { transform: booleanAttribute });\n readonly expanded = model(true);\n readonly toggleDisabled = input(false, { transform: booleanAttribute });\n readonly controls = input<string>();\n\n protected readonly hostClasses = computed(\n () => `px-0 ${this.size() === 'lg' ? 'pt-3' : 'pt-2.5'} pb-1 align-middle text-body`,\n );\n\n protected toggle(): void {\n if (!this.toggleDisabled()) {\n this.expanded.update((expanded) => !expanded);\n }\n }\n}\n\n/**\n * Makes a link or button the way into its row: by default it stretches over the whole row, so the\n * row is one target. With `[stretch]=\"false\"` only the name is the target. `current` marks the open\n * line. Other controls in the row need `uiRowAction` to stay clickable.\n *\n * @example\n * <td uiTd primary><a uiRowLink href=\"/lines/42\">Ferrari</a></td>\n * <td uiTd primary><a uiRowLink [stretch]=\"false\" href=\"/accounts/3\">Brokerage</a></td>\n */\n@Directive({\n selector: 'a[uiRowLink], button[uiRowLink]',\n host: {\n '[class]': 'classes()',\n '[attr.aria-current]': 'current() ? \"true\" : null',\n },\n})\nexport class UiRowLink {\n readonly stretch = input(true, { transform: booleanAttribute });\n readonly current = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() =>\n this.stretch()\n ? 'block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)'\n : 'block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',\n );\n}\n\n/** A control in another cell of a stretched-link row: keeps it clickable above the row-wide link. */\n@Directive({\n selector: '[uiRowAction]',\n host: { class: 'relative z-1' },\n})\nexport class UiRowAction {}\n\n/** Tones of a subtitle: subtle (default), `--stale` at 500, or the color of the cell. */\nexport const SUB_TONES = ['subtle', 'stale', 'inherit'] as const;\nexport type SubTone = (typeof SUB_TONES)[number];\n\nconst SUB_TONE_CLASSES: Record<SubTone, string> = {\n subtle: 'font-normal text-(--subtle-foreground)',\n stale: 'font-medium text-(--stale)',\n inherit: 'font-normal',\n};\n\n/**\n * A second line under a cell's main text. `narrow` shows it only under 1024px, for the data held\n * back by `secondary` columns.\n *\n * @example\n * <span uiCellSub narrow>10 × 421.26 € · cost 388.10 €</span>\n * <span uiCellSub tone=\"stale\">Quote of 24/09</span>\n */\n@Directive({\n selector: '[uiCellSub]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiCellSub {\n readonly narrow = input(false, { transform: booleanAttribute });\n readonly tone = input<SubTone>('subtle');\n\n protected readonly classes = computed(\n () =>\n `${this.narrow() ? 'lg:hidden ' : ''}block truncate text-caption tabular-nums ${SUB_TONE_CLASSES[this.tone()]}`,\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"joanroucoux-cairn-ui-table.mjs","names":[],"sources":["../../../projects/ui/table/table.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { Component, Directive, booleanAttribute, computed, inject, input, model } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\n/** Breakpoints a secondary column can be held back until. */\nexport const CELL_BREAKPOINTS = ['md', 'lg'] as const;\nexport type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];\n\n/** Body row heights. */\nexport const TABLE_ROWS = ['48', '52', '60'] as const;\nexport type TableRow = (typeof TABLE_ROWS)[number];\n\nconst ROW_CLASSES: Record<TableRow, string> = {\n '48': '[--table-row:3rem]',\n '52': '[--table-row:3.25rem]',\n '60': '[--table-row:3.75rem]',\n};\n\nconst FROM_CLASSES: Record<CellBreakpoint, string> = {\n md: 'hidden md:table-cell',\n lg: 'hidden lg:table-cell',\n};\n\nconst TH_CLASSES =\n 'h-[calc(var(--table-head)+var(--table-head-gap))] border-b-(length:--table-head-gap) border-transparent px-2 align-middle text-caption font-medium text-(--subtle-foreground) shadow-(--table-rule)';\nconst TD_CLASSES = 'h-(--table-row) px-2 align-middle text-body';\nconst NUMERIC_CLASSES = 'text-right tabular-nums whitespace-nowrap';\nconst TEXTUAL_CLASSES = 'text-left';\nconst PRIMARY_CLASSES = 'w-full max-w-0';\n\n/**\n * Styled native table. `row` sets the height of every body row, `rule` draws or drops the hairline\n * under the header, `spaced` leaves a gap between the header and the first row.\n *\n * @example\n * <table uiTable row=\"60\" [rule]=\"false\">\n */\n@Directive({\n selector: 'table[uiTable]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiTable {\n readonly row = input<TableRow>('48');\n readonly rule = input(true, { transform: booleanAttribute });\n readonly spaced = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() =>\n [\n 'w-full border-separate border-spacing-0',\n ROW_CLASSES[this.row()],\n this.rule() ? '[--table-rule:inset_0_-1px_0_var(--hairline)]' : '[--table-rule:none]',\n this.spaced() ? '[--table-head-gap:0.25rem]' : '[--table-head-gap:0px]',\n ].join(' '),\n );\n\n constructor() {\n holdTransitionsUntilRendered();\n }\n}\n\n/**\n * Body of one group of rows. `collapsed` hides every `tr[uiTr]` but the group row with `hidden`: the rows\n * stay in the DOM, so a `uiFlipList` around the table sees no item added or removed and slides\n * nothing. A plain `tr` without `uiTr` is not hidden.\n *\n * @example\n * <tbody uiGroup [collapsed]=\"!open()\">\n */\n@Directive({\n selector: 'tbody[uiGroup]',\n host: { class: 'after:table-row after:h-1 after:content-[\"\"]' },\n})\nexport class UiGroup {\n readonly collapsed = input(false, { transform: booleanAttribute });\n}\n\n/**\n * Body or group row. `selected` takes the soft fill, `interactive` (a row that opens something) also\n * presses to it. `group` marks the row that holds a group band: it has no hover state.\n *\n * @example\n * <tr uiTr [selected]=\"open\">...\n * <tr uiTr group><td ui-group-cell name=\"Brokerage\">...\n */\n@Directive({\n selector: 'tr[uiTr]',\n host: {\n '[class]': 'classes()',\n '[attr.aria-selected]': 'selected() ? \"true\" : null',\n '[hidden]': '!group() && body?.collapsed()',\n },\n})\nexport class UiTr {\n protected readonly body = inject(UiGroup, { optional: true });\n\n readonly group = input(false, { transform: booleanAttribute });\n readonly selected = input(false, { transform: booleanAttribute });\n readonly interactive = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() => {\n if (this.group()) {\n return '';\n }\n return [\n 'relative [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control',\n this.selected() ? '[&>td]:bg-(--soft)' : '',\n 'hover:[&>td]:bg-(--glow) [&>td]:transition-colors [&>td]:duration-(--duration-fast) [&>td]:ease-out',\n this.interactive()\n ? 'active:[&>td]:bg-(--soft) transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale)'\n : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n}\n\nconst cellClasses = (\n base: string,\n numeric: boolean,\n primary: boolean,\n from: CellBreakpoint | null,\n secondary: boolean,\n): string => {\n const breakpoint = from ?? (secondary ? 'lg' : null);\n return [\n base,\n numeric ? NUMERIC_CLASSES : TEXTUAL_CLASSES,\n primary ? PRIMARY_CLASSES : '',\n breakpoint ? FROM_CLASSES[breakpoint] : '',\n ]\n .filter(Boolean)\n .join(' ');\n};\n\n/**\n * Column header. `numeric` right-aligns, `secondary` (or `from`) hides the column below a\n * breakpoint, `primary` makes it the column that absorbs the free width, `tall` is a 40px header,\n * `width` fixes the column width.\n *\n * @example\n * <th uiTh numeric secondary width=\"108px\">Quantity</th>\n */\n@Directive({\n selector: 'th[uiTh]',\n host: {\n '[class]': 'classes()',\n '[style.width]': 'width()',\n '[style.min-width]': 'width()',\n },\n})\nexport class UiTh {\n readonly width = input<string | null>(null);\n readonly numeric = input(false, { transform: booleanAttribute });\n readonly primary = input(false, { transform: booleanAttribute });\n readonly secondary = input(false, { transform: booleanAttribute });\n readonly tall = input(false, { transform: booleanAttribute });\n readonly from = input<CellBreakpoint | null>(null);\n\n protected readonly classes = computed(() =>\n cellClasses(\n `${this.tall() ? '[--table-head:2.5rem]' : '[--table-head:2.25rem]'} ${TH_CLASSES}`,\n this.numeric(),\n this.primary(),\n this.from(),\n this.secondary(),\n ),\n );\n}\n\n/** Body cell. Same inputs as `UiTh` bar `tall` and `width`, which must be set on both to match. */\n@Directive({\n selector: 'td[uiTd]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiTd {\n readonly numeric = input(false, { transform: booleanAttribute });\n readonly primary = input(false, { transform: booleanAttribute });\n readonly secondary = input(false, { transform: booleanAttribute });\n readonly from = input<CellBreakpoint | null>(null);\n\n protected readonly classes = computed(() =>\n cellClasses(TD_CLASSES, this.numeric(), this.primary(), this.from(), this.secondary()),\n );\n}\n\n/** Group band sizes. */\nexport const GROUP_SIZES = ['md', 'lg'] as const;\nexport type GroupSize = (typeof GROUP_SIZES)[number];\n\n/**\n * The band that opens a group of rows: name, meta beside it, the projected total on the right.\n * Spans the whole row through `colspan`.\n *\n * With `collapsible` the band is a button inside the heading, with a chevron that turns when the\n * group is folded. `expanded` is a model: the page keeps the fold memory and sets `collapsed` on the\n * `tbody[uiGroup]`. `toggleDisabled` keeps the button focusable and announced, but a click changes\n * nothing (a filter holds the group open). `controls` is the id of the group it folds.\n *\n * @example\n * <tr uiTr group><td ui-group-cell colspan=\"4\" name=\"Brokerage\" meta=\"Savings plan\">...total...</td></tr>\n * <tr uiTr group><td ui-group-cell collapsible [(expanded)]=\"open\" controls=\"brokerage\" colspan=\"4\" name=\"Brokerage\">...</td></tr>\n */\n@Component({\n selector: 'td[ui-group-cell]',\n imports: [NgTemplateOutlet],\n host: {\n '[class]': 'hostClasses()',\n },\n template: `\n <ng-template #total><ng-content /></ng-template>\n @if (collapsible()) {\n <h2 class=\"m-0 font-normal\">\n <button\n class=\"rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left transition-[background-color] duration-(--duration-fast) ease-out not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)\"\n data-group-heading\n type=\"button\"\n [attr.aria-controls]=\"controls() || null\"\n [attr.aria-disabled]=\"toggleDisabled() ? 'true' : null\"\n [attr.aria-expanded]=\"expanded()\"\n [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n (click)=\"toggle()\"\n >\n <span class=\"flex min-w-0 items-center gap-2.5\">\n <svg\n aria-hidden=\"true\"\n class=\"flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out\"\n fill=\"none\"\n height=\"18\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"1.75\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n [class.-rotate-90]=\"!expanded()\"\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n <span class=\"flex min-w-0 items-baseline gap-3\">\n <span class=\"text-body font-semibold whitespace-nowrap\">{{ name() }}</span>\n @if (meta()) {\n <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n }\n </span>\n </span>\n <span class=\"text-body font-semibold whitespace-nowrap tabular-nums\">\n <ng-container [ngTemplateOutlet]=\"total\" />\n </span>\n </button>\n </h2>\n } @else {\n <div\n class=\"rounded-control flex items-center justify-between gap-4 bg-(--muted) px-2\"\n [class]=\"size() === 'lg' ? 'min-h-12' : 'min-h-11'\"\n >\n <div class=\"flex min-w-0 items-baseline gap-3\">\n <h2 class=\"text-body m-0 font-semibold whitespace-nowrap outline-none\" data-group-heading tabindex=\"-1\">\n {{ name() }}\n </h2>\n @if (meta()) {\n <span class=\"text-label truncate text-(--muted-foreground)\">{{ meta() }}</span>\n }\n </div>\n <span class=\"font-semibold whitespace-nowrap tabular-nums\"><ng-container [ngTemplateOutlet]=\"total\" /></span>\n </div>\n }\n `,\n})\nexport class UiGroupCell {\n readonly name = input.required<string>();\n readonly meta = input<string>();\n readonly size = input<GroupSize>('md');\n readonly collapsible = input(false, { transform: booleanAttribute });\n readonly expanded = model(true);\n readonly toggleDisabled = input(false, { transform: booleanAttribute });\n readonly controls = input<string>();\n\n protected readonly hostClasses = computed(\n () => `px-0 ${this.size() === 'lg' ? 'pt-3' : 'pt-2.5'} pb-1 align-middle text-body`,\n );\n\n protected toggle(): void {\n if (!this.toggleDisabled()) {\n this.expanded.update((expanded) => !expanded);\n }\n }\n}\n\n/**\n * Makes a link or button the way into its row: by default it stretches over the whole row, so the\n * row is one target. With `[stretch]=\"false\"` only the name is the target. `current` marks the open\n * line. Other controls in the row need `uiRowAction` to stay clickable.\n *\n * @example\n * <td uiTd primary><a uiRowLink href=\"/lines/42\">Ferrari</a></td>\n * <td uiTd primary><a uiRowLink [stretch]=\"false\" href=\"/accounts/3\">Brokerage</a></td>\n */\n@Directive({\n selector: 'a[uiRowLink], button[uiRowLink]',\n host: {\n '[class]': 'classes()',\n '[attr.aria-current]': 'current() ? \"true\" : null',\n },\n})\nexport class UiRowLink {\n readonly stretch = input(true, { transform: booleanAttribute });\n readonly current = input(false, { transform: booleanAttribute });\n\n protected readonly classes = computed(() =>\n this.stretch()\n ? 'block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)'\n : 'block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',\n );\n}\n\n/** A control in another cell of a stretched-link row: keeps it clickable above the row-wide link. */\n@Directive({\n selector: '[uiRowAction]',\n host: { class: 'relative z-1' },\n})\nexport class UiRowAction {}\n\n/** Tones of a subtitle: subtle (default), `--stale` at 500, or the color of the cell. */\nexport const SUB_TONES = ['subtle', 'stale', 'inherit'] as const;\nexport type SubTone = (typeof SUB_TONES)[number];\n\nconst SUB_TONE_CLASSES: Record<SubTone, string> = {\n subtle: 'font-normal text-(--subtle-foreground)',\n stale: 'font-medium text-(--stale)',\n inherit: 'font-normal',\n};\n\n/**\n * A second line under a cell's main text. `narrow` shows it only under 1024px, for the data held\n * back by `secondary` columns.\n *\n * @example\n * <span uiCellSub narrow>10 × 421.26 € · cost 388.10 €</span>\n * <span uiCellSub tone=\"stale\">Quote of 24/09</span>\n */\n@Directive({\n selector: '[uiCellSub]',\n host: {\n '[class]': 'classes()',\n },\n})\nexport class UiCellSub {\n readonly narrow = input(false, { transform: booleanAttribute });\n readonly tone = input<SubTone>('subtle');\n\n protected readonly classes = computed(\n () =>\n `${this.narrow() ? 'lg:hidden ' : ''}block truncate text-caption tabular-nums ${SUB_TONE_CLASSES[this.tone()]}`,\n );\n}\n"],"mappings":"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"}
|
|
@@ -24,7 +24,7 @@ var UiToasts = class UiToasts {
|
|
|
24
24
|
}
|
|
25
25
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
26
26
|
minVersion: "12.0.0",
|
|
27
|
-
version: "22.2.
|
|
27
|
+
version: "22.2.1",
|
|
28
28
|
ngImport: i0,
|
|
29
29
|
type: UiToasts,
|
|
30
30
|
deps: [],
|
|
@@ -32,7 +32,7 @@ var UiToasts = class UiToasts {
|
|
|
32
32
|
});
|
|
33
33
|
static ɵprov = i0.ɵɵngDeclareInjectable({
|
|
34
34
|
minVersion: "12.0.0",
|
|
35
|
-
version: "22.2.
|
|
35
|
+
version: "22.2.1",
|
|
36
36
|
ngImport: i0,
|
|
37
37
|
type: UiToasts,
|
|
38
38
|
providedIn: "root"
|
|
@@ -40,7 +40,7 @@ var UiToasts = class UiToasts {
|
|
|
40
40
|
};
|
|
41
41
|
i0.ɵɵngDeclareClassMetadata({
|
|
42
42
|
minVersion: "12.0.0",
|
|
43
|
-
version: "22.2.
|
|
43
|
+
version: "22.2.1",
|
|
44
44
|
ngImport: i0,
|
|
45
45
|
type: UiToasts,
|
|
46
46
|
decorators: [{
|
|
@@ -134,7 +134,7 @@ var UiToaster = class UiToaster {
|
|
|
134
134
|
}
|
|
135
135
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
136
136
|
minVersion: "12.0.0",
|
|
137
|
-
version: "22.2.
|
|
137
|
+
version: "22.2.1",
|
|
138
138
|
ngImport: i0,
|
|
139
139
|
type: UiToaster,
|
|
140
140
|
deps: [],
|
|
@@ -142,7 +142,7 @@ var UiToaster = class UiToaster {
|
|
|
142
142
|
});
|
|
143
143
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
144
144
|
minVersion: "17.0.0",
|
|
145
|
-
version: "22.2.
|
|
145
|
+
version: "22.2.1",
|
|
146
146
|
type: UiToaster,
|
|
147
147
|
isStandalone: true,
|
|
148
148
|
selector: "ui-toaster",
|
|
@@ -202,7 +202,7 @@ var UiToaster = class UiToaster {
|
|
|
202
202
|
};
|
|
203
203
|
i0.ɵɵngDeclareClassMetadata({
|
|
204
204
|
minVersion: "12.0.0",
|
|
205
|
-
version: "22.2.
|
|
205
|
+
version: "22.2.1",
|
|
206
206
|
ngImport: i0,
|
|
207
207
|
type: UiToaster,
|
|
208
208
|
decorators: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@joanroucoux/cairn-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "Cairn UI — a monochrome, accessible Angular design system.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -132,6 +132,10 @@
|
|
|
132
132
|
"types": "./types/joanroucoux-cairn-ui-group-header.d.ts",
|
|
133
133
|
"default": "./fesm2022/joanroucoux-cairn-ui-group-header.mjs"
|
|
134
134
|
},
|
|
135
|
+
"./icon-toggle": {
|
|
136
|
+
"types": "./types/joanroucoux-cairn-ui-icon-toggle.d.ts",
|
|
137
|
+
"default": "./fesm2022/joanroucoux-cairn-ui-icon-toggle.mjs"
|
|
138
|
+
},
|
|
135
139
|
"./input": {
|
|
136
140
|
"types": "./types/joanroucoux-cairn-ui-input.d.ts",
|
|
137
141
|
"default": "./fesm2022/joanroucoux-cairn-ui-input.mjs"
|
package/styles/theme.css
CHANGED
package/styles/tokens.css
CHANGED
|
@@ -7,6 +7,7 @@ type DrawerCloseReason = (typeof DRAWER_CLOSE_REASONS)[number];
|
|
|
7
7
|
* Modal side panel on the native <dialog>, against the right edge at full height, for a detail opened from a list.
|
|
8
8
|
*
|
|
9
9
|
* Without `heading` it draws no header: the content brings its own title and close button, and `label` names it.
|
|
10
|
+
* With both, `label` names the panel and the heading stays its visible title.
|
|
10
11
|
*
|
|
11
12
|
* @example
|
|
12
13
|
* <ui-drawer heading="Northwind Monde" closeLabel="Fermer le détail" [open]="open()" (dismissed)="open.set(false)">
|
|
@@ -27,6 +28,7 @@ export declare class UiDrawer {
|
|
|
27
28
|
protected readonly descriptionId: string;
|
|
28
29
|
protected readonly describedBy: import("@angular/core").Signal<string | null>;
|
|
29
30
|
protected readonly ariaLabel: import("@angular/core").Signal<string | null | undefined>;
|
|
31
|
+
protected readonly labelledBy: import("@angular/core").Signal<string | null>;
|
|
30
32
|
protected readonly modal: ModalClose<"escape" | "backdrop" | "cross" | "programmatic">;
|
|
31
33
|
static ɵfac: i0.ɵɵFactoryDeclaration<UiDrawer, never>;
|
|
32
34
|
static ɵcmp: i0.ɵɵComponentDeclaration<UiDrawer, "ui-drawer", never, {
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
/**
|
|
3
|
+
* Round icon button that switches something on and off, such as the header eye that hides the amounts.
|
|
4
|
+
* The state lives in `aria-pressed`, which also draws the soft fill. Only the press scale transitions:
|
|
5
|
+
* the fill changes at once.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* <button uiIconToggle aria-label="Hide amounts" [attr.aria-pressed]="hidden"><svg>...</svg></button>
|
|
9
|
+
*/
|
|
10
|
+
export declare class UiIconToggle {
|
|
11
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<UiIconToggle, never>;
|
|
12
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<UiIconToggle, "button[uiIconToggle]", never, {}, {}, never, never, true, never>;
|
|
13
|
+
}
|
|
@@ -62,6 +62,7 @@ export declare class UiFlipItem {
|
|
|
62
62
|
* `--soft` fill, then fades back. Each new non-null token plays once, so pass a fresh value per
|
|
63
63
|
* event (an object or a counter), not a boolean. A non-null token present at first render plays on
|
|
64
64
|
* arrival. Can sit on the same element as `animate.enter`: it waits for that fade to finish.
|
|
65
|
+
* `highlighted` fires when the flash starts, after any scroll and enter fade, so a toast can follow it.
|
|
65
66
|
*
|
|
66
67
|
* Give the element `scroll-margin-top` and `scroll-margin-bottom` equal to what is pinned above and
|
|
67
68
|
* below it (header, tab bar, action bar), or a row under them counts as on screen. For an arrival
|
|
@@ -73,6 +74,7 @@ export declare class UiFlipItem {
|
|
|
73
74
|
*/
|
|
74
75
|
export declare class UiHighlight {
|
|
75
76
|
readonly uiHighlight: import("@angular/core").InputSignal<unknown>;
|
|
77
|
+
readonly highlighted: import("@angular/core").OutputEmitterRef<void>;
|
|
76
78
|
private readonly host;
|
|
77
79
|
private readonly reduced;
|
|
78
80
|
private cancel;
|
|
@@ -87,7 +89,9 @@ export declare class UiHighlight {
|
|
|
87
89
|
"required": false;
|
|
88
90
|
"isSignal": true;
|
|
89
91
|
};
|
|
90
|
-
}, {
|
|
92
|
+
}, {
|
|
93
|
+
"highlighted": "highlighted";
|
|
94
|
+
}, never, never, true, never>;
|
|
91
95
|
}
|
|
92
96
|
/**
|
|
93
97
|
* A signal that follows the user's `prefers-reduced-motion` preference. Call it in an injection
|