@area8975/ui 0.1.1-dev.12 → 0.1.1-dev.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/area8975-ui.mjs +1452 -297
- package/fesm2022/area8975-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/theme.css +66 -0
- package/types/area8975-ui.d.ts +412 -57
package/fesm2022/area8975-ui.mjs
CHANGED
|
@@ -1,10 +1,77 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, linkedSignal, model, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
|
|
2
|
+
import { ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideAppInitializer, signal, untracked, viewChild } from "@angular/core";
|
|
3
|
+
import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
|
|
3
4
|
import { NgIcon } from "@ng-icons/core";
|
|
4
|
-
import { NgTemplateOutlet } from "@angular/common";
|
|
5
5
|
import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
|
|
6
6
|
import { Subject, catchError, debounceTime, of, skip, switchMap } from "rxjs";
|
|
7
7
|
import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
|
|
8
|
+
const UI_FORMAT_DEFAULTS = {
|
|
9
|
+
currency: "GBP",
|
|
10
|
+
locale: "en-GB"
|
|
11
|
+
};
|
|
12
|
+
const UI_FORMAT = new InjectionToken("UI_FORMAT", {
|
|
13
|
+
providedIn: "root",
|
|
14
|
+
factory: () => UI_FORMAT_DEFAULTS
|
|
15
|
+
});
|
|
16
|
+
function provideUiFormat(format) {
|
|
17
|
+
return {
|
|
18
|
+
provide: UI_FORMAT,
|
|
19
|
+
useValue: {
|
|
20
|
+
...UI_FORMAT_DEFAULTS,
|
|
21
|
+
...format
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
function injectMoneyFormatter(options = {}) {
|
|
26
|
+
const { currency, locale } = inject(UI_FORMAT);
|
|
27
|
+
const formatter = new Intl.NumberFormat(locale, {
|
|
28
|
+
style: "currency",
|
|
29
|
+
currency,
|
|
30
|
+
...options
|
|
31
|
+
});
|
|
32
|
+
return (value) => formatter.format(value);
|
|
33
|
+
}
|
|
34
|
+
var UiDarkClass = class UiDarkClass {
|
|
35
|
+
isDark = signal(false, ...ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []);
|
|
36
|
+
constructor() {
|
|
37
|
+
const root = inject(DOCUMENT).documentElement;
|
|
38
|
+
const read = () => this.isDark.set(root.classList.contains("dark"));
|
|
39
|
+
read();
|
|
40
|
+
if (typeof MutationObserver === "undefined") return;
|
|
41
|
+
const observer = new MutationObserver(read);
|
|
42
|
+
observer.observe(root, {
|
|
43
|
+
attributes: true,
|
|
44
|
+
attributeFilter: ["class"]
|
|
45
|
+
});
|
|
46
|
+
inject(DestroyRef).onDestroy(() => observer.disconnect());
|
|
47
|
+
}
|
|
48
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
49
|
+
minVersion: "12.0.0",
|
|
50
|
+
version: "22.2.1",
|
|
51
|
+
ngImport: i0,
|
|
52
|
+
type: UiDarkClass,
|
|
53
|
+
deps: [],
|
|
54
|
+
target: i0.ɵɵFactoryTarget.Injectable
|
|
55
|
+
});
|
|
56
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({
|
|
57
|
+
minVersion: "12.0.0",
|
|
58
|
+
version: "22.2.1",
|
|
59
|
+
ngImport: i0,
|
|
60
|
+
type: UiDarkClass,
|
|
61
|
+
providedIn: "root"
|
|
62
|
+
});
|
|
63
|
+
};
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
65
|
+
minVersion: "12.0.0",
|
|
66
|
+
version: "22.2.1",
|
|
67
|
+
ngImport: i0,
|
|
68
|
+
type: UiDarkClass,
|
|
69
|
+
decorators: [{
|
|
70
|
+
type: Injectable,
|
|
71
|
+
args: [{ providedIn: "root" }]
|
|
72
|
+
}],
|
|
73
|
+
ctorParameters: () => []
|
|
74
|
+
});
|
|
8
75
|
const CHART_PALETTE = [
|
|
9
76
|
"#2a78d6",
|
|
10
77
|
"#eb6834",
|
|
@@ -15,7 +82,17 @@ const CHART_PALETTE = [
|
|
|
15
82
|
"#4a3aa7",
|
|
16
83
|
"#e34948"
|
|
17
84
|
];
|
|
18
|
-
|
|
85
|
+
const CHART_PALETTE_DARK = [
|
|
86
|
+
"#2a78d6",
|
|
87
|
+
"#eb6834",
|
|
88
|
+
"#1baf7a",
|
|
89
|
+
"#eda100",
|
|
90
|
+
"#e87ba4",
|
|
91
|
+
"#2e9e2e",
|
|
92
|
+
"#8a7cf0",
|
|
93
|
+
"#e34948"
|
|
94
|
+
];
|
|
95
|
+
const CHART_MAX_SERIES = CHART_PALETTE.length;
|
|
19
96
|
const CHART_MAX_LINE_SERIES = CHART_PALETTE.length * 2;
|
|
20
97
|
const CHART_INK = {
|
|
21
98
|
text: "#1e2939",
|
|
@@ -24,26 +101,38 @@ const CHART_INK = {
|
|
|
24
101
|
surface: "#ffffff",
|
|
25
102
|
context: "#d1d5dc"
|
|
26
103
|
};
|
|
27
|
-
|
|
28
|
-
|
|
104
|
+
const CHART_INK_DARK = {
|
|
105
|
+
text: "#e5e5e5",
|
|
106
|
+
muted: "#a1a1a1",
|
|
107
|
+
grid: "#404040",
|
|
108
|
+
surface: "#262626",
|
|
109
|
+
context: "#525252"
|
|
110
|
+
};
|
|
111
|
+
function chartInk(dark) {
|
|
112
|
+
return dark ? CHART_INK_DARK : CHART_INK;
|
|
29
113
|
}
|
|
30
|
-
function
|
|
114
|
+
function chartColour(index, dark = false) {
|
|
115
|
+
return (dark ? CHART_PALETTE_DARK : CHART_PALETTE)[index] ?? chartInk(dark).context;
|
|
116
|
+
}
|
|
117
|
+
function chartSeriesStyle(index, dashes, dark = false) {
|
|
31
118
|
if (dashes && index >= CHART_PALETTE.length && index < CHART_MAX_LINE_SERIES) return {
|
|
32
|
-
colour:
|
|
119
|
+
colour: chartColour(index - CHART_PALETTE.length, dark),
|
|
33
120
|
dashed: true
|
|
34
121
|
};
|
|
35
122
|
return {
|
|
36
|
-
colour: chartColour(index),
|
|
123
|
+
colour: chartColour(index, dark),
|
|
37
124
|
dashed: false
|
|
38
125
|
};
|
|
39
126
|
}
|
|
40
|
-
const defaultFormatter = (value) => new Intl.NumberFormat("en-GB").format(value);
|
|
41
127
|
var UiAxisChartBase = class UiAxisChartBase {
|
|
128
|
+
uiFormat = inject(UI_FORMAT);
|
|
129
|
+
dark = inject(UiDarkClass).isDark;
|
|
130
|
+
ink = computed(() => chartInk(this.dark()), ...ngDevMode ? [{ debugName: "ink" }] : /* istanbul ignore next */ []);
|
|
42
131
|
series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
|
|
43
132
|
categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
|
|
44
133
|
ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
45
134
|
height = input(300, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
|
|
46
|
-
valueFormatter = input(
|
|
135
|
+
valueFormatter = input(numberFormatter(this.uiFormat.locale), ...ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []);
|
|
47
136
|
categoryLabel = input("Category", ...ngDevMode ? [{ debugName: "categoryLabel" }] : /* istanbul ignore next */ []);
|
|
48
137
|
loading = input(false, {
|
|
49
138
|
...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
|
|
@@ -56,39 +145,49 @@ var UiAxisChartBase = class UiAxisChartBase {
|
|
|
56
145
|
});
|
|
57
146
|
options = input(null, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
58
147
|
highlight = input(null, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
|
|
148
|
+
highlightKeepsColours = input(false, {
|
|
149
|
+
...ngDevMode ? { debugName: "highlightKeepsColours" } : /* istanbul ignore next */ {},
|
|
150
|
+
transform: booleanAttribute
|
|
151
|
+
});
|
|
59
152
|
legend = input("auto", ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
|
|
60
153
|
hiddenSeries = signal([], ...ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []);
|
|
61
154
|
emphasis = signal(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
|
|
62
155
|
supportsDashes = false;
|
|
156
|
+
apexHeight = computed(() => {
|
|
157
|
+
const height = this.height();
|
|
158
|
+
return height === "fill" ? "100%" : height;
|
|
159
|
+
}, ...ngDevMode ? [{ debugName: "apexHeight" }] : /* istanbul ignore next */ []);
|
|
63
160
|
isEmpty = computed(() => !this.series().some((item) => item.data.some((value) => value !== null)), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
64
161
|
isMuted = computed(() => {
|
|
65
162
|
const highlight = this.highlight();
|
|
66
163
|
return this.series().map((item) => !!highlight && !highlight.includes(item.name));
|
|
67
164
|
}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
|
|
165
|
+
colourOrder = computed(() => this.highlightKeepsColours() ? null : this.highlight(), ...ngDevMode ? [{ debugName: "colourOrder" }] : /* istanbul ignore next */ []);
|
|
68
166
|
styles = computed(() => {
|
|
69
|
-
const
|
|
167
|
+
const order = this.colourOrder();
|
|
70
168
|
const muted = this.isMuted();
|
|
71
169
|
return this.series().map((item, index) => {
|
|
170
|
+
const dashed = this.supportsDashes && !!item.dashed;
|
|
72
171
|
if (muted[index]) return {
|
|
73
|
-
colour:
|
|
74
|
-
dashed
|
|
172
|
+
colour: this.ink().context,
|
|
173
|
+
dashed
|
|
174
|
+
};
|
|
175
|
+
const style = chartSeriesStyle(order ? order.indexOf(item.name) : index, this.supportsDashes, this.dark());
|
|
176
|
+
return {
|
|
177
|
+
colour: item.colour ?? style.colour,
|
|
178
|
+
dashed: style.dashed || dashed
|
|
75
179
|
};
|
|
76
|
-
const style = chartSeriesStyle(highlight ? highlight.indexOf(item.name) : index, this.supportsDashes);
|
|
77
|
-
return item.colour ? {
|
|
78
|
-
...style,
|
|
79
|
-
colour: item.colour
|
|
80
|
-
} : style;
|
|
81
180
|
});
|
|
82
181
|
}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
|
|
83
182
|
colours = computed(() => this.styles().map((style) => style.colour), ...ngDevMode ? [{ debugName: "colours" }] : /* istanbul ignore next */ []);
|
|
84
183
|
dashed = computed(() => this.styles().map((style) => style.dashed), ...ngDevMode ? [{ debugName: "dashed" }] : /* istanbul ignore next */ []);
|
|
85
184
|
legendItems = computed(() => {
|
|
86
|
-
const
|
|
185
|
+
const order = this.colourOrder();
|
|
87
186
|
const items = this.series().map((item, index) => ({
|
|
88
187
|
name: item.name,
|
|
89
188
|
...this.styles()[index]
|
|
90
189
|
})).filter((_, index) => !this.isMuted()[index]);
|
|
91
|
-
return
|
|
190
|
+
return order ? items.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)) : items;
|
|
92
191
|
}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
|
|
93
192
|
legendNote = computed(() => {
|
|
94
193
|
const count = this.isMuted().filter(Boolean).length;
|
|
@@ -188,6 +287,13 @@ var UiAxisChartBase = class UiAxisChartBase {
|
|
|
188
287
|
isRequired: false,
|
|
189
288
|
transformFunction: null
|
|
190
289
|
},
|
|
290
|
+
highlightKeepsColours: {
|
|
291
|
+
classPropertyName: "highlightKeepsColours",
|
|
292
|
+
publicName: "highlightKeepsColours",
|
|
293
|
+
isSignal: true,
|
|
294
|
+
isRequired: false,
|
|
295
|
+
transformFunction: null
|
|
296
|
+
},
|
|
191
297
|
legend: {
|
|
192
298
|
classPropertyName: "legend",
|
|
193
299
|
publicName: "legend",
|
|
@@ -294,6 +400,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
294
400
|
required: false
|
|
295
401
|
}]
|
|
296
402
|
}],
|
|
403
|
+
highlightKeepsColours: [{
|
|
404
|
+
type: i0.Input,
|
|
405
|
+
args: [{
|
|
406
|
+
isSignal: true,
|
|
407
|
+
alias: "highlightKeepsColours",
|
|
408
|
+
required: false
|
|
409
|
+
}]
|
|
410
|
+
}],
|
|
297
411
|
legend: [{
|
|
298
412
|
type: i0.Input,
|
|
299
413
|
args: [{
|
|
@@ -304,15 +418,22 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
304
418
|
}]
|
|
305
419
|
}
|
|
306
420
|
});
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
}
|
|
311
|
-
function
|
|
421
|
+
function numberFormatter(locale) {
|
|
422
|
+
const formatter = new Intl.NumberFormat(locale);
|
|
423
|
+
return (value) => formatter.format(value);
|
|
424
|
+
}
|
|
425
|
+
function chartAxisLabels(ink) {
|
|
426
|
+
return { style: {
|
|
427
|
+
colors: ink.muted,
|
|
428
|
+
fontSize: "12px"
|
|
429
|
+
} };
|
|
430
|
+
}
|
|
431
|
+
function baseChartOptions(ink) {
|
|
432
|
+
const labels = chartAxisLabels(ink);
|
|
312
433
|
return {
|
|
313
434
|
chart: {
|
|
314
435
|
fontFamily: "inherit",
|
|
315
|
-
foreColor:
|
|
436
|
+
foreColor: ink.muted,
|
|
316
437
|
parentHeightOffset: 0,
|
|
317
438
|
redrawOnParentResize: true,
|
|
318
439
|
toolbar: { show: false },
|
|
@@ -328,7 +449,7 @@ function baseChartOptions() {
|
|
|
328
449
|
opacity: 1
|
|
329
450
|
},
|
|
330
451
|
grid: {
|
|
331
|
-
borderColor:
|
|
452
|
+
borderColor: ink.grid,
|
|
332
453
|
strokeDashArray: 0,
|
|
333
454
|
padding: {
|
|
334
455
|
top: 0,
|
|
@@ -341,15 +462,15 @@ function baseChartOptions() {
|
|
|
341
462
|
xaxis: {
|
|
342
463
|
axisBorder: {
|
|
343
464
|
show: true,
|
|
344
|
-
color:
|
|
465
|
+
color: ink.grid
|
|
345
466
|
},
|
|
346
467
|
axisTicks: { show: false },
|
|
347
|
-
labels
|
|
468
|
+
labels
|
|
348
469
|
},
|
|
349
470
|
yaxis: {
|
|
350
471
|
axisBorder: { show: false },
|
|
351
472
|
axisTicks: { show: false },
|
|
352
|
-
labels
|
|
473
|
+
labels
|
|
353
474
|
},
|
|
354
475
|
states: {
|
|
355
476
|
hover: { filter: { type: "lighten" } },
|
|
@@ -360,7 +481,7 @@ function baseChartOptions() {
|
|
|
360
481
|
function mergeChartOptions(base, overrides) {
|
|
361
482
|
return overrides ? deepMerge(base, overrides) : base;
|
|
362
483
|
}
|
|
363
|
-
function chartTooltipHtml(title, rows, footer = "") {
|
|
484
|
+
function chartTooltipHtml(title, rows, footer = "", total) {
|
|
364
485
|
const items = rows.map((row) => `
|
|
365
486
|
<div class="ui-chart-tooltip-row ui-text-body-alt">
|
|
366
487
|
<span
|
|
@@ -375,6 +496,12 @@ function chartTooltipHtml(title, rows, footer = "") {
|
|
|
375
496
|
<div class="ui-chart-tooltip">
|
|
376
497
|
${title ? `<div class="ui-chart-tooltip-title ui-text-caption">${escapeHtml(title)}</div>` : ""}
|
|
377
498
|
${items}
|
|
499
|
+
${total ? `
|
|
500
|
+
<div class="ui-chart-tooltip-row ui-chart-tooltip-total ui-text-body-alt">
|
|
501
|
+
<span class="ui-chart-tooltip-name">${escapeHtml(total.name)}</span>
|
|
502
|
+
<span class="ui-chart-tooltip-value">${escapeHtml(total.value)}</span>
|
|
503
|
+
</div>
|
|
504
|
+
` : ""}
|
|
378
505
|
${footer ? `<div class="ui-chart-tooltip-footer ui-text-caption">${escapeHtml(footer)}</div>` : ""}
|
|
379
506
|
</div>
|
|
380
507
|
`;
|
|
@@ -401,13 +528,11 @@ var UiSkeletonComponent = class UiSkeletonComponent {
|
|
|
401
528
|
...ngDevMode ? { debugName: "lines" } : /* istanbul ignore next */ {},
|
|
402
529
|
transform: numberAttribute
|
|
403
530
|
});
|
|
404
|
-
classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
405
531
|
lineIndexes = computed(() => Array.from({ length: Math.max(1, Math.floor(this.lines())) }, (_, index) => index), ...ngDevMode ? [{ debugName: "lineIndexes" }] : /* istanbul ignore next */ []);
|
|
406
532
|
generatedClasses = computed(() => [
|
|
407
533
|
"ui-skeleton",
|
|
408
534
|
`ui-skeleton--${this.shape()}`,
|
|
409
|
-
this.animated() ? "ui-skeleton--animated" : ""
|
|
410
|
-
this.classes()
|
|
535
|
+
this.animated() ? "ui-skeleton--animated" : ""
|
|
411
536
|
].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
412
537
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
413
538
|
minVersion: "12.0.0",
|
|
@@ -444,13 +569,6 @@ var UiSkeletonComponent = class UiSkeletonComponent {
|
|
|
444
569
|
isSignal: true,
|
|
445
570
|
isRequired: false,
|
|
446
571
|
transformFunction: null
|
|
447
|
-
},
|
|
448
|
-
classes: {
|
|
449
|
-
classPropertyName: "classes",
|
|
450
|
-
publicName: "classes",
|
|
451
|
-
isSignal: true,
|
|
452
|
-
isRequired: false,
|
|
453
|
-
transformFunction: null
|
|
454
572
|
}
|
|
455
573
|
},
|
|
456
574
|
host: {
|
|
@@ -459,7 +577,7 @@ var UiSkeletonComponent = class UiSkeletonComponent {
|
|
|
459
577
|
},
|
|
460
578
|
ngImport: i0,
|
|
461
579
|
template: "@if (shape() === 'text') {\n @for (index of lineIndexes(); track index) {\n <span class=\"ui-skeleton-line\"></span>\n }\n} @else {\n <span class=\"ui-skeleton-block\"></span>\n}\n",
|
|
462
|
-
styles: [":host{display:block}@media(prefers-reduced-motion:no-preference){:host(.ui-skeleton--animated){animation:ui-skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}.ui-skeleton-line,.ui-skeleton-block{display:block;background-color:var(--
|
|
580
|
+
styles: [":host{display:block}@media(prefers-reduced-motion:no-preference){:host(.ui-skeleton--animated){animation:ui-skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}.ui-skeleton-line,.ui-skeleton-block{display:block;background-color:var(--surface-1)}:host(.ui-skeleton--text){display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 3)}.ui-skeleton-line{height:calc(var(--spacing, .25rem) * 4);width:100%;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-skeleton-line:last-child:not(:first-child){width:calc(3 / 5 * 100%)}.ui-skeleton-block{width:100%;height:100%}:host(.ui-skeleton--circle) .ui-skeleton-block{border-radius:var(--radius-full, calc(infinity * 1px))}:host(.ui-skeleton--rect) .ui-skeleton-block{border-radius:var(--radius-lg, .5rem)}@keyframes ui-skeleton-pulse{50%{opacity:.5}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
463
581
|
});
|
|
464
582
|
};
|
|
465
583
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -476,7 +594,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
476
594
|
"[class]": "generatedClasses()"
|
|
477
595
|
},
|
|
478
596
|
template: "@if (shape() === 'text') {\n @for (index of lineIndexes(); track index) {\n <span class=\"ui-skeleton-line\"></span>\n }\n} @else {\n <span class=\"ui-skeleton-block\"></span>\n}\n",
|
|
479
|
-
styles: [":host{display:block}@media(prefers-reduced-motion:no-preference){:host(.ui-skeleton--animated){animation:ui-skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}.ui-skeleton-line,.ui-skeleton-block{display:block;background-color:var(--
|
|
597
|
+
styles: [":host{display:block}@media(prefers-reduced-motion:no-preference){:host(.ui-skeleton--animated){animation:ui-skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}.ui-skeleton-line,.ui-skeleton-block{display:block;background-color:var(--surface-1)}:host(.ui-skeleton--text){display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 3)}.ui-skeleton-line{height:calc(var(--spacing, .25rem) * 4);width:100%;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-skeleton-line:last-child:not(:first-child){width:calc(3 / 5 * 100%)}.ui-skeleton-block{width:100%;height:100%}:host(.ui-skeleton--circle) .ui-skeleton-block{border-radius:var(--radius-full, calc(infinity * 1px))}:host(.ui-skeleton--rect) .ui-skeleton-block{border-radius:var(--radius-lg, .5rem)}@keyframes ui-skeleton-pulse{50%{opacity:.5}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
480
598
|
}]
|
|
481
599
|
}],
|
|
482
600
|
propDecorators: {
|
|
@@ -503,14 +621,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
503
621
|
alias: "lines",
|
|
504
622
|
required: false
|
|
505
623
|
}]
|
|
506
|
-
}],
|
|
507
|
-
classes: [{
|
|
508
|
-
type: i0.Input,
|
|
509
|
-
args: [{
|
|
510
|
-
isSignal: true,
|
|
511
|
-
alias: "classes",
|
|
512
|
-
required: false
|
|
513
|
-
}]
|
|
514
624
|
}]
|
|
515
625
|
}
|
|
516
626
|
});
|
|
@@ -518,6 +628,7 @@ var UiChartLegendComponent = class UiChartLegendComponent {
|
|
|
518
628
|
items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
|
|
519
629
|
note = input("", ...ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []);
|
|
520
630
|
for = input(null, ...ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []);
|
|
631
|
+
itemsWith = input(null, ...ngDevMode ? [{ debugName: "itemsWith" }] : /* istanbul ignore next */ []);
|
|
521
632
|
hidden = model([], ...ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []);
|
|
522
633
|
toggleable = input(false, {
|
|
523
634
|
...ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {},
|
|
@@ -527,7 +638,12 @@ var UiChartLegendComponent = class UiChartLegendComponent {
|
|
|
527
638
|
hovered = signal(null, ...ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []);
|
|
528
639
|
focused = signal(null, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
|
|
529
640
|
pointedAt = computed(() => this.hovered() ?? this.focused(), ...ngDevMode ? [{ debugName: "pointedAt" }] : /* istanbul ignore next */ []);
|
|
530
|
-
shownItems = computed(() =>
|
|
641
|
+
shownItems = computed(() => {
|
|
642
|
+
const source = this.for();
|
|
643
|
+
if (!source) return this.items();
|
|
644
|
+
const adjust = this.itemsWith();
|
|
645
|
+
return adjust ? adjust(source.legendItems()) : source.legendItems();
|
|
646
|
+
}, ...ngDevMode ? [{ debugName: "shownItems" }] : /* istanbul ignore next */ []);
|
|
531
647
|
shownNote = computed(() => this.for()?.legendNote() ?? this.note(), ...ngDevMode ? [{ debugName: "shownNote" }] : /* istanbul ignore next */ []);
|
|
532
648
|
hiddenNames = computed(() => this.for()?.hiddenSeries() ?? this.hidden(), ...ngDevMode ? [{ debugName: "hiddenNames" }] : /* istanbul ignore next */ []);
|
|
533
649
|
visibleCount = computed(() => this.shownItems().filter((item) => !this.hiddenNames().includes(item.name)).length, ...ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []);
|
|
@@ -596,6 +712,13 @@ var UiChartLegendComponent = class UiChartLegendComponent {
|
|
|
596
712
|
isRequired: false,
|
|
597
713
|
transformFunction: null
|
|
598
714
|
},
|
|
715
|
+
itemsWith: {
|
|
716
|
+
classPropertyName: "itemsWith",
|
|
717
|
+
publicName: "itemsWith",
|
|
718
|
+
isSignal: true,
|
|
719
|
+
isRequired: false,
|
|
720
|
+
transformFunction: null
|
|
721
|
+
},
|
|
599
722
|
hidden: {
|
|
600
723
|
classPropertyName: "hidden",
|
|
601
724
|
publicName: "hidden",
|
|
@@ -616,8 +739,8 @@ var UiChartLegendComponent = class UiChartLegendComponent {
|
|
|
616
739
|
focusChange: "focusChange"
|
|
617
740
|
},
|
|
618
741
|
ngImport: i0,
|
|
619
|
-
template: "<ul class=\"ui-chart-legend\" role=\"list\">\n @for (item of shownItems(); track item.name) {\n <li\n (mouseenter)=\"hover(item.name)\"\n (mouseleave)=\"hover(null)\"\n (focusin)=\"focus(item.name)\"\n (focusout)=\"focus(null)\"\n >\n @if (toggleable()) {\n <button\n type=\"button\"\n class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n [attr.aria-pressed]=\"!isHidden(item)\"\n [attr.aria-disabled]=\"isLocked(item) || null\"\n [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n (click)=\"toggle(item)\"\n >\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.name }}\n </button>\n } @else {\n <span class=\"ui-chart-legend-item ui-text-body-alt\">\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.name }}\n </span>\n }\n </li>\n }\n</ul>\n\n@if (shownNote()) {\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
|
|
620
|
-
styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--
|
|
742
|
+
template: "<ul class=\"ui-chart-legend\" role=\"list\">\n @for (item of shownItems(); track item.name) {\n <li\n (mouseenter)=\"hover(item.name)\"\n (mouseleave)=\"hover(null)\"\n (focusin)=\"focus(item.name)\"\n (focusout)=\"focus(null)\"\n >\n @if (toggleable()) {\n <button\n type=\"button\"\n class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n [attr.aria-pressed]=\"!isHidden(item)\"\n [attr.aria-disabled]=\"isLocked(item) || null\"\n [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n (click)=\"toggle(item)\"\n >\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.label ?? item.name }}\n </button>\n } @else {\n <span class=\"ui-chart-legend-item ui-text-body-alt\">\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.label ?? item.name }}\n </span>\n }\n </li>\n }\n</ul>\n\n@if (shownNote()) {\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
|
|
743
|
+
styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--foreground)}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--surface)}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--muted-foreground-1)}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
621
744
|
});
|
|
622
745
|
};
|
|
623
746
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -629,8 +752,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
629
752
|
type: Component,
|
|
630
753
|
args: [{
|
|
631
754
|
selector: "ui-chart-legend",
|
|
632
|
-
template: "<ul class=\"ui-chart-legend\" role=\"list\">\n @for (item of shownItems(); track item.name) {\n <li\n (mouseenter)=\"hover(item.name)\"\n (mouseleave)=\"hover(null)\"\n (focusin)=\"focus(item.name)\"\n (focusout)=\"focus(null)\"\n >\n @if (toggleable()) {\n <button\n type=\"button\"\n class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n [attr.aria-pressed]=\"!isHidden(item)\"\n [attr.aria-disabled]=\"isLocked(item) || null\"\n [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n (click)=\"toggle(item)\"\n >\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.name }}\n </button>\n } @else {\n <span class=\"ui-chart-legend-item ui-text-body-alt\">\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.name }}\n </span>\n }\n </li>\n }\n</ul>\n\n@if (shownNote()) {\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
|
|
633
|
-
styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--
|
|
755
|
+
template: "<ul class=\"ui-chart-legend\" role=\"list\">\n @for (item of shownItems(); track item.name) {\n <li\n (mouseenter)=\"hover(item.name)\"\n (mouseleave)=\"hover(null)\"\n (focusin)=\"focus(item.name)\"\n (focusout)=\"focus(null)\"\n >\n @if (toggleable()) {\n <button\n type=\"button\"\n class=\"ui-chart-legend-item ui-chart-legend-item--button ui-text-body-alt\"\n [attr.aria-pressed]=\"!isHidden(item)\"\n [attr.aria-disabled]=\"isLocked(item) || null\"\n [attr.data-hidden]=\"isHidden(item) ? '' : null\"\n (click)=\"toggle(item)\"\n >\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.label ?? item.name }}\n </button>\n } @else {\n <span class=\"ui-chart-legend-item ui-text-body-alt\">\n <span\n class=\"ui-chart-legend-key\"\n [class.ui-chart-legend-key--dashed]=\"item.dashed\"\n [style.--ui-chart-legend-colour]=\"item.colour\"\n ></span>\n {{ item.label ?? item.name }}\n </span>\n }\n </li>\n }\n</ul>\n\n@if (shownNote()) {\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{ shownNote() }}</span>\n}\n",
|
|
756
|
+
styles: ["@layer properties;:host{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend{display:flex;flex-wrap:wrap;column-gap:calc(var(--spacing, .25rem) * 4);row-gap:var(--spacing, .25rem)}.ui-chart-legend-item{display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1.5);color:var(--foreground)}.ui-chart-legend-item--button{margin-inline:calc(var(--spacing, .25rem) * -1.5);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-chart-legend-item--button:focus{--tw-outline-style: none;outline-style:none}.ui-chart-legend-item--button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-chart-legend-item--button:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-chart-legend-item--button:hover,.ui-chart-legend-item--button:focus-visible{background-color:var(--surface)}.ui-chart-legend-item--button[aria-disabled]{cursor:default}.ui-chart-legend-item--button[aria-disabled]:hover{background-color:transparent}.ui-chart-legend-key{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:2px;border-color:var(--ui-chart-legend-colour);background-color:var(--ui-chart-legend-colour)}.ui-chart-legend-key--dashed{height:0px;width:calc(var(--spacing, .25rem) * 4);border-radius:0;border-style:var(--tw-border-style);border-width:0px;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent}.ui-chart-legend-item[data-hidden]{color:var(--muted-foreground-1)}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key{background-color:transparent}.ui-chart-legend-item[data-hidden] .ui-chart-legend-key--dashed{opacity:40%}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
634
757
|
}]
|
|
635
758
|
}],
|
|
636
759
|
ctorParameters: () => [],
|
|
@@ -659,6 +782,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
659
782
|
required: false
|
|
660
783
|
}]
|
|
661
784
|
}],
|
|
785
|
+
itemsWith: [{
|
|
786
|
+
type: i0.Input,
|
|
787
|
+
args: [{
|
|
788
|
+
isSignal: true,
|
|
789
|
+
alias: "itemsWith",
|
|
790
|
+
required: false
|
|
791
|
+
}]
|
|
792
|
+
}],
|
|
662
793
|
hidden: [{
|
|
663
794
|
type: i0.Input,
|
|
664
795
|
args: [{
|
|
@@ -692,11 +823,17 @@ var UiChartComponent = class UiChartComponent {
|
|
|
692
823
|
canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
|
|
693
824
|
chart = signal(null, ...ngDevMode ? [{ debugName: "chart" }] : /* istanbul ignore next */ []);
|
|
694
825
|
destroyed = false;
|
|
826
|
+
drawnNames = [];
|
|
695
827
|
constructor() {
|
|
696
828
|
afterNextRender(async () => {
|
|
697
829
|
const { default: Apex } = await import("apexcharts");
|
|
698
830
|
if (this.destroyed) return;
|
|
699
831
|
const chart = new Apex(this.canvas().nativeElement, untracked(this.options));
|
|
832
|
+
chart.addEventListener("updated", () => {
|
|
833
|
+
this.applyHidden(chart);
|
|
834
|
+
this.applyEmphasis();
|
|
835
|
+
});
|
|
836
|
+
this.drawnNames = this.seriesNames();
|
|
700
837
|
await chart.render();
|
|
701
838
|
this.chart.set(chart);
|
|
702
839
|
this.applyHidden(chart);
|
|
@@ -705,10 +842,11 @@ var UiChartComponent = class UiChartComponent {
|
|
|
705
842
|
effect(() => {
|
|
706
843
|
const options = this.options();
|
|
707
844
|
const chart = this.chart();
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
845
|
+
if (!chart) return;
|
|
846
|
+
const names = this.seriesNames();
|
|
847
|
+
const reordered = names.length === this.drawnNames.length && names.some((name, index) => name !== this.drawnNames[index]) && names.every((name) => this.drawnNames.includes(name));
|
|
848
|
+
this.drawnNames = names;
|
|
849
|
+
chart.updateOptions(options, false, !reordered);
|
|
712
850
|
});
|
|
713
851
|
effect(() => {
|
|
714
852
|
this.emphasis();
|
|
@@ -728,6 +866,7 @@ var UiChartComponent = class UiChartComponent {
|
|
|
728
866
|
}
|
|
729
867
|
applyHidden(chart) {
|
|
730
868
|
const hidden = this.hiddenSeries();
|
|
869
|
+
if (!this.canvas().nativeElement.querySelector(".apexcharts-inner .apexcharts-series")) return;
|
|
731
870
|
for (const name of this.seriesNames()) {
|
|
732
871
|
if (!name) continue;
|
|
733
872
|
if (hidden.includes(name)) chart.hideSeries(name);
|
|
@@ -810,7 +949,7 @@ var UiChartComponent = class UiChartComponent {
|
|
|
810
949
|
></div>
|
|
811
950
|
`,
|
|
812
951
|
isInline: true,
|
|
813
|
-
styles: ["@layer properties;.ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-tooltip.apexcharts-theme-light{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--
|
|
952
|
+
styles: ["@layer properties;.ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-tooltip.apexcharts-theme-light{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-chart .apexcharts-series{transition:opacity .15s ease}.ui-chart .ui-chart-series--faded{opacity:.15}.ui-chart .apexcharts-yaxis-label,.ui-chart .apexcharts-xaxis-label{font-variant-numeric:tabular-nums}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
814
953
|
encapsulation: i0.ViewEncapsulation.None
|
|
815
954
|
});
|
|
816
955
|
};
|
|
@@ -833,7 +972,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
833
972
|
`,
|
|
834
973
|
encapsulation: ViewEncapsulation.None,
|
|
835
974
|
host: { class: "ui-chart" },
|
|
836
|
-
styles: ["@layer properties;.ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-tooltip.apexcharts-theme-light{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--
|
|
975
|
+
styles: ["@layer properties;.ui-chart{display:block;width:100%;min-width:0px;font-family:var(--font-body, \"Inter\", sans-serif)}.ui-chart .apexcharts-tooltip.apexcharts-theme-light{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-chart-tooltip{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-title{padding-bottom:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);color:var(--foreground)}.ui-chart-tooltip-total{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--border-line-2);padding-top:calc(var(--spacing, .25rem) * 2)}.ui-chart-tooltip-footer{padding-top:var(--spacing, .25rem);color:var(--muted-foreground-1)}.ui-chart-tooltip-dot{width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-dot--dashed{height:0px;width:calc(var(--spacing, .25rem) * 3);border-radius:0;border-top-style:var(--tw-border-style);border-top-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:transparent;border-color:var(--ui-chart-tooltip-colour)}.ui-chart-tooltip-value{margin-inline-start:auto;padding-inline-start:calc(var(--spacing, .25rem) * 3);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-chart .apexcharts-series{transition:opacity .15s ease}.ui-chart .ui-chart-series--faded{opacity:.15}.ui-chart .apexcharts-yaxis-label,.ui-chart .apexcharts-xaxis-label{font-variant-numeric:tabular-nums}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
837
976
|
}]
|
|
838
977
|
}],
|
|
839
978
|
ctorParameters: () => [],
|
|
@@ -975,7 +1114,7 @@ var UiChartTableComponent = class UiChartTableComponent {
|
|
|
975
1114
|
</div>
|
|
976
1115
|
`,
|
|
977
1116
|
isInline: true,
|
|
978
|
-
styles: ["@layer properties;.ui-chart-table{margin-top:calc(var(--spacing, .25rem) * 4);width:100%}.ui-chart-table th,.ui-chart-table td{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--
|
|
1117
|
+
styles: ["@layer properties;.ui-chart-table{margin-top:calc(var(--spacing, .25rem) * 4);width:100%}.ui-chart-table th,.ui-chart-table td{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--border-line-2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-chart-table thead th{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--muted-foreground-1)}.ui-chart-table tbody th{--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:var(--foreground)}.ui-chart-table td{text-align:right;color:var(--foreground);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-chart-table thead th:not(:first-child){text-align:right}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
979
1118
|
});
|
|
980
1119
|
};
|
|
981
1120
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -1013,7 +1152,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1013
1152
|
</table>
|
|
1014
1153
|
</div>
|
|
1015
1154
|
`,
|
|
1016
|
-
styles: ["@layer properties;.ui-chart-table{margin-top:calc(var(--spacing, .25rem) * 4);width:100%}.ui-chart-table th,.ui-chart-table td{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--
|
|
1155
|
+
styles: ["@layer properties;.ui-chart-table{margin-top:calc(var(--spacing, .25rem) * 4);width:100%}.ui-chart-table th,.ui-chart-table td{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--border-line-2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-chart-table thead th{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--muted-foreground-1)}.ui-chart-table tbody th{--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:var(--foreground)}.ui-chart-table td{text-align:right;color:var(--foreground);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-chart-table thead th:not(:first-child){text-align:right}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
1017
1156
|
}]
|
|
1018
1157
|
}],
|
|
1019
1158
|
propDecorators: {
|
|
@@ -1096,6 +1235,11 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1096
1235
|
transform: booleanAttribute
|
|
1097
1236
|
});
|
|
1098
1237
|
emphasis = model(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
|
|
1238
|
+
fill = computed(() => this.height() === "fill", ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
|
|
1239
|
+
fixedHeight = computed(() => {
|
|
1240
|
+
const height = this.height();
|
|
1241
|
+
return height === "fill" ? null : height;
|
|
1242
|
+
}, ...ngDevMode ? [{ debugName: "fixedHeight" }] : /* istanbul ignore next */ []);
|
|
1099
1243
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
1100
1244
|
minVersion: "12.0.0",
|
|
1101
1245
|
version: "22.2.1",
|
|
@@ -1228,18 +1372,27 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1228
1372
|
hiddenSeries: "hiddenSeriesChange",
|
|
1229
1373
|
emphasis: "emphasisChange"
|
|
1230
1374
|
},
|
|
1231
|
-
host: {
|
|
1375
|
+
host: {
|
|
1376
|
+
properties: {
|
|
1377
|
+
"class.block": "!fill()",
|
|
1378
|
+
"class.flex": "fill()",
|
|
1379
|
+
"class.flex-col": "fill()",
|
|
1380
|
+
"class.h-full": "fill()"
|
|
1381
|
+
},
|
|
1382
|
+
classAttribute: "relative w-full min-w-0"
|
|
1383
|
+
},
|
|
1232
1384
|
ngImport: i0,
|
|
1233
1385
|
template: `
|
|
1234
1386
|
@if (loading()) {
|
|
1235
|
-
<div [style.height.px]="
|
|
1387
|
+
<div [style.height.px]="fixedHeight()" [class.grow]="fill()" aria-busy="true">
|
|
1236
1388
|
<span class="sr-only">Loading chart</span>
|
|
1237
1389
|
<ui-skeleton shape="rect" class="size-full" />
|
|
1238
1390
|
</div>
|
|
1239
1391
|
} @else if (empty()) {
|
|
1240
1392
|
<div
|
|
1241
|
-
class="flex justify-center items-center border border-
|
|
1242
|
-
[
|
|
1393
|
+
class="flex justify-center items-center border border-line-2 border-dashed rounded-lg text-muted-foreground-1 ui-text-body-alt"
|
|
1394
|
+
[class.grow]="fill()"
|
|
1395
|
+
[style.height.px]="fixedHeight()"
|
|
1243
1396
|
>
|
|
1244
1397
|
{{ emptyText() }}
|
|
1245
1398
|
</div>
|
|
@@ -1247,7 +1400,7 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1247
1400
|
<!-- one series needs no legend, the chart's title already names it -->
|
|
1248
1401
|
@if (showLegend() && (legendItems().length > 1 || legendNote())) {
|
|
1249
1402
|
<ui-chart-legend
|
|
1250
|
-
class="mb-3"
|
|
1403
|
+
class="mb-3 shrink-0"
|
|
1251
1404
|
[items]="legendItems()"
|
|
1252
1405
|
[note]="legendNote()"
|
|
1253
1406
|
[(hidden)]="hiddenSeries"
|
|
@@ -1256,7 +1409,10 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1256
1409
|
/>
|
|
1257
1410
|
}
|
|
1258
1411
|
|
|
1412
|
+
<!-- min-h-0 so the drawn chart can't push its own height up, it only follows the space it's given -->
|
|
1259
1413
|
<ui-chart
|
|
1414
|
+
[class.grow]="fill()"
|
|
1415
|
+
[class.min-h-0]="fill()"
|
|
1260
1416
|
[options]="options()"
|
|
1261
1417
|
[ariaLabel]="ariaLabel()"
|
|
1262
1418
|
[hiddenSeries]="hiddenSeries()"
|
|
@@ -1307,6 +1463,7 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1307
1463
|
"items",
|
|
1308
1464
|
"note",
|
|
1309
1465
|
"for",
|
|
1466
|
+
"itemsWith",
|
|
1310
1467
|
"hidden",
|
|
1311
1468
|
"toggleable"
|
|
1312
1469
|
],
|
|
@@ -1319,8 +1476,7 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1319
1476
|
inputs: [
|
|
1320
1477
|
"shape",
|
|
1321
1478
|
"animated",
|
|
1322
|
-
"lines"
|
|
1323
|
-
"classes"
|
|
1479
|
+
"lines"
|
|
1324
1480
|
]
|
|
1325
1481
|
}
|
|
1326
1482
|
]
|
|
@@ -1337,14 +1493,15 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1337
1493
|
selector: "ui-chart-frame",
|
|
1338
1494
|
template: `
|
|
1339
1495
|
@if (loading()) {
|
|
1340
|
-
<div [style.height.px]="
|
|
1496
|
+
<div [style.height.px]="fixedHeight()" [class.grow]="fill()" aria-busy="true">
|
|
1341
1497
|
<span class="sr-only">Loading chart</span>
|
|
1342
1498
|
<ui-skeleton shape="rect" class="size-full" />
|
|
1343
1499
|
</div>
|
|
1344
1500
|
} @else if (empty()) {
|
|
1345
1501
|
<div
|
|
1346
|
-
class="flex justify-center items-center border border-
|
|
1347
|
-
[
|
|
1502
|
+
class="flex justify-center items-center border border-line-2 border-dashed rounded-lg text-muted-foreground-1 ui-text-body-alt"
|
|
1503
|
+
[class.grow]="fill()"
|
|
1504
|
+
[style.height.px]="fixedHeight()"
|
|
1348
1505
|
>
|
|
1349
1506
|
{{ emptyText() }}
|
|
1350
1507
|
</div>
|
|
@@ -1352,7 +1509,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1352
1509
|
<!-- one series needs no legend, the chart's title already names it -->
|
|
1353
1510
|
@if (showLegend() && (legendItems().length > 1 || legendNote())) {
|
|
1354
1511
|
<ui-chart-legend
|
|
1355
|
-
class="mb-3"
|
|
1512
|
+
class="mb-3 shrink-0"
|
|
1356
1513
|
[items]="legendItems()"
|
|
1357
1514
|
[note]="legendNote()"
|
|
1358
1515
|
[(hidden)]="hiddenSeries"
|
|
@@ -1361,7 +1518,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1361
1518
|
/>
|
|
1362
1519
|
}
|
|
1363
1520
|
|
|
1521
|
+
<!-- min-h-0 so the drawn chart can't push its own height up, it only follows the space it's given -->
|
|
1364
1522
|
<ui-chart
|
|
1523
|
+
[class.grow]="fill()"
|
|
1524
|
+
[class.min-h-0]="fill()"
|
|
1365
1525
|
[options]="options()"
|
|
1366
1526
|
[ariaLabel]="ariaLabel()"
|
|
1367
1527
|
[hiddenSeries]="hiddenSeries()"
|
|
@@ -1384,7 +1544,13 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1384
1544
|
UiChartLegendComponent,
|
|
1385
1545
|
UiSkeletonComponent
|
|
1386
1546
|
],
|
|
1387
|
-
host: {
|
|
1547
|
+
host: {
|
|
1548
|
+
class: "relative w-full min-w-0",
|
|
1549
|
+
"[class.block]": "!fill()",
|
|
1550
|
+
"[class.flex]": "fill()",
|
|
1551
|
+
"[class.flex-col]": "fill()",
|
|
1552
|
+
"[class.h-full]": "fill()"
|
|
1553
|
+
}
|
|
1388
1554
|
}]
|
|
1389
1555
|
}],
|
|
1390
1556
|
propDecorators: {
|
|
@@ -1525,22 +1691,39 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1525
1691
|
}
|
|
1526
1692
|
});
|
|
1527
1693
|
const MAX_BAR_THICKNESS = 24;
|
|
1694
|
+
const FADED_STRENGTH = .3;
|
|
1695
|
+
function fade(colour, ink) {
|
|
1696
|
+
const hex = /^#([0-9a-f]{6})$/i;
|
|
1697
|
+
const from = hex.exec(colour)?.[1];
|
|
1698
|
+
const to = hex.exec(ink.surface)?.[1];
|
|
1699
|
+
if (!from || !to) return ink.context;
|
|
1700
|
+
const channel = (value, at) => parseInt(value.slice(at, at + 2), 16);
|
|
1701
|
+
return `rgb(${[
|
|
1702
|
+
0,
|
|
1703
|
+
2,
|
|
1704
|
+
4
|
|
1705
|
+
].map((at) => Math.round(channel(from, at) * FADED_STRENGTH + channel(to, at) * .7)).join(", ")})`;
|
|
1706
|
+
}
|
|
1528
1707
|
var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
|
|
1529
1708
|
orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
|
|
1530
1709
|
stacked = input(false, {
|
|
1531
1710
|
...ngDevMode ? { debugName: "stacked" } : /* istanbul ignore next */ {},
|
|
1532
1711
|
transform: booleanAttribute
|
|
1533
1712
|
});
|
|
1713
|
+
highlightCategory = input(null, ...ngDevMode ? [{ debugName: "highlightCategory" }] : /* istanbul ignore next */ []);
|
|
1534
1714
|
chartOptions = computed(() => {
|
|
1535
|
-
const
|
|
1715
|
+
const ink = this.ink();
|
|
1716
|
+
const base = baseChartOptions(ink);
|
|
1717
|
+
const labels = chartAxisLabels(ink);
|
|
1536
1718
|
const horizontal = this.orientation() === "horizontal";
|
|
1537
1719
|
const format = this.valueFormatter();
|
|
1538
1720
|
const series = this.series();
|
|
1539
1721
|
const categories = this.categories();
|
|
1540
1722
|
const colours = this.colours();
|
|
1723
|
+
const picked = categories.indexOf(this.highlightCategory() ?? "");
|
|
1541
1724
|
const thickness = `${MAX_BAR_THICKNESS}px`;
|
|
1542
1725
|
const valueLabels = {
|
|
1543
|
-
...
|
|
1726
|
+
...labels,
|
|
1544
1727
|
formatter: format
|
|
1545
1728
|
};
|
|
1546
1729
|
return mergeChartOptions({
|
|
@@ -1548,10 +1731,10 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
|
|
|
1548
1731
|
chart: {
|
|
1549
1732
|
...base.chart,
|
|
1550
1733
|
type: "bar",
|
|
1551
|
-
height: this.
|
|
1734
|
+
height: this.apexHeight(),
|
|
1552
1735
|
stacked: this.stacked()
|
|
1553
1736
|
},
|
|
1554
|
-
colors: colours,
|
|
1737
|
+
colors: picked < 0 ? colours : colours.map((colour) => ({ dataPointIndex }) => dataPointIndex === picked ? colour : fade(colour, ink)),
|
|
1555
1738
|
series: series.map((item) => ({
|
|
1556
1739
|
name: item.name,
|
|
1557
1740
|
data: item.data
|
|
@@ -1566,26 +1749,44 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
|
|
|
1566
1749
|
stroke: {
|
|
1567
1750
|
show: true,
|
|
1568
1751
|
width: 2,
|
|
1569
|
-
colors: [
|
|
1752
|
+
colors: [ink.surface]
|
|
1570
1753
|
},
|
|
1571
1754
|
xaxis: {
|
|
1572
1755
|
...base.xaxis,
|
|
1573
1756
|
categories,
|
|
1574
1757
|
labels: horizontal ? {
|
|
1575
|
-
...
|
|
1758
|
+
...labels,
|
|
1576
1759
|
formatter: (value) => format(Number(value))
|
|
1577
|
-
} :
|
|
1760
|
+
} : labels
|
|
1578
1761
|
},
|
|
1579
1762
|
yaxis: {
|
|
1580
1763
|
...base.yaxis,
|
|
1581
|
-
labels: horizontal ?
|
|
1764
|
+
labels: horizontal ? labels : valueLabels
|
|
1582
1765
|
},
|
|
1583
1766
|
grid: {
|
|
1584
1767
|
...base.grid,
|
|
1585
1768
|
xaxis: { lines: { show: horizontal } },
|
|
1586
1769
|
yaxis: { lines: { show: !horizontal } }
|
|
1587
1770
|
},
|
|
1588
|
-
tooltip: {
|
|
1771
|
+
tooltip: this.stacked() ? {
|
|
1772
|
+
shared: true,
|
|
1773
|
+
intersect: false,
|
|
1774
|
+
custom: ({ dataPointIndex }) => {
|
|
1775
|
+
const rows = series.map((item, index) => ({
|
|
1776
|
+
colour: colours[index],
|
|
1777
|
+
name: item.name,
|
|
1778
|
+
raw: item.data[dataPointIndex] ?? null
|
|
1779
|
+
})).filter((row) => !this.hiddenSeries().includes(row.name));
|
|
1780
|
+
const values = rows.map((row) => row.raw).filter((value) => value !== null);
|
|
1781
|
+
return chartTooltipHtml(categories[dataPointIndex] ?? "", rows.map((row) => ({
|
|
1782
|
+
...row,
|
|
1783
|
+
value: this.formatValue(row.raw)
|
|
1784
|
+
})), "", {
|
|
1785
|
+
name: "Total",
|
|
1786
|
+
value: this.formatValue(values.length ? values.reduce((sum, value) => sum + value, 0) : null)
|
|
1787
|
+
});
|
|
1788
|
+
}
|
|
1789
|
+
} : {
|
|
1589
1790
|
shared: false,
|
|
1590
1791
|
intersect: true,
|
|
1591
1792
|
custom: ({ seriesIndex, dataPointIndex }) => chartTooltipHtml(categories[dataPointIndex] ?? "", [{
|
|
@@ -1624,6 +1825,13 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
|
|
|
1624
1825
|
isSignal: true,
|
|
1625
1826
|
isRequired: false,
|
|
1626
1827
|
transformFunction: null
|
|
1828
|
+
},
|
|
1829
|
+
highlightCategory: {
|
|
1830
|
+
classPropertyName: "highlightCategory",
|
|
1831
|
+
publicName: "highlightCategory",
|
|
1832
|
+
isSignal: true,
|
|
1833
|
+
isRequired: false,
|
|
1834
|
+
transformFunction: null
|
|
1627
1835
|
}
|
|
1628
1836
|
},
|
|
1629
1837
|
host: { classAttribute: "block w-full min-w-0" },
|
|
@@ -1686,6 +1894,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1686
1894
|
alias: "stacked",
|
|
1687
1895
|
required: false
|
|
1688
1896
|
}]
|
|
1897
|
+
}],
|
|
1898
|
+
highlightCategory: [{
|
|
1899
|
+
type: i0.Input,
|
|
1900
|
+
args: [{
|
|
1901
|
+
isSignal: true,
|
|
1902
|
+
alias: "highlightCategory",
|
|
1903
|
+
required: false
|
|
1904
|
+
}]
|
|
1689
1905
|
}]
|
|
1690
1906
|
}
|
|
1691
1907
|
});
|
|
@@ -1700,8 +1916,39 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
|
|
|
1700
1916
|
...ngDevMode ? { debugName: "showPoints" } : /* istanbul ignore next */ {},
|
|
1701
1917
|
transform: booleanAttribute
|
|
1702
1918
|
});
|
|
1919
|
+
projectedFrom = input(null, ...ngDevMode ? [{ debugName: "projectedFrom" }] : /* istanbul ignore next */ []);
|
|
1920
|
+
projectedLabel = input("Projected", ...ngDevMode ? [{ debugName: "projectedLabel" }] : /* istanbul ignore next */ []);
|
|
1921
|
+
projectedAnnotations = computed(() => {
|
|
1922
|
+
const from = this.projectedFrom();
|
|
1923
|
+
const categories = this.categories();
|
|
1924
|
+
const ink = this.ink();
|
|
1925
|
+
if (!from || !categories.includes(from)) return { xaxis: [] };
|
|
1926
|
+
return { xaxis: [{
|
|
1927
|
+
x: from,
|
|
1928
|
+
x2: categories[categories.length - 1],
|
|
1929
|
+
fillColor: ink.muted,
|
|
1930
|
+
opacity: .08,
|
|
1931
|
+
borderColor: "transparent",
|
|
1932
|
+
label: {
|
|
1933
|
+
text: this.projectedLabel(),
|
|
1934
|
+
position: "top",
|
|
1935
|
+
orientation: "horizontal",
|
|
1936
|
+
textAnchor: "start",
|
|
1937
|
+
borderWidth: 0,
|
|
1938
|
+
offsetX: 8,
|
|
1939
|
+
offsetY: 16,
|
|
1940
|
+
style: {
|
|
1941
|
+
background: "transparent",
|
|
1942
|
+
color: ink.muted,
|
|
1943
|
+
fontSize: "12px"
|
|
1944
|
+
}
|
|
1945
|
+
}
|
|
1946
|
+
}] };
|
|
1947
|
+
}, ...ngDevMode ? [{ debugName: "projectedAnnotations" }] : /* istanbul ignore next */ []);
|
|
1703
1948
|
chartOptions = computed(() => {
|
|
1704
|
-
const
|
|
1949
|
+
const ink = this.ink();
|
|
1950
|
+
const base = baseChartOptions(ink);
|
|
1951
|
+
const labels = chartAxisLabels(ink);
|
|
1705
1952
|
const series = this.series();
|
|
1706
1953
|
const categories = this.categories();
|
|
1707
1954
|
const colours = this.colours();
|
|
@@ -1713,8 +1960,9 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
|
|
|
1713
1960
|
chart: {
|
|
1714
1961
|
...base.chart,
|
|
1715
1962
|
type: "line",
|
|
1716
|
-
height: this.
|
|
1963
|
+
height: this.apexHeight()
|
|
1717
1964
|
},
|
|
1965
|
+
annotations: this.projectedAnnotations(),
|
|
1718
1966
|
colors: order.map((index) => colours[index]),
|
|
1719
1967
|
series: order.map((index) => ({
|
|
1720
1968
|
name: series[index].name,
|
|
@@ -1728,7 +1976,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
|
|
|
1728
1976
|
},
|
|
1729
1977
|
markers: {
|
|
1730
1978
|
size: this.showPoints() ? 4 : 0,
|
|
1731
|
-
strokeColors:
|
|
1979
|
+
strokeColors: ink.surface,
|
|
1732
1980
|
strokeWidth: 2,
|
|
1733
1981
|
hover: { size: 5 }
|
|
1734
1982
|
},
|
|
@@ -1737,7 +1985,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
|
|
|
1737
1985
|
categories,
|
|
1738
1986
|
tickAmount: categories.length > MAX_AXIS_LABELS ? MAX_AXIS_LABELS : void 0,
|
|
1739
1987
|
labels: {
|
|
1740
|
-
...
|
|
1988
|
+
...labels,
|
|
1741
1989
|
hideOverlappingLabels: true,
|
|
1742
1990
|
rotate: 0
|
|
1743
1991
|
},
|
|
@@ -1745,7 +1993,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
|
|
|
1745
1993
|
show: true,
|
|
1746
1994
|
width: 1,
|
|
1747
1995
|
stroke: {
|
|
1748
|
-
color:
|
|
1996
|
+
color: ink.grid,
|
|
1749
1997
|
width: 1,
|
|
1750
1998
|
dashArray: 0
|
|
1751
1999
|
}
|
|
@@ -1755,7 +2003,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
|
|
|
1755
2003
|
yaxis: {
|
|
1756
2004
|
...base.yaxis,
|
|
1757
2005
|
labels: {
|
|
1758
|
-
...
|
|
2006
|
+
...labels,
|
|
1759
2007
|
formatter: this.valueFormatter()
|
|
1760
2008
|
}
|
|
1761
2009
|
},
|
|
@@ -1820,6 +2068,20 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
|
|
|
1820
2068
|
isSignal: true,
|
|
1821
2069
|
isRequired: false,
|
|
1822
2070
|
transformFunction: null
|
|
2071
|
+
},
|
|
2072
|
+
projectedFrom: {
|
|
2073
|
+
classPropertyName: "projectedFrom",
|
|
2074
|
+
publicName: "projectedFrom",
|
|
2075
|
+
isSignal: true,
|
|
2076
|
+
isRequired: false,
|
|
2077
|
+
transformFunction: null
|
|
2078
|
+
},
|
|
2079
|
+
projectedLabel: {
|
|
2080
|
+
classPropertyName: "projectedLabel",
|
|
2081
|
+
publicName: "projectedLabel",
|
|
2082
|
+
isSignal: true,
|
|
2083
|
+
isRequired: false,
|
|
2084
|
+
transformFunction: null
|
|
1823
2085
|
}
|
|
1824
2086
|
},
|
|
1825
2087
|
host: { classAttribute: "block w-full min-w-0" },
|
|
@@ -1882,6 +2144,22 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1882
2144
|
alias: "showPoints",
|
|
1883
2145
|
required: false
|
|
1884
2146
|
}]
|
|
2147
|
+
}],
|
|
2148
|
+
projectedFrom: [{
|
|
2149
|
+
type: i0.Input,
|
|
2150
|
+
args: [{
|
|
2151
|
+
isSignal: true,
|
|
2152
|
+
alias: "projectedFrom",
|
|
2153
|
+
required: false
|
|
2154
|
+
}]
|
|
2155
|
+
}],
|
|
2156
|
+
projectedLabel: [{
|
|
2157
|
+
type: i0.Input,
|
|
2158
|
+
args: [{
|
|
2159
|
+
isSignal: true,
|
|
2160
|
+
alias: "projectedLabel",
|
|
2161
|
+
required: false
|
|
2162
|
+
}]
|
|
1885
2163
|
}]
|
|
1886
2164
|
}
|
|
1887
2165
|
});
|
|
@@ -1890,12 +2168,12 @@ const LineChartCurves = [
|
|
|
1890
2168
|
"smooth",
|
|
1891
2169
|
"stepline"
|
|
1892
2170
|
];
|
|
1893
|
-
const percentFormatter = new Intl.NumberFormat("en-GB", {
|
|
1894
|
-
style: "percent",
|
|
1895
|
-
maximumFractionDigits: 1
|
|
1896
|
-
});
|
|
1897
2171
|
var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
1898
2172
|
variant = input("pie", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
|
|
2173
|
+
percentFormatter = new Intl.NumberFormat(this.uiFormat.locale, {
|
|
2174
|
+
style: "percent",
|
|
2175
|
+
maximumFractionDigits: 1
|
|
2176
|
+
});
|
|
1899
2177
|
totalLabel = input("Total", ...ngDevMode ? [{ debugName: "totalLabel" }] : /* istanbul ignore next */ []);
|
|
1900
2178
|
values = computed(() => this.series()[0]?.data ?? [], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
|
|
1901
2179
|
isEmpty = computed(() => !this.values().some((value) => value !== null && value > 0), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
@@ -1907,9 +2185,9 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
|
1907
2185
|
const highlight = this.highlight();
|
|
1908
2186
|
const muted = this.isMuted();
|
|
1909
2187
|
return this.categories().map((name, index) => muted[index] ? {
|
|
1910
|
-
colour:
|
|
2188
|
+
colour: this.ink().context,
|
|
1911
2189
|
dashed: false
|
|
1912
|
-
} : chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false));
|
|
2190
|
+
} : chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false, this.dark()));
|
|
1913
2191
|
}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
|
|
1914
2192
|
legendItems = computed(() => {
|
|
1915
2193
|
const highlight = this.highlight();
|
|
@@ -1930,13 +2208,14 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
|
1930
2208
|
})).filter((slice) => !hidden.includes(slice.name));
|
|
1931
2209
|
}, ...ngDevMode ? [{ debugName: "slices" }] : /* istanbul ignore next */ []);
|
|
1932
2210
|
chartOptions = computed(() => {
|
|
1933
|
-
const
|
|
2211
|
+
const ink = this.ink();
|
|
2212
|
+
const base = baseChartOptions(ink);
|
|
1934
2213
|
const slices = this.slices();
|
|
1935
2214
|
const donut = this.variant() === "donut";
|
|
1936
2215
|
const total = slices.reduce((sum, slice) => sum + slice.value, 0);
|
|
1937
2216
|
const centreText = {
|
|
1938
2217
|
fontSize: "12px",
|
|
1939
|
-
color:
|
|
2218
|
+
color: ink.muted,
|
|
1940
2219
|
offsetY: -4
|
|
1941
2220
|
};
|
|
1942
2221
|
return mergeChartOptions({
|
|
@@ -1944,7 +2223,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
|
1944
2223
|
chart: {
|
|
1945
2224
|
...base.chart,
|
|
1946
2225
|
type: donut ? "donut" : "pie",
|
|
1947
|
-
height: this.
|
|
2226
|
+
height: this.apexHeight()
|
|
1948
2227
|
},
|
|
1949
2228
|
colors: slices.map((slice) => slice.colour),
|
|
1950
2229
|
labels: slices.map((slice) => slice.name),
|
|
@@ -1952,7 +2231,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
|
1952
2231
|
stroke: {
|
|
1953
2232
|
show: true,
|
|
1954
2233
|
width: 2,
|
|
1955
|
-
colors: [
|
|
2234
|
+
colors: [ink.surface]
|
|
1956
2235
|
},
|
|
1957
2236
|
states: {
|
|
1958
2237
|
...base.states,
|
|
@@ -1968,7 +2247,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
|
1968
2247
|
value: {
|
|
1969
2248
|
fontSize: "20px",
|
|
1970
2249
|
fontWeight: 600,
|
|
1971
|
-
color:
|
|
2250
|
+
color: ink.text,
|
|
1972
2251
|
offsetY: 4,
|
|
1973
2252
|
formatter: (value) => this.formatValue(Number(value))
|
|
1974
2253
|
},
|
|
@@ -1991,7 +2270,7 @@ var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
|
1991
2270
|
colour: slice.colour,
|
|
1992
2271
|
name: slice.name,
|
|
1993
2272
|
value: this.formatValue(slice.value)
|
|
1994
|
-
}], total ? `${percentFormatter.format(slice.value / total)} of total` : "") : "";
|
|
2273
|
+
}], total ? `${this.percentFormatter.format(slice.value / total)} of total` : "") : "";
|
|
1995
2274
|
}
|
|
1996
2275
|
}
|
|
1997
2276
|
}, this.options());
|
|
@@ -2194,7 +2473,7 @@ var UiCheckboxComponent = class UiCheckboxComponent {
|
|
|
2194
2473
|
} },
|
|
2195
2474
|
ngImport: i0,
|
|
2196
2475
|
template: "<input\n type=\"checkbox\"\n [class]=\"generatedClasses()\"\n [id]=\"id()\"\n [name]=\"name()\"\n [required]=\"required()\"\n [checked]=\"value()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (change)=\"toggle()\"\n/>\n",
|
|
2197
|
-
styles: ["@layer properties;:host{display:inline-flex}.ui-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);border-radius:.25rem;border-color:var(--
|
|
2476
|
+
styles: ["@layer properties;:host{display:inline-flex}.ui-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);border-radius:.25rem;border-color:var(--border-line-3);background-color:var(--layer);color:var(--color-primary-600, var(--color-blue-600))}.ui-checkbox:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-checkbox:focus{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox:focus{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-checkbox:disabled{opacity:50%}.ui-checkbox[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500));color:var(--color-danger-600, var(--color-red-600))}.ui-checkbox[data-invalid]:focus{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox[data-invalid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-checkbox[data-valid]{border-color:var(--color-success-500, var(--color-teal-500));color:var(--color-success-600, var(--color-teal-600))}.ui-checkbox[data-valid]:focus{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox[data-valid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
2198
2477
|
});
|
|
2199
2478
|
};
|
|
2200
2479
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -2211,7 +2490,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2211
2490
|
"[attr.name]": "null"
|
|
2212
2491
|
},
|
|
2213
2492
|
template: "<input\n type=\"checkbox\"\n [class]=\"generatedClasses()\"\n [id]=\"id()\"\n [name]=\"name()\"\n [required]=\"required()\"\n [checked]=\"value()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (change)=\"toggle()\"\n/>\n",
|
|
2214
|
-
styles: ["@layer properties;:host{display:inline-flex}.ui-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);border-radius:.25rem;border-color:var(--
|
|
2493
|
+
styles: ["@layer properties;:host{display:inline-flex}.ui-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);border-radius:.25rem;border-color:var(--border-line-3);background-color:var(--layer);color:var(--color-primary-600, var(--color-blue-600))}.ui-checkbox:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-checkbox:focus{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox:focus{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-checkbox:disabled{opacity:50%}.ui-checkbox[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500));color:var(--color-danger-600, var(--color-red-600))}.ui-checkbox[data-invalid]:focus{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox[data-invalid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-checkbox[data-valid]{border-color:var(--color-success-500, var(--color-teal-500));color:var(--color-success-600, var(--color-teal-600))}.ui-checkbox[data-valid]:focus{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox[data-valid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
2215
2494
|
}]
|
|
2216
2495
|
}],
|
|
2217
2496
|
propDecorators: {
|
|
@@ -2512,7 +2791,7 @@ var UiDropzoneComponent = class UiDropzoneComponent {
|
|
|
2512
2791
|
}],
|
|
2513
2792
|
ngImport: i0,
|
|
2514
2793
|
template: "<div\n class=\"ui-dropzone\"\n role=\"button\"\n [attr.id]=\"id() || null\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.data-dragging]=\"isDragging() ? '' : null\"\n [attr.data-invalid]=\"hasRejection() ? '' : null\"\n (click)=\"openPicker()\"\n (keydown)=\"handleKeydown($event)\"\n (dragenter)=\"handleDragEnter($event)\"\n (dragover)=\"handleDragOver($event)\"\n (dragleave)=\"handleDragLeave()\"\n (drop)=\"handleDrop($event)\"\n>\n <span class=\"ui-dropzone-icon\">\n <ng-icon [name]=\"icon()\" size=\"24\" class=\"shrink-0\" />\n </span>\n\n <span class=\"text-foreground ui-text-body\">\n {{ displayTitle() }}\n </span>\n\n @if (hint()) {\n <span class=\"text-muted-foreground-1 ui-text-caption\">\n {{ hint() }}\n </span>\n }\n</div>\n\n<input\n #picker\n type=\"file\"\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"handlePick($event)\"\n/>\n\n@if (files().length) {\n <div class=\"ui-dropzone-files\">\n <ul class=\"ui-dropzone-list\">\n @for (file of files(); track $index) {\n <li class=\"ui-dropzone-file\">\n <ng-icon\n name=\"heroDocument\"\n class=\"text-muted-foreground-1 shrink-0\"\n />\n <span class=\"text-foreground truncate ui-text-body\">\n {{ file.name }}\n </span>\n <span\n class=\"ms-auto text-muted-foreground-1 shrink-0 ui-text-caption\"\n >\n {{ file.size }}\n </span>\n </li>\n }\n </ul>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-dropzone-clear ui-text-caption\"\n (click)=\"clear()\"\n >\n {{ files().length > 1 ? 'Remove files' : 'Remove file' }}\n </button>\n }\n </div>\n}\n",
|
|
2515
|
-
styles: ["@layer properties
|
|
2794
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-dropzone{display:flex;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;row-gap:var(--spacing, .25rem);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--border-line-2);background-color:var(--layer);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-dropzone:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone:hover,.ui-dropzone:focus-visible{border-color:var(--color-primary-400, var(--color-blue-400))}.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in srgb,oklch(97% .014 254.604) 40%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in oklab,var(--color-primary-50, var(--color-blue-50)) 40%,transparent)}}.ui-dropzone[data-dragging]{border-color:var(--color-primary-500, var(--color-blue-500));background-color:var(--color-primary-50, var(--color-blue-50))}.ui-dropzone[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500))}.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-dropzone[aria-disabled]{pointer-events:none;cursor:not-allowed;opacity:50%}.ui-dropzone-icon{margin-bottom:var(--spacing, .25rem);display:inline-flex;width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--surface);color:var(--muted-foreground-1)}.ui-dropzone[data-dragging] .ui-dropzone-icon{background-color:var(--color-primary-100, var(--color-blue-100));color:var(--color-primary-600, var(--color-blue-600))}.ui-dropzone-files{display:flex;flex-direction:column;align-items:flex-end;row-gap:var(--spacing, .25rem)}.ui-dropzone-list{width:100%;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2)}:where(.ui-dropzone-list>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-dropzone-list>:not(:last-child)){border-color:var(--border-line-2)}.ui-dropzone-file{display:flex;min-width:0px;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-dropzone-clear{border-radius:.25rem;color:var(--muted-foreground-1)}.ui-dropzone-clear:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone-clear:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone-clear:hover,.ui-dropzone-clear:focus-visible{color:var(--color-danger-600, var(--color-red-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-divide-y-reverse: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
2516
2795
|
dependencies: [{
|
|
2517
2796
|
kind: "component",
|
|
2518
2797
|
type: NgIcon,
|
|
@@ -2538,7 +2817,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2538
2817
|
selector: "ui-dropzone",
|
|
2539
2818
|
imports: [NgIcon],
|
|
2540
2819
|
template: "<div\n class=\"ui-dropzone\"\n role=\"button\"\n [attr.id]=\"id() || null\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.data-dragging]=\"isDragging() ? '' : null\"\n [attr.data-invalid]=\"hasRejection() ? '' : null\"\n (click)=\"openPicker()\"\n (keydown)=\"handleKeydown($event)\"\n (dragenter)=\"handleDragEnter($event)\"\n (dragover)=\"handleDragOver($event)\"\n (dragleave)=\"handleDragLeave()\"\n (drop)=\"handleDrop($event)\"\n>\n <span class=\"ui-dropzone-icon\">\n <ng-icon [name]=\"icon()\" size=\"24\" class=\"shrink-0\" />\n </span>\n\n <span class=\"text-foreground ui-text-body\">\n {{ displayTitle() }}\n </span>\n\n @if (hint()) {\n <span class=\"text-muted-foreground-1 ui-text-caption\">\n {{ hint() }}\n </span>\n }\n</div>\n\n<input\n #picker\n type=\"file\"\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"handlePick($event)\"\n/>\n\n@if (files().length) {\n <div class=\"ui-dropzone-files\">\n <ul class=\"ui-dropzone-list\">\n @for (file of files(); track $index) {\n <li class=\"ui-dropzone-file\">\n <ng-icon\n name=\"heroDocument\"\n class=\"text-muted-foreground-1 shrink-0\"\n />\n <span class=\"text-foreground truncate ui-text-body\">\n {{ file.name }}\n </span>\n <span\n class=\"ms-auto text-muted-foreground-1 shrink-0 ui-text-caption\"\n >\n {{ file.size }}\n </span>\n </li>\n }\n </ul>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-dropzone-clear ui-text-caption\"\n (click)=\"clear()\"\n >\n {{ files().length > 1 ? 'Remove files' : 'Remove file' }}\n </button>\n }\n </div>\n}\n",
|
|
2541
|
-
styles: ["@layer properties
|
|
2820
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-dropzone{display:flex;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;row-gap:var(--spacing, .25rem);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--border-line-2);background-color:var(--layer);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-dropzone:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone:hover,.ui-dropzone:focus-visible{border-color:var(--color-primary-400, var(--color-blue-400))}.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in srgb,oklch(97% .014 254.604) 40%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in oklab,var(--color-primary-50, var(--color-blue-50)) 40%,transparent)}}.ui-dropzone[data-dragging]{border-color:var(--color-primary-500, var(--color-blue-500));background-color:var(--color-primary-50, var(--color-blue-50))}.ui-dropzone[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500))}.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-dropzone[aria-disabled]{pointer-events:none;cursor:not-allowed;opacity:50%}.ui-dropzone-icon{margin-bottom:var(--spacing, .25rem);display:inline-flex;width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--surface);color:var(--muted-foreground-1)}.ui-dropzone[data-dragging] .ui-dropzone-icon{background-color:var(--color-primary-100, var(--color-blue-100));color:var(--color-primary-600, var(--color-blue-600))}.ui-dropzone-files{display:flex;flex-direction:column;align-items:flex-end;row-gap:var(--spacing, .25rem)}.ui-dropzone-list{width:100%;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2)}:where(.ui-dropzone-list>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-dropzone-list>:not(:last-child)){border-color:var(--border-line-2)}.ui-dropzone-file{display:flex;min-width:0px;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-dropzone-clear{border-radius:.25rem;color:var(--muted-foreground-1)}.ui-dropzone-clear:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone-clear:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone-clear:hover,.ui-dropzone-clear:focus-visible{color:var(--color-danger-600, var(--color-red-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-divide-y-reverse: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
2542
2821
|
}]
|
|
2543
2822
|
}],
|
|
2544
2823
|
propDecorators: {
|
|
@@ -2728,6 +3007,7 @@ var UiFieldComponent = class UiFieldComponent {
|
|
|
2728
3007
|
transformFunction: null
|
|
2729
3008
|
}
|
|
2730
3009
|
},
|
|
3010
|
+
host: { classAttribute: "block" },
|
|
2731
3011
|
ngImport: i0,
|
|
2732
3012
|
template: "@if (label()) {\n <label\n [attr.for]=\"forAttr\"\n class=\"ui-text-body ui-field-label\"\n >\n {{ label() }}\n\n @if (required()) {\n <span class=\"text-danger-500\" aria-hidden=\"true\">*</span>\n <span class=\"sr-only\">(required)</span>\n }\n </label>\n}\n\n<ng-content />\n\n@if (error()) {\n <div\n [attr.id]=\"errorAttr\"\n class=\"text-danger-600 ui-text-caption ui-field-hint\"\n role=\"alert\"\n >\n {{ error() }}\n </div>\n} @else if (hint()) {\n <div\n [attr.id]=\"hintAttr\"\n class=\"text-muted-foreground-1 ui-text-caption ui-field-hint\"\n >\n {{ hint() }}\n </div>\n}\n",
|
|
2733
3013
|
styles: [":host{position:relative}.ui-field-label{margin-bottom:calc(var(--spacing, .25rem) * 1.5);display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}.ui-field-hint{margin-top:calc(var(--spacing, .25rem) * 1.5);display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
@@ -2742,6 +3022,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2742
3022
|
type: Component,
|
|
2743
3023
|
args: [{
|
|
2744
3024
|
selector: "ui-field",
|
|
3025
|
+
host: { class: "block" },
|
|
2745
3026
|
template: "@if (label()) {\n <label\n [attr.for]=\"forAttr\"\n class=\"ui-text-body ui-field-label\"\n >\n {{ label() }}\n\n @if (required()) {\n <span class=\"text-danger-500\" aria-hidden=\"true\">*</span>\n <span class=\"sr-only\">(required)</span>\n }\n </label>\n}\n\n<ng-content />\n\n@if (error()) {\n <div\n [attr.id]=\"errorAttr\"\n class=\"text-danger-600 ui-text-caption ui-field-hint\"\n role=\"alert\"\n >\n {{ error() }}\n </div>\n} @else if (hint()) {\n <div\n [attr.id]=\"hintAttr\"\n class=\"text-muted-foreground-1 ui-text-caption ui-field-hint\"\n >\n {{ hint() }}\n </div>\n}\n",
|
|
2746
3027
|
styles: [":host{position:relative}.ui-field-label{margin-bottom:calc(var(--spacing, .25rem) * 1.5);display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}.ui-field-hint{margin-top:calc(var(--spacing, .25rem) * 1.5);display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
2747
3028
|
}]
|
|
@@ -2842,6 +3123,10 @@ var UiInputComponent = class UiInputComponent {
|
|
|
2842
3123
|
...ngDevMode ? { debugName: "spellcheck" } : /* istanbul ignore next */ {},
|
|
2843
3124
|
transform: booleanAttribute
|
|
2844
3125
|
});
|
|
3126
|
+
revealable = input(false, {
|
|
3127
|
+
...ngDevMode ? { debugName: "revealable" } : /* istanbul ignore next */ {},
|
|
3128
|
+
transform: booleanAttribute
|
|
3129
|
+
});
|
|
2845
3130
|
list = input("", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
|
|
2846
3131
|
ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
2847
3132
|
describedBy = input("", ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
|
|
@@ -2855,6 +3140,9 @@ var UiInputComponent = class UiInputComponent {
|
|
|
2855
3140
|
blurred = output();
|
|
2856
3141
|
leadingElement = contentChild("leading", ...ngDevMode ? [{ debugName: "leadingElement" }] : /* istanbul ignore next */ []);
|
|
2857
3142
|
trailingElement = contentChild("trailing", ...ngDevMode ? [{ debugName: "trailingElement" }] : /* istanbul ignore next */ []);
|
|
3143
|
+
revealed = signal(false, ...ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []);
|
|
3144
|
+
canReveal = computed(() => this.revealable() && this.type() === "password", ...ngDevMode ? [{ debugName: "canReveal" }] : /* istanbul ignore next */ []);
|
|
3145
|
+
shownType = computed(() => this.canReveal() && this.revealed() ? "text" : this.type(), ...ngDevMode ? [{ debugName: "shownType" }] : /* istanbul ignore next */ []);
|
|
2858
3146
|
generatedClasses = computed(() => [
|
|
2859
3147
|
"ui-input",
|
|
2860
3148
|
"ui-text-body",
|
|
@@ -2884,7 +3172,7 @@ var UiInputComponent = class UiInputComponent {
|
|
|
2884
3172
|
target: i0.ɵɵFactoryTarget.Component
|
|
2885
3173
|
});
|
|
2886
3174
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
2887
|
-
minVersion: "17.
|
|
3175
|
+
minVersion: "17.0.0",
|
|
2888
3176
|
version: "22.2.1",
|
|
2889
3177
|
type: UiInputComponent,
|
|
2890
3178
|
isStandalone: true,
|
|
@@ -3030,6 +3318,13 @@ var UiInputComponent = class UiInputComponent {
|
|
|
3030
3318
|
isRequired: false,
|
|
3031
3319
|
transformFunction: null
|
|
3032
3320
|
},
|
|
3321
|
+
revealable: {
|
|
3322
|
+
classPropertyName: "revealable",
|
|
3323
|
+
publicName: "revealable",
|
|
3324
|
+
isSignal: true,
|
|
3325
|
+
isRequired: false,
|
|
3326
|
+
transformFunction: null
|
|
3327
|
+
},
|
|
3033
3328
|
list: {
|
|
3034
3329
|
classPropertyName: "list",
|
|
3035
3330
|
publicName: "list",
|
|
@@ -3114,8 +3409,8 @@ var UiInputComponent = class UiInputComponent {
|
|
|
3114
3409
|
isSignal: true
|
|
3115
3410
|
}],
|
|
3116
3411
|
ngImport: i0,
|
|
3117
|
-
template: "<ng-container *ngTemplateOutlet=\"leadingElement()\"></ng-container>\n\n<input\n [value]=\"value()\"\n [class]=\"generatedClasses()\"\n [type]=\"
|
|
3118
|
-
styles: ["@layer properties
|
|
3412
|
+
template: "<ng-container *ngTemplateOutlet=\"leadingElement()\"></ng-container>\n\n<input\n [value]=\"value()\"\n [class]=\"generatedClasses()\"\n [type]=\"shownType()\"\n [attr.id]=\"id() || null\"\n [attr.name]=\"name() || null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.min]=\"min() === '' ? null : min()\"\n [attr.max]=\"max() === '' ? null : max()\"\n [attr.step]=\"step() === '' ? null : step()\"\n [attr.pattern]=\"pattern() || null\"\n [attr.inputmode]=\"inputmode() || null\"\n [attr.maxlength]=\"maxlength()\"\n [attr.minlength]=\"minlength()\"\n \n [attr.spellcheck]=\"spellcheck()\"\n [attr.list]=\"list() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.role]=\"inputRole() || null\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-controls]=\"ariaControls() || null\"\n [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n [attr.aria-haspopup]=\"ariaHasPopup() || null\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n/>\n\n<ng-container *ngTemplateOutlet=\"trailingElement()\"></ng-container>\n\n@if (canReveal()) {\n <button\n type=\"button\"\n class=\"ui-input-reveal\"\n [attr.aria-label]=\"revealed() ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"revealed()\"\n [disabled]=\"disabled()\"\n (click)=\"revealed.set(!revealed())\"\n >\n <ng-icon [name]=\"revealed() ? 'heroEyeSlash' : 'heroEye'\" size=\"18\" class=\"shrink-0\" />\n </button>\n}\n",
|
|
3413
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-input:disabled){opacity:50%}:host:has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-input{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ui-input:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-input:focus{--tw-outline-style: none;outline-style:none}.ui-input-reveal{margin-inline-end:var(--spacing, .25rem);display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1.5);color:var(--muted-foreground-1)}.ui-input-reveal:hover{color:var(--foreground)}.ui-input-reveal:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-input-reveal:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-input-reveal:focus-visible{--tw-outline-style: none;outline-style:none}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
3119
3414
|
dependencies: [{
|
|
3120
3415
|
kind: "directive",
|
|
3121
3416
|
type: NgTemplateOutlet,
|
|
@@ -3125,6 +3420,17 @@ var UiInputComponent = class UiInputComponent {
|
|
|
3125
3420
|
"ngTemplateOutlet",
|
|
3126
3421
|
"ngTemplateOutletInjector"
|
|
3127
3422
|
]
|
|
3423
|
+
}, {
|
|
3424
|
+
kind: "component",
|
|
3425
|
+
type: NgIcon,
|
|
3426
|
+
selector: "ng-icon",
|
|
3427
|
+
inputs: [
|
|
3428
|
+
"name",
|
|
3429
|
+
"svg",
|
|
3430
|
+
"size",
|
|
3431
|
+
"strokeWidth",
|
|
3432
|
+
"color"
|
|
3433
|
+
]
|
|
3128
3434
|
}]
|
|
3129
3435
|
});
|
|
3130
3436
|
};
|
|
@@ -3137,9 +3443,9 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3137
3443
|
type: Component,
|
|
3138
3444
|
args: [{
|
|
3139
3445
|
selector: "ui-input",
|
|
3140
|
-
imports: [NgTemplateOutlet],
|
|
3141
|
-
template: "<ng-container *ngTemplateOutlet=\"leadingElement()\"></ng-container>\n\n<input\n [value]=\"value()\"\n [class]=\"generatedClasses()\"\n [type]=\"
|
|
3142
|
-
styles: ["@layer properties
|
|
3446
|
+
imports: [NgTemplateOutlet, NgIcon],
|
|
3447
|
+
template: "<ng-container *ngTemplateOutlet=\"leadingElement()\"></ng-container>\n\n<input\n [value]=\"value()\"\n [class]=\"generatedClasses()\"\n [type]=\"shownType()\"\n [attr.id]=\"id() || null\"\n [attr.name]=\"name() || null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.min]=\"min() === '' ? null : min()\"\n [attr.max]=\"max() === '' ? null : max()\"\n [attr.step]=\"step() === '' ? null : step()\"\n [attr.pattern]=\"pattern() || null\"\n [attr.inputmode]=\"inputmode() || null\"\n [attr.maxlength]=\"maxlength()\"\n [attr.minlength]=\"minlength()\"\n \n [attr.spellcheck]=\"spellcheck()\"\n [attr.list]=\"list() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.role]=\"inputRole() || null\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-controls]=\"ariaControls() || null\"\n [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n [attr.aria-haspopup]=\"ariaHasPopup() || null\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n/>\n\n<ng-container *ngTemplateOutlet=\"trailingElement()\"></ng-container>\n\n@if (canReveal()) {\n <button\n type=\"button\"\n class=\"ui-input-reveal\"\n [attr.aria-label]=\"revealed() ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"revealed()\"\n [disabled]=\"disabled()\"\n (click)=\"revealed.set(!revealed())\"\n >\n <ng-icon [name]=\"revealed() ? 'heroEyeSlash' : 'heroEye'\" size=\"18\" class=\"shrink-0\" />\n </button>\n}\n",
|
|
3448
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-input:disabled){opacity:50%}:host:has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-input{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ui-input:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-input:focus{--tw-outline-style: none;outline-style:none}.ui-input-reveal{margin-inline-end:var(--spacing, .25rem);display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1.5);color:var(--muted-foreground-1)}.ui-input-reveal:hover{color:var(--foreground)}.ui-input-reveal:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-input-reveal:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-input-reveal:focus-visible{--tw-outline-style: none;outline-style:none}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3143
3449
|
}]
|
|
3144
3450
|
}],
|
|
3145
3451
|
propDecorators: {
|
|
@@ -3309,6 +3615,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3309
3615
|
required: false
|
|
3310
3616
|
}]
|
|
3311
3617
|
}],
|
|
3618
|
+
revealable: [{
|
|
3619
|
+
type: i0.Input,
|
|
3620
|
+
args: [{
|
|
3621
|
+
isSignal: true,
|
|
3622
|
+
alias: "revealable",
|
|
3623
|
+
required: false
|
|
3624
|
+
}]
|
|
3625
|
+
}],
|
|
3312
3626
|
list: [{
|
|
3313
3627
|
type: i0.Input,
|
|
3314
3628
|
args: [{
|
|
@@ -3456,7 +3770,7 @@ var UiInputAddonComponent = class UiInputAddonComponent {
|
|
|
3456
3770
|
ngImport: i0,
|
|
3457
3771
|
template: `<ng-content />`,
|
|
3458
3772
|
isInline: true,
|
|
3459
|
-
styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--
|
|
3773
|
+
styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--muted);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);color:var(--muted-foreground-1)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3460
3774
|
});
|
|
3461
3775
|
};
|
|
3462
3776
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -3470,7 +3784,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3470
3784
|
selector: "ui-input-addon",
|
|
3471
3785
|
template: `<ng-content />`,
|
|
3472
3786
|
host: { class: "ui-text-body-alt" },
|
|
3473
|
-
styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--
|
|
3787
|
+
styles: ["@layer properties;:host{display:inline-flex;flex-shrink:0;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--muted);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);color:var(--muted-foreground-1)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3474
3788
|
}]
|
|
3475
3789
|
}]
|
|
3476
3790
|
});
|
|
@@ -3516,7 +3830,7 @@ var UiInputGroupComponent = class UiInputGroupComponent {
|
|
|
3516
3830
|
ngImport: i0,
|
|
3517
3831
|
template: "<ng-content />",
|
|
3518
3832
|
isInline: true,
|
|
3519
|
-
styles: ["@layer properties
|
|
3833
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:inline-flex;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2)}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3520
3834
|
});
|
|
3521
3835
|
};
|
|
3522
3836
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -3529,7 +3843,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3529
3843
|
args: [{
|
|
3530
3844
|
selector: "ui-input-group",
|
|
3531
3845
|
template: "<ng-content />",
|
|
3532
|
-
styles: ["@layer properties
|
|
3846
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:inline-flex;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2)}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3533
3847
|
}]
|
|
3534
3848
|
}],
|
|
3535
3849
|
ctorParameters: () => [],
|
|
@@ -3654,7 +3968,7 @@ var UiRadioComponent = class UiRadioComponent {
|
|
|
3654
3968
|
"attr.name": "null"
|
|
3655
3969
|
} },
|
|
3656
3970
|
ngImport: i0,
|
|
3657
|
-
template: "<input\n type=\"radio\"\n class=\"border-
|
|
3971
|
+
template: "<input\n type=\"radio\"\n class=\"bg-layer border-line-3 focus:ring-2 focus:ring-primary-200/50 size-4 text-primary-600\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (change)=\"select()\"\n/>\n",
|
|
3658
3972
|
styles: [":host{display:inline-flex}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3659
3973
|
});
|
|
3660
3974
|
};
|
|
@@ -3671,7 +3985,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3671
3985
|
"[attr.id]": "null",
|
|
3672
3986
|
"[attr.name]": "null"
|
|
3673
3987
|
},
|
|
3674
|
-
template: "<input\n type=\"radio\"\n class=\"border-
|
|
3988
|
+
template: "<input\n type=\"radio\"\n class=\"bg-layer border-line-3 focus:ring-2 focus:ring-primary-200/50 size-4 text-primary-600\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (change)=\"select()\"\n/>\n",
|
|
3675
3989
|
styles: [":host{display:inline-flex}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3676
3990
|
}]
|
|
3677
3991
|
}],
|
|
@@ -3752,12 +4066,10 @@ var UiBadgeComponent = class UiBadgeComponent {
|
|
|
3752
4066
|
appearance = input("solid", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
|
|
3753
4067
|
intent = input("primary", ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
|
|
3754
4068
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
3755
|
-
classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
3756
4069
|
generatedClasses = computed(() => [
|
|
3757
4070
|
"ui-badge",
|
|
3758
4071
|
`ui-badge--${this.intent()}-${this.appearance()}`,
|
|
3759
|
-
`ui-badge--${this.size()}
|
|
3760
|
-
this.classes()
|
|
4072
|
+
`ui-badge--${this.size()}`
|
|
3761
4073
|
].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
3762
4074
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
3763
4075
|
minVersion: "12.0.0",
|
|
@@ -3794,18 +4106,12 @@ var UiBadgeComponent = class UiBadgeComponent {
|
|
|
3794
4106
|
isSignal: true,
|
|
3795
4107
|
isRequired: false,
|
|
3796
4108
|
transformFunction: null
|
|
3797
|
-
},
|
|
3798
|
-
classes: {
|
|
3799
|
-
classPropertyName: "classes",
|
|
3800
|
-
publicName: "classes",
|
|
3801
|
-
isSignal: true,
|
|
3802
|
-
isRequired: false,
|
|
3803
|
-
transformFunction: null
|
|
3804
4109
|
}
|
|
3805
4110
|
},
|
|
4111
|
+
host: { properties: { "class": "generatedClasses()" } },
|
|
3806
4112
|
ngImport: i0,
|
|
3807
|
-
template: "<
|
|
3808
|
-
styles: ["@layer properties
|
|
4113
|
+
template: "<ng-content />\n",
|
|
4114
|
+
styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--muted);color:var(--foreground)}:host(.ui-badge--success-solid){border-color:var(--color-success-500, var(--color-teal-500));background-color:var(--color-success-500, var(--color-teal-500));color:var(--foreground-inverse)}:host(.ui-badge--success-outline){border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}:host(.ui-badge--success-soft){border-color:transparent;background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}:host(.ui-badge--warning-solid){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--foreground-inverse)}:host(.ui-badge--warning-outline){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}:host(.ui-badge--warning-soft){border-color:transparent;background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}:host(.ui-badge--danger-solid){border-color:var(--color-danger-500, var(--color-red-500));background-color:var(--color-danger-500, var(--color-red-500));color:var(--foreground-inverse)}:host(.ui-badge--danger-outline){border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500))}:host(.ui-badge--danger-soft){border-color:transparent;background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3809
4115
|
});
|
|
3810
4116
|
};
|
|
3811
4117
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -3817,8 +4123,9 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3817
4123
|
type: Component,
|
|
3818
4124
|
args: [{
|
|
3819
4125
|
selector: "ui-badge",
|
|
3820
|
-
|
|
3821
|
-
|
|
4126
|
+
host: { "[class]": "generatedClasses()" },
|
|
4127
|
+
template: "<ng-content />\n",
|
|
4128
|
+
styles: ["@layer properties;:host(.ui-badge){display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1px}:host(.ui-badge--xs){padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}:host(.ui-badge--sm){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}:host(.ui-badge--md){padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}:host(.ui-badge--lg){padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}:host(.ui-badge--primary-solid){border-color:var(--primary-line);background-color:var(--primary);color:var(--primary-foreground)}:host(.ui-badge--primary-outline){border-color:var(--primary);background-color:transparent;color:var(--primary)}:host(.ui-badge--primary-soft){border-color:transparent;background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}:host(.ui-badge--secondary-solid){border-color:var(--secondary-line);background-color:var(--secondary);color:var(--secondary-foreground)}:host(.ui-badge--secondary-outline){border-color:var(--secondary);background-color:transparent;color:var(--secondary)}:host(.ui-badge--secondary-soft){border-color:transparent;background-color:var(--muted);color:var(--foreground)}:host(.ui-badge--success-solid){border-color:var(--color-success-500, var(--color-teal-500));background-color:var(--color-success-500, var(--color-teal-500));color:var(--foreground-inverse)}:host(.ui-badge--success-outline){border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}:host(.ui-badge--success-soft){border-color:transparent;background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}:host(.ui-badge--warning-solid){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--foreground-inverse)}:host(.ui-badge--warning-outline){border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}:host(.ui-badge--warning-soft){border-color:transparent;background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}:host(.ui-badge--danger-solid){border-color:var(--color-danger-500, var(--color-red-500));background-color:var(--color-danger-500, var(--color-red-500));color:var(--foreground-inverse)}:host(.ui-badge--danger-outline){border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500))}:host(.ui-badge--danger-soft){border-color:transparent;background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3822
4129
|
}]
|
|
3823
4130
|
}],
|
|
3824
4131
|
propDecorators: {
|
|
@@ -3845,14 +4152,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3845
4152
|
alias: "size",
|
|
3846
4153
|
required: false
|
|
3847
4154
|
}]
|
|
3848
|
-
}],
|
|
3849
|
-
classes: [{
|
|
3850
|
-
type: i0.Input,
|
|
3851
|
-
args: [{
|
|
3852
|
-
isSignal: true,
|
|
3853
|
-
alias: "classes",
|
|
3854
|
-
required: false
|
|
3855
|
-
}]
|
|
3856
4155
|
}]
|
|
3857
4156
|
}
|
|
3858
4157
|
});
|
|
@@ -4437,7 +4736,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4437
4736
|
}]
|
|
4438
4737
|
}
|
|
4439
4738
|
});
|
|
4440
|
-
let nextId = 0;
|
|
4739
|
+
let nextId$2 = 0;
|
|
4441
4740
|
var UiSelectComponent = class UiSelectComponent {
|
|
4442
4741
|
isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
4443
4742
|
placement = input("bottom-start", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
|
|
@@ -4454,7 +4753,10 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
4454
4753
|
transform: booleanAttribute
|
|
4455
4754
|
});
|
|
4456
4755
|
validationState = model(null, ...ngDevMode ? [{ debugName: "validationState" }] : /* istanbul ignore next */ []);
|
|
4457
|
-
clearable = input(false,
|
|
4756
|
+
clearable = input(false, {
|
|
4757
|
+
...ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {},
|
|
4758
|
+
transform: booleanAttribute
|
|
4759
|
+
});
|
|
4458
4760
|
clearLabel = input("None", ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
|
|
4459
4761
|
creatable = input(false, {
|
|
4460
4762
|
...ngDevMode ? { debugName: "creatable" } : /* istanbul ignore next */ {},
|
|
@@ -4485,7 +4787,7 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
4485
4787
|
optionTemplate = contentChild("option", ...ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []);
|
|
4486
4788
|
triggerTemplate = contentChild("trigger", ...ngDevMode ? [{ debugName: "triggerTemplate" }] : /* istanbul ignore next */ []);
|
|
4487
4789
|
activeIndex = signal(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
|
|
4488
|
-
listId = `ui-select-${nextId++}`;
|
|
4790
|
+
listId = `ui-select-${nextId$2++}`;
|
|
4489
4791
|
hasSelection = computed(() => this.multiple() ? this.selectedItems().length > 0 : this.selectedItem() !== null, ...ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []);
|
|
4490
4792
|
triggerLabel = computed(() => {
|
|
4491
4793
|
const display = this.displayWith();
|
|
@@ -4933,7 +5235,7 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
4933
5235
|
}],
|
|
4934
5236
|
ngImport: i0,
|
|
4935
5237
|
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n [placement]=\"placement()\"\n [closeBehaviour]=\"closeBehaviour()\"\n matchWidth=\"minWidth\"\n class=\"w-full\"\n>\n @if (searchMode() === 'inline') {\n <ui-input\n [value]=\"isOpen() ? query() : triggerLabel()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"triggerLabel()\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaHasPopup=\"listbox\"\n class=\"border-0!\"\n classes=\"h-auto!\"\n autocomplete=\"off\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ng-template #trailing>\n <ng-icon\n name=\"heroChevronDown\"\n class=\"mx-3 size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </ng-template>\n </ui-input>\n } @else {\n <div\n class=\"ui-select-trigger\"\n [class.ui-select-trigger--tags]=\"showTags()\"\n >\n <button\n type=\"button\"\n class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"id() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (showTags()) {\n <!-- the visible tags sit on top, this names the button for screen readers -->\n <span class=\"sr-only\">{{ triggerLabel() }}</span>\n } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n <ng-container\n *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n />\n </span>\n } @else if (multiple()) {\n <span class=\"ui-text-body ui-select-label\">\n <span\n class=\"ui-select-label-sizer\"\n aria-hidden=\"true\"\n >{{ placeholder() }}</span>\n <span class=\"ui-select-label-text\">{{\n triggerLabel()\n }}</span>\n </span>\n } @else {\n <span class=\"ui-text-body truncate\">{{\n triggerLabel()\n }}</span>\n }\n\n <ng-icon\n name=\"heroChevronDown\"\n class=\"ms-auto size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </button>\n\n @if (showTags()) {\n <span\n class=\"ui-text-body ui-select-tags-sizer\"\n aria-hidden=\"true\"\n >\n {{ placeholder() }}\n </span>\n\n <div class=\"ui-select-tags\">\n @for (item of selectedItems(); track $index) {\n <ui-badge\n intent=\"secondary\"\n appearance=\"soft\"\n size=\"xs\"\n classes=\"ui-select-tag ui-text-caption\"\n >\n <span class=\"truncate\">{{\n displayWith()(item)\n }}</span>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-select-tag-remove\"\n [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n (click)=\"removeItem(item)\"\n >\n <ng-icon\n name=\"heroXMark\"\n class=\"size-3 shrink-0\"\n />\n </button>\n }\n </ui-badge>\n } @empty {\n <span\n class=\"text-muted-foreground-1 ui-text-body truncate\"\n >\n {{ placeholder() }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <ui-card radius=\"lg\" class=\"divide-y overflow-hidden\">\n @if (searchMode() === 'dropdown') {\n <div class=\"p-2\">\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n (keydown)=\"onKeydown($event)\"\n [ariaExpanded]=\"true\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaLabel=\"Search options\"\n autocomplete=\"off\"\n placeholder=\"Search...\"\n />\n </div>\n }\n\n <div\n #scrollContainer\n class=\"py-1 max-h-60 overflow-y-auto\"\n role=\"listbox\"\n [attr.id]=\"listId\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll(scrollContainer)\"\n >\n @for (row of rows(); track row.id) {\n @switch (row.kind) {\n @case ('group') {\n <div\n class=\"ui-text-caption ui-select-group\"\n role=\"presentation\"\n >\n {{ row.label }}\n </div>\n }\n @case ('clear') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"text-muted-foreground-1 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"clear()\"\n >\n <span class=\"truncate\">{{\n clearLabel()\n }}</span>\n </button>\n }\n @case ('item') {\n <button\n type=\"button\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"text-dropdown-item-foreground ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.aria-selected]=\"row.selected\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onItemClick(row.item)\"\n >\n @if (optionTemplate(); as template) {\n <span\n class=\"flex items-center gap-2 min-w-0 grow\"\n >\n <ng-container\n *ngTemplateOutlet=\"template; context: {\n $implicit: row.item,\n selected: row.selected,\n active: row.index === activeIndex()\n }\"\n />\n </span>\n } @else {\n <span class=\"truncate\">{{\n row.label\n }}</span>\n }\n\n @if (row.selected) {\n <ng-icon\n name=\"heroCheck\"\n class=\"size-4 text-primary-600! shrink-0\"\n strokeWidth=\"2.5\"\n />\n }\n </button>\n }\n @case ('create') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"justify-start! text-primary-600 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onCreate()\"\n >\n <ng-icon\n name=\"heroPlus\"\n class=\"size-4 shrink-0\"\n />\n <span class=\"truncate\">{{\n createLabel()(row.query)\n }}</span>\n </button>\n }\n }\n }\n\n @if (loading()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n Loading...\n </div>\n }\n\n @if (!loading() && items().length === 0 && !createQuery()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n No results\n </div>\n }\n </div>\n </ui-card>\n </div>\n }\n</ui-dropdown>\n",
|
|
4936
|
-
styles: ["@layer properties
|
|
5238
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) * 10);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
4937
5239
|
dependencies: [
|
|
4938
5240
|
{
|
|
4939
5241
|
kind: "component",
|
|
@@ -4979,6 +5281,7 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
4979
5281
|
"maxlength",
|
|
4980
5282
|
"autofocus",
|
|
4981
5283
|
"spellcheck",
|
|
5284
|
+
"revealable",
|
|
4982
5285
|
"list",
|
|
4983
5286
|
"ariaLabel",
|
|
4984
5287
|
"describedBy",
|
|
@@ -5003,8 +5306,7 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
5003
5306
|
inputs: [
|
|
5004
5307
|
"appearance",
|
|
5005
5308
|
"intent",
|
|
5006
|
-
"size"
|
|
5007
|
-
"classes"
|
|
5309
|
+
"size"
|
|
5008
5310
|
]
|
|
5009
5311
|
},
|
|
5010
5312
|
{
|
|
@@ -5058,7 +5360,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5058
5360
|
],
|
|
5059
5361
|
host: { "(focusout)": "onFocusOut($event)" },
|
|
5060
5362
|
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n [placement]=\"placement()\"\n [closeBehaviour]=\"closeBehaviour()\"\n matchWidth=\"minWidth\"\n class=\"w-full\"\n>\n @if (searchMode() === 'inline') {\n <ui-input\n [value]=\"isOpen() ? query() : triggerLabel()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"triggerLabel()\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaHasPopup=\"listbox\"\n class=\"border-0!\"\n classes=\"h-auto!\"\n autocomplete=\"off\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ng-template #trailing>\n <ng-icon\n name=\"heroChevronDown\"\n class=\"mx-3 size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </ng-template>\n </ui-input>\n } @else {\n <div\n class=\"ui-select-trigger\"\n [class.ui-select-trigger--tags]=\"showTags()\"\n >\n <button\n type=\"button\"\n class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"id() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (showTags()) {\n <!-- the visible tags sit on top, this names the button for screen readers -->\n <span class=\"sr-only\">{{ triggerLabel() }}</span>\n } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n <ng-container\n *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n />\n </span>\n } @else if (multiple()) {\n <span class=\"ui-text-body ui-select-label\">\n <span\n class=\"ui-select-label-sizer\"\n aria-hidden=\"true\"\n >{{ placeholder() }}</span>\n <span class=\"ui-select-label-text\">{{\n triggerLabel()\n }}</span>\n </span>\n } @else {\n <span class=\"ui-text-body truncate\">{{\n triggerLabel()\n }}</span>\n }\n\n <ng-icon\n name=\"heroChevronDown\"\n class=\"ms-auto size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </button>\n\n @if (showTags()) {\n <span\n class=\"ui-text-body ui-select-tags-sizer\"\n aria-hidden=\"true\"\n >\n {{ placeholder() }}\n </span>\n\n <div class=\"ui-select-tags\">\n @for (item of selectedItems(); track $index) {\n <ui-badge\n intent=\"secondary\"\n appearance=\"soft\"\n size=\"xs\"\n classes=\"ui-select-tag ui-text-caption\"\n >\n <span class=\"truncate\">{{\n displayWith()(item)\n }}</span>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-select-tag-remove\"\n [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n (click)=\"removeItem(item)\"\n >\n <ng-icon\n name=\"heroXMark\"\n class=\"size-3 shrink-0\"\n />\n </button>\n }\n </ui-badge>\n } @empty {\n <span\n class=\"text-muted-foreground-1 ui-text-body truncate\"\n >\n {{ placeholder() }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <ui-card radius=\"lg\" class=\"divide-y overflow-hidden\">\n @if (searchMode() === 'dropdown') {\n <div class=\"p-2\">\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n (keydown)=\"onKeydown($event)\"\n [ariaExpanded]=\"true\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaLabel=\"Search options\"\n autocomplete=\"off\"\n placeholder=\"Search...\"\n />\n </div>\n }\n\n <div\n #scrollContainer\n class=\"py-1 max-h-60 overflow-y-auto\"\n role=\"listbox\"\n [attr.id]=\"listId\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll(scrollContainer)\"\n >\n @for (row of rows(); track row.id) {\n @switch (row.kind) {\n @case ('group') {\n <div\n class=\"ui-text-caption ui-select-group\"\n role=\"presentation\"\n >\n {{ row.label }}\n </div>\n }\n @case ('clear') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"text-muted-foreground-1 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"clear()\"\n >\n <span class=\"truncate\">{{\n clearLabel()\n }}</span>\n </button>\n }\n @case ('item') {\n <button\n type=\"button\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"text-dropdown-item-foreground ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.aria-selected]=\"row.selected\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onItemClick(row.item)\"\n >\n @if (optionTemplate(); as template) {\n <span\n class=\"flex items-center gap-2 min-w-0 grow\"\n >\n <ng-container\n *ngTemplateOutlet=\"template; context: {\n $implicit: row.item,\n selected: row.selected,\n active: row.index === activeIndex()\n }\"\n />\n </span>\n } @else {\n <span class=\"truncate\">{{\n row.label\n }}</span>\n }\n\n @if (row.selected) {\n <ng-icon\n name=\"heroCheck\"\n class=\"size-4 text-primary-600! shrink-0\"\n strokeWidth=\"2.5\"\n />\n }\n </button>\n }\n @case ('create') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"justify-start! text-primary-600 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onCreate()\"\n >\n <ng-icon\n name=\"heroPlus\"\n class=\"size-4 shrink-0\"\n />\n <span class=\"truncate\">{{\n createLabel()(row.query)\n }}</span>\n </button>\n }\n }\n }\n\n @if (loading()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n Loading...\n </div>\n }\n\n @if (!loading() && items().length === 0 && !createQuery()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n No results\n </div>\n }\n </div>\n </ui-card>\n </div>\n }\n</ui-dropdown>\n",
|
|
5061
|
-
styles: ["@layer properties
|
|
5363
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) * 10);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
5062
5364
|
}]
|
|
5063
5365
|
}],
|
|
5064
5366
|
ctorParameters: () => [],
|
|
@@ -5503,7 +5805,7 @@ var UiTextareaComponent = class UiTextareaComponent {
|
|
|
5503
5805
|
},
|
|
5504
5806
|
ngImport: i0,
|
|
5505
5807
|
template: "<textarea\n [value]=\"value()\"\n [class]=\"generatedClasses()\"\n [attr.id]=\"id() || null\"\n [attr.name]=\"name() || null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [style.resize]=\"resize()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.minlength]=\"minlength()\"\n \n [attr.spellcheck]=\"spellcheck()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n></textarea>\n",
|
|
5506
|
-
styles: ["@layer properties
|
|
5808
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:block}.ui-textarea{display:block;width:100%;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3)}.ui-textarea:focus{border-color:var(--primary-focus)}.ui-textarea:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-textarea:focus{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-textarea:focus{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-textarea:focus{--tw-outline-style: none;outline-style:none}.ui-textarea:disabled{opacity:50%}.ui-textarea[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500))}.ui-textarea[data-invalid]:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-textarea[data-invalid]:focus{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-textarea[data-invalid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-textarea[data-valid]{border-color:var(--color-success-500, var(--color-teal-500))}.ui-textarea[data-valid]:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-textarea[data-valid]:focus{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-textarea[data-valid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
5507
5809
|
});
|
|
5508
5810
|
};
|
|
5509
5811
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -5516,7 +5818,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5516
5818
|
args: [{
|
|
5517
5819
|
selector: "ui-textarea",
|
|
5518
5820
|
template: "<textarea\n [value]=\"value()\"\n [class]=\"generatedClasses()\"\n [attr.id]=\"id() || null\"\n [attr.name]=\"name() || null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [style.resize]=\"resize()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.minlength]=\"minlength()\"\n \n [attr.spellcheck]=\"spellcheck()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n></textarea>\n",
|
|
5519
|
-
styles: ["@layer properties
|
|
5821
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:block}.ui-textarea{display:block;width:100%;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3)}.ui-textarea:focus{border-color:var(--primary-focus)}.ui-textarea:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-textarea:focus{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-textarea:focus{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-textarea:focus{--tw-outline-style: none;outline-style:none}.ui-textarea:disabled{opacity:50%}.ui-textarea[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500))}.ui-textarea[data-invalid]:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-textarea[data-invalid]:focus{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-textarea[data-invalid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-textarea[data-valid]{border-color:var(--color-success-500, var(--color-teal-500))}.ui-textarea[data-valid]:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-textarea[data-valid]:focus{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-textarea[data-valid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
5520
5822
|
}]
|
|
5521
5823
|
}],
|
|
5522
5824
|
propDecorators: {
|
|
@@ -5681,16 +5983,15 @@ const TextareaResizeOptions = [
|
|
|
5681
5983
|
var UiAlertComponent = class UiAlertComponent {
|
|
5682
5984
|
appearance = input("soft", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
|
|
5683
5985
|
intent = input("info", ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
|
|
5684
|
-
classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
5685
5986
|
icon = contentChild("icon", {
|
|
5686
5987
|
...ngDevMode ? { debugName: "icon" } : /* istanbul ignore next */ {},
|
|
5687
5988
|
descendants: false
|
|
5688
5989
|
});
|
|
5689
5990
|
generatedClasses = computed(() => [
|
|
5991
|
+
"block",
|
|
5690
5992
|
"ui-alert",
|
|
5691
5993
|
`ui-alert--${this.appearance()}`,
|
|
5692
|
-
`ui-alert--${this.intent()}
|
|
5693
|
-
this.classes()
|
|
5994
|
+
`ui-alert--${this.intent()}`
|
|
5694
5995
|
].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
5695
5996
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
5696
5997
|
minVersion: "12.0.0",
|
|
@@ -5720,15 +6021,12 @@ var UiAlertComponent = class UiAlertComponent {
|
|
|
5720
6021
|
isSignal: true,
|
|
5721
6022
|
isRequired: false,
|
|
5722
6023
|
transformFunction: null
|
|
5723
|
-
},
|
|
5724
|
-
classes: {
|
|
5725
|
-
classPropertyName: "classes",
|
|
5726
|
-
publicName: "classes",
|
|
5727
|
-
isSignal: true,
|
|
5728
|
-
isRequired: false,
|
|
5729
|
-
transformFunction: null
|
|
5730
6024
|
}
|
|
5731
6025
|
},
|
|
6026
|
+
host: {
|
|
6027
|
+
attributes: { "role": "alert" },
|
|
6028
|
+
properties: { "class": "generatedClasses()" }
|
|
6029
|
+
},
|
|
5732
6030
|
queries: [{
|
|
5733
6031
|
propertyName: "icon",
|
|
5734
6032
|
first: true,
|
|
@@ -5736,8 +6034,8 @@ var UiAlertComponent = class UiAlertComponent {
|
|
|
5736
6034
|
isSignal: true
|
|
5737
6035
|
}],
|
|
5738
6036
|
ngImport: i0,
|
|
5739
|
-
template: "<
|
|
5740
|
-
styles: ["@layer properties;::ng-deep .ui-alert{display:inline-block;padding:calc(var(--spacing, .25rem) * 4)}:where(:is()>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}::ng-deep .ui-alert--icon{display:flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:4px}.ui-alert--soft{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px}.ui-alert--bordered{border-inline-start-style:var(--tw-border-style);border-inline-start-width:6px}.ui-alert--info{border-color:var(--color-primary-200, var(--color-blue-200));background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}::ng-deep .ui-alert--info .ui-alert--icon{border-color:var(--color-primary-100, var(--color-blue-100));background-color:var(--color-primary-200, var(--color-blue-200))}.ui-alert--success{border-color:var(--color-success-200, var(--color-teal-200));background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}::ng-deep .ui-alert--success .ui-alert--icon{border-color:var(--color-success-100, var(--color-teal-100));background-color:var(--color-success-200, var(--color-teal-200))}.ui-alert--warning{border-color:var(--color-warning-200, var(--color-yellow-200));background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}::ng-deep .ui-alert--warning .ui-alert--icon{border-color:var(--color-warning-100, var(--color-yellow-100));background-color:var(--color-warning-200, var(--color-yellow-200))}.ui-alert--danger{border-color:var(--color-danger-200, var(--color-red-200));background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}::ng-deep .ui-alert--danger .ui-alert--icon{border-color:var(--color-danger-100, var(--color-red-100));background-color:var(--color-danger-200, var(--color-red-200))}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
6037
|
+
template: "<ng-content />\n",
|
|
6038
|
+
styles: ["@layer properties;::ng-deep .ui-alert{display:inline-block;padding:calc(var(--spacing, .25rem) * 4)}:where(:is()>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}::ng-deep .ui-alert--icon{display:flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:4px}:host(.ui-alert--soft){border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px}:host(.ui-alert--bordered){border-inline-start-style:var(--tw-border-style);border-inline-start-width:6px}:host(.ui-alert--info){border-color:var(--color-primary-200, var(--color-blue-200));background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}::ng-deep .ui-alert--info .ui-alert--icon{border-color:var(--color-primary-100, var(--color-blue-100));background-color:var(--color-primary-200, var(--color-blue-200))}:host(.ui-alert--success){border-color:var(--color-success-200, var(--color-teal-200));background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}::ng-deep .ui-alert--success .ui-alert--icon{border-color:var(--color-success-100, var(--color-teal-100));background-color:var(--color-success-200, var(--color-teal-200))}:host(.ui-alert--warning){border-color:var(--color-warning-200, var(--color-yellow-200));background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}::ng-deep .ui-alert--warning .ui-alert--icon{border-color:var(--color-warning-100, var(--color-yellow-100));background-color:var(--color-warning-200, var(--color-yellow-200))}:host(.ui-alert--danger){border-color:var(--color-danger-200, var(--color-red-200));background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}::ng-deep .ui-alert--danger .ui-alert--icon{border-color:var(--color-danger-100, var(--color-red-100));background-color:var(--color-danger-200, var(--color-red-200))}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
5741
6039
|
});
|
|
5742
6040
|
};
|
|
5743
6041
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -5749,8 +6047,12 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5749
6047
|
type: Component,
|
|
5750
6048
|
args: [{
|
|
5751
6049
|
selector: "ui-alert",
|
|
5752
|
-
|
|
5753
|
-
|
|
6050
|
+
host: {
|
|
6051
|
+
role: "alert",
|
|
6052
|
+
"[class]": "generatedClasses()"
|
|
6053
|
+
},
|
|
6054
|
+
template: "<ng-content />\n",
|
|
6055
|
+
styles: ["@layer properties;::ng-deep .ui-alert{display:inline-block;padding:calc(var(--spacing, .25rem) * 4)}:where(:is()>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}::ng-deep .ui-alert--icon{display:flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:4px}:host(.ui-alert--soft){border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px}:host(.ui-alert--bordered){border-inline-start-style:var(--tw-border-style);border-inline-start-width:6px}:host(.ui-alert--info){border-color:var(--color-primary-200, var(--color-blue-200));background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-800, var(--color-blue-800))}::ng-deep .ui-alert--info .ui-alert--icon{border-color:var(--color-primary-100, var(--color-blue-100));background-color:var(--color-primary-200, var(--color-blue-200))}:host(.ui-alert--success){border-color:var(--color-success-200, var(--color-teal-200));background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-800, var(--color-teal-800))}::ng-deep .ui-alert--success .ui-alert--icon{border-color:var(--color-success-100, var(--color-teal-100));background-color:var(--color-success-200, var(--color-teal-200))}:host(.ui-alert--warning){border-color:var(--color-warning-200, var(--color-yellow-200));background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-800, var(--color-yellow-800))}::ng-deep .ui-alert--warning .ui-alert--icon{border-color:var(--color-warning-100, var(--color-yellow-100));background-color:var(--color-warning-200, var(--color-yellow-200))}:host(.ui-alert--danger){border-color:var(--color-danger-200, var(--color-red-200));background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-800, var(--color-red-800))}::ng-deep .ui-alert--danger .ui-alert--icon{border-color:var(--color-danger-100, var(--color-red-100));background-color:var(--color-danger-200, var(--color-red-200))}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
5754
6056
|
}]
|
|
5755
6057
|
}],
|
|
5756
6058
|
propDecorators: {
|
|
@@ -5770,14 +6072,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5770
6072
|
required: false
|
|
5771
6073
|
}]
|
|
5772
6074
|
}],
|
|
5773
|
-
classes: [{
|
|
5774
|
-
type: i0.Input,
|
|
5775
|
-
args: [{
|
|
5776
|
-
isSignal: true,
|
|
5777
|
-
alias: "classes",
|
|
5778
|
-
required: false
|
|
5779
|
-
}]
|
|
5780
|
-
}],
|
|
5781
6075
|
icon: [{
|
|
5782
6076
|
type: i0.ContentChild,
|
|
5783
6077
|
args: ["icon", {
|
|
@@ -5794,42 +6088,168 @@ const AlertIntents = [
|
|
|
5794
6088
|
"danger"
|
|
5795
6089
|
];
|
|
5796
6090
|
const AlertAppearances = ["soft", "bordered"];
|
|
5797
|
-
|
|
5798
|
-
"
|
|
5799
|
-
"
|
|
5800
|
-
"success",
|
|
5801
|
-
"warning",
|
|
5802
|
-
"danger"
|
|
5803
|
-
];
|
|
5804
|
-
const BadgeAppearances = [
|
|
5805
|
-
"solid",
|
|
5806
|
-
"outline",
|
|
5807
|
-
"soft"
|
|
5808
|
-
];
|
|
5809
|
-
const BadgeSizes = [
|
|
5810
|
-
"xs",
|
|
5811
|
-
"sm",
|
|
5812
|
-
"md",
|
|
5813
|
-
"lg"
|
|
5814
|
-
];
|
|
5815
|
-
var UiButtonComponent = class UiButtonComponent {
|
|
5816
|
-
appearance = input("solid", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
|
|
5817
|
-
intent = input("primary", ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
|
|
6091
|
+
var UiAvatarComponent = class UiAvatarComponent {
|
|
6092
|
+
name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
|
|
6093
|
+
src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
|
|
5818
6094
|
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
5819
|
-
|
|
5820
|
-
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
|
|
5824
|
-
|
|
6095
|
+
failedSrc = signal(null, ...ngDevMode ? [{ debugName: "failedSrc" }] : /* istanbul ignore next */ []);
|
|
6096
|
+
showImage = computed(() => {
|
|
6097
|
+
const src = this.src();
|
|
6098
|
+
return !!src && src !== this.failedSrc();
|
|
6099
|
+
}, ...ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []);
|
|
6100
|
+
initials = computed(() => {
|
|
6101
|
+
const words = this.name().trim().split(/\s+/).filter(Boolean);
|
|
6102
|
+
return ((words[0]?.[0] ?? "") + (words.length > 1 ? words[words.length - 1][0] : "")).toUpperCase();
|
|
6103
|
+
}, ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
|
|
5825
6104
|
generatedClasses = computed(() => [
|
|
5826
|
-
"ui-
|
|
5827
|
-
this.
|
|
5828
|
-
this.
|
|
5829
|
-
|
|
5830
|
-
|
|
5831
|
-
|
|
5832
|
-
|
|
6105
|
+
"ui-avatar",
|
|
6106
|
+
`ui-avatar--${this.size()}`,
|
|
6107
|
+
this.size() === "lg" ? "ui-text-body-alt" : "ui-text-caption"
|
|
6108
|
+
].join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
6109
|
+
imageFailed() {
|
|
6110
|
+
this.failedSrc.set(this.src());
|
|
6111
|
+
}
|
|
6112
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
6113
|
+
minVersion: "12.0.0",
|
|
6114
|
+
version: "22.2.1",
|
|
6115
|
+
ngImport: i0,
|
|
6116
|
+
type: UiAvatarComponent,
|
|
6117
|
+
deps: [],
|
|
6118
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
6119
|
+
});
|
|
6120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
6121
|
+
minVersion: "17.0.0",
|
|
6122
|
+
version: "22.2.1",
|
|
6123
|
+
type: UiAvatarComponent,
|
|
6124
|
+
isStandalone: true,
|
|
6125
|
+
selector: "ui-avatar",
|
|
6126
|
+
inputs: {
|
|
6127
|
+
name: {
|
|
6128
|
+
classPropertyName: "name",
|
|
6129
|
+
publicName: "name",
|
|
6130
|
+
isSignal: true,
|
|
6131
|
+
isRequired: true,
|
|
6132
|
+
transformFunction: null
|
|
6133
|
+
},
|
|
6134
|
+
src: {
|
|
6135
|
+
classPropertyName: "src",
|
|
6136
|
+
publicName: "src",
|
|
6137
|
+
isSignal: true,
|
|
6138
|
+
isRequired: false,
|
|
6139
|
+
transformFunction: null
|
|
6140
|
+
},
|
|
6141
|
+
size: {
|
|
6142
|
+
classPropertyName: "size",
|
|
6143
|
+
publicName: "size",
|
|
6144
|
+
isSignal: true,
|
|
6145
|
+
isRequired: false,
|
|
6146
|
+
transformFunction: null
|
|
6147
|
+
}
|
|
6148
|
+
},
|
|
6149
|
+
host: {
|
|
6150
|
+
attributes: { "role": "img" },
|
|
6151
|
+
properties: {
|
|
6152
|
+
"attr.aria-label": "name()",
|
|
6153
|
+
"class": "generatedClasses()"
|
|
6154
|
+
}
|
|
6155
|
+
},
|
|
6156
|
+
ngImport: i0,
|
|
6157
|
+
template: "@if (showImage()) {\n <img class=\"ui-avatar-image\" [src]=\"src()\" alt=\"\" (error)=\"imageFailed()\" />\n} @else {\n <span aria-hidden=\"true\">{{ initials() }}</span>\n}\n",
|
|
6158
|
+
styles: ["@layer properties;:host(.ui-avatar){display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);-webkit-user-select:none;user-select:none}:host(.ui-avatar--sm){width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6)}:host(.ui-avatar--md){width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8)}:host(.ui-avatar--lg){width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10)}.ui-avatar-image{width:100%;height:100%;object-fit:cover}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
6159
|
+
});
|
|
6160
|
+
};
|
|
6161
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
6162
|
+
minVersion: "12.0.0",
|
|
6163
|
+
version: "22.2.1",
|
|
6164
|
+
ngImport: i0,
|
|
6165
|
+
type: UiAvatarComponent,
|
|
6166
|
+
decorators: [{
|
|
6167
|
+
type: Component,
|
|
6168
|
+
args: [{
|
|
6169
|
+
selector: "ui-avatar",
|
|
6170
|
+
host: {
|
|
6171
|
+
role: "img",
|
|
6172
|
+
"[attr.aria-label]": "name()",
|
|
6173
|
+
"[class]": "generatedClasses()"
|
|
6174
|
+
},
|
|
6175
|
+
template: "@if (showImage()) {\n <img class=\"ui-avatar-image\" [src]=\"src()\" alt=\"\" (error)=\"imageFailed()\" />\n} @else {\n <span aria-hidden=\"true\">{{ initials() }}</span>\n}\n",
|
|
6176
|
+
styles: ["@layer properties;:host(.ui-avatar){display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);-webkit-user-select:none;user-select:none}:host(.ui-avatar--sm){width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6)}:host(.ui-avatar--md){width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8)}:host(.ui-avatar--lg){width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10)}.ui-avatar-image{width:100%;height:100%;object-fit:cover}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
6177
|
+
}]
|
|
6178
|
+
}],
|
|
6179
|
+
propDecorators: {
|
|
6180
|
+
name: [{
|
|
6181
|
+
type: i0.Input,
|
|
6182
|
+
args: [{
|
|
6183
|
+
isSignal: true,
|
|
6184
|
+
alias: "name",
|
|
6185
|
+
required: true
|
|
6186
|
+
}]
|
|
6187
|
+
}],
|
|
6188
|
+
src: [{
|
|
6189
|
+
type: i0.Input,
|
|
6190
|
+
args: [{
|
|
6191
|
+
isSignal: true,
|
|
6192
|
+
alias: "src",
|
|
6193
|
+
required: false
|
|
6194
|
+
}]
|
|
6195
|
+
}],
|
|
6196
|
+
size: [{
|
|
6197
|
+
type: i0.Input,
|
|
6198
|
+
args: [{
|
|
6199
|
+
isSignal: true,
|
|
6200
|
+
alias: "size",
|
|
6201
|
+
required: false
|
|
6202
|
+
}]
|
|
6203
|
+
}]
|
|
6204
|
+
}
|
|
6205
|
+
});
|
|
6206
|
+
const AvatarSizes = [
|
|
6207
|
+
"sm",
|
|
6208
|
+
"md",
|
|
6209
|
+
"lg"
|
|
6210
|
+
];
|
|
6211
|
+
const BadgeIntents = [
|
|
6212
|
+
"primary",
|
|
6213
|
+
"secondary",
|
|
6214
|
+
"success",
|
|
6215
|
+
"warning",
|
|
6216
|
+
"danger"
|
|
6217
|
+
];
|
|
6218
|
+
const BadgeAppearances = [
|
|
6219
|
+
"solid",
|
|
6220
|
+
"outline",
|
|
6221
|
+
"soft"
|
|
6222
|
+
];
|
|
6223
|
+
const BadgeSizes = [
|
|
6224
|
+
"xs",
|
|
6225
|
+
"sm",
|
|
6226
|
+
"md",
|
|
6227
|
+
"lg"
|
|
6228
|
+
];
|
|
6229
|
+
var UiButtonComponent = class UiButtonComponent {
|
|
6230
|
+
appearance = input("solid", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
|
|
6231
|
+
intent = input("primary", ...ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []);
|
|
6232
|
+
size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
6233
|
+
classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
6234
|
+
type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
|
|
6235
|
+
ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
6236
|
+
disabled = input(false, {
|
|
6237
|
+
...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
|
|
6238
|
+
transform: booleanAttribute
|
|
6239
|
+
});
|
|
6240
|
+
loading = input(false, {
|
|
6241
|
+
...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
|
|
6242
|
+
transform: booleanAttribute
|
|
6243
|
+
});
|
|
6244
|
+
isDisabled = computed(() => this.disabled() || this.loading(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
|
|
6245
|
+
generatedClasses = computed(() => [
|
|
6246
|
+
"ui-button",
|
|
6247
|
+
this.intentAndAppearanceClasses(),
|
|
6248
|
+
this.sizeClasses(),
|
|
6249
|
+
this.textClasses(),
|
|
6250
|
+
this.classes()
|
|
6251
|
+
].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
6252
|
+
intentAndAppearanceClasses = computed(() => {
|
|
5833
6253
|
const intent = this.intent();
|
|
5834
6254
|
const appearance = this.appearance();
|
|
5835
6255
|
return [intent, appearance].includes("none") ? "" : `ui-button--${intent}-${appearance}`;
|
|
@@ -5914,7 +6334,7 @@ var UiButtonComponent = class UiButtonComponent {
|
|
|
5914
6334
|
},
|
|
5915
6335
|
ngImport: i0,
|
|
5916
6336
|
template: "<button\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [class]=\"generatedClasses()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-busy]=\"loading() || null\"\n>\n <ng-content></ng-content>\n\n @if (loading()) {\n <span class=\"sr-only\">Loading</span>\n\n <span class=\"flex items-end justify-center\" aria-hidden=\"true\">\n <span class=\"ms-0.5 inline-flex items-end gap-px pb-px\">\n <span class=\"ui-button__loading-dot\">.</span>\n <span class=\"ui-button__loading-dot\">.</span>\n <span class=\"ui-button__loading-dot\">.</span>\n </span>\n </span>\n }\n</button>\n",
|
|
5917
|
-
styles: ["@layer properties;.ui-button{position:relative;display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-button:focus{--tw-outline-style: none;outline-style:none}.ui-button:focus-visible{z-index:10}.ui-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button:disabled{pointer-events:none}.ui-button:disabled{opacity:50%}.ui-button--sm{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-button--md{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ui-button--lg{padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}ui-button-group>:host(:first-child:not(:only-child)) .ui-button{border-start-end-radius:0;border-end-end-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child):not(:last-child)) .ui-button{border-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:last-child:not(:only-child)) .ui-button{border-start-start-radius:0;border-end-start-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child)) .ui-button{margin-inline-start:-1px}ui-input-group>:host .ui-button{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-input-group>:host(:not(:last-child)) .ui-button{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--color-gray-200, oklch(92.8% .006 264.531))!important}ui-button-group>:host(:not(:first-child)) .ui-button[class*=-outline]{border-inline-start-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@keyframes spinner-ellipsis{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-.4em)}}.ui-button__loading-dot{display:inline-block;animation:spinner-ellipsis 1s ease-in-out infinite}.ui-button__loading-dot:nth-child(2){animation-delay:.12s}.ui-button__loading-dot:nth-child(3){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.ui-button__loading-dot{animation:none}}.ui-button--primary-solid{border-color:transparent;background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-solid:hover,.ui-button--primary-solid:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline{border-color:var(--color-primary-600, var(--color-blue-600));background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--primary-ghost{border-color:transparent;background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{color:var(--color-primary-800, var(--color-blue-800))}.ui-button--primary-white{border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);color:var(--color-primary-600, var(--color-blue-600));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-white:hover,.ui-button--primary-white:focus-visible{background-color:var(--layer-focus)}.ui-button--primary-link{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500))}.ui-button--primary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{text-decoration-line:underline}.ui-button--secondary-solid{border-color:transparent;background-color:var(--color-secondary-900, var(--color-gray-900));color:var(--color-white, #fff);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-solid:hover,.ui-button--secondary-solid:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline{border-color:var(--color-secondary-900, var(--color-gray-900));background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{border-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{color:var(--foreground-inverse)}.ui-button--secondary-ghost{border-color:transparent;background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-ghost:hover,.ui-button--secondary-ghost:focus-visible{background-color:var(--muted-hover)}.ui-button--secondary-white{border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);color:var(--layer-foreground);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-white:hover,.ui-button--secondary-white:focus-visible{background-color:var(--layer-hover)}.ui-button--secondary-link{border-color:transparent;background-color:transparent;color:var(--color-secondary-900, var(--color-gray-900))}.ui-button--secondary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{text-decoration-line:underline}.ui-button--success-solid{border-color:transparent;background-color:var(--color-success-500, var(--color-teal-500));color:var(--color-white, #fff)}.ui-button--success-solid:hover,.ui-button--success-solid:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline{border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{border-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--success-ghost{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{background-color:var(--color-success-100, var(--color-teal-100))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{color:var(--color-success-800, var(--color-teal-800))}.ui-button--success-white{border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);color:var(--color-success-500, var(--color-teal-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-white:hover,.ui-button--success-white:focus-visible{background-color:var(--layer-hover)}.ui-button--success-link{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}.ui-button--success-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{text-decoration-line:underline}.ui-button--warning-solid{border-color:transparent;background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-solid:hover,.ui-button--warning-solid:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline{border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{border-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--warning-ghost{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{background-color:var(--color-warning-100, var(--color-yellow-100))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{color:var(--color-warning-800, var(--color-yellow-800))}.ui-button--warning-white{border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);color:var(--color-warning-500, var(--color-yellow-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-white:hover,.ui-button--warning-white:focus-visible{background-color:var(--layer-hover)}.ui-button--warning-link{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}.ui-button--warning-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{text-decoration-line:underline}.ui-button--danger-solid{border-color:transparent;background-color:var(--color-danger-500, var(--color-red-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-solid:hover,.ui-button--danger-solid:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline{border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{border-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--danger-ghost{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{background-color:var(--color-danger-100, var(--color-red-100))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{color:var(--color-danger-800, var(--color-red-800))}.ui-button--danger-white{border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);color:var(--color-danger-500, var(--color-red-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-white:hover,.ui-button--danger-white:focus-visible{background-color:var(--layer-hover)}.ui-button--danger-link{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{text-decoration-line:underline}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
6337
|
+
styles: ["@layer properties;.ui-button{position:relative;display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-button:focus{--tw-outline-style: none;outline-style:none}.ui-button:focus-visible{z-index:10}.ui-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button:disabled{pointer-events:none}.ui-button:disabled{opacity:50%}.ui-button--sm{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-button--md{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ui-button--lg{padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}ui-button-group>:host(:first-child:not(:only-child)) .ui-button{border-start-end-radius:0;border-end-end-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child):not(:last-child)) .ui-button{border-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:last-child:not(:only-child)) .ui-button{border-start-start-radius:0;border-end-start-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child)) .ui-button{margin-inline-start:-1px}ui-input-group>:host .ui-button{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-input-group>:host(:not(:last-child)) .ui-button{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}ui-button-group>:host(:not(:first-child)) .ui-button[class*=-outline]{border-inline-start-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@keyframes spinner-ellipsis{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-.4em)}}.ui-button__loading-dot{display:inline-block;animation:spinner-ellipsis 1s ease-in-out infinite}.ui-button__loading-dot:nth-child(2){animation-delay:.12s}.ui-button__loading-dot:nth-child(3){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.ui-button__loading-dot{animation:none}}.ui-button--primary-solid{border-color:transparent;background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-solid:hover,.ui-button--primary-solid:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline{border-color:var(--color-primary-600, var(--color-blue-600));background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--primary-ghost{border-color:transparent;background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{color:var(--color-primary-800, var(--color-blue-800))}.ui-button--primary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-primary-600, var(--color-blue-600));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-white:hover,.ui-button--primary-white:focus-visible{background-color:var(--layer-focus)}.ui-button--primary-link{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500))}.ui-button--primary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{text-decoration-line:underline}.ui-button--secondary-solid{border-color:transparent;background-color:var(--color-secondary-900, var(--color-gray-900));color:var(--color-white, #fff);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-solid:hover,.ui-button--secondary-solid:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline{border-color:var(--color-secondary-900, var(--color-gray-900));background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{border-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{color:var(--foreground-inverse)}.ui-button--secondary-ghost{border-color:transparent;background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-ghost:hover,.ui-button--secondary-ghost:focus-visible{background-color:var(--muted-hover)}.ui-button--secondary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--layer-foreground);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-white:hover,.ui-button--secondary-white:focus-visible{background-color:var(--layer-hover)}.ui-button--secondary-link{border-color:transparent;background-color:transparent;color:var(--color-secondary-900, var(--color-gray-900))}.ui-button--secondary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{text-decoration-line:underline}.ui-button--success-solid{border-color:transparent;background-color:var(--color-success-500, var(--color-teal-500));color:var(--color-white, #fff)}.ui-button--success-solid:hover,.ui-button--success-solid:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline{border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{border-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--success-ghost{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{background-color:var(--color-success-100, var(--color-teal-100))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{color:var(--color-success-800, var(--color-teal-800))}.ui-button--success-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-success-500, var(--color-teal-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-white:hover,.ui-button--success-white:focus-visible{background-color:var(--layer-hover)}.ui-button--success-link{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}.ui-button--success-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{text-decoration-line:underline}.ui-button--warning-solid{border-color:transparent;background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-solid:hover,.ui-button--warning-solid:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline{border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{border-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--warning-ghost{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{background-color:var(--color-warning-100, var(--color-yellow-100))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{color:var(--color-warning-800, var(--color-yellow-800))}.ui-button--warning-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-warning-500, var(--color-yellow-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-white:hover,.ui-button--warning-white:focus-visible{background-color:var(--layer-hover)}.ui-button--warning-link{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}.ui-button--warning-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{text-decoration-line:underline}.ui-button--danger-solid{border-color:transparent;background-color:var(--color-danger-500, var(--color-red-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-solid:hover,.ui-button--danger-solid:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline{border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{border-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--danger-ghost{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{background-color:var(--color-danger-100, var(--color-red-100))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{color:var(--color-danger-800, var(--color-red-800))}.ui-button--danger-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-danger-500, var(--color-red-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-white:hover,.ui-button--danger-white:focus-visible{background-color:var(--layer-hover)}.ui-button--danger-link{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{text-decoration-line:underline}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
5918
6338
|
});
|
|
5919
6339
|
};
|
|
5920
6340
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -5927,7 +6347,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5927
6347
|
args: [{
|
|
5928
6348
|
selector: "ui-button",
|
|
5929
6349
|
template: "<button\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [class]=\"generatedClasses()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-busy]=\"loading() || null\"\n>\n <ng-content></ng-content>\n\n @if (loading()) {\n <span class=\"sr-only\">Loading</span>\n\n <span class=\"flex items-end justify-center\" aria-hidden=\"true\">\n <span class=\"ms-0.5 inline-flex items-end gap-px pb-px\">\n <span class=\"ui-button__loading-dot\">.</span>\n <span class=\"ui-button__loading-dot\">.</span>\n <span class=\"ui-button__loading-dot\">.</span>\n </span>\n </span>\n }\n</button>\n",
|
|
5930
|
-
styles: ["@layer properties;.ui-button{position:relative;display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-button:focus{--tw-outline-style: none;outline-style:none}.ui-button:focus-visible{z-index:10}.ui-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button:disabled{pointer-events:none}.ui-button:disabled{opacity:50%}.ui-button--sm{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-button--md{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ui-button--lg{padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}ui-button-group>:host(:first-child:not(:only-child)) .ui-button{border-start-end-radius:0;border-end-end-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child):not(:last-child)) .ui-button{border-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:last-child:not(:only-child)) .ui-button{border-start-start-radius:0;border-end-start-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child)) .ui-button{margin-inline-start:-1px}ui-input-group>:host .ui-button{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-input-group>:host(:not(:last-child)) .ui-button{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--color-gray-200, oklch(92.8% .006 264.531))!important}ui-button-group>:host(:not(:first-child)) .ui-button[class*=-outline]{border-inline-start-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@keyframes spinner-ellipsis{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-.4em)}}.ui-button__loading-dot{display:inline-block;animation:spinner-ellipsis 1s ease-in-out infinite}.ui-button__loading-dot:nth-child(2){animation-delay:.12s}.ui-button__loading-dot:nth-child(3){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.ui-button__loading-dot{animation:none}}.ui-button--primary-solid{border-color:transparent;background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-solid:hover,.ui-button--primary-solid:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline{border-color:var(--color-primary-600, var(--color-blue-600));background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--primary-ghost{border-color:transparent;background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{color:var(--color-primary-800, var(--color-blue-800))}.ui-button--primary-white{border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);color:var(--color-primary-600, var(--color-blue-600));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-white:hover,.ui-button--primary-white:focus-visible{background-color:var(--layer-focus)}.ui-button--primary-link{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500))}.ui-button--primary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{text-decoration-line:underline}.ui-button--secondary-solid{border-color:transparent;background-color:var(--color-secondary-900, var(--color-gray-900));color:var(--color-white, #fff);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-solid:hover,.ui-button--secondary-solid:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline{border-color:var(--color-secondary-900, var(--color-gray-900));background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{border-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{color:var(--foreground-inverse)}.ui-button--secondary-ghost{border-color:transparent;background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-ghost:hover,.ui-button--secondary-ghost:focus-visible{background-color:var(--muted-hover)}.ui-button--secondary-white{border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);color:var(--layer-foreground);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-white:hover,.ui-button--secondary-white:focus-visible{background-color:var(--layer-hover)}.ui-button--secondary-link{border-color:transparent;background-color:transparent;color:var(--color-secondary-900, var(--color-gray-900))}.ui-button--secondary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{text-decoration-line:underline}.ui-button--success-solid{border-color:transparent;background-color:var(--color-success-500, var(--color-teal-500));color:var(--color-white, #fff)}.ui-button--success-solid:hover,.ui-button--success-solid:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline{border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{border-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--success-ghost{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{background-color:var(--color-success-100, var(--color-teal-100))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{color:var(--color-success-800, var(--color-teal-800))}.ui-button--success-white{border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);color:var(--color-success-500, var(--color-teal-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-white:hover,.ui-button--success-white:focus-visible{background-color:var(--layer-hover)}.ui-button--success-link{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}.ui-button--success-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{text-decoration-line:underline}.ui-button--warning-solid{border-color:transparent;background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-solid:hover,.ui-button--warning-solid:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline{border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{border-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--warning-ghost{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{background-color:var(--color-warning-100, var(--color-yellow-100))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{color:var(--color-warning-800, var(--color-yellow-800))}.ui-button--warning-white{border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);color:var(--color-warning-500, var(--color-yellow-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-white:hover,.ui-button--warning-white:focus-visible{background-color:var(--layer-hover)}.ui-button--warning-link{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}.ui-button--warning-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{text-decoration-line:underline}.ui-button--danger-solid{border-color:transparent;background-color:var(--color-danger-500, var(--color-red-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-solid:hover,.ui-button--danger-solid:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline{border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{border-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--danger-ghost{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{background-color:var(--color-danger-100, var(--color-red-100))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{color:var(--color-danger-800, var(--color-red-800))}.ui-button--danger-white{border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);color:var(--color-danger-500, var(--color-red-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-white:hover,.ui-button--danger-white:focus-visible{background-color:var(--layer-hover)}.ui-button--danger-link{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{text-decoration-line:underline}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
6350
|
+
styles: ["@layer properties;.ui-button{position:relative;display:inline-flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-button:focus{--tw-outline-style: none;outline-style:none}.ui-button:focus-visible{z-index:10}.ui-button:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button:disabled{pointer-events:none}.ui-button:disabled{opacity:50%}.ui-button--sm{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-button--md{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}.ui-button--lg{padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}ui-button-group>:host(:first-child:not(:only-child)) .ui-button{border-start-end-radius:0;border-end-end-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child):not(:last-child)) .ui-button{border-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:last-child:not(:only-child)) .ui-button{border-start-start-radius:0;border-end-start-radius:0;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-button-group>:host(:not(:first-child)) .ui-button{margin-inline-start:-1px}ui-input-group>:host .ui-button{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important;--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}ui-input-group>:host(:not(:last-child)) .ui-button{border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)!important}ui-button-group>:host(:not(:first-child)) .ui-button[class*=-outline]{border-inline-start-color:var(--color-gray-200, oklch(92.8% .006 264.531))}@keyframes spinner-ellipsis{0%,70%,to{transform:translateY(0)}35%{transform:translateY(-.4em)}}.ui-button__loading-dot{display:inline-block;animation:spinner-ellipsis 1s ease-in-out infinite}.ui-button__loading-dot:nth-child(2){animation-delay:.12s}.ui-button__loading-dot:nth-child(3){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.ui-button__loading-dot{animation:none}}.ui-button--primary-solid{border-color:transparent;background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-solid:hover,.ui-button--primary-solid:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline{border-color:var(--color-primary-600, var(--color-blue-600));background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-button--primary-outline:hover,.ui-button--primary-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--primary-ghost{border-color:transparent;background-color:transparent;color:var(--color-primary-600, var(--color-blue-600));--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}.ui-button--primary-ghost:hover,.ui-button--primary-ghost:focus-visible{color:var(--color-primary-800, var(--color-blue-800))}.ui-button--primary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-primary-600, var(--color-blue-600));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-button--primary-white:hover,.ui-button--primary-white:focus-visible{background-color:var(--layer-focus)}.ui-button--primary-link{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500))}.ui-button--primary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-button--primary-link:hover,.ui-button--primary-link:focus-visible{text-decoration-line:underline}.ui-button--secondary-solid{border-color:transparent;background-color:var(--color-secondary-900, var(--color-gray-900));color:var(--color-white, #fff);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-solid:hover,.ui-button--secondary-solid:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline{border-color:var(--color-secondary-900, var(--color-gray-900));background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{border-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{background-color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-outline:hover,.ui-button--secondary-outline:focus-visible{color:var(--foreground-inverse)}.ui-button--secondary-ghost{border-color:transparent;background-color:transparent;color:var(--foreground);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-ghost:hover,.ui-button--secondary-ghost:focus-visible{background-color:var(--muted-hover)}.ui-button--secondary-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--layer-foreground);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-secondary-200, var(--color-gray-200))}.ui-button--secondary-white:hover,.ui-button--secondary-white:focus-visible{background-color:var(--layer-hover)}.ui-button--secondary-link{border-color:transparent;background-color:transparent;color:var(--color-secondary-900, var(--color-gray-900))}.ui-button--secondary-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{color:var(--color-secondary-800, var(--color-gray-800))}.ui-button--secondary-link:hover,.ui-button--secondary-link:focus-visible{text-decoration-line:underline}.ui-button--success-solid{border-color:transparent;background-color:var(--color-success-500, var(--color-teal-500));color:var(--color-white, #fff)}.ui-button--success-solid:hover,.ui-button--success-solid:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline{border-color:var(--color-success-500, var(--color-teal-500));background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{border-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{background-color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-outline:hover,.ui-button--success-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--success-ghost{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500));--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{background-color:var(--color-success-100, var(--color-teal-100))}.ui-button--success-ghost:hover,.ui-button--success-ghost:focus-visible{color:var(--color-success-800, var(--color-teal-800))}.ui-button--success-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-success-500, var(--color-teal-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-success-200, var(--color-teal-200))}.ui-button--success-white:hover,.ui-button--success-white:focus-visible{background-color:var(--layer-hover)}.ui-button--success-link{border-color:transparent;background-color:transparent;color:var(--color-success-500, var(--color-teal-500))}.ui-button--success-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{color:var(--color-success-600, var(--color-teal-600))}.ui-button--success-link:hover,.ui-button--success-link:focus-visible{text-decoration-line:underline}.ui-button--warning-solid{border-color:transparent;background-color:var(--color-warning-500, var(--color-yellow-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-solid:hover,.ui-button--warning-solid:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline{border-color:var(--color-warning-500, var(--color-yellow-500));background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{border-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{background-color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-outline:hover,.ui-button--warning-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--warning-ghost{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500));--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{background-color:var(--color-warning-100, var(--color-yellow-100))}.ui-button--warning-ghost:hover,.ui-button--warning-ghost:focus-visible{color:var(--color-warning-800, var(--color-yellow-800))}.ui-button--warning-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-warning-500, var(--color-yellow-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-warning-200, var(--color-yellow-200))}.ui-button--warning-white:hover,.ui-button--warning-white:focus-visible{background-color:var(--layer-hover)}.ui-button--warning-link{border-color:transparent;background-color:transparent;color:var(--color-warning-500, var(--color-yellow-500))}.ui-button--warning-link:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{color:var(--color-warning-600, var(--color-yellow-600))}.ui-button--warning-link:hover,.ui-button--warning-link:focus-visible{text-decoration-line:underline}.ui-button--danger-solid{border-color:transparent;background-color:var(--color-danger-500, var(--color-red-500));color:var(--color-white, #fff);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-solid:hover,.ui-button--danger-solid:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline{border-color:var(--color-danger-500, var(--color-red-500));background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{border-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{background-color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-outline:hover,.ui-button--danger-outline:focus-visible{color:var(--color-white, #fff)}.ui-button--danger-ghost{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{background-color:var(--color-danger-100, var(--color-red-100))}.ui-button--danger-ghost:hover,.ui-button--danger-ghost:focus-visible{color:var(--color-danger-800, var(--color-red-800))}.ui-button--danger-white{border-color:var(--border-line-2);background-color:var(--layer);color:var(--color-danger-500, var(--color-red-500));--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-white:hover,.ui-button--danger-white:focus-visible{background-color:var(--layer-hover)}.ui-button--danger-link{border-color:transparent;background-color:transparent;color:var(--color-danger-500, var(--color-red-500));--tw-ring-color: var(--color-danger-200, var(--color-red-200))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{color:var(--color-danger-600, var(--color-red-600))}.ui-button--danger-link:hover,.ui-button--danger-link:focus-visible{text-decoration-line:underline}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
5931
6351
|
}]
|
|
5932
6352
|
}],
|
|
5933
6353
|
propDecorators: {
|
|
@@ -6340,7 +6760,7 @@ var UiCalendarComponent = class UiCalendarComponent {
|
|
|
6340
6760
|
},
|
|
6341
6761
|
ngImport: i0,
|
|
6342
6762
|
template: "<div class=\"ui-calendar-header\">\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Previous month\"\n [disabled]=\"!canGoBack()\"\n (click)=\"showMonth(-1)\"\n >\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n </button>\n\n <div class=\"ui-calendar-selects\">\n <ui-select\n class=\"ui-calendar-month\"\n [dataSource]=\"monthSource()\"\n [displayWith]=\"displayMonth\"\n [pageSize]=\"12\"\n [(selectedItem)]=\"viewMonth\"\n />\n <ui-select\n class=\"ui-calendar-year\"\n [dataSource]=\"yearSource()\"\n [pageSize]=\"500\"\n [(selectedItem)]=\"viewYear\"\n />\n </div>\n\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Next month\"\n [disabled]=\"!canGoForward()\"\n (click)=\"showMonth(1)\"\n >\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n </button>\n</div>\n\n<div class=\"ui-calendar-weekdays\" aria-hidden=\"true\">\n @for (weekday of weekdays(); track $index) {\n <span class=\"ui-calendar-weekday ui-text-caption\">{{ weekday }}</span>\n }\n</div>\n\n<div class=\"ui-calendar-grid\" (mouseleave)=\"preview(null)\">\n @for (day of days(); track day.iso) {\n <button\n type=\"button\"\n class=\"ui-calendar-day ui-text-body-alt\"\n [attr.data-date]=\"day.iso\"\n [attr.data-outside]=\"day.isOutside ? '' : null\"\n [attr.data-today]=\"day.isToday ? '' : null\"\n [attr.data-in-range]=\"day.isInRange ? '' : null\"\n [attr.data-range-start]=\"day.isRangeStart ? '' : null\"\n [attr.data-range-end]=\"day.isRangeEnd ? '' : null\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.aria-pressed]=\"day.isSelected\"\n [attr.aria-label]=\"day.label\"\n [tabindex]=\"day.iso === tabbableDate() ? 0 : -1\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n (click)=\"select(day)\"\n (keydown)=\"handleKeydown($event)\"\n (mouseenter)=\"preview(day.iso)\"\n (focus)=\"preview(day.iso)\"\n >\n {{ day.day }}\n </button>\n }\n</div>\n",
|
|
6343
|
-
styles: ["@layer properties;:host{display:inline-flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-calendar-header{display:flex;align-items:center;column-gap:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem)}.ui-calendar-selects{display:flex;min-width:0px;flex:1;column-gap:var(--spacing, .25rem)}.ui-calendar-month{min-width:0px;flex:1}.ui-calendar-year{width:calc(var(--spacing, .25rem) * 24);flex-shrink:0}.ui-calendar-nav{display:inline-flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));color:var(--foreground)}.ui-calendar-nav:focus{--tw-outline-style: none;outline-style:none}.ui-calendar-nav:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-nav:disabled{pointer-events:none}.ui-calendar-nav:disabled{opacity:50%}.ui-calendar-nav:hover,.ui-calendar-nav:focus-visible{background-color:var(--
|
|
6763
|
+
styles: ["@layer properties;:host{display:inline-flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-calendar-header{display:flex;align-items:center;column-gap:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem)}.ui-calendar-selects{display:flex;min-width:0px;flex:1;column-gap:var(--spacing, .25rem)}.ui-calendar-month{min-width:0px;flex:1}.ui-calendar-year{width:calc(var(--spacing, .25rem) * 24);flex-shrink:0}.ui-calendar-nav{display:inline-flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));color:var(--foreground)}.ui-calendar-nav:focus{--tw-outline-style: none;outline-style:none}.ui-calendar-nav:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-nav:disabled{pointer-events:none}.ui-calendar-nav:disabled{opacity:50%}.ui-calendar-nav:hover,.ui-calendar-nav:focus-visible{background-color:var(--surface)}.ui-calendar-weekdays,.ui-calendar-grid{display:grid;grid-template-columns:repeat(7,calc(var(--spacing, .25rem) * 10.5));justify-content:center}.ui-calendar-grid{row-gap:calc(var(--spacing, .25rem) * .5)}.ui-calendar-weekday{width:calc(var(--spacing, .25rem) * 10.5);padding-bottom:var(--spacing, .25rem);text-align:center;color:var(--muted-foreground-1)}.ui-calendar-day{position:relative;display:inline-flex;width:calc(var(--spacing, .25rem) * 10.5);height:calc(var(--spacing, .25rem) * 10.5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1.5px;border-color:transparent;color:var(--foreground);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-calendar-day:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-day:focus-visible{--tw-outline-style: none;outline-style:none}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{border-color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-disabled]{cursor:not-allowed;text-decoration-line:line-through;opacity:40%}.ui-calendar-day[aria-disabled]:hover{border-color:transparent}.ui-calendar-day[aria-disabled]:hover{color:inherit}.ui-calendar-day[data-outside]{color:var(--muted-foreground)}.ui-calendar-day[data-today]{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-pressed=true]{border-color:var(--color-primary-600, var(--color-blue-600));background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff)}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{color:var(--color-white, #fff)}.ui-calendar-day[data-in-range]{border-radius:0;background-color:var(--color-primary-100, var(--color-blue-100));color:var(--foreground)}.ui-calendar-day[data-range-start]{border-top-right-radius:0;border-bottom-right-radius:0}.ui-calendar-day[data-range-end]{border-top-left-radius:0;border-bottom-left-radius:0}.ui-calendar-day[data-range-end]:not([aria-pressed=true]){background-color:var(--color-primary-100, var(--color-blue-100))}.ui-calendar-day[data-in-range]:not(:nth-child(7n)),.ui-calendar-day[data-range-start]:not(:nth-child(7n)){--tw-shadow: 1px 0 0 var(--tw-shadow-color, var(--color-primary-100));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day[data-in-range]:nth-child(7n+1),.ui-calendar-day[data-range-end]:nth-child(7n+1){border-top-left-radius:var(--radius-full, calc(infinity * 1px));border-bottom-left-radius:var(--radius-full, calc(infinity * 1px))}.ui-calendar-day[data-in-range]:nth-child(7n),.ui-calendar-day[data-range-start]:nth-child(7n){border-top-right-radius:var(--radius-full, calc(infinity * 1px));border-bottom-right-radius:var(--radius-full, calc(infinity * 1px))}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid;--tw-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
6344
6764
|
dependencies: [{
|
|
6345
6765
|
kind: "component",
|
|
6346
6766
|
type: NgIcon,
|
|
@@ -6403,7 +6823,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6403
6823
|
selector: "ui-calendar",
|
|
6404
6824
|
imports: [NgIcon, UiSelectComponent],
|
|
6405
6825
|
template: "<div class=\"ui-calendar-header\">\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Previous month\"\n [disabled]=\"!canGoBack()\"\n (click)=\"showMonth(-1)\"\n >\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n </button>\n\n <div class=\"ui-calendar-selects\">\n <ui-select\n class=\"ui-calendar-month\"\n [dataSource]=\"monthSource()\"\n [displayWith]=\"displayMonth\"\n [pageSize]=\"12\"\n [(selectedItem)]=\"viewMonth\"\n />\n <ui-select\n class=\"ui-calendar-year\"\n [dataSource]=\"yearSource()\"\n [pageSize]=\"500\"\n [(selectedItem)]=\"viewYear\"\n />\n </div>\n\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Next month\"\n [disabled]=\"!canGoForward()\"\n (click)=\"showMonth(1)\"\n >\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n </button>\n</div>\n\n<div class=\"ui-calendar-weekdays\" aria-hidden=\"true\">\n @for (weekday of weekdays(); track $index) {\n <span class=\"ui-calendar-weekday ui-text-caption\">{{ weekday }}</span>\n }\n</div>\n\n<div class=\"ui-calendar-grid\" (mouseleave)=\"preview(null)\">\n @for (day of days(); track day.iso) {\n <button\n type=\"button\"\n class=\"ui-calendar-day ui-text-body-alt\"\n [attr.data-date]=\"day.iso\"\n [attr.data-outside]=\"day.isOutside ? '' : null\"\n [attr.data-today]=\"day.isToday ? '' : null\"\n [attr.data-in-range]=\"day.isInRange ? '' : null\"\n [attr.data-range-start]=\"day.isRangeStart ? '' : null\"\n [attr.data-range-end]=\"day.isRangeEnd ? '' : null\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.aria-pressed]=\"day.isSelected\"\n [attr.aria-label]=\"day.label\"\n [tabindex]=\"day.iso === tabbableDate() ? 0 : -1\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n (click)=\"select(day)\"\n (keydown)=\"handleKeydown($event)\"\n (mouseenter)=\"preview(day.iso)\"\n (focus)=\"preview(day.iso)\"\n >\n {{ day.day }}\n </button>\n }\n</div>\n",
|
|
6406
|
-
styles: ["@layer properties;:host{display:inline-flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-calendar-header{display:flex;align-items:center;column-gap:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem)}.ui-calendar-selects{display:flex;min-width:0px;flex:1;column-gap:var(--spacing, .25rem)}.ui-calendar-month{min-width:0px;flex:1}.ui-calendar-year{width:calc(var(--spacing, .25rem) * 24);flex-shrink:0}.ui-calendar-nav{display:inline-flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));color:var(--foreground)}.ui-calendar-nav:focus{--tw-outline-style: none;outline-style:none}.ui-calendar-nav:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-nav:disabled{pointer-events:none}.ui-calendar-nav:disabled{opacity:50%}.ui-calendar-nav:hover,.ui-calendar-nav:focus-visible{background-color:var(--
|
|
6826
|
+
styles: ["@layer properties;:host{display:inline-flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-calendar-header{display:flex;align-items:center;column-gap:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem)}.ui-calendar-selects{display:flex;min-width:0px;flex:1;column-gap:var(--spacing, .25rem)}.ui-calendar-month{min-width:0px;flex:1}.ui-calendar-year{width:calc(var(--spacing, .25rem) * 24);flex-shrink:0}.ui-calendar-nav{display:inline-flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));color:var(--foreground)}.ui-calendar-nav:focus{--tw-outline-style: none;outline-style:none}.ui-calendar-nav:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-nav:disabled{pointer-events:none}.ui-calendar-nav:disabled{opacity:50%}.ui-calendar-nav:hover,.ui-calendar-nav:focus-visible{background-color:var(--surface)}.ui-calendar-weekdays,.ui-calendar-grid{display:grid;grid-template-columns:repeat(7,calc(var(--spacing, .25rem) * 10.5));justify-content:center}.ui-calendar-grid{row-gap:calc(var(--spacing, .25rem) * .5)}.ui-calendar-weekday{width:calc(var(--spacing, .25rem) * 10.5);padding-bottom:var(--spacing, .25rem);text-align:center;color:var(--muted-foreground-1)}.ui-calendar-day{position:relative;display:inline-flex;width:calc(var(--spacing, .25rem) * 10.5);height:calc(var(--spacing, .25rem) * 10.5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1.5px;border-color:transparent;color:var(--foreground);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-calendar-day:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-day:focus-visible{--tw-outline-style: none;outline-style:none}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{border-color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-disabled]{cursor:not-allowed;text-decoration-line:line-through;opacity:40%}.ui-calendar-day[aria-disabled]:hover{border-color:transparent}.ui-calendar-day[aria-disabled]:hover{color:inherit}.ui-calendar-day[data-outside]{color:var(--muted-foreground)}.ui-calendar-day[data-today]{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-pressed=true]{border-color:var(--color-primary-600, var(--color-blue-600));background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff)}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{color:var(--color-white, #fff)}.ui-calendar-day[data-in-range]{border-radius:0;background-color:var(--color-primary-100, var(--color-blue-100));color:var(--foreground)}.ui-calendar-day[data-range-start]{border-top-right-radius:0;border-bottom-right-radius:0}.ui-calendar-day[data-range-end]{border-top-left-radius:0;border-bottom-left-radius:0}.ui-calendar-day[data-range-end]:not([aria-pressed=true]){background-color:var(--color-primary-100, var(--color-blue-100))}.ui-calendar-day[data-in-range]:not(:nth-child(7n)),.ui-calendar-day[data-range-start]:not(:nth-child(7n)){--tw-shadow: 1px 0 0 var(--tw-shadow-color, var(--color-primary-100));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day[data-in-range]:nth-child(7n+1),.ui-calendar-day[data-range-end]:nth-child(7n+1){border-top-left-radius:var(--radius-full, calc(infinity * 1px));border-bottom-left-radius:var(--radius-full, calc(infinity * 1px))}.ui-calendar-day[data-in-range]:nth-child(7n),.ui-calendar-day[data-range-start]:nth-child(7n){border-top-right-radius:var(--radius-full, calc(infinity * 1px));border-bottom-right-radius:var(--radius-full, calc(infinity * 1px))}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid;--tw-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
6407
6827
|
}]
|
|
6408
6828
|
}],
|
|
6409
6829
|
propDecorators: {
|
|
@@ -6481,6 +6901,97 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6481
6901
|
});
|
|
6482
6902
|
const WeekStarts = [0, 1];
|
|
6483
6903
|
const CalendarModes = ["single", "range"];
|
|
6904
|
+
var UiCardHeaderComponent = class UiCardHeaderComponent {
|
|
6905
|
+
heading = input.required(...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
|
|
6906
|
+
subtitle = input("", ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
|
|
6907
|
+
headingLevel = input(2, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
|
|
6908
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
6909
|
+
minVersion: "12.0.0",
|
|
6910
|
+
version: "22.2.1",
|
|
6911
|
+
ngImport: i0,
|
|
6912
|
+
type: UiCardHeaderComponent,
|
|
6913
|
+
deps: [],
|
|
6914
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
6915
|
+
});
|
|
6916
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
6917
|
+
minVersion: "17.0.0",
|
|
6918
|
+
version: "22.2.1",
|
|
6919
|
+
type: UiCardHeaderComponent,
|
|
6920
|
+
isStandalone: true,
|
|
6921
|
+
selector: "ui-card-header",
|
|
6922
|
+
inputs: {
|
|
6923
|
+
heading: {
|
|
6924
|
+
classPropertyName: "heading",
|
|
6925
|
+
publicName: "heading",
|
|
6926
|
+
isSignal: true,
|
|
6927
|
+
isRequired: true,
|
|
6928
|
+
transformFunction: null
|
|
6929
|
+
},
|
|
6930
|
+
subtitle: {
|
|
6931
|
+
classPropertyName: "subtitle",
|
|
6932
|
+
publicName: "subtitle",
|
|
6933
|
+
isSignal: true,
|
|
6934
|
+
isRequired: false,
|
|
6935
|
+
transformFunction: null
|
|
6936
|
+
},
|
|
6937
|
+
headingLevel: {
|
|
6938
|
+
classPropertyName: "headingLevel",
|
|
6939
|
+
publicName: "headingLevel",
|
|
6940
|
+
isSignal: true,
|
|
6941
|
+
isRequired: false,
|
|
6942
|
+
transformFunction: null
|
|
6943
|
+
}
|
|
6944
|
+
},
|
|
6945
|
+
host: { classAttribute: "block" },
|
|
6946
|
+
ngImport: i0,
|
|
6947
|
+
template: "<header class=\"flex flex-wrap justify-between items-start gap-x-4 gap-y-3 mb-4\">\n <div class=\"min-w-0\">\n @switch (headingLevel()) {\n @case (3) {\n <h3 class=\"text-foreground ui-text-h4\">{{ heading() }}</h3>\n }\n @case (4) {\n <h4 class=\"text-foreground ui-text-h4\">{{ heading() }}</h4>\n }\n @default {\n <h2 class=\"text-foreground ui-text-h4\">{{ heading() }}</h2>\n }\n }\n\n @if (subtitle()) {\n <p class=\"mt-1 text-muted-foreground-1 ui-text-body-alt\">{{ subtitle() }}</p>\n }\n </div>\n\n <div class=\"flex flex-wrap empty:hidden items-center gap-2\"><ng-content /></div>\n</header>\n"
|
|
6948
|
+
});
|
|
6949
|
+
};
|
|
6950
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
6951
|
+
minVersion: "12.0.0",
|
|
6952
|
+
version: "22.2.1",
|
|
6953
|
+
ngImport: i0,
|
|
6954
|
+
type: UiCardHeaderComponent,
|
|
6955
|
+
decorators: [{
|
|
6956
|
+
type: Component,
|
|
6957
|
+
args: [{
|
|
6958
|
+
selector: "ui-card-header",
|
|
6959
|
+
host: { class: "block" },
|
|
6960
|
+
template: "<header class=\"flex flex-wrap justify-between items-start gap-x-4 gap-y-3 mb-4\">\n <div class=\"min-w-0\">\n @switch (headingLevel()) {\n @case (3) {\n <h3 class=\"text-foreground ui-text-h4\">{{ heading() }}</h3>\n }\n @case (4) {\n <h4 class=\"text-foreground ui-text-h4\">{{ heading() }}</h4>\n }\n @default {\n <h2 class=\"text-foreground ui-text-h4\">{{ heading() }}</h2>\n }\n }\n\n @if (subtitle()) {\n <p class=\"mt-1 text-muted-foreground-1 ui-text-body-alt\">{{ subtitle() }}</p>\n }\n </div>\n\n <div class=\"flex flex-wrap empty:hidden items-center gap-2\"><ng-content /></div>\n</header>\n"
|
|
6961
|
+
}]
|
|
6962
|
+
}],
|
|
6963
|
+
propDecorators: {
|
|
6964
|
+
heading: [{
|
|
6965
|
+
type: i0.Input,
|
|
6966
|
+
args: [{
|
|
6967
|
+
isSignal: true,
|
|
6968
|
+
alias: "heading",
|
|
6969
|
+
required: true
|
|
6970
|
+
}]
|
|
6971
|
+
}],
|
|
6972
|
+
subtitle: [{
|
|
6973
|
+
type: i0.Input,
|
|
6974
|
+
args: [{
|
|
6975
|
+
isSignal: true,
|
|
6976
|
+
alias: "subtitle",
|
|
6977
|
+
required: false
|
|
6978
|
+
}]
|
|
6979
|
+
}],
|
|
6980
|
+
headingLevel: [{
|
|
6981
|
+
type: i0.Input,
|
|
6982
|
+
args: [{
|
|
6983
|
+
isSignal: true,
|
|
6984
|
+
alias: "headingLevel",
|
|
6985
|
+
required: false
|
|
6986
|
+
}]
|
|
6987
|
+
}]
|
|
6988
|
+
}
|
|
6989
|
+
});
|
|
6990
|
+
const CardHeadingLevels = [
|
|
6991
|
+
2,
|
|
6992
|
+
3,
|
|
6993
|
+
4
|
|
6994
|
+
];
|
|
6484
6995
|
var UiContainerComponent = class UiContainerComponent {
|
|
6485
6996
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
6486
6997
|
minVersion: "12.0.0",
|
|
@@ -6518,7 +7029,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6518
7029
|
});
|
|
6519
7030
|
var UiDrawerComponent = class UiDrawerComponent {
|
|
6520
7031
|
isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
6521
|
-
enableBackdrop = input(true,
|
|
7032
|
+
enableBackdrop = input(true, {
|
|
7033
|
+
...ngDevMode ? { debugName: "enableBackdrop" } : /* istanbul ignore next */ {},
|
|
7034
|
+
transform: booleanAttribute
|
|
7035
|
+
});
|
|
6522
7036
|
label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
6523
7037
|
subLabel = input("", ...ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []);
|
|
6524
7038
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
@@ -6560,7 +7074,7 @@ var UiDrawerComponent = class UiDrawerComponent {
|
|
|
6560
7074
|
},
|
|
6561
7075
|
host: { properties: { "class.open": "isOpen()" } },
|
|
6562
7076
|
ngImport: i0,
|
|
6563
|
-
template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-
|
|
7077
|
+
template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 h-full transition-transform duration-200\"\n [class.translate-x-full]=\"!isOpen()\"\n>\n <div class=\"flex flex-col h-full\">\n <header\n class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n [class.items-start]=\"subLabel()\"\n [class.items-center]=\"!subLabel()\"\n >\n <div>\n <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n @if (subLabel()) {\n <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n }\n </div>\n <ui-button\n appearance=\"none\"\n classes=\"drawer-close-btn\"\n (click)=\"isOpen.set(false)\"\n >\n <ng-icon\n name=\"heroXMark\"\n size=\"20\"\n strokeWidth=\"2\"\n class=\"size-4 shrink-0\"\n />\n </ui-button>\n </header>\n </div>\n</aside>\n",
|
|
6564
7078
|
styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:100}:host.open{pointer-events:auto}::ng-deep .drawer-close-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))!important;border-color:var(--surface-line)!important;background-color:var(--surface)!important;padding:0!important;color:var(--surface-foreground)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important;--tw-ring-offset-width: 0px !important;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
6565
7079
|
dependencies: [{
|
|
6566
7080
|
kind: "component",
|
|
@@ -6601,7 +7115,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6601
7115
|
selector: "ui-drawer",
|
|
6602
7116
|
imports: [UiButtonComponent, NgIcon],
|
|
6603
7117
|
host: { "[class.open]": "isOpen()" },
|
|
6604
|
-
template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-
|
|
7118
|
+
template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 h-full transition-transform duration-200\"\n [class.translate-x-full]=\"!isOpen()\"\n>\n <div class=\"flex flex-col h-full\">\n <header\n class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n [class.items-start]=\"subLabel()\"\n [class.items-center]=\"!subLabel()\"\n >\n <div>\n <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n @if (subLabel()) {\n <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n }\n </div>\n <ui-button\n appearance=\"none\"\n classes=\"drawer-close-btn\"\n (click)=\"isOpen.set(false)\"\n >\n <ng-icon\n name=\"heroXMark\"\n size=\"20\"\n strokeWidth=\"2\"\n class=\"size-4 shrink-0\"\n />\n </ui-button>\n </header>\n </div>\n</aside>\n",
|
|
6605
7119
|
styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:100}:host.open{pointer-events:auto}::ng-deep .drawer-close-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))!important;border-color:var(--surface-line)!important;background-color:var(--surface)!important;padding:0!important;color:var(--surface-foreground)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important;--tw-ring-offset-width: 0px !important;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
6606
7120
|
}]
|
|
6607
7121
|
}],
|
|
@@ -6823,7 +7337,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6823
7337
|
}
|
|
6824
7338
|
});
|
|
6825
7339
|
var UiKpiComponent = class UiKpiComponent {
|
|
6826
|
-
|
|
7340
|
+
label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
6827
7341
|
value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
6828
7342
|
hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
6829
7343
|
icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
|
|
@@ -6843,9 +7357,9 @@ var UiKpiComponent = class UiKpiComponent {
|
|
|
6843
7357
|
isStandalone: true,
|
|
6844
7358
|
selector: "ui-kpi",
|
|
6845
7359
|
inputs: {
|
|
6846
|
-
|
|
6847
|
-
classPropertyName: "
|
|
6848
|
-
publicName: "
|
|
7360
|
+
label: {
|
|
7361
|
+
classPropertyName: "label",
|
|
7362
|
+
publicName: "label",
|
|
6849
7363
|
isSignal: true,
|
|
6850
7364
|
isRequired: false,
|
|
6851
7365
|
transformFunction: null
|
|
@@ -6879,8 +7393,9 @@ var UiKpiComponent = class UiKpiComponent {
|
|
|
6879
7393
|
transformFunction: null
|
|
6880
7394
|
}
|
|
6881
7395
|
},
|
|
7396
|
+
host: { classAttribute: "block" },
|
|
6882
7397
|
ngImport: i0,
|
|
6883
|
-
template: "<ui-card radius=\"xl\">\n <div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon() && iconPosition() === 'left') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n {{
|
|
7398
|
+
template: "<ui-card radius=\"xl\" class=\"h-full\">\n <div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon() && iconPosition() === 'left') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n {{ label() }}\n </span>\n\n @if (hint()) {\n <ui-tooltip\n [text]=\"hint()\"\n placement=\"top\"\n trigger=\"hover\"\n >\n <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n </ui-tooltip>\n }\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"font-semibold text-foreground ui-text-h2\">\n <!-- falls back to the plain value when nothing is projected -->\n <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n </h3>\n <ng-content select=\"[kpi-badge]\"></ng-content>\n </div>\n </div>\n\n @if (icon() && iconPosition() === 'right') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n </div>\n</ui-card>\n",
|
|
6884
7399
|
dependencies: [
|
|
6885
7400
|
{
|
|
6886
7401
|
kind: "component",
|
|
@@ -6930,15 +7445,16 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6930
7445
|
NgIcon,
|
|
6931
7446
|
UiTooltipComponent
|
|
6932
7447
|
],
|
|
6933
|
-
|
|
7448
|
+
host: { class: "block" },
|
|
7449
|
+
template: "<ui-card radius=\"xl\" class=\"h-full\">\n <div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon() && iconPosition() === 'left') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n {{ label() }}\n </span>\n\n @if (hint()) {\n <ui-tooltip\n [text]=\"hint()\"\n placement=\"top\"\n trigger=\"hover\"\n >\n <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n </ui-tooltip>\n }\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"font-semibold text-foreground ui-text-h2\">\n <!-- falls back to the plain value when nothing is projected -->\n <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n </h3>\n <ng-content select=\"[kpi-badge]\"></ng-content>\n </div>\n </div>\n\n @if (icon() && iconPosition() === 'right') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n </div>\n</ui-card>\n"
|
|
6934
7450
|
}]
|
|
6935
7451
|
}],
|
|
6936
7452
|
propDecorators: {
|
|
6937
|
-
|
|
7453
|
+
label: [{
|
|
6938
7454
|
type: i0.Input,
|
|
6939
7455
|
args: [{
|
|
6940
7456
|
isSignal: true,
|
|
6941
|
-
alias: "
|
|
7457
|
+
alias: "label",
|
|
6942
7458
|
required: false
|
|
6943
7459
|
}]
|
|
6944
7460
|
}],
|
|
@@ -7353,20 +7869,24 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7353
7869
|
}
|
|
7354
7870
|
});
|
|
7355
7871
|
var UiMoneyComponent = class UiMoneyComponent {
|
|
7872
|
+
defaults = inject(UI_FORMAT);
|
|
7356
7873
|
value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
7357
|
-
currency = input(
|
|
7358
|
-
locale = input(
|
|
7874
|
+
currency = input(this.defaults.currency, ...ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []);
|
|
7875
|
+
locale = input(this.defaults.locale, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
|
|
7359
7876
|
signDisplay = input("auto", ...ngDevMode ? [{ debugName: "signDisplay" }] : /* istanbul ignore next */ []);
|
|
7360
7877
|
colourBySign = input(false, {
|
|
7361
7878
|
...ngDevMode ? { debugName: "colourBySign" } : /* istanbul ignore next */ {},
|
|
7362
7879
|
transform: booleanAttribute
|
|
7363
7880
|
});
|
|
7881
|
+
wholeUnits = input(false, {
|
|
7882
|
+
...ngDevMode ? { debugName: "wholeUnits" } : /* istanbul ignore next */ {},
|
|
7883
|
+
transform: booleanAttribute
|
|
7884
|
+
});
|
|
7364
7885
|
compact = input(false, {
|
|
7365
7886
|
...ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {},
|
|
7366
7887
|
transform: booleanAttribute
|
|
7367
7888
|
});
|
|
7368
7889
|
placeholder = input("-", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
7369
|
-
classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
7370
7890
|
amount = computed(() => {
|
|
7371
7891
|
const value = this.value();
|
|
7372
7892
|
return value === null || Number.isNaN(value) ? null : value || 0;
|
|
@@ -7379,11 +7899,7 @@ var UiMoneyComponent = class UiMoneyComponent {
|
|
|
7379
7899
|
const amount = this.amount();
|
|
7380
7900
|
return this.compact() && amount !== null ? this.format(amount, false) : null;
|
|
7381
7901
|
}, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
|
|
7382
|
-
generatedClasses = computed(() => [
|
|
7383
|
-
"ui-money",
|
|
7384
|
-
this.signClass(),
|
|
7385
|
-
this.classes()
|
|
7386
|
-
].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
7902
|
+
generatedClasses = computed(() => ["ui-money", this.signClass()].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
7387
7903
|
signClass = computed(() => {
|
|
7388
7904
|
const amount = this.amount();
|
|
7389
7905
|
if (!this.colourBySign() || amount === null) return "";
|
|
@@ -7395,7 +7911,11 @@ var UiMoneyComponent = class UiMoneyComponent {
|
|
|
7395
7911
|
style: "currency",
|
|
7396
7912
|
currency: this.currency(),
|
|
7397
7913
|
signDisplay: this.signDisplay(),
|
|
7398
|
-
notation: compact ? "compact" : "standard"
|
|
7914
|
+
notation: compact ? "compact" : "standard",
|
|
7915
|
+
...this.wholeUnits() && {
|
|
7916
|
+
minimumFractionDigits: 0,
|
|
7917
|
+
maximumFractionDigits: 0
|
|
7918
|
+
}
|
|
7399
7919
|
}).format(amount);
|
|
7400
7920
|
}
|
|
7401
7921
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
@@ -7448,6 +7968,13 @@ var UiMoneyComponent = class UiMoneyComponent {
|
|
|
7448
7968
|
isRequired: false,
|
|
7449
7969
|
transformFunction: null
|
|
7450
7970
|
},
|
|
7971
|
+
wholeUnits: {
|
|
7972
|
+
classPropertyName: "wholeUnits",
|
|
7973
|
+
publicName: "wholeUnits",
|
|
7974
|
+
isSignal: true,
|
|
7975
|
+
isRequired: false,
|
|
7976
|
+
transformFunction: null
|
|
7977
|
+
},
|
|
7451
7978
|
compact: {
|
|
7452
7979
|
classPropertyName: "compact",
|
|
7453
7980
|
publicName: "compact",
|
|
@@ -7461,18 +7988,15 @@ var UiMoneyComponent = class UiMoneyComponent {
|
|
|
7461
7988
|
isSignal: true,
|
|
7462
7989
|
isRequired: false,
|
|
7463
7990
|
transformFunction: null
|
|
7464
|
-
},
|
|
7465
|
-
classes: {
|
|
7466
|
-
classPropertyName: "classes",
|
|
7467
|
-
publicName: "classes",
|
|
7468
|
-
isSignal: true,
|
|
7469
|
-
isRequired: false,
|
|
7470
|
-
transformFunction: null
|
|
7471
7991
|
}
|
|
7472
7992
|
},
|
|
7993
|
+
host: { properties: {
|
|
7994
|
+
"class": "generatedClasses()",
|
|
7995
|
+
"attr.title": "title()"
|
|
7996
|
+
} },
|
|
7473
7997
|
ngImport: i0,
|
|
7474
|
-
template: "
|
|
7475
|
-
styles: ["@layer properties
|
|
7998
|
+
template: "{{ formatted() }}\n",
|
|
7999
|
+
styles: ["@layer properties;:host(.ui-money){white-space:nowrap;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}:host(.ui-money--positive){color:var(--color-success-600, var(--color-teal-600))}:host(.ui-money--negative){color:var(--color-danger-600, var(--color-red-600))}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
7476
8000
|
});
|
|
7477
8001
|
};
|
|
7478
8002
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -7484,8 +8008,12 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7484
8008
|
type: Component,
|
|
7485
8009
|
args: [{
|
|
7486
8010
|
selector: "ui-money",
|
|
7487
|
-
|
|
7488
|
-
|
|
8011
|
+
host: {
|
|
8012
|
+
"[class]": "generatedClasses()",
|
|
8013
|
+
"[attr.title]": "title()"
|
|
8014
|
+
},
|
|
8015
|
+
template: "{{ formatted() }}\n",
|
|
8016
|
+
styles: ["@layer properties;:host(.ui-money){white-space:nowrap;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}:host(.ui-money--positive){color:var(--color-success-600, var(--color-teal-600))}:host(.ui-money--negative){color:var(--color-danger-600, var(--color-red-600))}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
7489
8017
|
}]
|
|
7490
8018
|
}],
|
|
7491
8019
|
propDecorators: {
|
|
@@ -7529,27 +8057,27 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7529
8057
|
required: false
|
|
7530
8058
|
}]
|
|
7531
8059
|
}],
|
|
7532
|
-
|
|
8060
|
+
wholeUnits: [{
|
|
7533
8061
|
type: i0.Input,
|
|
7534
8062
|
args: [{
|
|
7535
8063
|
isSignal: true,
|
|
7536
|
-
alias: "
|
|
8064
|
+
alias: "wholeUnits",
|
|
7537
8065
|
required: false
|
|
7538
8066
|
}]
|
|
7539
8067
|
}],
|
|
7540
|
-
|
|
8068
|
+
compact: [{
|
|
7541
8069
|
type: i0.Input,
|
|
7542
8070
|
args: [{
|
|
7543
8071
|
isSignal: true,
|
|
7544
|
-
alias: "
|
|
8072
|
+
alias: "compact",
|
|
7545
8073
|
required: false
|
|
7546
8074
|
}]
|
|
7547
8075
|
}],
|
|
7548
|
-
|
|
8076
|
+
placeholder: [{
|
|
7549
8077
|
type: i0.Input,
|
|
7550
8078
|
args: [{
|
|
7551
8079
|
isSignal: true,
|
|
7552
|
-
alias: "
|
|
8080
|
+
alias: "placeholder",
|
|
7553
8081
|
required: false
|
|
7554
8082
|
}]
|
|
7555
8083
|
}]
|
|
@@ -7564,8 +8092,6 @@ const MoneySignDisplays = [
|
|
|
7564
8092
|
var UiPaginationComponent = class UiPaginationComponent {
|
|
7565
8093
|
page = model(0, ...ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []);
|
|
7566
8094
|
totalPages = input.required(...ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []);
|
|
7567
|
-
classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
7568
|
-
generatedClasses = computed(() => ["ui-pagination", this.classes()].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
7569
8095
|
isFirstPage = computed(() => this.page() <= 0, ...ngDevMode ? [{ debugName: "isFirstPage" }] : /* istanbul ignore next */ []);
|
|
7570
8096
|
isLastPage = computed(() => this.page() >= this.totalPages() - 1, ...ngDevMode ? [{ debugName: "isLastPage" }] : /* istanbul ignore next */ []);
|
|
7571
8097
|
items = computed(() => {
|
|
@@ -7617,19 +8143,19 @@ var UiPaginationComponent = class UiPaginationComponent {
|
|
|
7617
8143
|
isSignal: true,
|
|
7618
8144
|
isRequired: true,
|
|
7619
8145
|
transformFunction: null
|
|
7620
|
-
},
|
|
7621
|
-
classes: {
|
|
7622
|
-
classPropertyName: "classes",
|
|
7623
|
-
publicName: "classes",
|
|
7624
|
-
isSignal: true,
|
|
7625
|
-
isRequired: false,
|
|
7626
|
-
transformFunction: null
|
|
7627
8146
|
}
|
|
7628
8147
|
},
|
|
7629
8148
|
outputs: { page: "pageChange" },
|
|
8149
|
+
host: {
|
|
8150
|
+
attributes: {
|
|
8151
|
+
"role": "navigation",
|
|
8152
|
+
"aria-label": "Pagination"
|
|
8153
|
+
},
|
|
8154
|
+
classAttribute: "ui-pagination"
|
|
8155
|
+
},
|
|
7630
8156
|
ngImport: i0,
|
|
7631
|
-
template: "<
|
|
7632
|
-
styles: ["@layer properties
|
|
8157
|
+
template: "<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isFirstPage()\"\n (click)=\"goToPage(page() - 1)\"\n>\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n</ui-button>\n\n@for (item of items(); track $index) {\n @if (item === 'ellipsis') {\n <span class=\"ui-text-body ui-pagination-ellipsis\">…</span>\n } @else {\n <ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [class.active]=\"item === page()\"\n (click)=\"goToPage(item)\"\n >\n {{ item + 1 }}\n </ui-button>\n }\n}\n\n<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isLastPage()\"\n (click)=\"goToPage(page() + 1)\"\n>\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n</ui-button>\n",
|
|
8158
|
+
styles: ["@layer properties;:host(.ui-pagination){display:flex;align-items:center;column-gap:var(--spacing, .25rem)}::ng-deep .ui-pagination--goto-btn{min-height:calc(var(--spacing, .25rem) * 9.5);min-width:calc(var(--spacing, .25rem) * 9.5);justify-content:center!important;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent!important;padding-inline:calc(var(--spacing, .25rem) * 2.5)!important;padding-block:calc(var(--spacing, .25rem) * 2)!important;color:var(--foreground)!important}::ng-deep .active>.ui-pagination--goto-btn{border-color:var(--border-line-2)!important}.ui-pagination-page{min-width:calc(var(--spacing, .25rem) * 9);justify-content:center}.ui-pagination-ellipsis{display:inline-flex;min-width:calc(var(--spacing, .25rem) * 9);justify-content:center;color:var(--muted-foreground-1)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
7633
8159
|
dependencies: [{
|
|
7634
8160
|
kind: "component",
|
|
7635
8161
|
type: UiButtonComponent,
|
|
@@ -7668,8 +8194,13 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7668
8194
|
args: [{
|
|
7669
8195
|
selector: "ui-pagination",
|
|
7670
8196
|
imports: [UiButtonComponent, NgIcon],
|
|
7671
|
-
|
|
7672
|
-
|
|
8197
|
+
host: {
|
|
8198
|
+
role: "navigation",
|
|
8199
|
+
"aria-label": "Pagination",
|
|
8200
|
+
class: "ui-pagination"
|
|
8201
|
+
},
|
|
8202
|
+
template: "<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isFirstPage()\"\n (click)=\"goToPage(page() - 1)\"\n>\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n</ui-button>\n\n@for (item of items(); track $index) {\n @if (item === 'ellipsis') {\n <span class=\"ui-text-body ui-pagination-ellipsis\">…</span>\n } @else {\n <ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [class.active]=\"item === page()\"\n (click)=\"goToPage(item)\"\n >\n {{ item + 1 }}\n </ui-button>\n }\n}\n\n<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isLastPage()\"\n (click)=\"goToPage(page() + 1)\"\n>\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n</ui-button>\n",
|
|
8203
|
+
styles: ["@layer properties;:host(.ui-pagination){display:flex;align-items:center;column-gap:var(--spacing, .25rem)}::ng-deep .ui-pagination--goto-btn{min-height:calc(var(--spacing, .25rem) * 9.5);min-width:calc(var(--spacing, .25rem) * 9.5);justify-content:center!important;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent!important;padding-inline:calc(var(--spacing, .25rem) * 2.5)!important;padding-block:calc(var(--spacing, .25rem) * 2)!important;color:var(--foreground)!important}::ng-deep .active>.ui-pagination--goto-btn{border-color:var(--border-line-2)!important}.ui-pagination-page{min-width:calc(var(--spacing, .25rem) * 9);justify-content:center}.ui-pagination-ellipsis{display:inline-flex;min-width:calc(var(--spacing, .25rem) * 9);justify-content:center;color:var(--muted-foreground-1)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
7673
8204
|
}]
|
|
7674
8205
|
}],
|
|
7675
8206
|
propDecorators: {
|
|
@@ -7691,14 +8222,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7691
8222
|
alias: "totalPages",
|
|
7692
8223
|
required: true
|
|
7693
8224
|
}]
|
|
7694
|
-
}],
|
|
7695
|
-
classes: [{
|
|
7696
|
-
type: i0.Input,
|
|
7697
|
-
args: [{
|
|
7698
|
-
isSignal: true,
|
|
7699
|
-
alias: "classes",
|
|
7700
|
-
required: false
|
|
7701
|
-
}]
|
|
7702
8225
|
}]
|
|
7703
8226
|
}
|
|
7704
8227
|
});
|
|
@@ -7862,7 +8385,7 @@ var UiProgressComponent = class UiProgressComponent {
|
|
|
7862
8385
|
host: { properties: { "class.ui-progress-host--vertical": "orientation() === \"vertical\"" } },
|
|
7863
8386
|
ngImport: i0,
|
|
7864
8387
|
template: "<div [class]=\"rootClasses()\">\n @if (title() || labelPosition() === 'top') {\n <div class=\"ui-progress-header\">\n <span class=\"text-foreground ui-text-body-alt\">{{ title() }}</span>\n\n @if (labelPosition() === 'top') {\n <span class=\"text-foreground ui-text-body-alt\">{{ label() }}</span>\n }\n </div>\n }\n\n @if (labelPosition() === 'floating' && !isIndeterminate() && !isVertical()) {\n <div class=\"ui-progress-floating-row\" aria-hidden=\"true\">\n <span\n class=\"ui-progress-floating ui-text-caption\"\n [class]=\"'ui-progress-floating--' + intent()\"\n [style.margin-inline-start]=\"floatingOffset()\"\n >\n {{ label() }}\n </span>\n </div>\n }\n\n <div class=\"ui-progress-row\">\n <div\n class=\"ui-progress-track\"\n [class.ui-progress-track--steps]=\"steps()\"\n role=\"progressbar\"\n aria-valuemin=\"0\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"isIndeterminate() ? null : total()\"\n [attr.aria-valuetext]=\"label() || null\"\n [attr.aria-label]=\"ariaLabel() || title() || null\"\n >\n @if (steps()) {\n @for (filled of stepStates(); track $index) {\n <span\n class=\"ui-progress-step\"\n [class]=\"filled ? 'ui-progress-fill--' + intent() : ''\"\n ></span>\n }\n } @else if (segments()) {\n @for (segment of segmentViews(); track $index) {\n <span\n [class]=\"fillClasses(segment.intent)\"\n [style.width.%]=\"isVertical() ? null : segment.percent\"\n [style.height.%]=\"isVertical() ? segment.percent : null\"\n [attr.title]=\"segment.label\"\n >\n @if (labelPosition() === 'inside') {\n <span class=\"ui-progress-inside-label ui-text-caption\">{{ segment.label }}</span>\n }\n </span>\n }\n } @else {\n <span\n [class]=\"fillClasses(intent())\"\n [style.width.%]=\"isVertical() || isIndeterminate() ? null : fillPercent()\"\n [style.height.%]=\"isVertical() && !isIndeterminate() ? fillPercent() : null\"\n >\n @if (labelPosition() === 'inside' && !isIndeterminate()) {\n <span class=\"ui-progress-inside-label ui-text-caption\">{{ label() }}</span>\n }\n </span>\n }\n </div>\n\n @if (labelPosition() === 'end' && !isIndeterminate()) {\n <span class=\"ui-progress-end text-foreground ui-text-body-alt\">{{ label() }}</span>\n }\n </div>\n</div>\n",
|
|
7865
|
-
styles: ["@layer properties;:host{display:block}:host(.ui-progress-host--vertical){display:inline-flex;min-height:calc(var(--spacing, .25rem) * 32);flex-direction:column}.ui-progress{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress--vertical{flex:1;align-items:center}.ui-progress-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress--vertical .ui-progress-row{flex:1;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress-end{min-width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;text-align:end;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-progress-track{position:relative;display:flex;width:100%;overflow:hidden;background-color:var(--
|
|
8388
|
+
styles: ["@layer properties;:host{display:block}:host(.ui-progress-host--vertical){display:inline-flex;min-height:calc(var(--spacing, .25rem) * 32);flex-direction:column}.ui-progress{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress--vertical{flex:1;align-items:center}.ui-progress-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress--vertical .ui-progress-row{flex:1;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress-end{min-width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;text-align:end;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-progress-track{position:relative;display:flex;width:100%;overflow:hidden;background-color:var(--surface-1)}.ui-progress--vertical .ui-progress-track{width:auto;flex:1;flex-direction:column;justify-content:flex-end}.ui-progress--sm .ui-progress-track{height:var(--spacing, .25rem)}.ui-progress--md .ui-progress-track{height:calc(var(--spacing, .25rem) * 1.5)}.ui-progress--lg .ui-progress-track{height:calc(var(--spacing, .25rem) * 2.5)}.ui-progress--xl .ui-progress-track{height:calc(var(--spacing, .25rem) * 4)}.ui-progress--vertical.ui-progress--sm .ui-progress-track{height:auto;width:var(--spacing, .25rem)}.ui-progress--vertical.ui-progress--md .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 1.5)}.ui-progress--vertical.ui-progress--lg .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 2.5)}.ui-progress--vertical.ui-progress--xl .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 4)}.ui-progress--label-inside .ui-progress-track{min-height:calc(var(--spacing, .25rem) * 4)}.ui-progress-fill{display:flex;flex-direction:column;justify-content:center;overflow:hidden;white-space:nowrap;transition-property:width,height;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s}.ui-progress-inside-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:calc(var(--spacing, .25rem) * 1.5);text-align:center;color:var(--color-white, #fff)}.ui-progress--rounded .ui-progress-track,.ui-progress--rounded .ui-progress-fill:only-child,.ui-progress--rounded .ui-progress-step,.ui-progress--straight .ui-progress-fill,.ui-progress--straight .ui-progress-step{border-radius:var(--radius-full, calc(infinity * 1px))}.ui-progress--straight .ui-progress-fill:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui-progress--straight .ui-progress-fill:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui-progress-track--steps{column-gap:var(--spacing, .25rem);background-color:transparent}.ui-progress--vertical .ui-progress-track--steps{flex-direction:column-reverse;row-gap:var(--spacing, .25rem)}.ui-progress-step{flex:1;background-color:var(--surface-1)}.ui-progress-fill--primary{background-color:var(--color-primary-600, var(--color-blue-600))}.ui-progress-fill--secondary{background-color:var(--color-secondary-600, var(--color-gray-600))}.ui-progress-fill--success{background-color:var(--color-success-600, var(--color-teal-600))}.ui-progress-fill--warning{background-color:var(--color-warning-500, var(--color-yellow-500))}.ui-progress-fill--danger{background-color:var(--color-danger-600, var(--color-red-600))}.ui-progress-floating-row{display:flex}.ui-progress-floating{display:inline-block;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);transition-property:margin;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s}.ui-progress-floating--primary{border-color:var(--color-primary-200, var(--color-blue-200));background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-600, var(--color-blue-600))}.ui-progress-floating--secondary{border-color:var(--color-secondary-200, var(--color-gray-200));background-color:var(--color-secondary-50, var(--color-gray-50));color:var(--color-secondary-600, var(--color-gray-600))}.ui-progress-floating--success{border-color:var(--color-success-200, var(--color-teal-200));background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-600, var(--color-teal-600))}.ui-progress-floating--warning{border-color:var(--color-warning-200, var(--color-yellow-200));background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-600, var(--color-yellow-600))}.ui-progress-floating--danger{border-color:var(--color-danger-200, var(--color-red-200));background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-600, var(--color-red-600))}.ui-progress-fill--indeterminate{width:40%}.ui-progress--vertical .ui-progress-fill--indeterminate{height:40%;width:auto}@media(prefers-reduced-motion:no-preference){.ui-progress-fill--indeterminate{animation:ui-progress-slide 1.4s ease-in-out infinite}.ui-progress--vertical .ui-progress-fill--indeterminate{animation-name:ui-progress-slide-up}}@keyframes ui-progress-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}@keyframes ui-progress-slide-up{0%{transform:translateY(100%)}to{transform:translateY(-250%)}}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-duration: initial;--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
7866
8389
|
});
|
|
7867
8390
|
};
|
|
7868
8391
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -7876,7 +8399,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7876
8399
|
selector: "ui-progress",
|
|
7877
8400
|
host: { "[class.ui-progress-host--vertical]": "orientation() === \"vertical\"" },
|
|
7878
8401
|
template: "<div [class]=\"rootClasses()\">\n @if (title() || labelPosition() === 'top') {\n <div class=\"ui-progress-header\">\n <span class=\"text-foreground ui-text-body-alt\">{{ title() }}</span>\n\n @if (labelPosition() === 'top') {\n <span class=\"text-foreground ui-text-body-alt\">{{ label() }}</span>\n }\n </div>\n }\n\n @if (labelPosition() === 'floating' && !isIndeterminate() && !isVertical()) {\n <div class=\"ui-progress-floating-row\" aria-hidden=\"true\">\n <span\n class=\"ui-progress-floating ui-text-caption\"\n [class]=\"'ui-progress-floating--' + intent()\"\n [style.margin-inline-start]=\"floatingOffset()\"\n >\n {{ label() }}\n </span>\n </div>\n }\n\n <div class=\"ui-progress-row\">\n <div\n class=\"ui-progress-track\"\n [class.ui-progress-track--steps]=\"steps()\"\n role=\"progressbar\"\n aria-valuemin=\"0\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"isIndeterminate() ? null : total()\"\n [attr.aria-valuetext]=\"label() || null\"\n [attr.aria-label]=\"ariaLabel() || title() || null\"\n >\n @if (steps()) {\n @for (filled of stepStates(); track $index) {\n <span\n class=\"ui-progress-step\"\n [class]=\"filled ? 'ui-progress-fill--' + intent() : ''\"\n ></span>\n }\n } @else if (segments()) {\n @for (segment of segmentViews(); track $index) {\n <span\n [class]=\"fillClasses(segment.intent)\"\n [style.width.%]=\"isVertical() ? null : segment.percent\"\n [style.height.%]=\"isVertical() ? segment.percent : null\"\n [attr.title]=\"segment.label\"\n >\n @if (labelPosition() === 'inside') {\n <span class=\"ui-progress-inside-label ui-text-caption\">{{ segment.label }}</span>\n }\n </span>\n }\n } @else {\n <span\n [class]=\"fillClasses(intent())\"\n [style.width.%]=\"isVertical() || isIndeterminate() ? null : fillPercent()\"\n [style.height.%]=\"isVertical() && !isIndeterminate() ? fillPercent() : null\"\n >\n @if (labelPosition() === 'inside' && !isIndeterminate()) {\n <span class=\"ui-progress-inside-label ui-text-caption\">{{ label() }}</span>\n }\n </span>\n }\n </div>\n\n @if (labelPosition() === 'end' && !isIndeterminate()) {\n <span class=\"ui-progress-end text-foreground ui-text-body-alt\">{{ label() }}</span>\n }\n </div>\n</div>\n",
|
|
7879
|
-
styles: ["@layer properties;:host{display:block}:host(.ui-progress-host--vertical){display:inline-flex;min-height:calc(var(--spacing, .25rem) * 32);flex-direction:column}.ui-progress{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress--vertical{flex:1;align-items:center}.ui-progress-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress--vertical .ui-progress-row{flex:1;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress-end{min-width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;text-align:end;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-progress-track{position:relative;display:flex;width:100%;overflow:hidden;background-color:var(--
|
|
8402
|
+
styles: ["@layer properties;:host{display:block}:host(.ui-progress-host--vertical){display:inline-flex;min-height:calc(var(--spacing, .25rem) * 32);flex-direction:column}.ui-progress{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress--vertical{flex:1;align-items:center}.ui-progress-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress-row{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-progress--vertical .ui-progress-row{flex:1;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-progress-end{min-width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;text-align:end;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-progress-track{position:relative;display:flex;width:100%;overflow:hidden;background-color:var(--surface-1)}.ui-progress--vertical .ui-progress-track{width:auto;flex:1;flex-direction:column;justify-content:flex-end}.ui-progress--sm .ui-progress-track{height:var(--spacing, .25rem)}.ui-progress--md .ui-progress-track{height:calc(var(--spacing, .25rem) * 1.5)}.ui-progress--lg .ui-progress-track{height:calc(var(--spacing, .25rem) * 2.5)}.ui-progress--xl .ui-progress-track{height:calc(var(--spacing, .25rem) * 4)}.ui-progress--vertical.ui-progress--sm .ui-progress-track{height:auto;width:var(--spacing, .25rem)}.ui-progress--vertical.ui-progress--md .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 1.5)}.ui-progress--vertical.ui-progress--lg .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 2.5)}.ui-progress--vertical.ui-progress--xl .ui-progress-track{height:auto;width:calc(var(--spacing, .25rem) * 4)}.ui-progress--label-inside .ui-progress-track{min-height:calc(var(--spacing, .25rem) * 4)}.ui-progress-fill{display:flex;flex-direction:column;justify-content:center;overflow:hidden;white-space:nowrap;transition-property:width,height;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s}.ui-progress-inside-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:calc(var(--spacing, .25rem) * 1.5);text-align:center;color:var(--color-white, #fff)}.ui-progress--rounded .ui-progress-track,.ui-progress--rounded .ui-progress-fill:only-child,.ui-progress--rounded .ui-progress-step,.ui-progress--straight .ui-progress-fill,.ui-progress--straight .ui-progress-step{border-radius:var(--radius-full, calc(infinity * 1px))}.ui-progress--straight .ui-progress-fill:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui-progress--straight .ui-progress-fill:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui-progress-track--steps{column-gap:var(--spacing, .25rem);background-color:transparent}.ui-progress--vertical .ui-progress-track--steps{flex-direction:column-reverse;row-gap:var(--spacing, .25rem)}.ui-progress-step{flex:1;background-color:var(--surface-1)}.ui-progress-fill--primary{background-color:var(--color-primary-600, var(--color-blue-600))}.ui-progress-fill--secondary{background-color:var(--color-secondary-600, var(--color-gray-600))}.ui-progress-fill--success{background-color:var(--color-success-600, var(--color-teal-600))}.ui-progress-fill--warning{background-color:var(--color-warning-500, var(--color-yellow-500))}.ui-progress-fill--danger{background-color:var(--color-danger-600, var(--color-red-600))}.ui-progress-floating-row{display:flex}.ui-progress-floating{display:inline-block;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * .5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);transition-property:margin;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .5s;transition-duration:.5s}.ui-progress-floating--primary{border-color:var(--color-primary-200, var(--color-blue-200));background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-600, var(--color-blue-600))}.ui-progress-floating--secondary{border-color:var(--color-secondary-200, var(--color-gray-200));background-color:var(--color-secondary-50, var(--color-gray-50));color:var(--color-secondary-600, var(--color-gray-600))}.ui-progress-floating--success{border-color:var(--color-success-200, var(--color-teal-200));background-color:var(--color-success-50, var(--color-teal-50));color:var(--color-success-600, var(--color-teal-600))}.ui-progress-floating--warning{border-color:var(--color-warning-200, var(--color-yellow-200));background-color:var(--color-warning-50, var(--color-yellow-50));color:var(--color-warning-600, var(--color-yellow-600))}.ui-progress-floating--danger{border-color:var(--color-danger-200, var(--color-red-200));background-color:var(--color-danger-50, var(--color-red-50));color:var(--color-danger-600, var(--color-red-600))}.ui-progress-fill--indeterminate{width:40%}.ui-progress--vertical .ui-progress-fill--indeterminate{height:40%;width:auto}@media(prefers-reduced-motion:no-preference){.ui-progress-fill--indeterminate{animation:ui-progress-slide 1.4s ease-in-out infinite}.ui-progress--vertical .ui-progress-fill--indeterminate{animation-name:ui-progress-slide-up}}@keyframes ui-progress-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}@keyframes ui-progress-slide-up{0%{transform:translateY(100%)}to{transform:translateY(-250%)}}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-duration: initial;--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
7880
8403
|
}]
|
|
7881
8404
|
}],
|
|
7882
8405
|
propDecorators: {
|
|
@@ -8004,17 +8527,183 @@ const ProgressShapes = [
|
|
|
8004
8527
|
"straight"
|
|
8005
8528
|
];
|
|
8006
8529
|
const ProgressOrientations = ["horizontal", "vertical"];
|
|
8530
|
+
let nextId$1 = 0;
|
|
8531
|
+
var UiSegmentedComponent = class UiSegmentedComponent {
|
|
8532
|
+
options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
8533
|
+
value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
8534
|
+
ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
8535
|
+
fill = input(false, {
|
|
8536
|
+
...ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {},
|
|
8537
|
+
transform: booleanAttribute
|
|
8538
|
+
});
|
|
8539
|
+
name = `ui-segmented-${nextId$1++}`;
|
|
8540
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
8541
|
+
minVersion: "12.0.0",
|
|
8542
|
+
version: "22.2.1",
|
|
8543
|
+
ngImport: i0,
|
|
8544
|
+
type: UiSegmentedComponent,
|
|
8545
|
+
deps: [],
|
|
8546
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
8547
|
+
});
|
|
8548
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
8549
|
+
minVersion: "17.0.0",
|
|
8550
|
+
version: "22.2.1",
|
|
8551
|
+
type: UiSegmentedComponent,
|
|
8552
|
+
isStandalone: true,
|
|
8553
|
+
selector: "ui-segmented",
|
|
8554
|
+
inputs: {
|
|
8555
|
+
options: {
|
|
8556
|
+
classPropertyName: "options",
|
|
8557
|
+
publicName: "options",
|
|
8558
|
+
isSignal: true,
|
|
8559
|
+
isRequired: true,
|
|
8560
|
+
transformFunction: null
|
|
8561
|
+
},
|
|
8562
|
+
value: {
|
|
8563
|
+
classPropertyName: "value",
|
|
8564
|
+
publicName: "value",
|
|
8565
|
+
isSignal: true,
|
|
8566
|
+
isRequired: true,
|
|
8567
|
+
transformFunction: null
|
|
8568
|
+
},
|
|
8569
|
+
ariaLabel: {
|
|
8570
|
+
classPropertyName: "ariaLabel",
|
|
8571
|
+
publicName: "ariaLabel",
|
|
8572
|
+
isSignal: true,
|
|
8573
|
+
isRequired: true,
|
|
8574
|
+
transformFunction: null
|
|
8575
|
+
},
|
|
8576
|
+
fill: {
|
|
8577
|
+
classPropertyName: "fill",
|
|
8578
|
+
publicName: "fill",
|
|
8579
|
+
isSignal: true,
|
|
8580
|
+
isRequired: false,
|
|
8581
|
+
transformFunction: null
|
|
8582
|
+
}
|
|
8583
|
+
},
|
|
8584
|
+
outputs: { value: "valueChange" },
|
|
8585
|
+
host: { properties: { "class.block": "fill()" } },
|
|
8586
|
+
ngImport: i0,
|
|
8587
|
+
template: "<div class=\"ui-segmented\" [class.ui-segmented--fill]=\"fill()\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n @for (option of options(); track option.value) {\n <label\n class=\"ui-segmented-option ui-text-body-alt\"\n [class.ui-segmented-option--selected]=\"option.value === value()\"\n >\n <input\n type=\"radio\"\n class=\"sr-only\"\n [name]=\"name\"\n [checked]=\"option.value === value()\"\n [attr.aria-label]=\"option.ariaLabel || null\"\n (change)=\"value.set(option.value)\"\n />\n {{ option.label }}\n </label>\n }\n</div>\n",
|
|
8588
|
+
styles: ["@layer properties;.ui-segmented{display:inline-flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * .5);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-segmented-option{cursor:pointer;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);white-space:nowrap;color:var(--muted-foreground-1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;-webkit-user-select:none;user-select:none}.ui-segmented-option:hover{color:var(--foreground)}.ui-segmented--fill{display:flex;width:100%}.ui-segmented--fill .ui-segmented-option{flex:1;text-align:center}.ui-segmented-option:has(:focus-visible){--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-segmented-option--selected{background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
8589
|
+
});
|
|
8590
|
+
};
|
|
8591
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
8592
|
+
minVersion: "12.0.0",
|
|
8593
|
+
version: "22.2.1",
|
|
8594
|
+
ngImport: i0,
|
|
8595
|
+
type: UiSegmentedComponent,
|
|
8596
|
+
decorators: [{
|
|
8597
|
+
type: Component,
|
|
8598
|
+
args: [{
|
|
8599
|
+
selector: "ui-segmented",
|
|
8600
|
+
host: { "[class.block]": "fill()" },
|
|
8601
|
+
template: "<div class=\"ui-segmented\" [class.ui-segmented--fill]=\"fill()\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n @for (option of options(); track option.value) {\n <label\n class=\"ui-segmented-option ui-text-body-alt\"\n [class.ui-segmented-option--selected]=\"option.value === value()\"\n >\n <input\n type=\"radio\"\n class=\"sr-only\"\n [name]=\"name\"\n [checked]=\"option.value === value()\"\n [attr.aria-label]=\"option.ariaLabel || null\"\n (change)=\"value.set(option.value)\"\n />\n {{ option.label }}\n </label>\n }\n</div>\n",
|
|
8602
|
+
styles: ["@layer properties;.ui-segmented{display:inline-flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * .5);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-segmented-option{cursor:pointer;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);white-space:nowrap;color:var(--muted-foreground-1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;-webkit-user-select:none;user-select:none}.ui-segmented-option:hover{color:var(--foreground)}.ui-segmented--fill{display:flex;width:100%}.ui-segmented--fill .ui-segmented-option{flex:1;text-align:center}.ui-segmented-option:has(:focus-visible){--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-segmented-option--selected{background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
8603
|
+
}]
|
|
8604
|
+
}],
|
|
8605
|
+
propDecorators: {
|
|
8606
|
+
options: [{
|
|
8607
|
+
type: i0.Input,
|
|
8608
|
+
args: [{
|
|
8609
|
+
isSignal: true,
|
|
8610
|
+
alias: "options",
|
|
8611
|
+
required: true
|
|
8612
|
+
}]
|
|
8613
|
+
}],
|
|
8614
|
+
value: [{
|
|
8615
|
+
type: i0.Input,
|
|
8616
|
+
args: [{
|
|
8617
|
+
isSignal: true,
|
|
8618
|
+
alias: "value",
|
|
8619
|
+
required: true
|
|
8620
|
+
}]
|
|
8621
|
+
}, {
|
|
8622
|
+
type: i0.Output,
|
|
8623
|
+
args: ["valueChange"]
|
|
8624
|
+
}],
|
|
8625
|
+
ariaLabel: [{
|
|
8626
|
+
type: i0.Input,
|
|
8627
|
+
args: [{
|
|
8628
|
+
isSignal: true,
|
|
8629
|
+
alias: "ariaLabel",
|
|
8630
|
+
required: true
|
|
8631
|
+
}]
|
|
8632
|
+
}],
|
|
8633
|
+
fill: [{
|
|
8634
|
+
type: i0.Input,
|
|
8635
|
+
args: [{
|
|
8636
|
+
isSignal: true,
|
|
8637
|
+
alias: "fill",
|
|
8638
|
+
required: false
|
|
8639
|
+
}]
|
|
8640
|
+
}]
|
|
8641
|
+
}
|
|
8642
|
+
});
|
|
8007
8643
|
const SkeletonShapes = [
|
|
8008
8644
|
"text",
|
|
8009
8645
|
"circle",
|
|
8010
8646
|
"rect"
|
|
8011
8647
|
];
|
|
8648
|
+
var UiStatComponent = class UiStatComponent {
|
|
8649
|
+
label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
8650
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
8651
|
+
minVersion: "12.0.0",
|
|
8652
|
+
version: "22.2.1",
|
|
8653
|
+
ngImport: i0,
|
|
8654
|
+
type: UiStatComponent,
|
|
8655
|
+
deps: [],
|
|
8656
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
8657
|
+
});
|
|
8658
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
8659
|
+
minVersion: "17.1.0",
|
|
8660
|
+
version: "22.2.1",
|
|
8661
|
+
type: UiStatComponent,
|
|
8662
|
+
isStandalone: true,
|
|
8663
|
+
selector: "ui-stat",
|
|
8664
|
+
inputs: { label: {
|
|
8665
|
+
classPropertyName: "label",
|
|
8666
|
+
publicName: "label",
|
|
8667
|
+
isSignal: true,
|
|
8668
|
+
isRequired: true,
|
|
8669
|
+
transformFunction: null
|
|
8670
|
+
} },
|
|
8671
|
+
host: { classAttribute: "block min-w-0" },
|
|
8672
|
+
ngImport: i0,
|
|
8673
|
+
template: "<dl>\n <dt class=\"text-muted-foreground-1 ui-text-body-alt\">{{ label() }}</dt>\n <dd class=\"flex flex-wrap items-center gap-x-2 gap-y-1 mt-1\">\n <span class=\"font-semibold text-foreground ui-text-h3\">\n <ng-content />\n </span>\n <ng-content select=\"[stat-change]\" />\n </dd>\n <!-- hidden when nothing is projected, an empty dd would still be announced -->\n <dd class=\"empty:hidden mt-1 text-muted-foreground-1 ui-text-caption\"><ng-content select=\"[stat-note]\" /></dd>\n</dl>\n"
|
|
8674
|
+
});
|
|
8675
|
+
};
|
|
8676
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
8677
|
+
minVersion: "12.0.0",
|
|
8678
|
+
version: "22.2.1",
|
|
8679
|
+
ngImport: i0,
|
|
8680
|
+
type: UiStatComponent,
|
|
8681
|
+
decorators: [{
|
|
8682
|
+
type: Component,
|
|
8683
|
+
args: [{
|
|
8684
|
+
selector: "ui-stat",
|
|
8685
|
+
host: { class: "block min-w-0" },
|
|
8686
|
+
template: "<dl>\n <dt class=\"text-muted-foreground-1 ui-text-body-alt\">{{ label() }}</dt>\n <dd class=\"flex flex-wrap items-center gap-x-2 gap-y-1 mt-1\">\n <span class=\"font-semibold text-foreground ui-text-h3\">\n <ng-content />\n </span>\n <ng-content select=\"[stat-change]\" />\n </dd>\n <!-- hidden when nothing is projected, an empty dd would still be announced -->\n <dd class=\"empty:hidden mt-1 text-muted-foreground-1 ui-text-caption\"><ng-content select=\"[stat-note]\" /></dd>\n</dl>\n"
|
|
8687
|
+
}]
|
|
8688
|
+
}],
|
|
8689
|
+
propDecorators: { label: [{
|
|
8690
|
+
type: i0.Input,
|
|
8691
|
+
args: [{
|
|
8692
|
+
isSignal: true,
|
|
8693
|
+
alias: "label",
|
|
8694
|
+
required: true
|
|
8695
|
+
}]
|
|
8696
|
+
}] }
|
|
8697
|
+
});
|
|
8012
8698
|
var UiTabDirective = class UiTabDirective {
|
|
8013
8699
|
label = input.required({
|
|
8014
8700
|
...ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {},
|
|
8015
8701
|
alias: "uiTab"
|
|
8016
8702
|
});
|
|
8017
|
-
disabled = input(false,
|
|
8703
|
+
disabled = input(false, {
|
|
8704
|
+
...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
|
|
8705
|
+
transform: booleanAttribute
|
|
8706
|
+
});
|
|
8018
8707
|
active = model(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
|
|
8019
8708
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
8020
8709
|
minVersion: "12.0.0",
|
|
@@ -8140,6 +8829,7 @@ var UiTabComponent = class UiTabComponent {
|
|
|
8140
8829
|
isRequired: false,
|
|
8141
8830
|
transformFunction: null
|
|
8142
8831
|
} },
|
|
8832
|
+
host: { classAttribute: "block" },
|
|
8143
8833
|
queries: [{
|
|
8144
8834
|
propertyName: "tabs",
|
|
8145
8835
|
predicate: UiTabDirective,
|
|
@@ -8190,6 +8880,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8190
8880
|
args: [{
|
|
8191
8881
|
selector: "ui-tab",
|
|
8192
8882
|
imports: [UiButtonComponent, NgTemplateOutlet],
|
|
8883
|
+
host: { class: "block" },
|
|
8193
8884
|
template: "<div class=\"flex\" role=\"tablist\">\n <div class=\"flex justify-between w-full\">\n <nav class=\"flex gap-x-2.5\" role=\"tablist\">\n @for (tab of tabs(); track tab; let i = $index) {\n <ui-button\n role=\"tab\"\n appearance=\"none\"\n [classes]=\"generatedButtonClasses()\"\n [disabled]=\"tab.disabled()\"\n [class.active]=\"tab.active()\"\n (click)=\"select(i)\"\n >\n {{ tab.label() }}\n </ui-button>\n }\n </nav>\n <div class=\"flex gap-x-2.5\">\n <ng-container *ngTemplateOutlet=\"actions()\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-content></ng-content>\n",
|
|
8194
8885
|
styles: ["@layer properties;::ng-deep .ui-tab-button--solid{border-color:transparent;background-color:transparent;color:var(--color-primary-500, var(--color-blue-500));--tw-ring-color: var(--color-primary-600, var(--color-blue-600));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to!important;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)))!important;transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))!important}::ng-deep .active>.ui-tab-button--solid{border-color:var(--color-primary-600, var(--color-blue-600));background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff)}::ng-deep .ui-tab-button--underline{border-radius:0!important;border-bottom-style:var(--tw-border-style)!important;border-bottom-width:2px!important;border-color:transparent;background-color:transparent;color:var(--foreground)}::ng-deep .active>.ui-tab-button--underline{border-bottom-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-primary-600, var(--color-blue-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
8195
8886
|
}]
|
|
@@ -8768,9 +9459,10 @@ var UiTableComponent = class UiTableComponent {
|
|
|
8768
9459
|
selectionChange: "selectionChange",
|
|
8769
9460
|
rowsReordered: "rowsReordered"
|
|
8770
9461
|
},
|
|
9462
|
+
host: { classAttribute: "block" },
|
|
8771
9463
|
ngImport: i0,
|
|
8772
|
-
template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-white shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <ng-icon\n [name]=\"sortIcon(column)\"\n class=\"ms-auto size-4 shrink-0\"\n />\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-gray-100 hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
|
|
8773
|
-
styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--
|
|
9464
|
+
template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <ng-icon\n [name]=\"sortIcon(column)\"\n class=\"ms-auto size-4 shrink-0\"\n />\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
|
|
9465
|
+
styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
8774
9466
|
dependencies: [
|
|
8775
9467
|
{
|
|
8776
9468
|
kind: "component",
|
|
@@ -8859,6 +9551,7 @@ var UiTableComponent = class UiTableComponent {
|
|
|
8859
9551
|
"maxlength",
|
|
8860
9552
|
"autofocus",
|
|
8861
9553
|
"spellcheck",
|
|
9554
|
+
"revealable",
|
|
8862
9555
|
"list",
|
|
8863
9556
|
"ariaLabel",
|
|
8864
9557
|
"describedBy",
|
|
@@ -8942,8 +9635,9 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8942
9635
|
UiSelectComponent,
|
|
8943
9636
|
UiLoadingComponent
|
|
8944
9637
|
],
|
|
8945
|
-
template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-white shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <ng-icon\n [name]=\"sortIcon(column)\"\n class=\"ms-auto size-4 shrink-0\"\n />\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-gray-100 hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
|
|
8946
|
-
styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--color-gray-50, oklch(98.5% .002 247.839))}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--color-gray-50, oklch(98.5% .002 247.839))}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531))}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200, oklch(92.8% .006 264.531));background-color:var(--color-white, #fff);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-900, oklch(21% .034 264.665));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--color-white, #fff);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
9638
|
+
host: { class: "block" },
|
|
9639
|
+
template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <ng-icon\n [name]=\"sortIcon(column)\"\n class=\"ms-auto size-4 shrink-0\"\n />\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
|
|
9640
|
+
styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
8947
9641
|
}]
|
|
8948
9642
|
}],
|
|
8949
9643
|
ctorParameters: () => [],
|
|
@@ -9562,6 +10256,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9562
10256
|
});
|
|
9563
10257
|
var UiSidebarComponent = class UiSidebarComponent {
|
|
9564
10258
|
isOpen = model(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
10259
|
+
isCollapsed = computed(() => !this.isOpen(), ...ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []);
|
|
9565
10260
|
toggle = () => this.isOpen.update((isOpen) => !isOpen);
|
|
9566
10261
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
9567
10262
|
minVersion: "12.0.0",
|
|
@@ -9591,8 +10286,8 @@ var UiSidebarComponent = class UiSidebarComponent {
|
|
|
9591
10286
|
},
|
|
9592
10287
|
exportAs: ["uiSidebar"],
|
|
9593
10288
|
ngImport: i0,
|
|
9594
|
-
template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\"
|
|
9595
|
-
styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;
|
|
10289
|
+
template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\">\n</div>\n\n<aside class=\"ui-sidebar-panel\">\n <div class=\"ui-sidebar-content\">\n <ng-content />\n </div>\n\n <footer class=\"ui-sidebar-footer\">\n <!-- app content, e.g. an account menu, hidden when nothing is projected -->\n <div class=\"ui-sidebar-footer-content\">\n <ng-content select=\"[sidebar-footer]\" />\n </div>\n\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"justify-center size-10 p-0!\"\n [ariaLabel]=\"isOpen() ? 'Collapse sidebar' : 'Expand sidebar'\"\n (click)=\"toggle()\"\n >\n <ng-icon\n name=\"heroChevronDoubleLeft\"\n size=\"16\"\n strokeWidth=\"2\"\n class=\"duration-300 shrink-0\"\n [class.rotate-180]=\"!isOpen()\"\n />\n </ui-button>\n </footer>\n</aside>\n\n@if (!isOpen()) {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n class=\"ui-sidebar-open-btn\"\n classes=\"p-3! rounded-full! shadow-lg!\"\n ariaLabel=\"Open sidebar\"\n (click)=\"isOpen.set(true)\"\n >\n <ng-icon name=\"heroBars3\" size=\"20\" strokeWidth=\"2\" class=\"shrink-0\" />\n </ui-button>\n}\n",
|
|
10290
|
+
styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--sidebar-line);background-color:var(--sidebar);transition-property:translate,width,visibility;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@media(width<48rem){.ui-sidebar-panel{visibility:hidden}}@media(width>=48rem){.ui-sidebar-panel{position:relative}}@media(width>=48rem){.ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 16)}}@media(width>=48rem){.ui-sidebar-panel{translate:none}}@media(width<48rem){:host(.open) .ui-sidebar-panel{visibility:visible;--tw-translate-x: 0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(width>=48rem){:host(.open) .ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 60)}}.ui-sidebar-content{display:flex;min-height:0px;flex-grow:1;flex-direction:column;align-items:flex-start;row-gap:var(--spacing, .25rem);overflow-x:hidden;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-content{align-items:stretch}.ui-sidebar-footer{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-footer{flex-direction:row;justify-content:flex-end}.ui-sidebar-footer-content{display:flex;min-width:0px;justify-content:center}.ui-sidebar-footer-content:empty{display:none}:host(.open) .ui-sidebar-footer-content{flex-grow:1;justify-content:flex-start}.ui-sidebar-open-btn{pointer-events:auto;position:fixed;bottom:calc(var(--spacing, .25rem) * 4);left:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.ui-sidebar-open-btn{display:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
9596
10291
|
dependencies: [{
|
|
9597
10292
|
kind: "component",
|
|
9598
10293
|
type: UiButtonComponent,
|
|
@@ -9636,20 +10331,74 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9636
10331
|
"[class.open]": "isOpen()",
|
|
9637
10332
|
"(document:keydown.escape)": "isOpen.set(false)"
|
|
9638
10333
|
},
|
|
9639
|
-
template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\"
|
|
9640
|
-
styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;
|
|
10334
|
+
template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\">\n</div>\n\n<aside class=\"ui-sidebar-panel\">\n <div class=\"ui-sidebar-content\">\n <ng-content />\n </div>\n\n <footer class=\"ui-sidebar-footer\">\n <!-- app content, e.g. an account menu, hidden when nothing is projected -->\n <div class=\"ui-sidebar-footer-content\">\n <ng-content select=\"[sidebar-footer]\" />\n </div>\n\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"justify-center size-10 p-0!\"\n [ariaLabel]=\"isOpen() ? 'Collapse sidebar' : 'Expand sidebar'\"\n (click)=\"toggle()\"\n >\n <ng-icon\n name=\"heroChevronDoubleLeft\"\n size=\"16\"\n strokeWidth=\"2\"\n class=\"duration-300 shrink-0\"\n [class.rotate-180]=\"!isOpen()\"\n />\n </ui-button>\n </footer>\n</aside>\n\n@if (!isOpen()) {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n class=\"ui-sidebar-open-btn\"\n classes=\"p-3! rounded-full! shadow-lg!\"\n ariaLabel=\"Open sidebar\"\n (click)=\"isOpen.set(true)\"\n >\n <ng-icon name=\"heroBars3\" size=\"20\" strokeWidth=\"2\" class=\"shrink-0\" />\n </ui-button>\n}\n",
|
|
10335
|
+
styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--sidebar-line);background-color:var(--sidebar);transition-property:translate,width,visibility;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@media(width<48rem){.ui-sidebar-panel{visibility:hidden}}@media(width>=48rem){.ui-sidebar-panel{position:relative}}@media(width>=48rem){.ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 16)}}@media(width>=48rem){.ui-sidebar-panel{translate:none}}@media(width<48rem){:host(.open) .ui-sidebar-panel{visibility:visible;--tw-translate-x: 0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(width>=48rem){:host(.open) .ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 60)}}.ui-sidebar-content{display:flex;min-height:0px;flex-grow:1;flex-direction:column;align-items:flex-start;row-gap:var(--spacing, .25rem);overflow-x:hidden;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-content{align-items:stretch}.ui-sidebar-footer{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-footer{flex-direction:row;justify-content:flex-end}.ui-sidebar-footer-content{display:flex;min-width:0px;justify-content:center}.ui-sidebar-footer-content:empty{display:none}:host(.open) .ui-sidebar-footer-content{flex-grow:1;justify-content:flex-start}.ui-sidebar-open-btn{pointer-events:auto;position:fixed;bottom:calc(var(--spacing, .25rem) * 4);left:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.ui-sidebar-open-btn{display:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
9641
10336
|
}]
|
|
9642
10337
|
}],
|
|
9643
10338
|
propDecorators: { isOpen: [{
|
|
9644
10339
|
type: i0.Input,
|
|
9645
10340
|
args: [{
|
|
9646
10341
|
isSignal: true,
|
|
9647
|
-
alias: "isOpen",
|
|
9648
|
-
required: false
|
|
10342
|
+
alias: "isOpen",
|
|
10343
|
+
required: false
|
|
10344
|
+
}]
|
|
10345
|
+
}, {
|
|
10346
|
+
type: i0.Output,
|
|
10347
|
+
args: ["isOpenChange"]
|
|
10348
|
+
}] }
|
|
10349
|
+
});
|
|
10350
|
+
let nextId = 0;
|
|
10351
|
+
var UiSidebarGroupComponent = class UiSidebarGroupComponent {
|
|
10352
|
+
sidebar = inject(UiSidebarComponent, { optional: true });
|
|
10353
|
+
label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
10354
|
+
labelId = `ui-sidebar-group-${nextId++}`;
|
|
10355
|
+
isCollapsed = computed(() => this.sidebar?.isCollapsed() ?? false, ...ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []);
|
|
10356
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
10357
|
+
minVersion: "12.0.0",
|
|
10358
|
+
version: "22.2.1",
|
|
10359
|
+
ngImport: i0,
|
|
10360
|
+
type: UiSidebarGroupComponent,
|
|
10361
|
+
deps: [],
|
|
10362
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
10363
|
+
});
|
|
10364
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
10365
|
+
minVersion: "17.0.0",
|
|
10366
|
+
version: "22.2.1",
|
|
10367
|
+
type: UiSidebarGroupComponent,
|
|
10368
|
+
isStandalone: true,
|
|
10369
|
+
selector: "ui-sidebar-group",
|
|
10370
|
+
inputs: { label: {
|
|
10371
|
+
classPropertyName: "label",
|
|
10372
|
+
publicName: "label",
|
|
10373
|
+
isSignal: true,
|
|
10374
|
+
isRequired: true,
|
|
10375
|
+
transformFunction: null
|
|
10376
|
+
} },
|
|
10377
|
+
ngImport: i0,
|
|
10378
|
+
template: "@if (isCollapsed()) {\n <div class=\"ui-sidebar-group-divider\" aria-hidden=\"true\"></div>\n} @else {\n <span class=\"ui-sidebar-group-label ui-text-caption\" [id]=\"labelId\">{{ label() }}</span>\n}\n\n<!-- the visible label names the group, collapsed it's hidden so the name moves to aria-label -->\n<div\n class=\"ui-sidebar-group-items\"\n role=\"group\"\n [attr.aria-labelledby]=\"isCollapsed() ? null : labelId\"\n [attr.aria-label]=\"isCollapsed() ? label() : null\"\n>\n <ng-content />\n</div>\n",
|
|
10379
|
+
styles: ["@layer properties;:host{display:flex;flex-direction:column;align-self:stretch}:host(:not(:first-child)){margin-top:calc(var(--spacing, .25rem) * 4)}.ui-sidebar-group-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-bottom:calc(var(--spacing, .25rem) * 1.5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-sidebar-group-divider{margin-inline:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--sidebar-line)}:host(:first-child) .ui-sidebar-group-divider{display:none}.ui-sidebar-group-items{display:flex;flex-direction:column;row-gap:var(--spacing, .25rem)}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
10380
|
+
});
|
|
10381
|
+
};
|
|
10382
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
10383
|
+
minVersion: "12.0.0",
|
|
10384
|
+
version: "22.2.1",
|
|
10385
|
+
ngImport: i0,
|
|
10386
|
+
type: UiSidebarGroupComponent,
|
|
10387
|
+
decorators: [{
|
|
10388
|
+
type: Component,
|
|
10389
|
+
args: [{
|
|
10390
|
+
selector: "ui-sidebar-group",
|
|
10391
|
+
template: "@if (isCollapsed()) {\n <div class=\"ui-sidebar-group-divider\" aria-hidden=\"true\"></div>\n} @else {\n <span class=\"ui-sidebar-group-label ui-text-caption\" [id]=\"labelId\">{{ label() }}</span>\n}\n\n<!-- the visible label names the group, collapsed it's hidden so the name moves to aria-label -->\n<div\n class=\"ui-sidebar-group-items\"\n role=\"group\"\n [attr.aria-labelledby]=\"isCollapsed() ? null : labelId\"\n [attr.aria-label]=\"isCollapsed() ? label() : null\"\n>\n <ng-content />\n</div>\n",
|
|
10392
|
+
styles: ["@layer properties;:host{display:flex;flex-direction:column;align-self:stretch}:host(:not(:first-child)){margin-top:calc(var(--spacing, .25rem) * 4)}.ui-sidebar-group-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-bottom:calc(var(--spacing, .25rem) * 1.5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-sidebar-group-divider{margin-inline:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--sidebar-line)}:host(:first-child) .ui-sidebar-group-divider{display:none}.ui-sidebar-group-items{display:flex;flex-direction:column;row-gap:var(--spacing, .25rem)}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
10393
|
+
}]
|
|
10394
|
+
}],
|
|
10395
|
+
propDecorators: { label: [{
|
|
10396
|
+
type: i0.Input,
|
|
10397
|
+
args: [{
|
|
10398
|
+
isSignal: true,
|
|
10399
|
+
alias: "label",
|
|
10400
|
+
required: true
|
|
9649
10401
|
}]
|
|
9650
|
-
}, {
|
|
9651
|
-
type: i0.Output,
|
|
9652
|
-
args: ["isOpenChange"]
|
|
9653
10402
|
}] }
|
|
9654
10403
|
});
|
|
9655
10404
|
var UiSidebarItemComponent = class UiSidebarItemComponent {
|
|
@@ -9820,7 +10569,7 @@ var UiColourComponent = class UiColourComponent {
|
|
|
9820
10569
|
isSignal: true
|
|
9821
10570
|
}],
|
|
9822
10571
|
ngImport: i0,
|
|
9823
|
-
template: "<ui-input-group [validationState]=\"isValid() ? null : false\">\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"h-full\"\n ariaLabel=\"Pick colour\"\n [disabled]=\"disabled()\"\n (click)=\"openPicker()\"\n >\n <span\n class=\"border border-
|
|
10572
|
+
template: "<ui-input-group [validationState]=\"isValid() ? null : false\">\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"h-full\"\n ariaLabel=\"Pick colour\"\n [disabled]=\"disabled()\"\n (click)=\"openPicker()\"\n >\n <span\n class=\"border border-line-2 rounded size-5\"\n [style.background-color]=\"isValid() ? value() : 'transparent'\"\n ></span>\n </ui-button>\n\n <input\n #picker\n type=\"color\"\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [value]=\"pickerValue()\"\n [disabled]=\"disabled()\"\n (input)=\"handlePick($event)\"\n />\n\n <ui-input\n [(value)]=\"value\"\n [id]=\"id()\"\n [disabled]=\"disabled()\"\n [maxlength]=\"7\"\n [spellcheck]=\"false\"\n autocomplete=\"off\"\n placeholder=\"#000000\"\n />\n</ui-input-group>\n",
|
|
9824
10573
|
dependencies: [
|
|
9825
10574
|
{
|
|
9826
10575
|
kind: "component",
|
|
@@ -9847,6 +10596,7 @@ var UiColourComponent = class UiColourComponent {
|
|
|
9847
10596
|
"maxlength",
|
|
9848
10597
|
"autofocus",
|
|
9849
10598
|
"spellcheck",
|
|
10599
|
+
"revealable",
|
|
9850
10600
|
"list",
|
|
9851
10601
|
"ariaLabel",
|
|
9852
10602
|
"describedBy",
|
|
@@ -9903,7 +10653,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9903
10653
|
UiInputGroupComponent,
|
|
9904
10654
|
UiButtonComponent
|
|
9905
10655
|
],
|
|
9906
|
-
template: "<ui-input-group [validationState]=\"isValid() ? null : false\">\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"h-full\"\n ariaLabel=\"Pick colour\"\n [disabled]=\"disabled()\"\n (click)=\"openPicker()\"\n >\n <span\n class=\"border border-
|
|
10656
|
+
template: "<ui-input-group [validationState]=\"isValid() ? null : false\">\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"h-full\"\n ariaLabel=\"Pick colour\"\n [disabled]=\"disabled()\"\n (click)=\"openPicker()\"\n >\n <span\n class=\"border border-line-2 rounded size-5\"\n [style.background-color]=\"isValid() ? value() : 'transparent'\"\n ></span>\n </ui-button>\n\n <input\n #picker\n type=\"color\"\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [value]=\"pickerValue()\"\n [disabled]=\"disabled()\"\n (input)=\"handlePick($event)\"\n />\n\n <ui-input\n [(value)]=\"value\"\n [id]=\"id()\"\n [disabled]=\"disabled()\"\n [maxlength]=\"7\"\n [spellcheck]=\"false\"\n autocomplete=\"off\"\n placeholder=\"#000000\"\n />\n</ui-input-group>\n"
|
|
9907
10657
|
}]
|
|
9908
10658
|
}],
|
|
9909
10659
|
propDecorators: {
|
|
@@ -10055,6 +10805,7 @@ var UiCounterComponent = class UiCounterComponent {
|
|
|
10055
10805
|
"maxlength",
|
|
10056
10806
|
"autofocus",
|
|
10057
10807
|
"spellcheck",
|
|
10808
|
+
"revealable",
|
|
10058
10809
|
"list",
|
|
10059
10810
|
"ariaLabel",
|
|
10060
10811
|
"describedBy",
|
|
@@ -10371,7 +11122,7 @@ var UiDateRangePickerComponent = class UiDateRangePickerComponent {
|
|
|
10371
11122
|
}
|
|
10372
11123
|
},
|
|
10373
11124
|
outputs: { value: "valueChange" },
|
|
10374
|
-
host: { classAttribute: "block
|
|
11125
|
+
host: { classAttribute: "block" },
|
|
10375
11126
|
viewQueries: [{
|
|
10376
11127
|
propertyName: "calendar",
|
|
10377
11128
|
first: true,
|
|
@@ -10381,7 +11132,7 @@ var UiDateRangePickerComponent = class UiDateRangePickerComponent {
|
|
|
10381
11132
|
}],
|
|
10382
11133
|
ngImport: i0,
|
|
10383
11134
|
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n class=\"w-full\"\n>\n <ui-input\n [value]=\"display()\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n ariaHasPopup=\"dialog\"\n [validationState]=\"validationState()\"\n classes=\"cursor-pointer\"\n autocomplete=\"off\"\n readonly\n (click)=\"toggle()\"\n (keydown)=\"handleInputKeydown($event)\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroCalendarDateRange\"\n class=\"ms-3 text-muted-foreground-1 shrink-0\"\n />\n </ng-template>\n\n <ng-template #trailing>\n @if (clearable() && hasValue() && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center w-8 self-stretch text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear dates\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-date-range-panel\">\n @if (presets().length) {\n <div class=\"ui-date-range-presets\" role=\"group\" aria-label=\"Quick ranges\">\n @for (preset of presets(); track preset.label; let index = $index) {\n <button\n type=\"button\"\n class=\"ui-date-range-preset ui-text-body-alt\"\n [attr.aria-pressed]=\"index === activePreset()\"\n (click)=\"choosePreset(preset)\"\n (keydown)=\"handlePanelKeydown($event)\"\n >\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ui-calendar\n class=\"p-3\"\n mode=\"range\"\n [(range)]=\"value\"\n [min]=\"min()\"\n [max]=\"max()\"\n [isDateDisabled]=\"isDateDisabled()\"\n [weekStart]=\"weekStart()\"\n [locale]=\"locale()\"\n (rangeChange)=\"handleRange($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n </div>\n </div>\n }\n</ui-dropdown>\n",
|
|
10384
|
-
styles: ["@layer properties
|
|
11135
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}.ui-date-range-panel{display:flex;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-date-range-presets{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:calc(var(--spacing, .25rem) * .5);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--border-line-2);padding:calc(var(--spacing, .25rem) * 2)}.ui-date-range-preset{border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left;white-space:nowrap;color:var(--foreground)}.ui-date-range-preset:focus{--tw-outline-style: none;outline-style:none}.ui-date-range-preset:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-date-range-preset:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-date-range-preset:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-date-range-preset:hover,.ui-date-range-preset:focus-visible{background-color:var(--surface)}.ui-date-range-preset[aria-pressed=true]{background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-700, var(--color-blue-700))}.ui-date-range-preset[aria-pressed=true]:hover,.ui-date-range-preset[aria-pressed=true]:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
10385
11136
|
dependencies: [
|
|
10386
11137
|
{
|
|
10387
11138
|
kind: "component",
|
|
@@ -10408,6 +11159,7 @@ var UiDateRangePickerComponent = class UiDateRangePickerComponent {
|
|
|
10408
11159
|
"maxlength",
|
|
10409
11160
|
"autofocus",
|
|
10410
11161
|
"spellcheck",
|
|
11162
|
+
"revealable",
|
|
10411
11163
|
"list",
|
|
10412
11164
|
"ariaLabel",
|
|
10413
11165
|
"describedBy",
|
|
@@ -10491,9 +11243,9 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10491
11243
|
UiDropdownDirective,
|
|
10492
11244
|
NgIcon
|
|
10493
11245
|
],
|
|
10494
|
-
host: { class: "block
|
|
11246
|
+
host: { class: "block" },
|
|
10495
11247
|
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n class=\"w-full\"\n>\n <ui-input\n [value]=\"display()\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n ariaHasPopup=\"dialog\"\n [validationState]=\"validationState()\"\n classes=\"cursor-pointer\"\n autocomplete=\"off\"\n readonly\n (click)=\"toggle()\"\n (keydown)=\"handleInputKeydown($event)\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroCalendarDateRange\"\n class=\"ms-3 text-muted-foreground-1 shrink-0\"\n />\n </ng-template>\n\n <ng-template #trailing>\n @if (clearable() && hasValue() && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center w-8 self-stretch text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear dates\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-date-range-panel\">\n @if (presets().length) {\n <div class=\"ui-date-range-presets\" role=\"group\" aria-label=\"Quick ranges\">\n @for (preset of presets(); track preset.label; let index = $index) {\n <button\n type=\"button\"\n class=\"ui-date-range-preset ui-text-body-alt\"\n [attr.aria-pressed]=\"index === activePreset()\"\n (click)=\"choosePreset(preset)\"\n (keydown)=\"handlePanelKeydown($event)\"\n >\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ui-calendar\n class=\"p-3\"\n mode=\"range\"\n [(range)]=\"value\"\n [min]=\"min()\"\n [max]=\"max()\"\n [isDateDisabled]=\"isDateDisabled()\"\n [weekStart]=\"weekStart()\"\n [locale]=\"locale()\"\n (rangeChange)=\"handleRange($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n </div>\n </div>\n }\n</ui-dropdown>\n",
|
|
10496
|
-
styles: ["@layer properties
|
|
11248
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}.ui-date-range-panel{display:flex;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-date-range-presets{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:calc(var(--spacing, .25rem) * .5);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--border-line-2);padding:calc(var(--spacing, .25rem) * 2)}.ui-date-range-preset{border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left;white-space:nowrap;color:var(--foreground)}.ui-date-range-preset:focus{--tw-outline-style: none;outline-style:none}.ui-date-range-preset:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-date-range-preset:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-date-range-preset:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-date-range-preset:hover,.ui-date-range-preset:focus-visible{background-color:var(--surface)}.ui-date-range-preset[aria-pressed=true]{background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-700, var(--color-blue-700))}.ui-date-range-preset[aria-pressed=true]:hover,.ui-date-range-preset[aria-pressed=true]:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
10497
11249
|
}]
|
|
10498
11250
|
}],
|
|
10499
11251
|
propDecorators: {
|
|
@@ -11063,7 +11815,7 @@ var UiDatepickerComponent = class UiDatepickerComponent {
|
|
|
11063
11815
|
}
|
|
11064
11816
|
},
|
|
11065
11817
|
outputs: { value: "valueChange" },
|
|
11066
|
-
host: { classAttribute: "block
|
|
11818
|
+
host: { classAttribute: "block" },
|
|
11067
11819
|
viewQueries: [{
|
|
11068
11820
|
propertyName: "calendar",
|
|
11069
11821
|
first: true,
|
|
@@ -11072,7 +11824,8 @@ var UiDatepickerComponent = class UiDatepickerComponent {
|
|
|
11072
11824
|
isSignal: true
|
|
11073
11825
|
}],
|
|
11074
11826
|
ngImport: i0,
|
|
11075
|
-
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n class=\"w-full\"\n>\n <ui-input\n [value]=\"display()\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n ariaHasPopup=\"dialog\"\n [validationState]=\"validationState()\"\n classes=\"cursor-pointer\"\n autocomplete=\"off\"\n readonly\n (click)=\"toggle()\"\n (keydown)=\"handleInputKeydown($event)\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroCalendar\"\n class=\"ms-3 text-muted-foreground-1 shrink-0\"\n />\n </ng-template>\n\n <ng-template #trailing>\n @if (clearable() && value() && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear date\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <ui-card radius=\"xl\" class=\"p-3\">\n <ui-calendar\n [value]=\"datePart()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [isDateDisabled]=\"isDateDisabled()\"\n [weekStart]=\"weekStart()\"\n [locale]=\"locale()\"\n (valueChange)=\"handlePick($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n\n @if (withTime()) {\n <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-
|
|
11827
|
+
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n class=\"w-full\"\n>\n <ui-input\n [value]=\"display()\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n ariaHasPopup=\"dialog\"\n [validationState]=\"validationState()\"\n classes=\"cursor-pointer\"\n autocomplete=\"off\"\n readonly\n (click)=\"toggle()\"\n (keydown)=\"handleInputKeydown($event)\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroCalendar\"\n class=\"ms-3 text-muted-foreground-1 shrink-0\"\n />\n </ng-template>\n\n <ng-template #trailing>\n @if (clearable() && value() && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear date\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <ui-card radius=\"xl\" class=\"p-3\">\n <ui-calendar\n [value]=\"datePart()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [isDateDisabled]=\"isDateDisabled()\"\n [weekStart]=\"weekStart()\"\n [locale]=\"locale()\"\n (valueChange)=\"handlePick($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n\n @if (withTime()) {\n <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-line-2 border-t\">\n <ui-time-select\n [value]=\"timePart()\"\n [minuteStep]=\"minuteStep()\"\n (valueChange)=\"handleTime($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n\n <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n </div>\n }\n </ui-card>\n </div>\n }\n</ui-dropdown>\n",
|
|
11828
|
+
styles: ["@layer components{:host{width:100%}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
11076
11829
|
dependencies: [
|
|
11077
11830
|
{
|
|
11078
11831
|
kind: "component",
|
|
@@ -11099,6 +11852,7 @@ var UiDatepickerComponent = class UiDatepickerComponent {
|
|
|
11099
11852
|
"maxlength",
|
|
11100
11853
|
"autofocus",
|
|
11101
11854
|
"spellcheck",
|
|
11855
|
+
"revealable",
|
|
11102
11856
|
"list",
|
|
11103
11857
|
"ariaLabel",
|
|
11104
11858
|
"describedBy",
|
|
@@ -11217,8 +11971,9 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11217
11971
|
NgIcon,
|
|
11218
11972
|
UiCardComponent
|
|
11219
11973
|
],
|
|
11220
|
-
host: { class: "block
|
|
11221
|
-
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n class=\"w-full\"\n>\n <ui-input\n [value]=\"display()\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n ariaHasPopup=\"dialog\"\n [validationState]=\"validationState()\"\n classes=\"cursor-pointer\"\n autocomplete=\"off\"\n readonly\n (click)=\"toggle()\"\n (keydown)=\"handleInputKeydown($event)\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroCalendar\"\n class=\"ms-3 text-muted-foreground-1 shrink-0\"\n />\n </ng-template>\n\n <ng-template #trailing>\n @if (clearable() && value() && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear date\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <ui-card radius=\"xl\" class=\"p-3\">\n <ui-calendar\n [value]=\"datePart()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [isDateDisabled]=\"isDateDisabled()\"\n [weekStart]=\"weekStart()\"\n [locale]=\"locale()\"\n (valueChange)=\"handlePick($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n\n @if (withTime()) {\n <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-
|
|
11974
|
+
host: { class: "block" },
|
|
11975
|
+
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n class=\"w-full\"\n>\n <ui-input\n [value]=\"display()\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n ariaHasPopup=\"dialog\"\n [validationState]=\"validationState()\"\n classes=\"cursor-pointer\"\n autocomplete=\"off\"\n readonly\n (click)=\"toggle()\"\n (keydown)=\"handleInputKeydown($event)\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroCalendar\"\n class=\"ms-3 text-muted-foreground-1 shrink-0\"\n />\n </ng-template>\n\n <ng-template #trailing>\n @if (clearable() && value() && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear date\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <ui-card radius=\"xl\" class=\"p-3\">\n <ui-calendar\n [value]=\"datePart()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [isDateDisabled]=\"isDateDisabled()\"\n [weekStart]=\"weekStart()\"\n [locale]=\"locale()\"\n (valueChange)=\"handlePick($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n\n @if (withTime()) {\n <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-line-2 border-t\">\n <ui-time-select\n [value]=\"timePart()\"\n [minuteStep]=\"minuteStep()\"\n (valueChange)=\"handleTime($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n\n <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n </div>\n }\n </ui-card>\n </div>\n }\n</ui-dropdown>\n",
|
|
11976
|
+
styles: ["@layer components{:host{width:100%}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
11222
11977
|
}]
|
|
11223
11978
|
}],
|
|
11224
11979
|
propDecorators: {
|
|
@@ -11738,6 +12493,7 @@ var UiFileInputComponent = class UiFileInputComponent {
|
|
|
11738
12493
|
"maxlength",
|
|
11739
12494
|
"autofocus",
|
|
11740
12495
|
"spellcheck",
|
|
12496
|
+
"revealable",
|
|
11741
12497
|
"list",
|
|
11742
12498
|
"ariaLabel",
|
|
11743
12499
|
"describedBy",
|
|
@@ -11950,7 +12706,7 @@ var UiSwitchComponent = class UiSwitchComponent {
|
|
|
11950
12706
|
},
|
|
11951
12707
|
outputs: { value: "valueChange" },
|
|
11952
12708
|
ngImport: i0,
|
|
11953
|
-
template: "<label class=\"inline-flex items-center gap-2 cursor-pointer\" [class.opacity-50]=\"disabled()\">\n <span class=\"relative inline-flex items-center rounded-full focus-within:ring-2 focus-within:ring-primary-200/50\">\n <!--\n reuses ui-checkbox for the real state/behaviour, class-bound track/thumb below\n react to value() directly instead of peer-checked, since peer-* relies on the\n input and the styled element being real DOM siblings, which breaks once the\n input is nested inside ui-checkbox's own host element\n -->\n <ui-checkbox\n [(value)]=\"value\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [name]=\"name()\"\n classes=\"sr-only\"\n />\n\n <span\n class=\"w-9 h-5 rounded-full transition-colors\"\n [class.bg-primary-600]=\"value()\"\n [class.bg-
|
|
12709
|
+
template: "<label class=\"inline-flex items-center gap-2 cursor-pointer\" [class.opacity-50]=\"disabled()\">\n <span class=\"relative inline-flex items-center rounded-full focus-within:ring-2 focus-within:ring-primary-200/50\">\n <!--\n reuses ui-checkbox for the real state/behaviour, class-bound track/thumb below\n react to value() directly instead of peer-checked, since peer-* relies on the\n input and the styled element being real DOM siblings, which breaks once the\n input is nested inside ui-checkbox's own host element\n -->\n <ui-checkbox\n [(value)]=\"value\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [name]=\"name()\"\n classes=\"sr-only\"\n />\n\n <span\n class=\"w-9 h-5 rounded-full transition-colors\"\n [class.bg-primary-600]=\"value()\"\n [class.bg-surface-1]=\"!value()\"\n ></span>\n\n <span\n class=\"absolute left-0.5 size-4 rounded-full bg-white shadow transition-transform\"\n [class.translate-x-4]=\"value()\"\n ></span>\n </span>\n\n <ng-content />\n</label>\n",
|
|
11954
12710
|
dependencies: [{
|
|
11955
12711
|
kind: "component",
|
|
11956
12712
|
type: UiCheckboxComponent,
|
|
@@ -11979,7 +12735,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11979
12735
|
args: [{
|
|
11980
12736
|
selector: "ui-switch",
|
|
11981
12737
|
imports: [UiCheckboxComponent],
|
|
11982
|
-
template: "<label class=\"inline-flex items-center gap-2 cursor-pointer\" [class.opacity-50]=\"disabled()\">\n <span class=\"relative inline-flex items-center rounded-full focus-within:ring-2 focus-within:ring-primary-200/50\">\n <!--\n reuses ui-checkbox for the real state/behaviour, class-bound track/thumb below\n react to value() directly instead of peer-checked, since peer-* relies on the\n input and the styled element being real DOM siblings, which breaks once the\n input is nested inside ui-checkbox's own host element\n -->\n <ui-checkbox\n [(value)]=\"value\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [name]=\"name()\"\n classes=\"sr-only\"\n />\n\n <span\n class=\"w-9 h-5 rounded-full transition-colors\"\n [class.bg-primary-600]=\"value()\"\n [class.bg-
|
|
12738
|
+
template: "<label class=\"inline-flex items-center gap-2 cursor-pointer\" [class.opacity-50]=\"disabled()\">\n <span class=\"relative inline-flex items-center rounded-full focus-within:ring-2 focus-within:ring-primary-200/50\">\n <!--\n reuses ui-checkbox for the real state/behaviour, class-bound track/thumb below\n react to value() directly instead of peer-checked, since peer-* relies on the\n input and the styled element being real DOM siblings, which breaks once the\n input is nested inside ui-checkbox's own host element\n -->\n <ui-checkbox\n [(value)]=\"value\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [name]=\"name()\"\n classes=\"sr-only\"\n />\n\n <span\n class=\"w-9 h-5 rounded-full transition-colors\"\n [class.bg-primary-600]=\"value()\"\n [class.bg-surface-1]=\"!value()\"\n ></span>\n\n <span\n class=\"absolute left-0.5 size-4 rounded-full bg-white shadow transition-transform\"\n [class.translate-x-4]=\"value()\"\n ></span>\n </span>\n\n <ng-content />\n</label>\n"
|
|
11983
12739
|
}]
|
|
11984
12740
|
}],
|
|
11985
12741
|
propDecorators: {
|
|
@@ -12020,6 +12776,405 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12020
12776
|
}]
|
|
12021
12777
|
}
|
|
12022
12778
|
});
|
|
12023
|
-
|
|
12779
|
+
const UI_THEME_CONFIG = new InjectionToken("UI_THEME_CONFIG", {
|
|
12780
|
+
providedIn: "root",
|
|
12781
|
+
factory: () => ({ storageKey: "ui-theme" })
|
|
12782
|
+
});
|
|
12783
|
+
const PREFERENCES = [
|
|
12784
|
+
"system",
|
|
12785
|
+
"light",
|
|
12786
|
+
"dark"
|
|
12787
|
+
];
|
|
12788
|
+
var UiThemeService = class UiThemeService {
|
|
12789
|
+
document = inject(DOCUMENT);
|
|
12790
|
+
storageKey = inject(UI_THEME_CONFIG).storageKey;
|
|
12791
|
+
media = this.document.defaultView?.matchMedia?.("(prefers-color-scheme: dark)");
|
|
12792
|
+
preference = signal(this.stored(), ...ngDevMode ? [{ debugName: "preference" }] : /* istanbul ignore next */ []);
|
|
12793
|
+
systemDark = signal(this.media?.matches ?? false, ...ngDevMode ? [{ debugName: "systemDark" }] : /* istanbul ignore next */ []);
|
|
12794
|
+
isDark = computed(() => {
|
|
12795
|
+
const preference = this.preference();
|
|
12796
|
+
return preference === "dark" || preference === "system" && this.systemDark();
|
|
12797
|
+
}, ...ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []);
|
|
12798
|
+
constructor() {
|
|
12799
|
+
const onChange = (event) => this.systemDark.set(event.matches);
|
|
12800
|
+
this.media?.addEventListener("change", onChange);
|
|
12801
|
+
inject(DestroyRef).onDestroy(() => this.media?.removeEventListener("change", onChange));
|
|
12802
|
+
effect(() => {
|
|
12803
|
+
const root = this.document.documentElement;
|
|
12804
|
+
const dark = this.isDark();
|
|
12805
|
+
root.classList.toggle("dark", dark);
|
|
12806
|
+
root.style.colorScheme = dark ? "dark" : "light";
|
|
12807
|
+
});
|
|
12808
|
+
effect(() => {
|
|
12809
|
+
const preference = this.preference();
|
|
12810
|
+
try {
|
|
12811
|
+
this.document.defaultView?.localStorage.setItem(this.storageKey, preference);
|
|
12812
|
+
} catch {}
|
|
12813
|
+
});
|
|
12814
|
+
}
|
|
12815
|
+
stored() {
|
|
12816
|
+
try {
|
|
12817
|
+
const value = this.document.defaultView?.localStorage.getItem(this.storageKey);
|
|
12818
|
+
return PREFERENCES.includes(value) ? value : "system";
|
|
12819
|
+
} catch {
|
|
12820
|
+
return "system";
|
|
12821
|
+
}
|
|
12822
|
+
}
|
|
12823
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
12824
|
+
minVersion: "12.0.0",
|
|
12825
|
+
version: "22.2.1",
|
|
12826
|
+
ngImport: i0,
|
|
12827
|
+
type: UiThemeService,
|
|
12828
|
+
deps: [],
|
|
12829
|
+
target: i0.ɵɵFactoryTarget.Injectable
|
|
12830
|
+
});
|
|
12831
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({
|
|
12832
|
+
minVersion: "12.0.0",
|
|
12833
|
+
version: "22.2.1",
|
|
12834
|
+
ngImport: i0,
|
|
12835
|
+
type: UiThemeService,
|
|
12836
|
+
providedIn: "root"
|
|
12837
|
+
});
|
|
12838
|
+
};
|
|
12839
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
12840
|
+
minVersion: "12.0.0",
|
|
12841
|
+
version: "22.2.1",
|
|
12842
|
+
ngImport: i0,
|
|
12843
|
+
type: UiThemeService,
|
|
12844
|
+
decorators: [{
|
|
12845
|
+
type: Injectable,
|
|
12846
|
+
args: [{ providedIn: "root" }]
|
|
12847
|
+
}],
|
|
12848
|
+
ctorParameters: () => []
|
|
12849
|
+
});
|
|
12850
|
+
function provideUiTheme(config = {}) {
|
|
12851
|
+
return makeEnvironmentProviders([{
|
|
12852
|
+
provide: UI_THEME_CONFIG,
|
|
12853
|
+
useValue: {
|
|
12854
|
+
storageKey: "ui-theme",
|
|
12855
|
+
...config
|
|
12856
|
+
}
|
|
12857
|
+
}, provideAppInitializer(() => {
|
|
12858
|
+
inject(UiThemeService);
|
|
12859
|
+
})]);
|
|
12860
|
+
}
|
|
12861
|
+
var UiThemeSwitchComponent = class UiThemeSwitchComponent {
|
|
12862
|
+
theme = inject(UiThemeService);
|
|
12863
|
+
ariaLabel = input("Theme", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
12864
|
+
fill = input(false, {
|
|
12865
|
+
...ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {},
|
|
12866
|
+
transform: booleanAttribute
|
|
12867
|
+
});
|
|
12868
|
+
options = [
|
|
12869
|
+
{
|
|
12870
|
+
value: "system",
|
|
12871
|
+
label: "System"
|
|
12872
|
+
},
|
|
12873
|
+
{
|
|
12874
|
+
value: "light",
|
|
12875
|
+
label: "Light"
|
|
12876
|
+
},
|
|
12877
|
+
{
|
|
12878
|
+
value: "dark",
|
|
12879
|
+
label: "Dark"
|
|
12880
|
+
}
|
|
12881
|
+
];
|
|
12882
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
12883
|
+
minVersion: "12.0.0",
|
|
12884
|
+
version: "22.2.1",
|
|
12885
|
+
ngImport: i0,
|
|
12886
|
+
type: UiThemeSwitchComponent,
|
|
12887
|
+
deps: [],
|
|
12888
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
12889
|
+
});
|
|
12890
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
12891
|
+
minVersion: "17.1.0",
|
|
12892
|
+
version: "22.2.1",
|
|
12893
|
+
type: UiThemeSwitchComponent,
|
|
12894
|
+
isStandalone: true,
|
|
12895
|
+
selector: "ui-theme-switch",
|
|
12896
|
+
inputs: {
|
|
12897
|
+
ariaLabel: {
|
|
12898
|
+
classPropertyName: "ariaLabel",
|
|
12899
|
+
publicName: "ariaLabel",
|
|
12900
|
+
isSignal: true,
|
|
12901
|
+
isRequired: false,
|
|
12902
|
+
transformFunction: null
|
|
12903
|
+
},
|
|
12904
|
+
fill: {
|
|
12905
|
+
classPropertyName: "fill",
|
|
12906
|
+
publicName: "fill",
|
|
12907
|
+
isSignal: true,
|
|
12908
|
+
isRequired: false,
|
|
12909
|
+
transformFunction: null
|
|
12910
|
+
}
|
|
12911
|
+
},
|
|
12912
|
+
host: { properties: { "class.block": "fill()" } },
|
|
12913
|
+
ngImport: i0,
|
|
12914
|
+
template: `
|
|
12915
|
+
<ui-segmented
|
|
12916
|
+
[options]="options"
|
|
12917
|
+
[(value)]="theme.preference"
|
|
12918
|
+
[ariaLabel]="ariaLabel()"
|
|
12919
|
+
[fill]="fill()"
|
|
12920
|
+
/>
|
|
12921
|
+
`,
|
|
12922
|
+
isInline: true,
|
|
12923
|
+
dependencies: [{
|
|
12924
|
+
kind: "component",
|
|
12925
|
+
type: UiSegmentedComponent,
|
|
12926
|
+
selector: "ui-segmented",
|
|
12927
|
+
inputs: [
|
|
12928
|
+
"options",
|
|
12929
|
+
"value",
|
|
12930
|
+
"ariaLabel",
|
|
12931
|
+
"fill"
|
|
12932
|
+
],
|
|
12933
|
+
outputs: ["valueChange"]
|
|
12934
|
+
}]
|
|
12935
|
+
});
|
|
12936
|
+
};
|
|
12937
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
12938
|
+
minVersion: "12.0.0",
|
|
12939
|
+
version: "22.2.1",
|
|
12940
|
+
ngImport: i0,
|
|
12941
|
+
type: UiThemeSwitchComponent,
|
|
12942
|
+
decorators: [{
|
|
12943
|
+
type: Component,
|
|
12944
|
+
args: [{
|
|
12945
|
+
selector: "ui-theme-switch",
|
|
12946
|
+
imports: [UiSegmentedComponent],
|
|
12947
|
+
host: { "[class.block]": "fill()" },
|
|
12948
|
+
template: `
|
|
12949
|
+
<ui-segmented
|
|
12950
|
+
[options]="options"
|
|
12951
|
+
[(value)]="theme.preference"
|
|
12952
|
+
[ariaLabel]="ariaLabel()"
|
|
12953
|
+
[fill]="fill()"
|
|
12954
|
+
/>
|
|
12955
|
+
`
|
|
12956
|
+
}]
|
|
12957
|
+
}],
|
|
12958
|
+
propDecorators: {
|
|
12959
|
+
ariaLabel: [{
|
|
12960
|
+
type: i0.Input,
|
|
12961
|
+
args: [{
|
|
12962
|
+
isSignal: true,
|
|
12963
|
+
alias: "ariaLabel",
|
|
12964
|
+
required: false
|
|
12965
|
+
}]
|
|
12966
|
+
}],
|
|
12967
|
+
fill: [{
|
|
12968
|
+
type: i0.Input,
|
|
12969
|
+
args: [{
|
|
12970
|
+
isSignal: true,
|
|
12971
|
+
alias: "fill",
|
|
12972
|
+
required: false
|
|
12973
|
+
}]
|
|
12974
|
+
}]
|
|
12975
|
+
}
|
|
12976
|
+
});
|
|
12977
|
+
var UiUserMenuComponent = class UiUserMenuComponent {
|
|
12978
|
+
dropdown = inject(UiDropdownComponent, { optional: true });
|
|
12979
|
+
name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
|
|
12980
|
+
detail = input("", ...ngDevMode ? [{ debugName: "detail" }] : /* istanbul ignore next */ []);
|
|
12981
|
+
src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
|
|
12982
|
+
items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
|
|
12983
|
+
themeSwitch = input(true, {
|
|
12984
|
+
...ngDevMode ? { debugName: "themeSwitch" } : /* istanbul ignore next */ {},
|
|
12985
|
+
transform: booleanAttribute
|
|
12986
|
+
});
|
|
12987
|
+
menuItems = computed(() => this.items().map((item) => {
|
|
12988
|
+
if ("divider" in item) return item;
|
|
12989
|
+
if ("children" in item) return {
|
|
12990
|
+
...item,
|
|
12991
|
+
children: item.children.map((child) => this.closing(child))
|
|
12992
|
+
};
|
|
12993
|
+
return this.closing(item);
|
|
12994
|
+
}), ...ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []);
|
|
12995
|
+
isDivider(item) {
|
|
12996
|
+
return "divider" in item;
|
|
12997
|
+
}
|
|
12998
|
+
group(item) {
|
|
12999
|
+
return "children" in item ? item : null;
|
|
13000
|
+
}
|
|
13001
|
+
button(item) {
|
|
13002
|
+
return "onClick" in item ? item : null;
|
|
13003
|
+
}
|
|
13004
|
+
closing(item) {
|
|
13005
|
+
return {
|
|
13006
|
+
...item,
|
|
13007
|
+
onClick: () => {
|
|
13008
|
+
this.dropdown?.close();
|
|
13009
|
+
item.onClick();
|
|
13010
|
+
}
|
|
13011
|
+
};
|
|
13012
|
+
}
|
|
13013
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
13014
|
+
minVersion: "12.0.0",
|
|
13015
|
+
version: "22.2.1",
|
|
13016
|
+
ngImport: i0,
|
|
13017
|
+
type: UiUserMenuComponent,
|
|
13018
|
+
deps: [],
|
|
13019
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
13020
|
+
});
|
|
13021
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
13022
|
+
minVersion: "17.0.0",
|
|
13023
|
+
version: "22.2.1",
|
|
13024
|
+
type: UiUserMenuComponent,
|
|
13025
|
+
isStandalone: true,
|
|
13026
|
+
selector: "ui-user-menu",
|
|
13027
|
+
inputs: {
|
|
13028
|
+
name: {
|
|
13029
|
+
classPropertyName: "name",
|
|
13030
|
+
publicName: "name",
|
|
13031
|
+
isSignal: true,
|
|
13032
|
+
isRequired: true,
|
|
13033
|
+
transformFunction: null
|
|
13034
|
+
},
|
|
13035
|
+
detail: {
|
|
13036
|
+
classPropertyName: "detail",
|
|
13037
|
+
publicName: "detail",
|
|
13038
|
+
isSignal: true,
|
|
13039
|
+
isRequired: false,
|
|
13040
|
+
transformFunction: null
|
|
13041
|
+
},
|
|
13042
|
+
src: {
|
|
13043
|
+
classPropertyName: "src",
|
|
13044
|
+
publicName: "src",
|
|
13045
|
+
isSignal: true,
|
|
13046
|
+
isRequired: false,
|
|
13047
|
+
transformFunction: null
|
|
13048
|
+
},
|
|
13049
|
+
items: {
|
|
13050
|
+
classPropertyName: "items",
|
|
13051
|
+
publicName: "items",
|
|
13052
|
+
isSignal: true,
|
|
13053
|
+
isRequired: false,
|
|
13054
|
+
transformFunction: null
|
|
13055
|
+
},
|
|
13056
|
+
themeSwitch: {
|
|
13057
|
+
classPropertyName: "themeSwitch",
|
|
13058
|
+
publicName: "themeSwitch",
|
|
13059
|
+
isSignal: true,
|
|
13060
|
+
isRequired: false,
|
|
13061
|
+
transformFunction: null
|
|
13062
|
+
}
|
|
13063
|
+
},
|
|
13064
|
+
ngImport: i0,
|
|
13065
|
+
template: "<ui-card radius=\"xl\" class=\"ui-user-menu\">\n <div class=\"ui-user-menu-person\">\n <ui-avatar [name]=\"name()\" [src]=\"src()\" size=\"lg\" />\n\n <div class=\"ui-user-menu-text\">\n <span class=\"ui-user-menu-name ui-text-body\">{{ name() }}</span>\n @if (detail()) {\n <span class=\"ui-user-menu-detail ui-text-body-alt\">{{ detail() }}</span>\n }\n </div>\n </div>\n\n @if (themeSwitch()) {\n <div class=\"ui-user-menu-section\">\n <span class=\"ui-user-menu-heading ui-text-caption\">Theme</span>\n <ui-theme-switch fill />\n </div>\n }\n\n @if (menuItems().length) {\n <div class=\"ui-user-menu-items\">\n @for (item of menuItems(); track $index) {\n @if (isDivider(item)) {\n <div class=\"ui-user-menu-divider\" role=\"separator\"></div>\n } @else if (group(item); as category) {\n <span class=\"ui-user-menu-heading ui-user-menu-group ui-text-caption\">{{ category.label }}</span>\n @for (child of category.children; track child.label) {\n <ng-container *ngTemplateOutlet=\"entryTemplate; context: { $implicit: child }\" />\n }\n } @else if (button(item); as entry) {\n <ng-container *ngTemplateOutlet=\"entryTemplate; context: { $implicit: entry }\" />\n }\n }\n </div>\n }\n</ui-card>\n\n<ng-template #entryTemplate let-entry>\n <button type=\"button\" class=\"ui-user-menu-item ui-text-body-alt\" (click)=\"entry.onClick()\">\n @if (entry.icon) {\n <ng-icon [name]=\"entry.icon\" size=\"18\" strokeWidth=\"1.75\" class=\"shrink-0\" />\n }\n {{ entry.label }}\n </button>\n</ng-template>\n",
|
|
13066
|
+
styles: ["@layer properties;.ui-user-menu{display:block;width:calc(var(--spacing, .25rem) * 72);overflow:hidden;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-user-menu-person{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 4)}.ui-user-menu-text{display:flex;min-width:0px;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * .5)}.ui-user-menu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-user-menu-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted-foreground-1)}.ui-user-menu-section{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--card-line);padding-inline:calc(var(--spacing, .25rem) * 4);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}.ui-user-menu-heading{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--muted-foreground-1)}.ui-user-menu-items{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * .5);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--card-line);padding:calc(var(--spacing, .25rem) * 2)}.ui-user-menu-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:var(--spacing, .25rem)}.ui-user-menu-item{display:flex;height:calc(var(--spacing, .25rem) * 10);cursor:pointer;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);text-align:start;color:var(--dropdown-item-foreground);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-user-menu-item:hover{background-color:var(--dropdown-item-hover)}.ui-user-menu-item:focus-visible{background-color:var(--dropdown-item-focus)}.ui-user-menu-item:focus-visible{--tw-outline-style: none;outline-style:none}.ui-user-menu-divider{margin-inline:var(--spacing, .25rem);margin-block:calc(var(--spacing, .25rem) * 1.5);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--card-line)}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-border-style: solid;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
13067
|
+
dependencies: [
|
|
13068
|
+
{
|
|
13069
|
+
kind: "directive",
|
|
13070
|
+
type: NgTemplateOutlet,
|
|
13071
|
+
selector: "[ngTemplateOutlet]",
|
|
13072
|
+
inputs: [
|
|
13073
|
+
"ngTemplateOutletContext",
|
|
13074
|
+
"ngTemplateOutlet",
|
|
13075
|
+
"ngTemplateOutletInjector"
|
|
13076
|
+
]
|
|
13077
|
+
},
|
|
13078
|
+
{
|
|
13079
|
+
kind: "component",
|
|
13080
|
+
type: UiCardComponent,
|
|
13081
|
+
selector: "ui-card",
|
|
13082
|
+
inputs: ["radius"]
|
|
13083
|
+
},
|
|
13084
|
+
{
|
|
13085
|
+
kind: "component",
|
|
13086
|
+
type: UiAvatarComponent,
|
|
13087
|
+
selector: "ui-avatar",
|
|
13088
|
+
inputs: [
|
|
13089
|
+
"name",
|
|
13090
|
+
"src",
|
|
13091
|
+
"size"
|
|
13092
|
+
]
|
|
13093
|
+
},
|
|
13094
|
+
{
|
|
13095
|
+
kind: "component",
|
|
13096
|
+
type: UiThemeSwitchComponent,
|
|
13097
|
+
selector: "ui-theme-switch",
|
|
13098
|
+
inputs: ["ariaLabel", "fill"]
|
|
13099
|
+
},
|
|
13100
|
+
{
|
|
13101
|
+
kind: "component",
|
|
13102
|
+
type: NgIcon,
|
|
13103
|
+
selector: "ng-icon",
|
|
13104
|
+
inputs: [
|
|
13105
|
+
"name",
|
|
13106
|
+
"svg",
|
|
13107
|
+
"size",
|
|
13108
|
+
"strokeWidth",
|
|
13109
|
+
"color"
|
|
13110
|
+
]
|
|
13111
|
+
}
|
|
13112
|
+
]
|
|
13113
|
+
});
|
|
13114
|
+
};
|
|
13115
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
13116
|
+
minVersion: "12.0.0",
|
|
13117
|
+
version: "22.2.1",
|
|
13118
|
+
ngImport: i0,
|
|
13119
|
+
type: UiUserMenuComponent,
|
|
13120
|
+
decorators: [{
|
|
13121
|
+
type: Component,
|
|
13122
|
+
args: [{
|
|
13123
|
+
selector: "ui-user-menu",
|
|
13124
|
+
imports: [
|
|
13125
|
+
NgTemplateOutlet,
|
|
13126
|
+
UiCardComponent,
|
|
13127
|
+
UiAvatarComponent,
|
|
13128
|
+
UiThemeSwitchComponent,
|
|
13129
|
+
NgIcon
|
|
13130
|
+
],
|
|
13131
|
+
template: "<ui-card radius=\"xl\" class=\"ui-user-menu\">\n <div class=\"ui-user-menu-person\">\n <ui-avatar [name]=\"name()\" [src]=\"src()\" size=\"lg\" />\n\n <div class=\"ui-user-menu-text\">\n <span class=\"ui-user-menu-name ui-text-body\">{{ name() }}</span>\n @if (detail()) {\n <span class=\"ui-user-menu-detail ui-text-body-alt\">{{ detail() }}</span>\n }\n </div>\n </div>\n\n @if (themeSwitch()) {\n <div class=\"ui-user-menu-section\">\n <span class=\"ui-user-menu-heading ui-text-caption\">Theme</span>\n <ui-theme-switch fill />\n </div>\n }\n\n @if (menuItems().length) {\n <div class=\"ui-user-menu-items\">\n @for (item of menuItems(); track $index) {\n @if (isDivider(item)) {\n <div class=\"ui-user-menu-divider\" role=\"separator\"></div>\n } @else if (group(item); as category) {\n <span class=\"ui-user-menu-heading ui-user-menu-group ui-text-caption\">{{ category.label }}</span>\n @for (child of category.children; track child.label) {\n <ng-container *ngTemplateOutlet=\"entryTemplate; context: { $implicit: child }\" />\n }\n } @else if (button(item); as entry) {\n <ng-container *ngTemplateOutlet=\"entryTemplate; context: { $implicit: entry }\" />\n }\n }\n </div>\n }\n</ui-card>\n\n<ng-template #entryTemplate let-entry>\n <button type=\"button\" class=\"ui-user-menu-item ui-text-body-alt\" (click)=\"entry.onClick()\">\n @if (entry.icon) {\n <ng-icon [name]=\"entry.icon\" size=\"18\" strokeWidth=\"1.75\" class=\"shrink-0\" />\n }\n {{ entry.label }}\n </button>\n</ng-template>\n",
|
|
13132
|
+
styles: ["@layer properties;.ui-user-menu{display:block;width:calc(var(--spacing, .25rem) * 72);overflow:hidden;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-user-menu-person{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3);padding:calc(var(--spacing, .25rem) * 4)}.ui-user-menu-text{display:flex;min-width:0px;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * .5)}.ui-user-menu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-user-menu-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted-foreground-1)}.ui-user-menu-section{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--card-line);padding-inline:calc(var(--spacing, .25rem) * 4);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}.ui-user-menu-heading{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--muted-foreground-1)}.ui-user-menu-items{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * .5);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--card-line);padding:calc(var(--spacing, .25rem) * 2)}.ui-user-menu-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:var(--spacing, .25rem)}.ui-user-menu-item{display:flex;height:calc(var(--spacing, .25rem) * 10);cursor:pointer;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);text-align:start;color:var(--dropdown-item-foreground);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-user-menu-item:hover{background-color:var(--dropdown-item-hover)}.ui-user-menu-item:focus-visible{background-color:var(--dropdown-item-focus)}.ui-user-menu-item:focus-visible{--tw-outline-style: none;outline-style:none}.ui-user-menu-divider{margin-inline:var(--spacing, .25rem);margin-block:calc(var(--spacing, .25rem) * 1.5);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--card-line)}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-border-style: solid;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
13133
|
+
}]
|
|
13134
|
+
}],
|
|
13135
|
+
propDecorators: {
|
|
13136
|
+
name: [{
|
|
13137
|
+
type: i0.Input,
|
|
13138
|
+
args: [{
|
|
13139
|
+
isSignal: true,
|
|
13140
|
+
alias: "name",
|
|
13141
|
+
required: true
|
|
13142
|
+
}]
|
|
13143
|
+
}],
|
|
13144
|
+
detail: [{
|
|
13145
|
+
type: i0.Input,
|
|
13146
|
+
args: [{
|
|
13147
|
+
isSignal: true,
|
|
13148
|
+
alias: "detail",
|
|
13149
|
+
required: false
|
|
13150
|
+
}]
|
|
13151
|
+
}],
|
|
13152
|
+
src: [{
|
|
13153
|
+
type: i0.Input,
|
|
13154
|
+
args: [{
|
|
13155
|
+
isSignal: true,
|
|
13156
|
+
alias: "src",
|
|
13157
|
+
required: false
|
|
13158
|
+
}]
|
|
13159
|
+
}],
|
|
13160
|
+
items: [{
|
|
13161
|
+
type: i0.Input,
|
|
13162
|
+
args: [{
|
|
13163
|
+
isSignal: true,
|
|
13164
|
+
alias: "items",
|
|
13165
|
+
required: false
|
|
13166
|
+
}]
|
|
13167
|
+
}],
|
|
13168
|
+
themeSwitch: [{
|
|
13169
|
+
type: i0.Input,
|
|
13170
|
+
args: [{
|
|
13171
|
+
isSignal: true,
|
|
13172
|
+
alias: "themeSwitch",
|
|
13173
|
+
required: false
|
|
13174
|
+
}]
|
|
13175
|
+
}]
|
|
13176
|
+
}
|
|
13177
|
+
});
|
|
13178
|
+
export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiProgressComponent, UiRadioComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, lastDaysPreset, monthPreset, provideUiFormat, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
|
|
12024
13179
|
|
|
12025
13180
|
//# sourceMappingURL=area8975-ui.mjs.map
|