@ng-json-render/primitives 0.0.3 → 1.0.0-beta.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.
|
@@ -4,15 +4,17 @@ import { JR_CONTEXT, defineRegistry } from '@ng-json-render/core';
|
|
|
4
4
|
|
|
5
5
|
/** Centered, max-width page container. */
|
|
6
6
|
class JrContainer {
|
|
7
|
-
maxWidth = input(960,
|
|
7
|
+
maxWidth = input(960, /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
|
|
8
9
|
maxWidthValue = computed(() => {
|
|
9
10
|
const w = this.maxWidth();
|
|
10
11
|
return typeof w === 'number' ? `${w}px` : w;
|
|
11
|
-
},
|
|
12
|
-
|
|
13
|
-
static
|
|
12
|
+
}, /* @ts-ignore */
|
|
13
|
+
...(ngDevMode ? [{ debugName: "maxWidthValue" }] : /* istanbul ignore next */ []));
|
|
14
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.8", type: JrContainer, isStandalone: true, selector: "jr-container", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.max-width": "maxWidthValue()" }, styleAttribute: "margin-inline: auto;", classAttribute: "block w-full" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14
16
|
}
|
|
15
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrContainer, decorators: [{
|
|
16
18
|
type: Component,
|
|
17
19
|
args: [{
|
|
18
20
|
selector: 'jr-container',
|
|
@@ -20,26 +22,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
20
22
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
21
23
|
host: {
|
|
22
24
|
class: 'block w-full',
|
|
25
|
+
style: 'margin-inline: auto;',
|
|
23
26
|
'[style.max-width]': 'maxWidthValue()',
|
|
24
|
-
'[style.margin-inline]': '"auto"',
|
|
25
27
|
},
|
|
26
28
|
}]
|
|
27
29
|
}], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }] } });
|
|
30
|
+
|
|
28
31
|
/** Flexbox stack (row or column) with configurable gap and alignment. */
|
|
29
32
|
class JrStack {
|
|
30
|
-
direction = input('column',
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
direction = input('column', /* @ts-ignore */
|
|
34
|
+
...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
|
|
35
|
+
gap = input(12, /* @ts-ignore */
|
|
36
|
+
...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
37
|
+
align = input(/* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [undefined, { debugName: "align" }] : /* istanbul ignore next */ []));
|
|
39
|
+
justify = input(/* @ts-ignore */
|
|
40
|
+
...(ngDevMode ? [undefined, { debugName: "justify" }] : /* istanbul ignore next */ []));
|
|
41
|
+
wrap = input(false, /* @ts-ignore */
|
|
42
|
+
...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
|
|
35
43
|
gapValue = computed(() => {
|
|
36
44
|
const g = this.gap();
|
|
37
45
|
return typeof g === 'number' ? `${g}px` : g;
|
|
38
|
-
},
|
|
39
|
-
|
|
40
|
-
static
|
|
46
|
+
}, /* @ts-ignore */
|
|
47
|
+
...(ngDevMode ? [{ debugName: "gapValue" }] : /* istanbul ignore next */ []));
|
|
48
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
49
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.8", type: JrStack, isStandalone: true, selector: "jr-stack", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.flex-direction": "direction()", "style.gap": "gapValue()", "style.align-items": "align()", "style.justify-content": "justify()", "style.flex-wrap": "wrap() ? \"wrap\" : null" }, styleAttribute: "display: flex; box-sizing: border-box;" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
41
50
|
}
|
|
42
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrStack, decorators: [{
|
|
43
52
|
type: Component,
|
|
44
53
|
args: [{
|
|
45
54
|
selector: 'jr-stack',
|
|
@@ -55,20 +64,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
55
64
|
},
|
|
56
65
|
}]
|
|
57
66
|
}], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
|
|
67
|
+
|
|
58
68
|
/**
|
|
59
69
|
* Responsive grid. `columns` is the target column count at full width; the grid
|
|
60
70
|
* collapses to fewer columns as the container narrows (each column never shrinks
|
|
61
71
|
* below `minItemWidth`), so specs stay responsive without media queries.
|
|
62
72
|
*/
|
|
63
73
|
class JrGrid {
|
|
64
|
-
columns = input(2,
|
|
65
|
-
|
|
74
|
+
columns = input(2, /* @ts-ignore */
|
|
75
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
76
|
+
gap = input(16, /* @ts-ignore */
|
|
77
|
+
...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
66
78
|
/** Minimum width a column may shrink to before the grid drops a column. */
|
|
67
|
-
minItemWidth = input(200,
|
|
79
|
+
minItemWidth = input(200, /* @ts-ignore */
|
|
80
|
+
...(ngDevMode ? [{ debugName: "minItemWidth" }] : /* istanbul ignore next */ []));
|
|
68
81
|
gapValue = computed(() => {
|
|
69
82
|
const g = this.gap();
|
|
70
83
|
return typeof g === 'number' ? `${g}px` : g;
|
|
71
|
-
},
|
|
84
|
+
}, /* @ts-ignore */
|
|
85
|
+
...(ngDevMode ? [{ debugName: "gapValue" }] : /* istanbul ignore next */ []));
|
|
72
86
|
templateColumns = computed(() => {
|
|
73
87
|
const cols = Math.max(1, this.columns());
|
|
74
88
|
if (cols === 1)
|
|
@@ -79,11 +93,12 @@ class JrGrid {
|
|
|
79
93
|
// would fall below `minItemWidth`. `min(100%, …)` avoids overflow on tiny screens.
|
|
80
94
|
const ideal = `calc((100% - (${cols} - 1) * ${gap}) / ${cols})`;
|
|
81
95
|
return `repeat(auto-fit, minmax(min(100%, max(${min}px, ${ideal})), 1fr))`;
|
|
82
|
-
},
|
|
83
|
-
|
|
84
|
-
static
|
|
96
|
+
}, /* @ts-ignore */
|
|
97
|
+
...(ngDevMode ? [{ debugName: "templateColumns" }] : /* istanbul ignore next */ []));
|
|
98
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
99
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.8", type: JrGrid, isStandalone: true, selector: "jr-grid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, minItemWidth: { classPropertyName: "minItemWidth", publicName: "minItemWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.grid-template-columns": "templateColumns()", "style.gap": "gapValue()" }, styleAttribute: "display: grid; box-sizing: border-box;" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
85
100
|
}
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrGrid, decorators: [{
|
|
87
102
|
type: Component,
|
|
88
103
|
args: [{
|
|
89
104
|
selector: 'jr-grid',
|
|
@@ -96,18 +111,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
96
111
|
},
|
|
97
112
|
}]
|
|
98
113
|
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], minItemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minItemWidth", required: false }] }] } });
|
|
114
|
+
|
|
99
115
|
/** Bordered surface with an optional title/subtitle. */
|
|
100
116
|
class JrCard {
|
|
101
|
-
title = input(
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
117
|
+
title = input(/* @ts-ignore */
|
|
118
|
+
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
119
|
+
subtitle = input(/* @ts-ignore */
|
|
120
|
+
...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
121
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.8", type: JrCard, isStandalone: true, selector: "jr-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900" }, ngImport: i0, template: `
|
|
105
123
|
@if (title() || subtitle()) {
|
|
106
124
|
<div class="mb-3">
|
|
107
125
|
@if (title()) {
|
|
108
|
-
<div
|
|
109
|
-
class="text-sm font-semibold text-zinc-900 dark:text-zinc-100"
|
|
110
|
-
>
|
|
126
|
+
<div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
|
111
127
|
{{ title() }}
|
|
112
128
|
</div>
|
|
113
129
|
}
|
|
@@ -121,7 +137,7 @@ class JrCard {
|
|
|
121
137
|
<ng-content />
|
|
122
138
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
123
139
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrCard, decorators: [{
|
|
125
141
|
type: Component,
|
|
126
142
|
args: [{
|
|
127
143
|
selector: 'jr-card',
|
|
@@ -129,9 +145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
129
145
|
@if (title() || subtitle()) {
|
|
130
146
|
<div class="mb-3">
|
|
131
147
|
@if (title()) {
|
|
132
|
-
<div
|
|
133
|
-
class="text-sm font-semibold text-zinc-900 dark:text-zinc-100"
|
|
134
|
-
>
|
|
148
|
+
<div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
|
135
149
|
{{ title() }}
|
|
136
150
|
</div>
|
|
137
151
|
}
|
|
@@ -150,12 +164,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
150
164
|
},
|
|
151
165
|
}]
|
|
152
166
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
|
|
167
|
+
|
|
153
168
|
/** Horizontal rule. */
|
|
154
169
|
class JrDivider {
|
|
155
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
156
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
170
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
171
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.8", type: JrDivider, isStandalone: true, selector: "jr-divider", host: { attributes: { "role": "separator" }, classAttribute: "block border-t border-zinc-200 dark:border-zinc-800" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
157
172
|
}
|
|
158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrDivider, decorators: [{
|
|
159
174
|
type: Component,
|
|
160
175
|
args: [{
|
|
161
176
|
selector: 'jr-divider',
|
|
@@ -168,38 +183,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
168
183
|
}]
|
|
169
184
|
}] });
|
|
170
185
|
|
|
171
|
-
|
|
186
|
+
const HEADING_SIZES = {
|
|
187
|
+
1: 'text-3xl',
|
|
188
|
+
2: 'text-2xl',
|
|
189
|
+
3: 'text-lg',
|
|
190
|
+
4: 'text-base',
|
|
191
|
+
};
|
|
192
|
+
/** Section heading (levels 1–4), exposed to assistive tech as a heading. */
|
|
172
193
|
class JrHeading {
|
|
173
|
-
value = input('',
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
181
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
194
|
+
value = input('', /* @ts-ignore */
|
|
195
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
196
|
+
level = input(2, /* @ts-ignore */
|
|
197
|
+
...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
|
|
198
|
+
sizeClass = computed(() => 'block font-semibold tracking-tight text-zinc-900 dark:text-zinc-50 ' +
|
|
199
|
+
(HEADING_SIZES[this.level()] ?? HEADING_SIZES[2]), /* @ts-ignore */
|
|
200
|
+
...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
|
|
201
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.8", type: JrHeading, isStandalone: true, selector: "jr-heading", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "heading" }, properties: { "attr.aria-level": "level()", "class": "sizeClass()" } }, ngImport: i0, template: `{{ value() }}<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
182
203
|
}
|
|
183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrHeading, decorators: [{
|
|
184
205
|
type: Component,
|
|
185
206
|
args: [{
|
|
186
207
|
selector: 'jr-heading',
|
|
187
208
|
template: `{{ value() }}<ng-content />`,
|
|
188
209
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
189
210
|
host: {
|
|
211
|
+
role: 'heading',
|
|
212
|
+
'[attr.aria-level]': 'level()',
|
|
190
213
|
'[class]': 'sizeClass()',
|
|
191
214
|
},
|
|
192
215
|
}]
|
|
193
216
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }] } });
|
|
217
|
+
|
|
194
218
|
/** Body text. */
|
|
195
219
|
class JrText {
|
|
196
|
-
value = input('',
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
220
|
+
value = input('', /* @ts-ignore */
|
|
221
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
222
|
+
weight = input('normal', /* @ts-ignore */
|
|
223
|
+
...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
|
|
224
|
+
size = input('base', /* @ts-ignore */
|
|
225
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
226
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.8", type: JrText, isStandalone: true, selector: "jr-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.font-medium": "weight() === \"medium\"", "class.font-semibold": "weight() === \"bold\"", "class.text-sm": "size() === \"sm\"", "class.text-xs": "size() === \"xs\"", "class.text-lg": "size() === \"lg\"" }, classAttribute: "text-zinc-600 dark:text-zinc-300" }, ngImport: i0, template: `{{ value() }}<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
201
228
|
}
|
|
202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrText, decorators: [{
|
|
203
230
|
type: Component,
|
|
204
231
|
args: [{
|
|
205
232
|
selector: 'jr-text',
|
|
@@ -215,6 +242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
215
242
|
},
|
|
216
243
|
}]
|
|
217
244
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
245
|
+
|
|
218
246
|
const BADGE_TONES = {
|
|
219
247
|
neutral: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300',
|
|
220
248
|
success: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400',
|
|
@@ -224,14 +252,17 @@ const BADGE_TONES = {
|
|
|
224
252
|
};
|
|
225
253
|
/** Small status pill. */
|
|
226
254
|
class JrBadge {
|
|
227
|
-
label = input('',
|
|
228
|
-
|
|
255
|
+
label = input('', /* @ts-ignore */
|
|
256
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
257
|
+
tone = input('neutral', /* @ts-ignore */
|
|
258
|
+
...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
229
259
|
toneClass = computed(() => 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ' +
|
|
230
|
-
(BADGE_TONES[this.tone()] ?? BADGE_TONES['neutral']),
|
|
231
|
-
|
|
232
|
-
static
|
|
260
|
+
(BADGE_TONES[this.tone()] ?? BADGE_TONES['neutral']), /* @ts-ignore */
|
|
261
|
+
...(ngDevMode ? [{ debugName: "toneClass" }] : /* istanbul ignore next */ []));
|
|
262
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
263
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.8", type: JrBadge, isStandalone: true, selector: "jr-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "toneClass()" } }, ngImport: i0, template: `{{ label() }}<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
233
264
|
}
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
265
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrBadge, decorators: [{
|
|
235
266
|
type: Component,
|
|
236
267
|
args: [{
|
|
237
268
|
selector: 'jr-badge',
|
|
@@ -242,14 +273,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
242
273
|
},
|
|
243
274
|
}]
|
|
244
275
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
|
|
276
|
+
|
|
245
277
|
/** KPI tile: a big value with a label and an optional delta. */
|
|
246
278
|
class JrStat {
|
|
247
|
-
label = input('',
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
279
|
+
label = input('', /* @ts-ignore */
|
|
280
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
281
|
+
value = input('', /* @ts-ignore */
|
|
282
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
283
|
+
delta = input(null, /* @ts-ignore */
|
|
284
|
+
...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
|
|
285
|
+
down = computed(() => (this.delta() ?? 0) < 0, /* @ts-ignore */
|
|
286
|
+
...(ngDevMode ? [{ debugName: "down" }] : /* istanbul ignore next */ []));
|
|
287
|
+
absDelta = computed(() => Math.abs(this.delta() ?? 0), /* @ts-ignore */
|
|
288
|
+
...(ngDevMode ? [{ debugName: "absDelta" }] : /* istanbul ignore next */ []));
|
|
289
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrStat, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.8", type: JrStat, isStandalone: true, selector: "jr-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
253
291
|
<div class="text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
|
254
292
|
{{ label() }}
|
|
255
293
|
</div>
|
|
@@ -260,16 +298,18 @@ class JrStat {
|
|
|
260
298
|
@if (delta() !== null) {
|
|
261
299
|
<span
|
|
262
300
|
class="text-xs font-medium"
|
|
263
|
-
[class.text-emerald-600]="(
|
|
264
|
-
[class.text-red-600]="(
|
|
301
|
+
[class.text-emerald-600]="!down()"
|
|
302
|
+
[class.text-red-600]="down()"
|
|
265
303
|
>
|
|
266
|
-
{{ (
|
|
304
|
+
<span aria-hidden="true">{{ down() ? '▼' : '▲' }}</span>
|
|
305
|
+
<span class="sr-only">{{ down() ? 'down' : 'up' }}</span>
|
|
306
|
+
{{ absDelta() }}%
|
|
267
307
|
</span>
|
|
268
308
|
}
|
|
269
309
|
</div>
|
|
270
310
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
271
311
|
}
|
|
272
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrStat, decorators: [{
|
|
273
313
|
type: Component,
|
|
274
314
|
args: [{
|
|
275
315
|
selector: 'jr-stat',
|
|
@@ -284,10 +324,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
284
324
|
@if (delta() !== null) {
|
|
285
325
|
<span
|
|
286
326
|
class="text-xs font-medium"
|
|
287
|
-
[class.text-emerald-600]="(
|
|
288
|
-
[class.text-red-600]="(
|
|
327
|
+
[class.text-emerald-600]="!down()"
|
|
328
|
+
[class.text-red-600]="down()"
|
|
289
329
|
>
|
|
290
|
-
{{ (
|
|
330
|
+
<span aria-hidden="true">{{ down() ? '▼' : '▲' }}</span>
|
|
331
|
+
<span class="sr-only">{{ down() ? 'down' : 'up' }}</span>
|
|
332
|
+
{{ absDelta() }}%
|
|
291
333
|
</span>
|
|
292
334
|
}
|
|
293
335
|
</div>
|
|
@@ -303,15 +345,24 @@ const ALERT_TONES = {
|
|
|
303
345
|
warning: 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200',
|
|
304
346
|
danger: 'border-red-200 bg-red-50 text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200',
|
|
305
347
|
};
|
|
306
|
-
/**
|
|
348
|
+
/**
|
|
349
|
+
* Inline callout. `warning` and `danger` are announced immediately
|
|
350
|
+
* (`role="alert"`); `info` and `success` are polite (`role="status"`).
|
|
351
|
+
*/
|
|
307
352
|
class JrAlert {
|
|
308
|
-
title = input(
|
|
309
|
-
|
|
310
|
-
|
|
353
|
+
title = input(/* @ts-ignore */
|
|
354
|
+
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
355
|
+
message = input('', /* @ts-ignore */
|
|
356
|
+
...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
|
|
357
|
+
tone = input('info', /* @ts-ignore */
|
|
358
|
+
...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
359
|
+
urgent = computed(() => this.tone() === 'warning' || this.tone() === 'danger', /* @ts-ignore */
|
|
360
|
+
...(ngDevMode ? [{ debugName: "urgent" }] : /* istanbul ignore next */ []));
|
|
311
361
|
toneClass = computed(() => 'block rounded-lg border px-4 py-3 ' +
|
|
312
|
-
(ALERT_TONES[this.tone()] ?? ALERT_TONES['info']),
|
|
313
|
-
|
|
314
|
-
static
|
|
362
|
+
(ALERT_TONES[this.tone()] ?? ALERT_TONES['info']), /* @ts-ignore */
|
|
363
|
+
...(ngDevMode ? [{ debugName: "toneClass" }] : /* istanbul ignore next */ []));
|
|
364
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
365
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.8", type: JrAlert, isStandalone: true, selector: "jr-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "urgent() ? \"alert\" : \"status\"", "class": "toneClass()" } }, ngImport: i0, template: `
|
|
315
366
|
@if (title()) {
|
|
316
367
|
<div class="font-medium">{{ title() }}</div>
|
|
317
368
|
}
|
|
@@ -320,7 +371,7 @@ class JrAlert {
|
|
|
320
371
|
</div>
|
|
321
372
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
322
373
|
}
|
|
323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrAlert, decorators: [{
|
|
324
375
|
type: Component,
|
|
325
376
|
args: [{
|
|
326
377
|
selector: 'jr-alert',
|
|
@@ -334,18 +385,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
334
385
|
`,
|
|
335
386
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
336
387
|
host: {
|
|
337
|
-
role: 'alert',
|
|
388
|
+
'[attr.role]': 'urgent() ? "alert" : "status"',
|
|
338
389
|
'[class]': 'toneClass()',
|
|
339
390
|
},
|
|
340
391
|
}]
|
|
341
392
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
|
|
393
|
+
|
|
342
394
|
/** Determinate progress bar (0–100). */
|
|
343
395
|
class JrProgress {
|
|
344
|
-
value = input(0,
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
396
|
+
value = input(0, /* @ts-ignore */
|
|
397
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
398
|
+
label = input(/* @ts-ignore */
|
|
399
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
400
|
+
clamped = computed(() => Math.max(0, Math.min(100, Math.round(this.value()))), /* @ts-ignore */
|
|
401
|
+
...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
|
|
402
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
403
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.8", type: JrProgress, isStandalone: true, selector: "jr-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-valuenow": "clamped()", "attr.aria-label": "label() || null" }, classAttribute: "block" }, ngImport: i0, template: `
|
|
349
404
|
<div
|
|
350
405
|
class="h-2 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800"
|
|
351
406
|
>
|
|
@@ -361,7 +416,7 @@ class JrProgress {
|
|
|
361
416
|
}
|
|
362
417
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
363
418
|
}
|
|
364
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
419
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrProgress, decorators: [{
|
|
365
420
|
type: Component,
|
|
366
421
|
args: [{
|
|
367
422
|
selector: 'jr-progress',
|
|
@@ -381,64 +436,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
381
436
|
}
|
|
382
437
|
`,
|
|
383
438
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
384
|
-
host: {
|
|
439
|
+
host: {
|
|
440
|
+
class: 'block',
|
|
441
|
+
role: 'progressbar',
|
|
442
|
+
'aria-valuemin': '0',
|
|
443
|
+
'aria-valuemax': '100',
|
|
444
|
+
'[attr.aria-valuenow]': 'clamped()',
|
|
445
|
+
'[attr.aria-label]': 'label() || null',
|
|
446
|
+
},
|
|
385
447
|
}]
|
|
386
448
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
387
449
|
|
|
388
450
|
/** Responsive CSS bar chart (no chart library). */
|
|
389
451
|
class JrBarChart {
|
|
390
|
-
data = input([],
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
452
|
+
data = input([], /* @ts-ignore */
|
|
453
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
454
|
+
height = input(160, /* @ts-ignore */
|
|
455
|
+
...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
456
|
+
bars = computed(() => {
|
|
457
|
+
const data = this.data();
|
|
458
|
+
const max = Math.max(1, ...data.map((d) => d.value));
|
|
459
|
+
return data.map((d) => ({
|
|
460
|
+
label: d.label,
|
|
461
|
+
text: `${d.label}: ${d.value}`,
|
|
462
|
+
pct: Math.max(2, (d.value / max) * 100),
|
|
463
|
+
}));
|
|
464
|
+
}, /* @ts-ignore */
|
|
465
|
+
...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
|
|
466
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
467
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.8", type: JrBarChart, isStandalone: true, selector: "jr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
398
468
|
<div class="flex items-end gap-2" [style.height.px]="height()">
|
|
399
|
-
@for (
|
|
469
|
+
@for (bar of bars(); track $index) {
|
|
400
470
|
<div class="flex h-full flex-1 items-end">
|
|
401
471
|
<div
|
|
472
|
+
role="img"
|
|
402
473
|
class="w-full rounded-t-md bg-indigo-500 transition-[height] duration-300 dark:bg-indigo-400"
|
|
403
|
-
[style.height.%]="pct
|
|
404
|
-
[
|
|
474
|
+
[style.height.%]="bar.pct"
|
|
475
|
+
[attr.aria-label]="bar.text"
|
|
476
|
+
[title]="bar.text"
|
|
405
477
|
></div>
|
|
406
478
|
</div>
|
|
407
479
|
}
|
|
408
480
|
</div>
|
|
409
|
-
<div class="mt-1.5 flex gap-2">
|
|
410
|
-
@for (
|
|
481
|
+
<div class="mt-1.5 flex gap-2" aria-hidden="true">
|
|
482
|
+
@for (bar of bars(); track $index) {
|
|
411
483
|
<div
|
|
412
484
|
class="flex-1 truncate text-center text-xs text-zinc-500 dark:text-zinc-400"
|
|
413
485
|
>
|
|
414
|
-
{{
|
|
486
|
+
{{ bar.label }}
|
|
415
487
|
</div>
|
|
416
488
|
}
|
|
417
489
|
</div>
|
|
418
490
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
419
491
|
}
|
|
420
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrBarChart, decorators: [{
|
|
421
493
|
type: Component,
|
|
422
494
|
args: [{
|
|
423
495
|
selector: 'jr-bar-chart',
|
|
424
496
|
template: `
|
|
425
497
|
<div class="flex items-end gap-2" [style.height.px]="height()">
|
|
426
|
-
@for (
|
|
498
|
+
@for (bar of bars(); track $index) {
|
|
427
499
|
<div class="flex h-full flex-1 items-end">
|
|
428
500
|
<div
|
|
501
|
+
role="img"
|
|
429
502
|
class="w-full rounded-t-md bg-indigo-500 transition-[height] duration-300 dark:bg-indigo-400"
|
|
430
|
-
[style.height.%]="pct
|
|
431
|
-
[
|
|
503
|
+
[style.height.%]="bar.pct"
|
|
504
|
+
[attr.aria-label]="bar.text"
|
|
505
|
+
[title]="bar.text"
|
|
432
506
|
></div>
|
|
433
507
|
</div>
|
|
434
508
|
}
|
|
435
509
|
</div>
|
|
436
|
-
<div class="mt-1.5 flex gap-2">
|
|
437
|
-
@for (
|
|
510
|
+
<div class="mt-1.5 flex gap-2" aria-hidden="true">
|
|
511
|
+
@for (bar of bars(); track $index) {
|
|
438
512
|
<div
|
|
439
513
|
class="flex-1 truncate text-center text-xs text-zinc-500 dark:text-zinc-400"
|
|
440
514
|
>
|
|
441
|
-
{{
|
|
515
|
+
{{ bar.label }}
|
|
442
516
|
</div>
|
|
443
517
|
}
|
|
444
518
|
</div>
|
|
@@ -447,10 +521,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
447
521
|
host: { class: 'block' },
|
|
448
522
|
}]
|
|
449
523
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
450
|
-
|
|
524
|
+
|
|
525
|
+
/**
|
|
526
|
+
* Responsive SVG line/area chart (no chart library). Set `label` to describe
|
|
527
|
+
* the series to assistive tech; without it the chart is decorative.
|
|
528
|
+
*/
|
|
451
529
|
class JrLineChart {
|
|
452
|
-
data = input([],
|
|
453
|
-
|
|
530
|
+
data = input([], /* @ts-ignore */
|
|
531
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
532
|
+
height = input(120, /* @ts-ignore */
|
|
533
|
+
...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
534
|
+
/** Accessible description of the series, e.g. "Signups, last 7 days". */
|
|
535
|
+
label = input(/* @ts-ignore */
|
|
536
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
454
537
|
geom = computed(() => {
|
|
455
538
|
const d = this.data();
|
|
456
539
|
if (d.length < 2)
|
|
@@ -467,15 +550,18 @@ class JrLineChart {
|
|
|
467
550
|
return `${x.toFixed(1)},${y.toFixed(1)}`;
|
|
468
551
|
});
|
|
469
552
|
return { line: pts.join(' '), area: `0,${h} ${pts.join(' ')} ${w},${h}` };
|
|
470
|
-
},
|
|
471
|
-
|
|
472
|
-
static
|
|
553
|
+
}, /* @ts-ignore */
|
|
554
|
+
...(ngDevMode ? [{ debugName: "geom" }] : /* istanbul ignore next */ []));
|
|
555
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
556
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.8", type: JrLineChart, isStandalone: true, selector: "jr-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
473
557
|
<svg
|
|
474
558
|
viewBox="0 0 300 100"
|
|
475
559
|
preserveAspectRatio="none"
|
|
476
560
|
class="w-full"
|
|
477
561
|
[style.height.px]="height()"
|
|
478
|
-
|
|
562
|
+
[attr.role]="label() ? 'img' : null"
|
|
563
|
+
[attr.aria-label]="label() || null"
|
|
564
|
+
[attr.aria-hidden]="label() ? null : 'true'"
|
|
479
565
|
>
|
|
480
566
|
@if (geom().line) {
|
|
481
567
|
<polygon
|
|
@@ -495,7 +581,7 @@ class JrLineChart {
|
|
|
495
581
|
</svg>
|
|
496
582
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
497
583
|
}
|
|
498
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrLineChart, decorators: [{
|
|
499
585
|
type: Component,
|
|
500
586
|
args: [{
|
|
501
587
|
selector: 'jr-line-chart',
|
|
@@ -505,7 +591,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
505
591
|
preserveAspectRatio="none"
|
|
506
592
|
class="w-full"
|
|
507
593
|
[style.height.px]="height()"
|
|
508
|
-
|
|
594
|
+
[attr.role]="label() ? 'img' : null"
|
|
595
|
+
[attr.aria-label]="label() || null"
|
|
596
|
+
[attr.aria-hidden]="label() ? null : 'true'"
|
|
509
597
|
>
|
|
510
598
|
@if (geom().line) {
|
|
511
599
|
<polygon
|
|
@@ -527,21 +615,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
527
615
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
528
616
|
host: { class: 'block' },
|
|
529
617
|
}]
|
|
530
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
|
|
618
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
531
619
|
|
|
532
620
|
/** Simple data table. */
|
|
533
621
|
class JrTable {
|
|
534
|
-
columns = input([],
|
|
535
|
-
|
|
622
|
+
columns = input([], /* @ts-ignore */
|
|
623
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
624
|
+
rows = input([], /* @ts-ignore */
|
|
625
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
536
626
|
cols = computed(() => this.columns().map((c) => typeof c === 'string'
|
|
537
627
|
? { key: c, label: c }
|
|
538
|
-
: { key: c.key, label: c.label ?? c.key }),
|
|
628
|
+
: { key: c.key, label: c.label ?? c.key }), /* @ts-ignore */
|
|
629
|
+
...(ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []));
|
|
539
630
|
cell(row, key) {
|
|
540
631
|
const v = row[key];
|
|
541
632
|
return v == null ? '' : String(v);
|
|
542
633
|
}
|
|
543
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
544
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
634
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
635
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.8", type: JrTable, isStandalone: true, selector: "jr-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
545
636
|
<div
|
|
546
637
|
class="overflow-x-auto rounded-xl border border-zinc-200 dark:border-zinc-800"
|
|
547
638
|
>
|
|
@@ -550,6 +641,7 @@ class JrTable {
|
|
|
550
641
|
<tr class="bg-zinc-50 dark:bg-zinc-800/50">
|
|
551
642
|
@for (col of cols(); track col.key) {
|
|
552
643
|
<th
|
|
644
|
+
scope="col"
|
|
553
645
|
class="px-4 py-2.5 text-left font-medium text-zinc-500 dark:text-zinc-400"
|
|
554
646
|
>
|
|
555
647
|
{{ col.label }}
|
|
@@ -559,9 +651,7 @@ class JrTable {
|
|
|
559
651
|
</thead>
|
|
560
652
|
<tbody>
|
|
561
653
|
@for (row of rows(); track $index) {
|
|
562
|
-
<tr
|
|
563
|
-
class="border-t border-zinc-100 dark:border-zinc-800/70"
|
|
564
|
-
>
|
|
654
|
+
<tr class="border-t border-zinc-100 dark:border-zinc-800/70">
|
|
565
655
|
@for (col of cols(); track col.key) {
|
|
566
656
|
<td class="px-4 py-2.5 text-zinc-700 dark:text-zinc-300">
|
|
567
657
|
{{ cell(row, col.key) }}
|
|
@@ -574,7 +664,7 @@ class JrTable {
|
|
|
574
664
|
</div>
|
|
575
665
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
576
666
|
}
|
|
577
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrTable, decorators: [{
|
|
578
668
|
type: Component,
|
|
579
669
|
args: [{
|
|
580
670
|
selector: 'jr-table',
|
|
@@ -587,6 +677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
587
677
|
<tr class="bg-zinc-50 dark:bg-zinc-800/50">
|
|
588
678
|
@for (col of cols(); track col.key) {
|
|
589
679
|
<th
|
|
680
|
+
scope="col"
|
|
590
681
|
class="px-4 py-2.5 text-left font-medium text-zinc-500 dark:text-zinc-400"
|
|
591
682
|
>
|
|
592
683
|
{{ col.label }}
|
|
@@ -596,9 +687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
596
687
|
</thead>
|
|
597
688
|
<tbody>
|
|
598
689
|
@for (row of rows(); track $index) {
|
|
599
|
-
<tr
|
|
600
|
-
class="border-t border-zinc-100 dark:border-zinc-800/70"
|
|
601
|
-
>
|
|
690
|
+
<tr class="border-t border-zinc-100 dark:border-zinc-800/70">
|
|
602
691
|
@for (col of cols(); track col.key) {
|
|
603
692
|
<td class="px-4 py-2.5 text-zinc-700 dark:text-zinc-300">
|
|
604
693
|
{{ cell(row, col.key) }}
|
|
@@ -617,27 +706,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
617
706
|
|
|
618
707
|
// Note: these controls expose a `value` / `checked` model(), which *structurally*
|
|
619
708
|
// satisfies Angular's Signal Forms `FormValueControl` / `FormCheckboxControl`
|
|
620
|
-
// contracts — so on Angular 21 they work with the `[
|
|
621
|
-
// importing `@angular/forms/signals`,
|
|
709
|
+
// contracts — so on Angular 21+ they work with the `[formField]` directive
|
|
710
|
+
// (`[field]` in early 21 releases) — without importing `@angular/forms/signals`,
|
|
711
|
+
// keeping the package usable on Angular 19+.
|
|
712
|
+
/** Classes shared by the labelled text controls (Input, Textarea, Select). */
|
|
622
713
|
const FIELD_LABEL = 'text-sm font-medium text-zinc-700 dark:text-zinc-300';
|
|
623
714
|
const CONTROL = 'w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none placeholder:text-zinc-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100';
|
|
715
|
+
|
|
624
716
|
/**
|
|
625
|
-
* Text input. A Signal Forms
|
|
626
|
-
* directive, or driven by `$bindState` through the renderer.
|
|
717
|
+
* Text input. A Signal Forms value control — usable with the `[formField]`
|
|
718
|
+
* directive (Angular 21+), or driven by `$bindState` through the renderer.
|
|
627
719
|
*/
|
|
628
720
|
class JrInput {
|
|
629
|
-
value = model('',
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
721
|
+
value = model('', /* @ts-ignore */
|
|
722
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
723
|
+
label = input(/* @ts-ignore */
|
|
724
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
725
|
+
placeholder = input('', /* @ts-ignore */
|
|
726
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
727
|
+
type = input('text', /* @ts-ignore */
|
|
728
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
729
|
+
hint = input(/* @ts-ignore */
|
|
730
|
+
...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
634
731
|
labelClass = FIELD_LABEL;
|
|
635
732
|
controlClass = CONTROL;
|
|
636
733
|
read(e) {
|
|
637
734
|
return e.target.value;
|
|
638
735
|
}
|
|
639
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
640
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
736
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
737
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.8", type: JrInput, isStandalone: true, selector: "jr-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
641
738
|
<label class="flex flex-col gap-1.5">
|
|
642
739
|
@if (label()) {
|
|
643
740
|
<span [class]="labelClass">{{ label() }}</span>
|
|
@@ -657,7 +754,7 @@ class JrInput {
|
|
|
657
754
|
</label>
|
|
658
755
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
659
756
|
}
|
|
660
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
757
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrInput, decorators: [{
|
|
661
758
|
type: Component,
|
|
662
759
|
args: [{
|
|
663
760
|
selector: 'jr-input',
|
|
@@ -684,19 +781,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
684
781
|
host: { class: 'block' },
|
|
685
782
|
}]
|
|
686
783
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
|
|
784
|
+
|
|
687
785
|
/** Multi-line text input (Signal Forms value control). */
|
|
688
786
|
class JrTextarea {
|
|
689
|
-
value = model('',
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
787
|
+
value = model('', /* @ts-ignore */
|
|
788
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
789
|
+
label = input(/* @ts-ignore */
|
|
790
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
791
|
+
placeholder = input('', /* @ts-ignore */
|
|
792
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
793
|
+
rows = input(3, /* @ts-ignore */
|
|
794
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
693
795
|
labelClass = FIELD_LABEL;
|
|
694
796
|
controlClass = CONTROL;
|
|
695
797
|
read(e) {
|
|
696
798
|
return e.target.value;
|
|
697
799
|
}
|
|
698
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
699
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
800
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
801
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.8", type: JrTextarea, isStandalone: true, selector: "jr-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
700
802
|
<label class="flex flex-col gap-1.5">
|
|
701
803
|
@if (label()) {
|
|
702
804
|
<span [class]="labelClass">{{ label() }}</span>
|
|
@@ -711,7 +813,7 @@ class JrTextarea {
|
|
|
711
813
|
</label>
|
|
712
814
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
713
815
|
}
|
|
714
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrTextarea, decorators: [{
|
|
715
817
|
type: Component,
|
|
716
818
|
args: [{
|
|
717
819
|
selector: 'jr-textarea',
|
|
@@ -733,42 +835,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
733
835
|
host: { class: 'block' },
|
|
734
836
|
}]
|
|
735
837
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
|
|
838
|
+
|
|
736
839
|
/** Dropdown select (Signal Forms value control). */
|
|
737
840
|
class JrSelect {
|
|
738
|
-
value = model('',
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
841
|
+
value = model('', /* @ts-ignore */
|
|
842
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
843
|
+
label = input(/* @ts-ignore */
|
|
844
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
845
|
+
placeholder = input(/* @ts-ignore */
|
|
846
|
+
...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
847
|
+
options = input([], /* @ts-ignore */
|
|
848
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
742
849
|
labelClass = FIELD_LABEL;
|
|
743
850
|
controlClass = CONTROL;
|
|
744
851
|
normalized = computed(() => this.options().map((o) => typeof o === 'string'
|
|
745
852
|
? { value: o, label: o }
|
|
746
|
-
: { value: o.value, label: o.label ?? o.value }),
|
|
853
|
+
: { value: o.value, label: o.label ?? o.value }), /* @ts-ignore */
|
|
854
|
+
...(ngDevMode ? [{ debugName: "normalized" }] : /* istanbul ignore next */ []));
|
|
747
855
|
read(e) {
|
|
748
856
|
return e.target.value;
|
|
749
857
|
}
|
|
750
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
751
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
858
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
859
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.8", type: JrSelect, isStandalone: true, selector: "jr-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
752
860
|
<label class="flex flex-col gap-1.5">
|
|
753
861
|
@if (label()) {
|
|
754
862
|
<span [class]="labelClass">{{ label() }}</span>
|
|
755
863
|
}
|
|
756
|
-
<select
|
|
757
|
-
|
|
758
|
-
[class]="controlClass"
|
|
759
|
-
(change)="value.set(read($event))"
|
|
760
|
-
>
|
|
864
|
+
<!-- Select per option: <select [value]> runs before the options exist. -->
|
|
865
|
+
<select [class]="controlClass" (change)="value.set(read($event))">
|
|
761
866
|
@if (placeholder()) {
|
|
762
|
-
<option value="" disabled
|
|
867
|
+
<option value="" disabled [selected]="value() === ''">
|
|
868
|
+
{{ placeholder() }}
|
|
869
|
+
</option>
|
|
763
870
|
}
|
|
764
871
|
@for (opt of normalized(); track opt.value) {
|
|
765
|
-
<option [value]="opt.value"
|
|
872
|
+
<option [value]="opt.value" [selected]="opt.value === value()">
|
|
873
|
+
{{ opt.label }}
|
|
874
|
+
</option>
|
|
766
875
|
}
|
|
767
876
|
</select>
|
|
768
877
|
</label>
|
|
769
878
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
770
879
|
}
|
|
771
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrSelect, decorators: [{
|
|
772
881
|
type: Component,
|
|
773
882
|
args: [{
|
|
774
883
|
selector: 'jr-select',
|
|
@@ -777,16 +886,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
777
886
|
@if (label()) {
|
|
778
887
|
<span [class]="labelClass">{{ label() }}</span>
|
|
779
888
|
}
|
|
780
|
-
<select
|
|
781
|
-
|
|
782
|
-
[class]="controlClass"
|
|
783
|
-
(change)="value.set(read($event))"
|
|
784
|
-
>
|
|
889
|
+
<!-- Select per option: <select [value]> runs before the options exist. -->
|
|
890
|
+
<select [class]="controlClass" (change)="value.set(read($event))">
|
|
785
891
|
@if (placeholder()) {
|
|
786
|
-
<option value="" disabled
|
|
892
|
+
<option value="" disabled [selected]="value() === ''">
|
|
893
|
+
{{ placeholder() }}
|
|
894
|
+
</option>
|
|
787
895
|
}
|
|
788
896
|
@for (opt of normalized(); track opt.value) {
|
|
789
|
-
<option [value]="opt.value"
|
|
897
|
+
<option [value]="opt.value" [selected]="opt.value === value()">
|
|
898
|
+
{{ opt.label }}
|
|
899
|
+
</option>
|
|
790
900
|
}
|
|
791
901
|
</select>
|
|
792
902
|
</label>
|
|
@@ -795,15 +905,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
795
905
|
host: { class: 'block' },
|
|
796
906
|
}]
|
|
797
907
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
|
|
908
|
+
|
|
798
909
|
/** Checkbox (Signal Forms checkbox control). */
|
|
799
910
|
class JrCheckbox {
|
|
800
|
-
checked = model(false,
|
|
801
|
-
|
|
911
|
+
checked = model(false, /* @ts-ignore */
|
|
912
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
913
|
+
label = input('', /* @ts-ignore */
|
|
914
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
802
915
|
read(e) {
|
|
803
916
|
return e.target.checked;
|
|
804
917
|
}
|
|
805
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
806
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
918
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
919
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.8", type: JrCheckbox, isStandalone: true, selector: "jr-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
807
920
|
<label class="flex cursor-pointer items-center gap-2.5">
|
|
808
921
|
<input
|
|
809
922
|
type="checkbox"
|
|
@@ -817,7 +930,7 @@ class JrCheckbox {
|
|
|
817
930
|
</label>
|
|
818
931
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
819
932
|
}
|
|
820
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrCheckbox, decorators: [{
|
|
821
934
|
type: Component,
|
|
822
935
|
args: [{
|
|
823
936
|
selector: 'jr-checkbox',
|
|
@@ -838,12 +951,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
838
951
|
host: { class: 'block' },
|
|
839
952
|
}]
|
|
840
953
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
954
|
+
|
|
841
955
|
/** Toggle switch (Signal Forms checkbox control). */
|
|
842
956
|
class JrSwitch {
|
|
843
|
-
checked = model(false,
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
957
|
+
checked = model(false, /* @ts-ignore */
|
|
958
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
959
|
+
label = input('', /* @ts-ignore */
|
|
960
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
961
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
962
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.8", type: JrSwitch, isStandalone: true, selector: "jr-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
|
|
847
963
|
<div class="flex cursor-pointer items-center justify-between gap-3">
|
|
848
964
|
<span class="text-sm text-zinc-700 dark:text-zinc-300">{{
|
|
849
965
|
label()
|
|
@@ -852,6 +968,7 @@ class JrSwitch {
|
|
|
852
968
|
type="button"
|
|
853
969
|
role="switch"
|
|
854
970
|
[attr.aria-checked]="checked()"
|
|
971
|
+
[attr.aria-label]="label() || null"
|
|
855
972
|
(click)="checked.set(!checked())"
|
|
856
973
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
857
974
|
[class.bg-indigo-600]="checked()"
|
|
@@ -867,7 +984,7 @@ class JrSwitch {
|
|
|
867
984
|
</div>
|
|
868
985
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
869
986
|
}
|
|
870
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrSwitch, decorators: [{
|
|
871
988
|
type: Component,
|
|
872
989
|
args: [{
|
|
873
990
|
selector: 'jr-switch',
|
|
@@ -880,6 +997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
880
997
|
type="button"
|
|
881
998
|
role="switch"
|
|
882
999
|
[attr.aria-checked]="checked()"
|
|
1000
|
+
[attr.aria-label]="label() || null"
|
|
883
1001
|
(click)="checked.set(!checked())"
|
|
884
1002
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
885
1003
|
[class.bg-indigo-600]="checked()"
|
|
@@ -898,33 +1016,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
898
1016
|
host: { class: 'block' },
|
|
899
1017
|
}]
|
|
900
1018
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
1019
|
+
|
|
901
1020
|
const BUTTON_VARIANTS = {
|
|
902
1021
|
primary: 'bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:ring-indigo-500/40',
|
|
903
1022
|
secondary: 'border border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800',
|
|
904
1023
|
ghost: 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800',
|
|
905
1024
|
danger: 'bg-red-600 text-white hover:bg-red-500 focus-visible:ring-red-500/40',
|
|
906
1025
|
};
|
|
907
|
-
/**
|
|
1026
|
+
/**
|
|
1027
|
+
* Button that emits the `press` action. Outside a `<jr-renderer>` (no
|
|
1028
|
+
* `JR_CONTEXT`) it renders as a plain button.
|
|
1029
|
+
*/
|
|
908
1030
|
class JrButton {
|
|
909
|
-
label = input('',
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
1031
|
+
label = input('', /* @ts-ignore */
|
|
1032
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1033
|
+
variant = input('primary', /* @ts-ignore */
|
|
1034
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1035
|
+
disabled = input(false, /* @ts-ignore */
|
|
1036
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1037
|
+
ctx = inject(JR_CONTEXT, { optional: true });
|
|
913
1038
|
buttonClass = computed(() => 'inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors outline-none focus-visible:ring-2 disabled:opacity-50 disabled:pointer-events-none ' +
|
|
914
|
-
(BUTTON_VARIANTS[this.variant()] ?? BUTTON_VARIANTS['primary']),
|
|
915
|
-
|
|
916
|
-
static
|
|
1039
|
+
(BUTTON_VARIANTS[this.variant()] ?? BUTTON_VARIANTS['primary']), /* @ts-ignore */
|
|
1040
|
+
...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
|
|
1041
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1042
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.8", type: JrButton, isStandalone: true, selector: "jr-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-block" }, ngImport: i0, template: `
|
|
917
1043
|
<button
|
|
918
1044
|
type="button"
|
|
919
1045
|
[class]="buttonClass()"
|
|
920
1046
|
[disabled]="disabled()"
|
|
921
|
-
(click)="ctx
|
|
1047
|
+
(click)="ctx?.emit('press')"
|
|
922
1048
|
>
|
|
923
1049
|
{{ label() }}<ng-content />
|
|
924
1050
|
</button>
|
|
925
1051
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
926
1052
|
}
|
|
927
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1053
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.8", ngImport: i0, type: JrButton, decorators: [{
|
|
928
1054
|
type: Component,
|
|
929
1055
|
args: [{
|
|
930
1056
|
selector: 'jr-button',
|
|
@@ -933,7 +1059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
933
1059
|
type="button"
|
|
934
1060
|
[class]="buttonClass()"
|
|
935
1061
|
[disabled]="disabled()"
|
|
936
|
-
(click)="ctx
|
|
1062
|
+
(click)="ctx?.emit('press')"
|
|
937
1063
|
>
|
|
938
1064
|
{{ label() }}<ng-content />
|
|
939
1065
|
</button>
|