@area8975/ui 0.1.1-dev.11 → 0.1.1-dev.7
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 +315 -756
- package/fesm2022/area8975-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/area8975-ui.d.ts +25 -114
package/fesm2022/area8975-ui.mjs
CHANGED
|
@@ -56,9 +56,7 @@ var UiAxisChartBase = class UiAxisChartBase {
|
|
|
56
56
|
});
|
|
57
57
|
options = input(null, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
58
58
|
highlight = input(null, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
|
|
59
|
-
legend = input("auto", ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
|
|
60
59
|
hiddenSeries = signal([], ...ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []);
|
|
61
|
-
emphasis = signal(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
|
|
62
60
|
supportsDashes = false;
|
|
63
61
|
isEmpty = computed(() => !this.series().some((item) => item.data.some((value) => value !== null)), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
64
62
|
isMuted = computed(() => {
|
|
@@ -187,13 +185,6 @@ var UiAxisChartBase = class UiAxisChartBase {
|
|
|
187
185
|
isSignal: true,
|
|
188
186
|
isRequired: false,
|
|
189
187
|
transformFunction: null
|
|
190
|
-
},
|
|
191
|
-
legend: {
|
|
192
|
-
classPropertyName: "legend",
|
|
193
|
-
publicName: "legend",
|
|
194
|
-
isSignal: true,
|
|
195
|
-
isRequired: false,
|
|
196
|
-
transformFunction: null
|
|
197
188
|
}
|
|
198
189
|
},
|
|
199
190
|
ngImport: i0
|
|
@@ -293,14 +284,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
293
284
|
alias: "highlight",
|
|
294
285
|
required: false
|
|
295
286
|
}]
|
|
296
|
-
}],
|
|
297
|
-
legend: [{
|
|
298
|
-
type: i0.Input,
|
|
299
|
-
args: [{
|
|
300
|
-
isSignal: true,
|
|
301
|
-
alias: "legend",
|
|
302
|
-
required: false
|
|
303
|
-
}]
|
|
304
287
|
}]
|
|
305
288
|
}
|
|
306
289
|
});
|
|
@@ -515,9 +498,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
515
498
|
}
|
|
516
499
|
});
|
|
517
500
|
var UiChartLegendComponent = class UiChartLegendComponent {
|
|
518
|
-
items = input(
|
|
519
|
-
note = input("", ...ngDevMode ? [{ debugName: "note" }] : /* istanbul ignore next */ []);
|
|
520
|
-
for = input(null, ...ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []);
|
|
501
|
+
items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
|
|
521
502
|
hidden = model([], ...ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []);
|
|
522
503
|
toggleable = input(false, {
|
|
523
504
|
...ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {},
|
|
@@ -527,17 +508,11 @@ var UiChartLegendComponent = class UiChartLegendComponent {
|
|
|
527
508
|
hovered = signal(null, ...ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []);
|
|
528
509
|
focused = signal(null, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
|
|
529
510
|
pointedAt = computed(() => this.hovered() ?? this.focused(), ...ngDevMode ? [{ debugName: "pointedAt" }] : /* istanbul ignore next */ []);
|
|
530
|
-
|
|
531
|
-
shownNote = computed(() => this.for()?.legendNote() ?? this.note(), ...ngDevMode ? [{ debugName: "shownNote" }] : /* istanbul ignore next */ []);
|
|
532
|
-
hiddenNames = computed(() => this.for()?.hiddenSeries() ?? this.hidden(), ...ngDevMode ? [{ debugName: "hiddenNames" }] : /* istanbul ignore next */ []);
|
|
533
|
-
visibleCount = computed(() => this.shownItems().filter((item) => !this.hiddenNames().includes(item.name)).length, ...ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []);
|
|
511
|
+
visibleCount = computed(() => this.items().filter((item) => !this.hidden().includes(item.name)).length, ...ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []);
|
|
534
512
|
constructor() {
|
|
535
513
|
effect(() => {
|
|
536
514
|
const name = this.pointedAt();
|
|
537
|
-
untracked(() =>
|
|
538
|
-
this.for()?.emphasis.set(name);
|
|
539
|
-
this.focusChange.emit(name);
|
|
540
|
-
});
|
|
515
|
+
untracked(() => this.focusChange.emit(name));
|
|
541
516
|
});
|
|
542
517
|
}
|
|
543
518
|
hover(name) {
|
|
@@ -547,18 +522,14 @@ var UiChartLegendComponent = class UiChartLegendComponent {
|
|
|
547
522
|
this.focused.set(name);
|
|
548
523
|
}
|
|
549
524
|
isHidden(item) {
|
|
550
|
-
return this.
|
|
525
|
+
return this.hidden().includes(item.name);
|
|
551
526
|
}
|
|
552
527
|
isLocked(item) {
|
|
553
528
|
return !this.isHidden(item) && this.visibleCount() === 1;
|
|
554
529
|
}
|
|
555
530
|
toggle(item) {
|
|
556
531
|
if (this.isLocked(item)) return;
|
|
557
|
-
|
|
558
|
-
const next = hidden.includes(item.name) ? hidden.filter((name) => name !== item.name) : [...hidden, item.name];
|
|
559
|
-
const source = this.for();
|
|
560
|
-
if (source) source.hiddenSeries.set(next);
|
|
561
|
-
else this.hidden.set(next);
|
|
532
|
+
this.hidden.update((hidden) => hidden.includes(item.name) ? hidden.filter((name) => name !== item.name) : [...hidden, item.name]);
|
|
562
533
|
}
|
|
563
534
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
564
535
|
minVersion: "12.0.0",
|
|
@@ -579,21 +550,7 @@ var UiChartLegendComponent = class UiChartLegendComponent {
|
|
|
579
550
|
classPropertyName: "items",
|
|
580
551
|
publicName: "items",
|
|
581
552
|
isSignal: true,
|
|
582
|
-
isRequired:
|
|
583
|
-
transformFunction: null
|
|
584
|
-
},
|
|
585
|
-
note: {
|
|
586
|
-
classPropertyName: "note",
|
|
587
|
-
publicName: "note",
|
|
588
|
-
isSignal: true,
|
|
589
|
-
isRequired: false,
|
|
590
|
-
transformFunction: null
|
|
591
|
-
},
|
|
592
|
-
for: {
|
|
593
|
-
classPropertyName: "for",
|
|
594
|
-
publicName: "for",
|
|
595
|
-
isSignal: true,
|
|
596
|
-
isRequired: false,
|
|
553
|
+
isRequired: true,
|
|
597
554
|
transformFunction: null
|
|
598
555
|
},
|
|
599
556
|
hidden: {
|
|
@@ -616,8 +573,8 @@ var UiChartLegendComponent = class UiChartLegendComponent {
|
|
|
616
573
|
focusChange: "focusChange"
|
|
617
574
|
},
|
|
618
575
|
ngImport: i0,
|
|
619
|
-
template: "<ul class=\"ui-chart-legend\" role=\"list\">\n @for (item of
|
|
620
|
-
styles: ["@layer properties
|
|
576
|
+
template: "<ul class=\"ui-chart-legend\" role=\"list\">\n @for (item of items(); 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",
|
|
577
|
+
styles: ["@layer properties;.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(--color-gray-800, oklch(27.8% .033 256.848))}.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(--color-gray-100, oklch(96.7% .003 264.542))}.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(--color-gray-500, oklch(55.1% .027 264.364))}.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
578
|
});
|
|
622
579
|
};
|
|
623
580
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -629,8 +586,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
629
586
|
type: Component,
|
|
630
587
|
args: [{
|
|
631
588
|
selector: "ui-chart-legend",
|
|
632
|
-
template: "<ul class=\"ui-chart-legend\" role=\"list\">\n @for (item of
|
|
633
|
-
styles: ["@layer properties
|
|
589
|
+
template: "<ul class=\"ui-chart-legend\" role=\"list\">\n @for (item of items(); 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",
|
|
590
|
+
styles: ["@layer properties;.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(--color-gray-800, oklch(27.8% .033 256.848))}.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(--color-gray-100, oklch(96.7% .003 264.542))}.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(--color-gray-500, oklch(55.1% .027 264.364))}.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
591
|
}]
|
|
635
592
|
}],
|
|
636
593
|
ctorParameters: () => [],
|
|
@@ -640,23 +597,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
640
597
|
args: [{
|
|
641
598
|
isSignal: true,
|
|
642
599
|
alias: "items",
|
|
643
|
-
required:
|
|
644
|
-
}]
|
|
645
|
-
}],
|
|
646
|
-
note: [{
|
|
647
|
-
type: i0.Input,
|
|
648
|
-
args: [{
|
|
649
|
-
isSignal: true,
|
|
650
|
-
alias: "note",
|
|
651
|
-
required: false
|
|
652
|
-
}]
|
|
653
|
-
}],
|
|
654
|
-
for: [{
|
|
655
|
-
type: i0.Input,
|
|
656
|
-
args: [{
|
|
657
|
-
isSignal: true,
|
|
658
|
-
alias: "for",
|
|
659
|
-
required: false
|
|
600
|
+
required: true
|
|
660
601
|
}]
|
|
661
602
|
}],
|
|
662
603
|
hidden: [{
|
|
@@ -716,10 +657,7 @@ var UiChartComponent = class UiChartComponent {
|
|
|
716
657
|
});
|
|
717
658
|
effect(() => {
|
|
718
659
|
const chart = this.chart();
|
|
719
|
-
if (chart)
|
|
720
|
-
this.applyHidden(chart);
|
|
721
|
-
this.applyEmphasis();
|
|
722
|
-
}
|
|
660
|
+
if (chart) this.applyHidden(chart);
|
|
723
661
|
});
|
|
724
662
|
inject(DestroyRef).onDestroy(() => {
|
|
725
663
|
this.destroyed = true;
|
|
@@ -735,18 +673,16 @@ var UiChartComponent = class UiChartComponent {
|
|
|
735
673
|
}
|
|
736
674
|
}
|
|
737
675
|
applyEmphasis() {
|
|
738
|
-
const names = this.seriesNames();
|
|
739
676
|
const emphasis = untracked(this.emphasis);
|
|
740
|
-
const
|
|
677
|
+
const names = this.seriesNames();
|
|
741
678
|
const groups = this.canvas().nativeElement.querySelectorAll(".apexcharts-series[data\\:realIndex]");
|
|
742
679
|
for (const group of groups) {
|
|
743
680
|
const name = names[Number(group.getAttribute("data:realIndex"))];
|
|
744
|
-
group.classList.toggle("ui-chart-series--faded", !!
|
|
681
|
+
group.classList.toggle("ui-chart-series--faded", !!emphasis && name !== emphasis);
|
|
745
682
|
}
|
|
746
683
|
}
|
|
747
684
|
seriesNames() {
|
|
748
|
-
|
|
749
|
-
return series.map((item, index) => typeof item === "object" && item !== null && "name" in item ? item.name ?? null : labels[index] ?? null);
|
|
685
|
+
return (untracked(this.options).series ?? []).map((item) => typeof item === "object" && item !== null && "name" in item ? item.name ?? null : null);
|
|
750
686
|
}
|
|
751
687
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
752
688
|
minVersion: "12.0.0",
|
|
@@ -1091,11 +1027,7 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1091
1027
|
...ngDevMode ? { debugName: "showTable" } : /* istanbul ignore next */ {},
|
|
1092
1028
|
transform: booleanAttribute
|
|
1093
1029
|
});
|
|
1094
|
-
|
|
1095
|
-
...ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {},
|
|
1096
|
-
transform: booleanAttribute
|
|
1097
|
-
});
|
|
1098
|
-
emphasis = model(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
|
|
1030
|
+
emphasis = signal(null, ...ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []);
|
|
1099
1031
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
1100
1032
|
minVersion: "12.0.0",
|
|
1101
1033
|
version: "22.2.1",
|
|
@@ -1208,26 +1140,9 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1208
1140
|
isSignal: true,
|
|
1209
1141
|
isRequired: false,
|
|
1210
1142
|
transformFunction: null
|
|
1211
|
-
},
|
|
1212
|
-
showLegend: {
|
|
1213
|
-
classPropertyName: "showLegend",
|
|
1214
|
-
publicName: "showLegend",
|
|
1215
|
-
isSignal: true,
|
|
1216
|
-
isRequired: false,
|
|
1217
|
-
transformFunction: null
|
|
1218
|
-
},
|
|
1219
|
-
emphasis: {
|
|
1220
|
-
classPropertyName: "emphasis",
|
|
1221
|
-
publicName: "emphasis",
|
|
1222
|
-
isSignal: true,
|
|
1223
|
-
isRequired: false,
|
|
1224
|
-
transformFunction: null
|
|
1225
1143
|
}
|
|
1226
1144
|
},
|
|
1227
|
-
outputs: {
|
|
1228
|
-
hiddenSeries: "hiddenSeriesChange",
|
|
1229
|
-
emphasis: "emphasisChange"
|
|
1230
|
-
},
|
|
1145
|
+
outputs: { hiddenSeries: "hiddenSeriesChange" },
|
|
1231
1146
|
host: { classAttribute: "block w-full min-w-0" },
|
|
1232
1147
|
ngImport: i0,
|
|
1233
1148
|
template: `
|
|
@@ -1245,15 +1160,19 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1245
1160
|
</div>
|
|
1246
1161
|
} @else {
|
|
1247
1162
|
<!-- one series needs no legend, the chart's title already names it -->
|
|
1248
|
-
@if (
|
|
1249
|
-
<
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1163
|
+
@if (legendItems().length > 1 || legendNote()) {
|
|
1164
|
+
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 mb-3">
|
|
1165
|
+
<ui-chart-legend
|
|
1166
|
+
[items]="legendItems()"
|
|
1167
|
+
[(hidden)]="hiddenSeries"
|
|
1168
|
+
(focusChange)="emphasis.set($event)"
|
|
1169
|
+
toggleable
|
|
1170
|
+
/>
|
|
1171
|
+
|
|
1172
|
+
@if (legendNote()) {
|
|
1173
|
+
<span class="text-muted-foreground-1 ui-text-caption">{{ legendNote() }}</span>
|
|
1174
|
+
}
|
|
1175
|
+
</div>
|
|
1257
1176
|
}
|
|
1258
1177
|
|
|
1259
1178
|
<ui-chart
|
|
@@ -1305,8 +1224,6 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1305
1224
|
selector: "ui-chart-legend",
|
|
1306
1225
|
inputs: [
|
|
1307
1226
|
"items",
|
|
1308
|
-
"note",
|
|
1309
|
-
"for",
|
|
1310
1227
|
"hidden",
|
|
1311
1228
|
"toggleable"
|
|
1312
1229
|
],
|
|
@@ -1350,15 +1267,19 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1350
1267
|
</div>
|
|
1351
1268
|
} @else {
|
|
1352
1269
|
<!-- one series needs no legend, the chart's title already names it -->
|
|
1353
|
-
@if (
|
|
1354
|
-
<
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1270
|
+
@if (legendItems().length > 1 || legendNote()) {
|
|
1271
|
+
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 mb-3">
|
|
1272
|
+
<ui-chart-legend
|
|
1273
|
+
[items]="legendItems()"
|
|
1274
|
+
[(hidden)]="hiddenSeries"
|
|
1275
|
+
(focusChange)="emphasis.set($event)"
|
|
1276
|
+
toggleable
|
|
1277
|
+
/>
|
|
1278
|
+
|
|
1279
|
+
@if (legendNote()) {
|
|
1280
|
+
<span class="text-muted-foreground-1 ui-text-caption">{{ legendNote() }}</span>
|
|
1281
|
+
}
|
|
1282
|
+
</div>
|
|
1362
1283
|
}
|
|
1363
1284
|
|
|
1364
1285
|
<ui-chart
|
|
@@ -1502,25 +1423,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1502
1423
|
alias: "showTable",
|
|
1503
1424
|
required: false
|
|
1504
1425
|
}]
|
|
1505
|
-
}],
|
|
1506
|
-
showLegend: [{
|
|
1507
|
-
type: i0.Input,
|
|
1508
|
-
args: [{
|
|
1509
|
-
isSignal: true,
|
|
1510
|
-
alias: "showLegend",
|
|
1511
|
-
required: false
|
|
1512
|
-
}]
|
|
1513
|
-
}],
|
|
1514
|
-
emphasis: [{
|
|
1515
|
-
type: i0.Input,
|
|
1516
|
-
args: [{
|
|
1517
|
-
isSignal: true,
|
|
1518
|
-
alias: "emphasis",
|
|
1519
|
-
required: false
|
|
1520
|
-
}]
|
|
1521
|
-
}, {
|
|
1522
|
-
type: i0.Output,
|
|
1523
|
-
args: ["emphasisChange"]
|
|
1524
1426
|
}]
|
|
1525
1427
|
}
|
|
1526
1428
|
});
|
|
@@ -1629,7 +1531,7 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
|
|
|
1629
1531
|
host: { classAttribute: "block w-full min-w-0" },
|
|
1630
1532
|
usesInheritance: true,
|
|
1631
1533
|
ngImport: i0,
|
|
1632
|
-
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [
|
|
1534
|
+
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [valueFormatter]=\"valueFormatter()\"\n [categoryLabel]=\"categoryLabel()\"\n [height]=\"height()\"\n [emptyText]=\"emptyText()\"\n [loading]=\"loading()\"\n [empty]=\"isEmpty()\"\n [showTable]=\"showTable()\"\n/>\n",
|
|
1633
1535
|
dependencies: [{
|
|
1634
1536
|
kind: "component",
|
|
1635
1537
|
type: UiChartFrameComponent,
|
|
@@ -1648,11 +1550,9 @@ var UiBarChartComponent = class UiBarChartComponent extends UiAxisChartBase {
|
|
|
1648
1550
|
"emptyText",
|
|
1649
1551
|
"loading",
|
|
1650
1552
|
"empty",
|
|
1651
|
-
"showTable"
|
|
1652
|
-
"showLegend",
|
|
1653
|
-
"emphasis"
|
|
1553
|
+
"showTable"
|
|
1654
1554
|
],
|
|
1655
|
-
outputs: ["hiddenSeriesChange"
|
|
1555
|
+
outputs: ["hiddenSeriesChange"]
|
|
1656
1556
|
}]
|
|
1657
1557
|
});
|
|
1658
1558
|
};
|
|
@@ -1667,7 +1567,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1667
1567
|
selector: "ui-bar-chart",
|
|
1668
1568
|
imports: [UiChartFrameComponent],
|
|
1669
1569
|
host: { class: "block w-full min-w-0" },
|
|
1670
|
-
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [
|
|
1570
|
+
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [valueFormatter]=\"valueFormatter()\"\n [categoryLabel]=\"categoryLabel()\"\n [height]=\"height()\"\n [emptyText]=\"emptyText()\"\n [loading]=\"loading()\"\n [empty]=\"isEmpty()\"\n [showTable]=\"showTable()\"\n/>\n"
|
|
1671
1571
|
}]
|
|
1672
1572
|
}],
|
|
1673
1573
|
propDecorators: {
|
|
@@ -1825,7 +1725,7 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
|
|
|
1825
1725
|
host: { classAttribute: "block w-full min-w-0" },
|
|
1826
1726
|
usesInheritance: true,
|
|
1827
1727
|
ngImport: i0,
|
|
1828
|
-
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [
|
|
1728
|
+
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [valueFormatter]=\"valueFormatter()\"\n [categoryLabel]=\"categoryLabel()\"\n [height]=\"height()\"\n [emptyText]=\"emptyText()\"\n [loading]=\"loading()\"\n [empty]=\"isEmpty()\"\n [showTable]=\"showTable()\"\n/>\n",
|
|
1829
1729
|
dependencies: [{
|
|
1830
1730
|
kind: "component",
|
|
1831
1731
|
type: UiChartFrameComponent,
|
|
@@ -1844,11 +1744,9 @@ var UiLineChartComponent = class UiLineChartComponent extends UiAxisChartBase {
|
|
|
1844
1744
|
"emptyText",
|
|
1845
1745
|
"loading",
|
|
1846
1746
|
"empty",
|
|
1847
|
-
"showTable"
|
|
1848
|
-
"showLegend",
|
|
1849
|
-
"emphasis"
|
|
1747
|
+
"showTable"
|
|
1850
1748
|
],
|
|
1851
|
-
outputs: ["hiddenSeriesChange"
|
|
1749
|
+
outputs: ["hiddenSeriesChange"]
|
|
1852
1750
|
}]
|
|
1853
1751
|
});
|
|
1854
1752
|
};
|
|
@@ -1863,7 +1761,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1863
1761
|
selector: "ui-line-chart",
|
|
1864
1762
|
imports: [UiChartFrameComponent],
|
|
1865
1763
|
host: { class: "block w-full min-w-0" },
|
|
1866
|
-
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [
|
|
1764
|
+
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [valueFormatter]=\"valueFormatter()\"\n [categoryLabel]=\"categoryLabel()\"\n [height]=\"height()\"\n [emptyText]=\"emptyText()\"\n [loading]=\"loading()\"\n [empty]=\"isEmpty()\"\n [showTable]=\"showTable()\"\n/>\n"
|
|
1867
1765
|
}]
|
|
1868
1766
|
}],
|
|
1869
1767
|
propDecorators: {
|
|
@@ -1890,206 +1788,6 @@ const LineChartCurves = [
|
|
|
1890
1788
|
"smooth",
|
|
1891
1789
|
"stepline"
|
|
1892
1790
|
];
|
|
1893
|
-
const percentFormatter = new Intl.NumberFormat("en-GB", {
|
|
1894
|
-
style: "percent",
|
|
1895
|
-
maximumFractionDigits: 1
|
|
1896
|
-
});
|
|
1897
|
-
var UiPieChartComponent = class UiPieChartComponent extends UiAxisChartBase {
|
|
1898
|
-
variant = input("pie", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
|
|
1899
|
-
totalLabel = input("Total", ...ngDevMode ? [{ debugName: "totalLabel" }] : /* istanbul ignore next */ []);
|
|
1900
|
-
values = computed(() => this.series()[0]?.data ?? [], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
|
|
1901
|
-
isEmpty = computed(() => !this.values().some((value) => value !== null && value > 0), ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
1902
|
-
isMuted = computed(() => {
|
|
1903
|
-
const highlight = this.highlight();
|
|
1904
|
-
return this.categories().map((name) => !!highlight && !highlight.includes(name));
|
|
1905
|
-
}, ...ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []);
|
|
1906
|
-
styles = computed(() => {
|
|
1907
|
-
const highlight = this.highlight();
|
|
1908
|
-
const muted = this.isMuted();
|
|
1909
|
-
return this.categories().map((name, index) => muted[index] ? {
|
|
1910
|
-
colour: CHART_INK.context,
|
|
1911
|
-
dashed: false
|
|
1912
|
-
} : chartSeriesStyle(highlight ? highlight.indexOf(name) : index, false));
|
|
1913
|
-
}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
|
|
1914
|
-
legendItems = computed(() => {
|
|
1915
|
-
const highlight = this.highlight();
|
|
1916
|
-
const items = this.categories().map((name, index) => ({
|
|
1917
|
-
name,
|
|
1918
|
-
...this.styles()[index]
|
|
1919
|
-
})).filter((_, index) => !this.isMuted()[index]);
|
|
1920
|
-
return highlight ? items.sort((a, b) => highlight.indexOf(a.name) - highlight.indexOf(b.name)) : items;
|
|
1921
|
-
}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
|
|
1922
|
-
slices = computed(() => {
|
|
1923
|
-
const hidden = this.hiddenSeries();
|
|
1924
|
-
const values = this.values();
|
|
1925
|
-
const colours = this.colours();
|
|
1926
|
-
return this.categories().map((name, index) => ({
|
|
1927
|
-
name,
|
|
1928
|
-
value: values[index] ?? 0,
|
|
1929
|
-
colour: colours[index]
|
|
1930
|
-
})).filter((slice) => !hidden.includes(slice.name));
|
|
1931
|
-
}, ...ngDevMode ? [{ debugName: "slices" }] : /* istanbul ignore next */ []);
|
|
1932
|
-
chartOptions = computed(() => {
|
|
1933
|
-
const base = baseChartOptions();
|
|
1934
|
-
const slices = this.slices();
|
|
1935
|
-
const donut = this.variant() === "donut";
|
|
1936
|
-
const total = slices.reduce((sum, slice) => sum + slice.value, 0);
|
|
1937
|
-
const centreText = {
|
|
1938
|
-
fontSize: "12px",
|
|
1939
|
-
color: CHART_INK.muted,
|
|
1940
|
-
offsetY: -4
|
|
1941
|
-
};
|
|
1942
|
-
return mergeChartOptions({
|
|
1943
|
-
...base,
|
|
1944
|
-
chart: {
|
|
1945
|
-
...base.chart,
|
|
1946
|
-
type: donut ? "donut" : "pie",
|
|
1947
|
-
height: this.height()
|
|
1948
|
-
},
|
|
1949
|
-
colors: slices.map((slice) => slice.colour),
|
|
1950
|
-
labels: slices.map((slice) => slice.name),
|
|
1951
|
-
series: slices.map((slice) => slice.value),
|
|
1952
|
-
stroke: {
|
|
1953
|
-
show: true,
|
|
1954
|
-
width: 2,
|
|
1955
|
-
colors: [CHART_INK.surface]
|
|
1956
|
-
},
|
|
1957
|
-
states: {
|
|
1958
|
-
...base.states,
|
|
1959
|
-
hover: { filter: { type: "darken" } }
|
|
1960
|
-
},
|
|
1961
|
-
plotOptions: { pie: {
|
|
1962
|
-
expandOnClick: false,
|
|
1963
|
-
donut: {
|
|
1964
|
-
size: "65%",
|
|
1965
|
-
labels: {
|
|
1966
|
-
show: donut,
|
|
1967
|
-
name: centreText,
|
|
1968
|
-
value: {
|
|
1969
|
-
fontSize: "20px",
|
|
1970
|
-
fontWeight: 600,
|
|
1971
|
-
color: CHART_INK.text,
|
|
1972
|
-
offsetY: 4,
|
|
1973
|
-
formatter: (value) => this.formatValue(Number(value))
|
|
1974
|
-
},
|
|
1975
|
-
total: {
|
|
1976
|
-
show: true,
|
|
1977
|
-
showAlways: true,
|
|
1978
|
-
label: this.totalLabel(),
|
|
1979
|
-
...centreText,
|
|
1980
|
-
formatter: () => this.formatValue(total)
|
|
1981
|
-
}
|
|
1982
|
-
}
|
|
1983
|
-
}
|
|
1984
|
-
} },
|
|
1985
|
-
tooltip: {
|
|
1986
|
-
theme: "light",
|
|
1987
|
-
fillSeriesColor: false,
|
|
1988
|
-
custom: ({ seriesIndex }) => {
|
|
1989
|
-
const slice = slices[seriesIndex];
|
|
1990
|
-
return slice ? chartTooltipHtml("", [{
|
|
1991
|
-
colour: slice.colour,
|
|
1992
|
-
name: slice.name,
|
|
1993
|
-
value: this.formatValue(slice.value)
|
|
1994
|
-
}], total ? `${percentFormatter.format(slice.value / total)} of total` : "") : "";
|
|
1995
|
-
}
|
|
1996
|
-
}
|
|
1997
|
-
}, this.options());
|
|
1998
|
-
}, ...ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []);
|
|
1999
|
-
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
2000
|
-
minVersion: "12.0.0",
|
|
2001
|
-
version: "22.2.1",
|
|
2002
|
-
ngImport: i0,
|
|
2003
|
-
type: UiPieChartComponent,
|
|
2004
|
-
deps: null,
|
|
2005
|
-
target: i0.ɵɵFactoryTarget.Component
|
|
2006
|
-
});
|
|
2007
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
2008
|
-
minVersion: "17.1.0",
|
|
2009
|
-
version: "22.2.1",
|
|
2010
|
-
type: UiPieChartComponent,
|
|
2011
|
-
isStandalone: true,
|
|
2012
|
-
selector: "ui-pie-chart",
|
|
2013
|
-
inputs: {
|
|
2014
|
-
variant: {
|
|
2015
|
-
classPropertyName: "variant",
|
|
2016
|
-
publicName: "variant",
|
|
2017
|
-
isSignal: true,
|
|
2018
|
-
isRequired: false,
|
|
2019
|
-
transformFunction: null
|
|
2020
|
-
},
|
|
2021
|
-
totalLabel: {
|
|
2022
|
-
classPropertyName: "totalLabel",
|
|
2023
|
-
publicName: "totalLabel",
|
|
2024
|
-
isSignal: true,
|
|
2025
|
-
isRequired: false,
|
|
2026
|
-
transformFunction: null
|
|
2027
|
-
}
|
|
2028
|
-
},
|
|
2029
|
-
host: { classAttribute: "block w-full min-w-0" },
|
|
2030
|
-
usesInheritance: true,
|
|
2031
|
-
ngImport: i0,
|
|
2032
|
-
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [(emphasis)]=\"emphasis\"\n [showLegend]=\"legend() === 'auto'\"\n [valueFormatter]=\"valueFormatter()\"\n [categoryLabel]=\"categoryLabel()\"\n [height]=\"height()\"\n [emptyText]=\"emptyText()\"\n [loading]=\"loading()\"\n [empty]=\"isEmpty()\"\n [showTable]=\"showTable()\"\n/>\n",
|
|
2033
|
-
dependencies: [{
|
|
2034
|
-
kind: "component",
|
|
2035
|
-
type: UiChartFrameComponent,
|
|
2036
|
-
selector: "ui-chart-frame",
|
|
2037
|
-
inputs: [
|
|
2038
|
-
"options",
|
|
2039
|
-
"ariaLabel",
|
|
2040
|
-
"categories",
|
|
2041
|
-
"series",
|
|
2042
|
-
"legendItems",
|
|
2043
|
-
"legendNote",
|
|
2044
|
-
"hiddenSeries",
|
|
2045
|
-
"valueFormatter",
|
|
2046
|
-
"categoryLabel",
|
|
2047
|
-
"height",
|
|
2048
|
-
"emptyText",
|
|
2049
|
-
"loading",
|
|
2050
|
-
"empty",
|
|
2051
|
-
"showTable",
|
|
2052
|
-
"showLegend",
|
|
2053
|
-
"emphasis"
|
|
2054
|
-
],
|
|
2055
|
-
outputs: ["hiddenSeriesChange", "emphasisChange"]
|
|
2056
|
-
}]
|
|
2057
|
-
});
|
|
2058
|
-
};
|
|
2059
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
2060
|
-
minVersion: "12.0.0",
|
|
2061
|
-
version: "22.2.1",
|
|
2062
|
-
ngImport: i0,
|
|
2063
|
-
type: UiPieChartComponent,
|
|
2064
|
-
decorators: [{
|
|
2065
|
-
type: Component,
|
|
2066
|
-
args: [{
|
|
2067
|
-
selector: "ui-pie-chart",
|
|
2068
|
-
imports: [UiChartFrameComponent],
|
|
2069
|
-
host: { class: "block w-full min-w-0" },
|
|
2070
|
-
template: "<ui-chart-frame\n [options]=\"chartOptions()\"\n [ariaLabel]=\"ariaLabel()\"\n [categories]=\"categories()\"\n [series]=\"series()\"\n [legendItems]=\"legendItems()\"\n [legendNote]=\"legendNote()\"\n [(hiddenSeries)]=\"hiddenSeries\"\n [(emphasis)]=\"emphasis\"\n [showLegend]=\"legend() === 'auto'\"\n [valueFormatter]=\"valueFormatter()\"\n [categoryLabel]=\"categoryLabel()\"\n [height]=\"height()\"\n [emptyText]=\"emptyText()\"\n [loading]=\"loading()\"\n [empty]=\"isEmpty()\"\n [showTable]=\"showTable()\"\n/>\n"
|
|
2071
|
-
}]
|
|
2072
|
-
}],
|
|
2073
|
-
propDecorators: {
|
|
2074
|
-
variant: [{
|
|
2075
|
-
type: i0.Input,
|
|
2076
|
-
args: [{
|
|
2077
|
-
isSignal: true,
|
|
2078
|
-
alias: "variant",
|
|
2079
|
-
required: false
|
|
2080
|
-
}]
|
|
2081
|
-
}],
|
|
2082
|
-
totalLabel: [{
|
|
2083
|
-
type: i0.Input,
|
|
2084
|
-
args: [{
|
|
2085
|
-
isSignal: true,
|
|
2086
|
-
alias: "totalLabel",
|
|
2087
|
-
required: false
|
|
2088
|
-
}]
|
|
2089
|
-
}]
|
|
2090
|
-
}
|
|
2091
|
-
});
|
|
2092
|
-
const PieChartVariants = ["pie", "donut"];
|
|
2093
1791
|
var UiCheckboxComponent = class UiCheckboxComponent {
|
|
2094
1792
|
value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
2095
1793
|
id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
|
|
@@ -3856,67 +3554,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3856
3554
|
}]
|
|
3857
3555
|
}
|
|
3858
3556
|
});
|
|
3859
|
-
const radiusClasses = {
|
|
3860
|
-
none: "rounded-none",
|
|
3861
|
-
sm: "rounded-sm",
|
|
3862
|
-
md: "rounded-md",
|
|
3863
|
-
lg: "rounded-lg",
|
|
3864
|
-
xl: "rounded-xl"
|
|
3865
|
-
};
|
|
3866
|
-
var UiCardComponent = class UiCardComponent {
|
|
3867
|
-
radius = input("md", ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
|
|
3868
|
-
generatedClasses = computed(() => radiusClasses[this.radius()], ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
3869
|
-
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
3870
|
-
minVersion: "12.0.0",
|
|
3871
|
-
version: "22.2.1",
|
|
3872
|
-
ngImport: i0,
|
|
3873
|
-
type: UiCardComponent,
|
|
3874
|
-
deps: [],
|
|
3875
|
-
target: i0.ɵɵFactoryTarget.Component
|
|
3876
|
-
});
|
|
3877
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
3878
|
-
minVersion: "17.1.0",
|
|
3879
|
-
version: "22.2.1",
|
|
3880
|
-
type: UiCardComponent,
|
|
3881
|
-
isStandalone: true,
|
|
3882
|
-
selector: "ui-card",
|
|
3883
|
-
inputs: { radius: {
|
|
3884
|
-
classPropertyName: "radius",
|
|
3885
|
-
publicName: "radius",
|
|
3886
|
-
isSignal: true,
|
|
3887
|
-
isRequired: false,
|
|
3888
|
-
transformFunction: null
|
|
3889
|
-
} },
|
|
3890
|
-
host: { properties: { "class": "generatedClasses()" } },
|
|
3891
|
-
ngImport: i0,
|
|
3892
|
-
template: "<ng-content />",
|
|
3893
|
-
isInline: true,
|
|
3894
|
-
styles: ["@layer properties;:host{display:block;border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--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)}@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"]
|
|
3895
|
-
});
|
|
3896
|
-
};
|
|
3897
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
3898
|
-
minVersion: "12.0.0",
|
|
3899
|
-
version: "22.2.1",
|
|
3900
|
-
ngImport: i0,
|
|
3901
|
-
type: UiCardComponent,
|
|
3902
|
-
decorators: [{
|
|
3903
|
-
type: Component,
|
|
3904
|
-
args: [{
|
|
3905
|
-
selector: "ui-card",
|
|
3906
|
-
template: "<ng-content />",
|
|
3907
|
-
host: { "[class]": "generatedClasses()" },
|
|
3908
|
-
styles: ["@layer properties;:host{display:block;border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--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)}@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"]
|
|
3909
|
-
}]
|
|
3910
|
-
}],
|
|
3911
|
-
propDecorators: { radius: [{
|
|
3912
|
-
type: i0.Input,
|
|
3913
|
-
args: [{
|
|
3914
|
-
isSignal: true,
|
|
3915
|
-
alias: "radius",
|
|
3916
|
-
required: false
|
|
3917
|
-
}]
|
|
3918
|
-
}] }
|
|
3919
|
-
});
|
|
3920
3557
|
var UiOverlayPositioner = class UiOverlayPositioner {
|
|
3921
3558
|
position = (reference, overlay, options) => computePosition(reference, overlay, {
|
|
3922
3559
|
placement: options.placement,
|
|
@@ -4925,7 +4562,7 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
4925
4562
|
isSignal: true
|
|
4926
4563
|
}],
|
|
4927
4564
|
ngImport: i0,
|
|
4928
|
-
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",
|
|
4565
|
+
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 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </ng-template>\n </ui-input>\n } @else {\n <div class=\"ui-select-trigger\" [class.ui-select-trigger--tags]=\"showTags()\">\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-select-label ui-text-body\">\n <span class=\"ui-select-label-sizer\" aria-hidden=\"true\">{{ placeholder() }}</span>\n <span class=\"ui-select-label-text\">{{ triggerLabel() }}</span>\n </span>\n } @else {\n <span class=\"truncate ui-text-body\">{{ triggerLabel() }}</span>\n }\n\n <ng-icon\n name=\"heroChevronDown\"\n class=\"ms-auto size-4 text-muted-foreground shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </button>\n\n @if (showTags()) {\n <span class=\"ui-select-tags-sizer ui-text-body\" aria-hidden=\"true\">\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\">{{ displayWith()(item) }}</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 name=\"heroXMark\" class=\"size-3 shrink-0\" />\n </button>\n }\n </ui-badge>\n } @empty {\n <span class=\"text-muted-foreground-1 truncate ui-text-body\">\n {{ placeholder() }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y\">\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-select-group ui-text-caption\"\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-select-option ui-text-body-alt\"\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\">{{ clearLabel() }}</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-select-option ui-text-body-alt\"\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 class=\"flex items-center gap-2 min-w-0 grow\">\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\">{{ row.label }}</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-select-option ui-text-body-alt\"\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 name=\"heroPlus\" class=\"size-4 shrink-0\" />\n <span class=\"truncate\">{{ createLabel()(row.query) }}</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 </div>\n </div>\n }\n</ui-dropdown>\n",
|
|
4929
4566
|
styles: ["@layer properties;:host{position:relative;display:inline-flex;width:100%;align-items:center;overflow:hidden;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(--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(--color-gray-200, oklch(92.8% .006 264.531))}@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"],
|
|
4930
4567
|
dependencies: [
|
|
4931
4568
|
{
|
|
@@ -5000,12 +4637,6 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
5000
4637
|
"classes"
|
|
5001
4638
|
]
|
|
5002
4639
|
},
|
|
5003
|
-
{
|
|
5004
|
-
kind: "component",
|
|
5005
|
-
type: UiCardComponent,
|
|
5006
|
-
selector: "ui-card",
|
|
5007
|
-
inputs: ["radius"]
|
|
5008
|
-
},
|
|
5009
4640
|
{
|
|
5010
4641
|
kind: "component",
|
|
5011
4642
|
type: NgIcon,
|
|
@@ -5045,12 +4676,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5045
4676
|
UiDropdownDirective,
|
|
5046
4677
|
UiInputComponent,
|
|
5047
4678
|
UiBadgeComponent,
|
|
5048
|
-
UiCardComponent,
|
|
5049
4679
|
NgIcon,
|
|
5050
4680
|
NgTemplateOutlet
|
|
5051
4681
|
],
|
|
5052
4682
|
host: { "(focusout)": "onFocusOut($event)" },
|
|
5053
|
-
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",
|
|
4683
|
+
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 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </ng-template>\n </ui-input>\n } @else {\n <div class=\"ui-select-trigger\" [class.ui-select-trigger--tags]=\"showTags()\">\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-select-label ui-text-body\">\n <span class=\"ui-select-label-sizer\" aria-hidden=\"true\">{{ placeholder() }}</span>\n <span class=\"ui-select-label-text\">{{ triggerLabel() }}</span>\n </span>\n } @else {\n <span class=\"truncate ui-text-body\">{{ triggerLabel() }}</span>\n }\n\n <ng-icon\n name=\"heroChevronDown\"\n class=\"ms-auto size-4 text-muted-foreground shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </button>\n\n @if (showTags()) {\n <span class=\"ui-select-tags-sizer ui-text-body\" aria-hidden=\"true\">\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\">{{ displayWith()(item) }}</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 name=\"heroXMark\" class=\"size-3 shrink-0\" />\n </button>\n }\n </ui-badge>\n } @empty {\n <span class=\"text-muted-foreground-1 truncate ui-text-body\">\n {{ placeholder() }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y\">\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-select-group ui-text-caption\"\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-select-option ui-text-body-alt\"\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\">{{ clearLabel() }}</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-select-option ui-text-body-alt\"\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 class=\"flex items-center gap-2 min-w-0 grow\">\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\">{{ row.label }}</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-select-option ui-text-body-alt\"\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 name=\"heroPlus\" class=\"size-4 shrink-0\" />\n <span class=\"truncate\">{{ createLabel()(row.query) }}</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 </div>\n </div>\n }\n</ui-dropdown>\n",
|
|
5054
4684
|
styles: ["@layer properties;:host{position:relative;display:inline-flex;width:100%;align-items:center;overflow:hidden;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(--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(--color-gray-200, oklch(92.8% .006 264.531))}@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"]
|
|
5055
4685
|
}]
|
|
5056
4686
|
}],
|
|
@@ -6625,209 +6255,18 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6625
6255
|
}]
|
|
6626
6256
|
}
|
|
6627
6257
|
});
|
|
6628
|
-
var
|
|
6629
|
-
|
|
6630
|
-
|
|
6631
|
-
|
|
6632
|
-
|
|
6633
|
-
|
|
6634
|
-
|
|
6635
|
-
|
|
6636
|
-
|
|
6637
|
-
|
|
6638
|
-
|
|
6639
|
-
|
|
6640
|
-
generatedClasses = computed(() => [
|
|
6641
|
-
"ui-tooltip",
|
|
6642
|
-
"ui-text-caption",
|
|
6643
|
-
this.classes()
|
|
6644
|
-
].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
6645
|
-
onHover(isHovering) {
|
|
6646
|
-
if (this.trigger() === "hover") this.isOpen().set(isHovering);
|
|
6647
|
-
}
|
|
6648
|
-
onFocus(isFocused) {
|
|
6649
|
-
if (["hover", "focus"].includes(this.trigger())) this.isOpen().set(isFocused);
|
|
6650
|
-
}
|
|
6651
|
-
onClick() {
|
|
6652
|
-
if (this.trigger() === "click") this.isOpen().update((value) => !value);
|
|
6653
|
-
}
|
|
6654
|
-
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
6655
|
-
minVersion: "12.0.0",
|
|
6656
|
-
version: "22.2.1",
|
|
6657
|
-
ngImport: i0,
|
|
6658
|
-
type: UiTooltipComponent,
|
|
6659
|
-
deps: [],
|
|
6660
|
-
target: i0.ɵɵFactoryTarget.Component
|
|
6661
|
-
});
|
|
6662
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
6663
|
-
minVersion: "17.0.0",
|
|
6664
|
-
version: "22.2.1",
|
|
6665
|
-
type: UiTooltipComponent,
|
|
6666
|
-
isStandalone: true,
|
|
6667
|
-
selector: "ui-tooltip",
|
|
6668
|
-
inputs: {
|
|
6669
|
-
text: {
|
|
6670
|
-
classPropertyName: "text",
|
|
6671
|
-
publicName: "text",
|
|
6672
|
-
isSignal: true,
|
|
6673
|
-
isRequired: true,
|
|
6674
|
-
transformFunction: null
|
|
6675
|
-
},
|
|
6676
|
-
placement: {
|
|
6677
|
-
classPropertyName: "placement",
|
|
6678
|
-
publicName: "placement",
|
|
6679
|
-
isSignal: true,
|
|
6680
|
-
isRequired: false,
|
|
6681
|
-
transformFunction: null
|
|
6682
|
-
},
|
|
6683
|
-
trigger: {
|
|
6684
|
-
classPropertyName: "trigger",
|
|
6685
|
-
publicName: "trigger",
|
|
6686
|
-
isSignal: true,
|
|
6687
|
-
isRequired: false,
|
|
6688
|
-
transformFunction: null
|
|
6689
|
-
},
|
|
6690
|
-
classes: {
|
|
6691
|
-
classPropertyName: "classes",
|
|
6692
|
-
publicName: "classes",
|
|
6693
|
-
isSignal: true,
|
|
6694
|
-
isRequired: false,
|
|
6695
|
-
transformFunction: null
|
|
6696
|
-
},
|
|
6697
|
-
isOpen: {
|
|
6698
|
-
classPropertyName: "isOpen",
|
|
6699
|
-
publicName: "isOpen",
|
|
6700
|
-
isSignal: true,
|
|
6701
|
-
isRequired: false,
|
|
6702
|
-
transformFunction: null
|
|
6703
|
-
}
|
|
6704
|
-
},
|
|
6705
|
-
host: {
|
|
6706
|
-
listeners: {
|
|
6707
|
-
"mouseenter": "onHover(true)",
|
|
6708
|
-
"mouseleave": "onHover(false)",
|
|
6709
|
-
"focusin": "onFocus(true)",
|
|
6710
|
-
"focusout": "onFocus(false)",
|
|
6711
|
-
"click": "onClick()"
|
|
6712
|
-
},
|
|
6713
|
-
classAttribute: "inline-flex size-fit"
|
|
6714
|
-
},
|
|
6715
|
-
viewQueries: [{
|
|
6716
|
-
propertyName: "content",
|
|
6717
|
-
first: true,
|
|
6718
|
-
predicate: ["content"],
|
|
6719
|
-
descendants: true,
|
|
6720
|
-
read: ElementRef,
|
|
6721
|
-
isSignal: true
|
|
6722
|
-
}],
|
|
6723
|
-
exportAs: ["uiTooltip"],
|
|
6724
|
-
ngImport: i0,
|
|
6725
|
-
template: "<ui-overlay\n [isOpen]=\"isOpen()\"\n [closeBehaviour]=\"closeBehaviour()\"\n [content]=\"content()\"\n [anchor]=\"anchor\"\n [placement]=\"placement()\"\n>\n <ng-content />\n\n @if (isOpen()()) {\n <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n </div>\n }\n</ui-overlay>\n",
|
|
6726
|
-
styles: ["@layer properties;.ui-tooltip{max-width:var(--container-xs, 20rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--tooltip-line);background-color:var(--tooltip);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);color:var(--tooltip-foreground);--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)}@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"],
|
|
6727
|
-
dependencies: [{
|
|
6728
|
-
kind: "component",
|
|
6729
|
-
type: UiOverlayComponent,
|
|
6730
|
-
selector: "ui-overlay",
|
|
6731
|
-
inputs: [
|
|
6732
|
-
"content",
|
|
6733
|
-
"anchor",
|
|
6734
|
-
"closeBehaviour",
|
|
6735
|
-
"isOpen",
|
|
6736
|
-
"placement",
|
|
6737
|
-
"offset",
|
|
6738
|
-
"viewportPadding",
|
|
6739
|
-
"matchWidth"
|
|
6740
|
-
],
|
|
6741
|
-
exportAs: ["uiOverlay"]
|
|
6742
|
-
}]
|
|
6743
|
-
});
|
|
6744
|
-
};
|
|
6745
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
6746
|
-
minVersion: "12.0.0",
|
|
6747
|
-
version: "22.2.1",
|
|
6748
|
-
ngImport: i0,
|
|
6749
|
-
type: UiTooltipComponent,
|
|
6750
|
-
decorators: [{
|
|
6751
|
-
type: Component,
|
|
6752
|
-
args: [{
|
|
6753
|
-
selector: "ui-tooltip",
|
|
6754
|
-
exportAs: "uiTooltip",
|
|
6755
|
-
imports: [UiOverlayComponent],
|
|
6756
|
-
host: {
|
|
6757
|
-
class: "inline-flex size-fit",
|
|
6758
|
-
"(mouseenter)": "onHover(true)",
|
|
6759
|
-
"(mouseleave)": "onHover(false)",
|
|
6760
|
-
"(focusin)": "onFocus(true)",
|
|
6761
|
-
"(focusout)": "onFocus(false)",
|
|
6762
|
-
"(click)": "onClick()"
|
|
6763
|
-
},
|
|
6764
|
-
template: "<ui-overlay\n [isOpen]=\"isOpen()\"\n [closeBehaviour]=\"closeBehaviour()\"\n [content]=\"content()\"\n [anchor]=\"anchor\"\n [placement]=\"placement()\"\n>\n <ng-content />\n\n @if (isOpen()()) {\n <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n </div>\n }\n</ui-overlay>\n",
|
|
6765
|
-
styles: ["@layer properties;.ui-tooltip{max-width:var(--container-xs, 20rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--tooltip-line);background-color:var(--tooltip);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);color:var(--tooltip-foreground);--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)}@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"]
|
|
6766
|
-
}]
|
|
6767
|
-
}],
|
|
6768
|
-
propDecorators: {
|
|
6769
|
-
content: [{
|
|
6770
|
-
type: i0.ViewChild,
|
|
6771
|
-
args: ["content", {
|
|
6772
|
-
read: ElementRef,
|
|
6773
|
-
isSignal: true
|
|
6774
|
-
}]
|
|
6775
|
-
}],
|
|
6776
|
-
text: [{
|
|
6777
|
-
type: i0.Input,
|
|
6778
|
-
args: [{
|
|
6779
|
-
isSignal: true,
|
|
6780
|
-
alias: "text",
|
|
6781
|
-
required: true
|
|
6782
|
-
}]
|
|
6783
|
-
}],
|
|
6784
|
-
placement: [{
|
|
6785
|
-
type: i0.Input,
|
|
6786
|
-
args: [{
|
|
6787
|
-
isSignal: true,
|
|
6788
|
-
alias: "placement",
|
|
6789
|
-
required: false
|
|
6790
|
-
}]
|
|
6791
|
-
}],
|
|
6792
|
-
trigger: [{
|
|
6793
|
-
type: i0.Input,
|
|
6794
|
-
args: [{
|
|
6795
|
-
isSignal: true,
|
|
6796
|
-
alias: "trigger",
|
|
6797
|
-
required: false
|
|
6798
|
-
}]
|
|
6799
|
-
}],
|
|
6800
|
-
classes: [{
|
|
6801
|
-
type: i0.Input,
|
|
6802
|
-
args: [{
|
|
6803
|
-
isSignal: true,
|
|
6804
|
-
alias: "classes",
|
|
6805
|
-
required: false
|
|
6806
|
-
}]
|
|
6807
|
-
}],
|
|
6808
|
-
isOpen: [{
|
|
6809
|
-
type: i0.Input,
|
|
6810
|
-
args: [{
|
|
6811
|
-
isSignal: true,
|
|
6812
|
-
alias: "isOpen",
|
|
6813
|
-
required: false
|
|
6814
|
-
}]
|
|
6815
|
-
}]
|
|
6816
|
-
}
|
|
6817
|
-
});
|
|
6818
|
-
var UiKpiComponent = class UiKpiComponent {
|
|
6819
|
-
title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
|
|
6820
|
-
value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
6821
|
-
hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
6822
|
-
icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
|
|
6823
|
-
iconPosition = input("left", ...ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []);
|
|
6824
|
-
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
6825
|
-
minVersion: "12.0.0",
|
|
6826
|
-
version: "22.2.1",
|
|
6827
|
-
ngImport: i0,
|
|
6828
|
-
type: UiKpiComponent,
|
|
6829
|
-
deps: [],
|
|
6830
|
-
target: i0.ɵɵFactoryTarget.Component
|
|
6258
|
+
var UiKpiComponent = class UiKpiComponent {
|
|
6259
|
+
title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
|
|
6260
|
+
value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
6261
|
+
hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
|
|
6262
|
+
icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
|
|
6263
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
6264
|
+
minVersion: "12.0.0",
|
|
6265
|
+
version: "22.2.1",
|
|
6266
|
+
ngImport: i0,
|
|
6267
|
+
type: UiKpiComponent,
|
|
6268
|
+
deps: [],
|
|
6269
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
6831
6270
|
});
|
|
6832
6271
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
6833
6272
|
minVersion: "17.0.0",
|
|
@@ -6863,50 +6302,23 @@ var UiKpiComponent = class UiKpiComponent {
|
|
|
6863
6302
|
isSignal: true,
|
|
6864
6303
|
isRequired: false,
|
|
6865
6304
|
transformFunction: null
|
|
6866
|
-
},
|
|
6867
|
-
iconPosition: {
|
|
6868
|
-
classPropertyName: "iconPosition",
|
|
6869
|
-
publicName: "iconPosition",
|
|
6870
|
-
isSignal: true,
|
|
6871
|
-
isRequired: false,
|
|
6872
|
-
transformFunction: null
|
|
6873
6305
|
}
|
|
6874
6306
|
},
|
|
6875
6307
|
ngImport: i0,
|
|
6876
|
-
template: "<
|
|
6877
|
-
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6882
|
-
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
6887
|
-
|
|
6888
|
-
|
|
6889
|
-
|
|
6890
|
-
"svg",
|
|
6891
|
-
"size",
|
|
6892
|
-
"strokeWidth",
|
|
6893
|
-
"color"
|
|
6894
|
-
]
|
|
6895
|
-
},
|
|
6896
|
-
{
|
|
6897
|
-
kind: "component",
|
|
6898
|
-
type: UiTooltipComponent,
|
|
6899
|
-
selector: "ui-tooltip",
|
|
6900
|
-
inputs: [
|
|
6901
|
-
"text",
|
|
6902
|
-
"placement",
|
|
6903
|
-
"trigger",
|
|
6904
|
-
"classes",
|
|
6905
|
-
"isOpen"
|
|
6906
|
-
],
|
|
6907
|
-
exportAs: ["uiTooltip"]
|
|
6908
|
-
}
|
|
6909
|
-
]
|
|
6308
|
+
template: "<div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon()) {\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\">\n <p class=\"text-muted-foreground-2 ui-text-h4 uppercase\">\n {{ title() }}\n </p>\n <!-- todo: insert tooltip component later -->\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"text-foreground ui-text-h3\">\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</div>\n",
|
|
6309
|
+
styles: ["@layer properties;:host{display:flex;flex-direction:column;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--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)}@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"],
|
|
6310
|
+
dependencies: [{
|
|
6311
|
+
kind: "component",
|
|
6312
|
+
type: NgIcon,
|
|
6313
|
+
selector: "ng-icon",
|
|
6314
|
+
inputs: [
|
|
6315
|
+
"name",
|
|
6316
|
+
"svg",
|
|
6317
|
+
"size",
|
|
6318
|
+
"strokeWidth",
|
|
6319
|
+
"color"
|
|
6320
|
+
]
|
|
6321
|
+
}]
|
|
6910
6322
|
});
|
|
6911
6323
|
};
|
|
6912
6324
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -6918,12 +6330,9 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6918
6330
|
type: Component,
|
|
6919
6331
|
args: [{
|
|
6920
6332
|
selector: "ui-kpi",
|
|
6921
|
-
imports: [
|
|
6922
|
-
|
|
6923
|
-
|
|
6924
|
-
UiTooltipComponent
|
|
6925
|
-
],
|
|
6926
|
-
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 {{ title() }}\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"
|
|
6333
|
+
imports: [NgIcon],
|
|
6334
|
+
template: "<div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon()) {\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\">\n <p class=\"text-muted-foreground-2 ui-text-h4 uppercase\">\n {{ title() }}\n </p>\n <!-- todo: insert tooltip component later -->\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"text-foreground ui-text-h3\">\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</div>\n",
|
|
6335
|
+
styles: ["@layer properties;:host{display:flex;flex-direction:column;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);--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)}@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"]
|
|
6927
6336
|
}]
|
|
6928
6337
|
}],
|
|
6929
6338
|
propDecorators: {
|
|
@@ -6958,14 +6367,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6958
6367
|
alias: "icon",
|
|
6959
6368
|
required: false
|
|
6960
6369
|
}]
|
|
6961
|
-
}],
|
|
6962
|
-
iconPosition: [{
|
|
6963
|
-
type: i0.Input,
|
|
6964
|
-
args: [{
|
|
6965
|
-
isSignal: true,
|
|
6966
|
-
alias: "iconPosition",
|
|
6967
|
-
required: false
|
|
6968
|
-
}]
|
|
6969
6370
|
}]
|
|
6970
6371
|
}
|
|
6971
6372
|
});
|
|
@@ -7214,8 +6615,8 @@ var UiModalComponent = class UiModalComponent {
|
|
|
7214
6615
|
isSignal: true
|
|
7215
6616
|
}],
|
|
7216
6617
|
ngImport: i0,
|
|
7217
|
-
template: "@if (isOpen()) {\n <div\n class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n animate.leave=\"fs-modal--leaving opacity-0\"\n >\n <ui-overlay\n [isOpen]=\"isOpen\"\n [closeBehaviour]=\"closeBehaviour()\"\n [content]=\"panelElement()\"\n tabIndex=\"-1\"\n role=\"dialog\"\n aria-modal=\"true\"\n class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n >\n <
|
|
7218
|
-
styles: ["
|
|
6618
|
+
template: "@if (isOpen()) {\n <div\n class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n animate.leave=\"fs-modal--leaving opacity-0\"\n >\n <ui-overlay\n [isOpen]=\"isOpen\"\n [closeBehaviour]=\"closeBehaviour()\"\n [content]=\"panelElement()\"\n tabIndex=\"-1\"\n role=\"dialog\"\n aria-modal=\"true\"\n class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n >\n <div #panel [class]=\"generatedClasses()\">\n <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n @if (headerElement()) {\n <ng-container *ngTemplateOutlet=\"headerElement()\" />\n } @else {\n <span class=\"ui-text-h3\">{{ title() }}</span>\n <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n }\n </header>\n <div class=\"flex-1 min-h-0 overflow-auto\">\n <ng-content />\n </div>\n\n @if (footerElement()) {\n <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n <ng-container *ngTemplateOutlet=\"footerElement()\" />\n </footer>\n }\n </div>\n </div>\n </ui-overlay>\n </div>\n}\n",
|
|
6619
|
+
styles: ["@layer properties;.ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal{pointer-events:auto;display:flex;max-height:100vh;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--overlay-line);background-color:var(--overlay);--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)}@media(width>=40rem){.ui-modal--sm{margin-inline:auto;width:100%;max-width:var(--container-lg, 32rem)}}@media(width>=48rem){.ui-modal--md{margin-inline:auto;width:100%;max-width:var(--container-2xl, 42rem)}}@media(width>=64rem){.ui-modal--lg{margin-inline:auto;width:100%;max-width:var(--container-4xl, 56rem)}}@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"],
|
|
7219
6620
|
dependencies: [
|
|
7220
6621
|
{
|
|
7221
6622
|
kind: "component",
|
|
@@ -7249,12 +6650,6 @@ var UiModalComponent = class UiModalComponent {
|
|
|
7249
6650
|
"ngTemplateOutlet",
|
|
7250
6651
|
"ngTemplateOutletInjector"
|
|
7251
6652
|
]
|
|
7252
|
-
},
|
|
7253
|
-
{
|
|
7254
|
-
kind: "component",
|
|
7255
|
-
type: UiCardComponent,
|
|
7256
|
-
selector: "ui-card",
|
|
7257
|
-
inputs: ["radius"]
|
|
7258
6653
|
}
|
|
7259
6654
|
]
|
|
7260
6655
|
});
|
|
@@ -7271,11 +6666,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7271
6666
|
imports: [
|
|
7272
6667
|
UiOverlayComponent,
|
|
7273
6668
|
UiModalCloseButtonComponent,
|
|
7274
|
-
NgTemplateOutlet
|
|
7275
|
-
UiCardComponent
|
|
6669
|
+
NgTemplateOutlet
|
|
7276
6670
|
],
|
|
7277
|
-
template: "@if (isOpen()) {\n <div\n class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n animate.leave=\"fs-modal--leaving opacity-0\"\n >\n <ui-overlay\n [isOpen]=\"isOpen\"\n [closeBehaviour]=\"closeBehaviour()\"\n [content]=\"panelElement()\"\n tabIndex=\"-1\"\n role=\"dialog\"\n aria-modal=\"true\"\n class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n >\n <
|
|
7278
|
-
styles: ["
|
|
6671
|
+
template: "@if (isOpen()) {\n <div\n class=\"group z-50 fixed inset-0 flex justify-center items-center bg-black/40 starting:opacity-0 p-4 transition-opacity duration-150 ease-out\"\n animate.leave=\"fs-modal--leaving opacity-0\"\n >\n <ui-overlay\n [isOpen]=\"isOpen\"\n [closeBehaviour]=\"closeBehaviour()\"\n [content]=\"panelElement()\"\n tabIndex=\"-1\"\n role=\"dialog\"\n aria-modal=\"true\"\n class=\"block max-w-full starting:scale-95 group-[.fs-modal--leaving]:scale-95 transition duration-150 ease-out\"\n >\n <div #panel [class]=\"generatedClasses()\">\n <div class=\"flex flex-col max-h-[calc(100dvh-2rem-2px)]\">\n <header class=\"flex justify-between items-center gap-x-5 p-5 border-neutral border-b shrink-0\">\n @if (headerElement()) {\n <ng-container *ngTemplateOutlet=\"headerElement()\" />\n } @else {\n <span class=\"ui-text-h3\">{{ title() }}</span>\n <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n }\n </header>\n <div class=\"flex-1 min-h-0 overflow-auto\">\n <ng-content />\n </div>\n\n @if (footerElement()) {\n <footer class=\"flex justify-end items-center gap-2.5 p-5 shrink-0\">\n <ng-container *ngTemplateOutlet=\"footerElement()\" />\n </footer>\n }\n </div>\n </div>\n </ui-overlay>\n </div>\n}\n",
|
|
6672
|
+
styles: ["@layer properties;.ui-modal--backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;background-color:color-mix(in srgb,oklch(21% .034 264.665) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-modal--backdrop{background-color:color-mix(in oklab,var(--color-gray-900, oklch(21% .034 264.665)) 50%,transparent)}}.ui-modal{pointer-events:auto;display:flex;max-height:100vh;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--overlay-line);background-color:var(--overlay);--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)}@media(width>=40rem){.ui-modal--sm{margin-inline:auto;width:100%;max-width:var(--container-lg, 32rem)}}@media(width>=48rem){.ui-modal--md{margin-inline:auto;width:100%;max-width:var(--container-2xl, 42rem)}}@media(width>=64rem){.ui-modal--lg{margin-inline:auto;width:100%;max-width:var(--container-4xl, 56rem)}}@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"]
|
|
7279
6673
|
}]
|
|
7280
6674
|
}],
|
|
7281
6675
|
propDecorators: {
|
|
@@ -9252,7 +8646,7 @@ var UiToastComponent = class UiToastComponent {
|
|
|
9252
8646
|
"focusout": "setFocused(false)"
|
|
9253
8647
|
} },
|
|
9254
8648
|
ngImport: i0,
|
|
9255
|
-
template: "<
|
|
8649
|
+
template: "<div\n class=\"bg-layer shadow-lg p-4 border border-layer-line rounded-xl w-full max-w-xs\"\n [class]=\"classes()\"\n [attr.role]=\"role()\"\n tabindex=\"-1\"\n>\n <div class=\"flex gap-x-3\">\n <div class=\"inline-flex\" [class]=\"iconColour()\">\n <ng-icon\n [name]=\"icon()\"\n class=\"shrink-0\"\n size=\"24\"\n />\n </div>\n <div class=\"grow\">\n <p class=\"text-layer-foreground ui-text-body\">\n <ng-content />\n </p>\n </div>\n @if (dismissable()) {\n <button\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"dismissed.emit()\"\n >\n <ng-icon name=\"heroXMark\" />\n </button>\n }\n </div>\n</div>\n",
|
|
9256
8650
|
dependencies: [{
|
|
9257
8651
|
kind: "component",
|
|
9258
8652
|
type: NgIcon,
|
|
@@ -9264,11 +8658,6 @@ var UiToastComponent = class UiToastComponent {
|
|
|
9264
8658
|
"strokeWidth",
|
|
9265
8659
|
"color"
|
|
9266
8660
|
]
|
|
9267
|
-
}, {
|
|
9268
|
-
kind: "component",
|
|
9269
|
-
type: UiCardComponent,
|
|
9270
|
-
selector: "ui-card",
|
|
9271
|
-
inputs: ["radius"]
|
|
9272
8661
|
}]
|
|
9273
8662
|
});
|
|
9274
8663
|
};
|
|
@@ -9281,14 +8670,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9281
8670
|
type: Component,
|
|
9282
8671
|
args: [{
|
|
9283
8672
|
selector: "ui-toast",
|
|
9284
|
-
imports: [NgIcon
|
|
8673
|
+
imports: [NgIcon],
|
|
9285
8674
|
host: {
|
|
9286
8675
|
"(mouseenter)": "setHovered(true)",
|
|
9287
8676
|
"(mouseleave)": "setHovered(false)",
|
|
9288
8677
|
"(focusin)": "setFocused(true)",
|
|
9289
8678
|
"(focusout)": "setFocused(false)"
|
|
9290
8679
|
},
|
|
9291
|
-
template: "<
|
|
8680
|
+
template: "<div\n class=\"bg-layer shadow-lg p-4 border border-layer-line rounded-xl w-full max-w-xs\"\n [class]=\"classes()\"\n [attr.role]=\"role()\"\n tabindex=\"-1\"\n>\n <div class=\"flex gap-x-3\">\n <div class=\"inline-flex\" [class]=\"iconColour()\">\n <ng-icon\n [name]=\"icon()\"\n class=\"shrink-0\"\n size=\"24\"\n />\n </div>\n <div class=\"grow\">\n <p class=\"text-layer-foreground ui-text-body\">\n <ng-content />\n </p>\n </div>\n @if (dismissable()) {\n <button\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"dismissed.emit()\"\n >\n <ng-icon name=\"heroXMark\" />\n </button>\n }\n </div>\n</div>\n"
|
|
9292
8681
|
}]
|
|
9293
8682
|
}],
|
|
9294
8683
|
ctorParameters: () => [],
|
|
@@ -9496,6 +8885,196 @@ const ToasterPositions = [
|
|
|
9496
8885
|
"bottom-center",
|
|
9497
8886
|
"bottom-right"
|
|
9498
8887
|
];
|
|
8888
|
+
var UiTooltipComponent = class UiTooltipComponent {
|
|
8889
|
+
anchor = inject(ElementRef);
|
|
8890
|
+
content = viewChild("content", {
|
|
8891
|
+
...ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {},
|
|
8892
|
+
read: ElementRef
|
|
8893
|
+
});
|
|
8894
|
+
text = input.required(...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
|
|
8895
|
+
placement = input("top", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
|
|
8896
|
+
trigger = input("hover", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
|
|
8897
|
+
classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
8898
|
+
isOpen = input(signal(false), ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
8899
|
+
closeBehaviour = computed(() => this.trigger() === "click" ? "whenClickOutside" : "none", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
|
|
8900
|
+
generatedClasses = computed(() => [
|
|
8901
|
+
"ui-tooltip",
|
|
8902
|
+
"ui-text-caption",
|
|
8903
|
+
this.classes()
|
|
8904
|
+
].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
|
|
8905
|
+
onHover(isHovering) {
|
|
8906
|
+
if (this.trigger() === "hover") this.isOpen().set(isHovering);
|
|
8907
|
+
}
|
|
8908
|
+
onFocus(isFocused) {
|
|
8909
|
+
if (["hover", "focus"].includes(this.trigger())) this.isOpen().set(isFocused);
|
|
8910
|
+
}
|
|
8911
|
+
onClick() {
|
|
8912
|
+
if (this.trigger() === "click") this.isOpen().update((value) => !value);
|
|
8913
|
+
}
|
|
8914
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
8915
|
+
minVersion: "12.0.0",
|
|
8916
|
+
version: "22.2.1",
|
|
8917
|
+
ngImport: i0,
|
|
8918
|
+
type: UiTooltipComponent,
|
|
8919
|
+
deps: [],
|
|
8920
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
8921
|
+
});
|
|
8922
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
8923
|
+
minVersion: "17.0.0",
|
|
8924
|
+
version: "22.2.1",
|
|
8925
|
+
type: UiTooltipComponent,
|
|
8926
|
+
isStandalone: true,
|
|
8927
|
+
selector: "ui-tooltip",
|
|
8928
|
+
inputs: {
|
|
8929
|
+
text: {
|
|
8930
|
+
classPropertyName: "text",
|
|
8931
|
+
publicName: "text",
|
|
8932
|
+
isSignal: true,
|
|
8933
|
+
isRequired: true,
|
|
8934
|
+
transformFunction: null
|
|
8935
|
+
},
|
|
8936
|
+
placement: {
|
|
8937
|
+
classPropertyName: "placement",
|
|
8938
|
+
publicName: "placement",
|
|
8939
|
+
isSignal: true,
|
|
8940
|
+
isRequired: false,
|
|
8941
|
+
transformFunction: null
|
|
8942
|
+
},
|
|
8943
|
+
trigger: {
|
|
8944
|
+
classPropertyName: "trigger",
|
|
8945
|
+
publicName: "trigger",
|
|
8946
|
+
isSignal: true,
|
|
8947
|
+
isRequired: false,
|
|
8948
|
+
transformFunction: null
|
|
8949
|
+
},
|
|
8950
|
+
classes: {
|
|
8951
|
+
classPropertyName: "classes",
|
|
8952
|
+
publicName: "classes",
|
|
8953
|
+
isSignal: true,
|
|
8954
|
+
isRequired: false,
|
|
8955
|
+
transformFunction: null
|
|
8956
|
+
},
|
|
8957
|
+
isOpen: {
|
|
8958
|
+
classPropertyName: "isOpen",
|
|
8959
|
+
publicName: "isOpen",
|
|
8960
|
+
isSignal: true,
|
|
8961
|
+
isRequired: false,
|
|
8962
|
+
transformFunction: null
|
|
8963
|
+
}
|
|
8964
|
+
},
|
|
8965
|
+
host: {
|
|
8966
|
+
listeners: {
|
|
8967
|
+
"mouseenter": "onHover(true)",
|
|
8968
|
+
"mouseleave": "onHover(false)",
|
|
8969
|
+
"focusin": "onFocus(true)",
|
|
8970
|
+
"focusout": "onFocus(false)",
|
|
8971
|
+
"click": "onClick()"
|
|
8972
|
+
},
|
|
8973
|
+
classAttribute: "inline-flex size-fit"
|
|
8974
|
+
},
|
|
8975
|
+
viewQueries: [{
|
|
8976
|
+
propertyName: "content",
|
|
8977
|
+
first: true,
|
|
8978
|
+
predicate: ["content"],
|
|
8979
|
+
descendants: true,
|
|
8980
|
+
read: ElementRef,
|
|
8981
|
+
isSignal: true
|
|
8982
|
+
}],
|
|
8983
|
+
exportAs: ["uiTooltip"],
|
|
8984
|
+
ngImport: i0,
|
|
8985
|
+
template: "<ui-overlay\n [isOpen]=\"isOpen()\"\n [closeBehaviour]=\"closeBehaviour()\"\n [content]=\"content()\"\n [anchor]=\"anchor\"\n [placement]=\"placement()\"\n>\n <ng-content />\n\n @if (isOpen()()) {\n <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n </div>\n }\n</ui-overlay>\n",
|
|
8986
|
+
styles: ["@layer properties;.ui-tooltip{max-width:var(--container-xs, 20rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--tooltip-line);background-color:var(--tooltip);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);color:var(--tooltip-foreground);--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)}@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"],
|
|
8987
|
+
dependencies: [{
|
|
8988
|
+
kind: "component",
|
|
8989
|
+
type: UiOverlayComponent,
|
|
8990
|
+
selector: "ui-overlay",
|
|
8991
|
+
inputs: [
|
|
8992
|
+
"content",
|
|
8993
|
+
"anchor",
|
|
8994
|
+
"closeBehaviour",
|
|
8995
|
+
"isOpen",
|
|
8996
|
+
"placement",
|
|
8997
|
+
"offset",
|
|
8998
|
+
"viewportPadding",
|
|
8999
|
+
"matchWidth"
|
|
9000
|
+
],
|
|
9001
|
+
exportAs: ["uiOverlay"]
|
|
9002
|
+
}]
|
|
9003
|
+
});
|
|
9004
|
+
};
|
|
9005
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
9006
|
+
minVersion: "12.0.0",
|
|
9007
|
+
version: "22.2.1",
|
|
9008
|
+
ngImport: i0,
|
|
9009
|
+
type: UiTooltipComponent,
|
|
9010
|
+
decorators: [{
|
|
9011
|
+
type: Component,
|
|
9012
|
+
args: [{
|
|
9013
|
+
selector: "ui-tooltip",
|
|
9014
|
+
exportAs: "uiTooltip",
|
|
9015
|
+
imports: [UiOverlayComponent],
|
|
9016
|
+
host: {
|
|
9017
|
+
class: "inline-flex size-fit",
|
|
9018
|
+
"(mouseenter)": "onHover(true)",
|
|
9019
|
+
"(mouseleave)": "onHover(false)",
|
|
9020
|
+
"(focusin)": "onFocus(true)",
|
|
9021
|
+
"(focusout)": "onFocus(false)",
|
|
9022
|
+
"(click)": "onClick()"
|
|
9023
|
+
},
|
|
9024
|
+
template: "<ui-overlay\n [isOpen]=\"isOpen()\"\n [closeBehaviour]=\"closeBehaviour()\"\n [content]=\"content()\"\n [anchor]=\"anchor\"\n [placement]=\"placement()\"\n>\n <ng-content />\n\n @if (isOpen()()) {\n <div #content class=\"p-1.5\" style=\"position: fixed; z-index: 60\">\n <div role=\"tooltip\" [class]=\"generatedClasses()\">{{ text() }}</div>\n </div>\n }\n</ui-overlay>\n",
|
|
9025
|
+
styles: ["@layer properties;.ui-tooltip{max-width:var(--container-xs, 20rem);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--tooltip-line);background-color:var(--tooltip);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);color:var(--tooltip-foreground);--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)}@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"]
|
|
9026
|
+
}]
|
|
9027
|
+
}],
|
|
9028
|
+
propDecorators: {
|
|
9029
|
+
content: [{
|
|
9030
|
+
type: i0.ViewChild,
|
|
9031
|
+
args: ["content", {
|
|
9032
|
+
read: ElementRef,
|
|
9033
|
+
isSignal: true
|
|
9034
|
+
}]
|
|
9035
|
+
}],
|
|
9036
|
+
text: [{
|
|
9037
|
+
type: i0.Input,
|
|
9038
|
+
args: [{
|
|
9039
|
+
isSignal: true,
|
|
9040
|
+
alias: "text",
|
|
9041
|
+
required: true
|
|
9042
|
+
}]
|
|
9043
|
+
}],
|
|
9044
|
+
placement: [{
|
|
9045
|
+
type: i0.Input,
|
|
9046
|
+
args: [{
|
|
9047
|
+
isSignal: true,
|
|
9048
|
+
alias: "placement",
|
|
9049
|
+
required: false
|
|
9050
|
+
}]
|
|
9051
|
+
}],
|
|
9052
|
+
trigger: [{
|
|
9053
|
+
type: i0.Input,
|
|
9054
|
+
args: [{
|
|
9055
|
+
isSignal: true,
|
|
9056
|
+
alias: "trigger",
|
|
9057
|
+
required: false
|
|
9058
|
+
}]
|
|
9059
|
+
}],
|
|
9060
|
+
classes: [{
|
|
9061
|
+
type: i0.Input,
|
|
9062
|
+
args: [{
|
|
9063
|
+
isSignal: true,
|
|
9064
|
+
alias: "classes",
|
|
9065
|
+
required: false
|
|
9066
|
+
}]
|
|
9067
|
+
}],
|
|
9068
|
+
isOpen: [{
|
|
9069
|
+
type: i0.Input,
|
|
9070
|
+
args: [{
|
|
9071
|
+
isSignal: true,
|
|
9072
|
+
alias: "isOpen",
|
|
9073
|
+
required: false
|
|
9074
|
+
}]
|
|
9075
|
+
}]
|
|
9076
|
+
}
|
|
9077
|
+
});
|
|
9499
9078
|
var UiLayoutComponent = class UiLayoutComponent {
|
|
9500
9079
|
sidebar = contentChild("sidebar", ...ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []);
|
|
9501
9080
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
@@ -11065,7 +10644,7 @@ var UiDatepickerComponent = class UiDatepickerComponent {
|
|
|
11065
10644
|
isSignal: true
|
|
11066
10645
|
}],
|
|
11067
10646
|
ngImport: i0,
|
|
11068
|
-
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
|
|
10647
|
+
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 w-8 self-stretch 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 <div class=\"bg-layer shadow-lg p-3 border border-gray-200 rounded-xl\">\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-gray-200 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 </div>\n </div>\n }\n</ui-dropdown>\n",
|
|
11069
10648
|
dependencies: [
|
|
11070
10649
|
{
|
|
11071
10650
|
kind: "component",
|
|
@@ -11181,12 +10760,6 @@ var UiDatepickerComponent = class UiDatepickerComponent {
|
|
|
11181
10760
|
"strokeWidth",
|
|
11182
10761
|
"color"
|
|
11183
10762
|
]
|
|
11184
|
-
},
|
|
11185
|
-
{
|
|
11186
|
-
kind: "component",
|
|
11187
|
-
type: UiCardComponent,
|
|
11188
|
-
selector: "ui-card",
|
|
11189
|
-
inputs: ["radius"]
|
|
11190
10763
|
}
|
|
11191
10764
|
]
|
|
11192
10765
|
});
|
|
@@ -11207,11 +10780,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11207
10780
|
UiDropdownDirective,
|
|
11208
10781
|
UiButtonComponent,
|
|
11209
10782
|
UiTimeSelectComponent,
|
|
11210
|
-
NgIcon
|
|
11211
|
-
UiCardComponent
|
|
10783
|
+
NgIcon
|
|
11212
10784
|
],
|
|
11213
10785
|
host: { class: "block w-full" },
|
|
11214
|
-
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
|
|
10786
|
+
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 w-8 self-stretch 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 <div class=\"bg-layer shadow-lg p-3 border border-gray-200 rounded-xl\">\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-gray-200 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 </div>\n </div>\n }\n</ui-dropdown>\n"
|
|
11215
10787
|
}]
|
|
11216
10788
|
}],
|
|
11217
10789
|
propDecorators: {
|
|
@@ -11403,7 +10975,7 @@ var UiDropdownButtonComponent = class UiDropdownButtonComponent {
|
|
|
11403
10975
|
},
|
|
11404
10976
|
outputs: { isOpen: "isOpenChange" },
|
|
11405
10977
|
ngImport: i0,
|
|
11406
|
-
template: "<ui-button\n [intent]=\"intent()\"\n [appearance]=\"appearance()\"\n (click)=\"isOpen.update(value => !value)\"\n>\n <ng-content />\n <ng-icon\n name=\"heroChevronDown\"\n class=\"size-4
|
|
10978
|
+
template: "<ui-button\n [intent]=\"intent()\"\n [appearance]=\"appearance()\"\n (click)=\"isOpen.update(value => !value)\"\n>\n <ng-content />\n <ng-icon\n name=\"heroChevronDown\"\n class=\"size-4 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n</ui-button>\n",
|
|
11407
10979
|
dependencies: [{
|
|
11408
10980
|
kind: "component",
|
|
11409
10981
|
type: UiButtonComponent,
|
|
@@ -11442,7 +11014,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11442
11014
|
args: [{
|
|
11443
11015
|
selector: "ui-dropdown-button",
|
|
11444
11016
|
imports: [UiButtonComponent, NgIcon],
|
|
11445
|
-
template: "<ui-button\n [intent]=\"intent()\"\n [appearance]=\"appearance()\"\n (click)=\"isOpen.update(value => !value)\"\n>\n <ng-content />\n <ng-icon\n name=\"heroChevronDown\"\n class=\"size-4
|
|
11017
|
+
template: "<ui-button\n [intent]=\"intent()\"\n [appearance]=\"appearance()\"\n (click)=\"isOpen.update(value => !value)\"\n>\n <ng-content />\n <ng-icon\n name=\"heroChevronDown\"\n class=\"size-4 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n</ui-button>\n"
|
|
11446
11018
|
}]
|
|
11447
11019
|
}],
|
|
11448
11020
|
propDecorators: {
|
|
@@ -11507,42 +11079,33 @@ var UiDropdownMenuComponent = class UiDropdownMenuComponent {
|
|
|
11507
11079
|
transformFunction: null
|
|
11508
11080
|
} },
|
|
11509
11081
|
ngImport: i0,
|
|
11510
|
-
template: "<
|
|
11511
|
-
dependencies: [
|
|
11512
|
-
|
|
11513
|
-
|
|
11514
|
-
|
|
11515
|
-
|
|
11516
|
-
|
|
11517
|
-
|
|
11518
|
-
|
|
11519
|
-
|
|
11520
|
-
|
|
11521
|
-
|
|
11522
|
-
|
|
11523
|
-
|
|
11524
|
-
|
|
11525
|
-
|
|
11526
|
-
|
|
11527
|
-
|
|
11528
|
-
|
|
11529
|
-
|
|
11530
|
-
|
|
11531
|
-
|
|
11532
|
-
|
|
11533
|
-
|
|
11534
|
-
|
|
11535
|
-
|
|
11536
|
-
|
|
11537
|
-
inputs: [
|
|
11538
|
-
"name",
|
|
11539
|
-
"svg",
|
|
11540
|
-
"size",
|
|
11541
|
-
"strokeWidth",
|
|
11542
|
-
"color"
|
|
11543
|
-
]
|
|
11544
|
-
}
|
|
11545
|
-
]
|
|
11082
|
+
template: "<div\n class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y w-3xs max-w-md\"\n role=\"menu\"\n>\n @for (item of items(); track $index) {\n @if ('divider' in item) {\n <div class=\"my-1 border-border border-t\"></div>\n } @else if ('children' in item) {\n <div class=\"flex flex-col gap-y-0.5 p-1\">\n <span\n class=\"block px-4 pt-2 pb-1 font-medium text-muted-foreground ui-text-caption uppercase\"\n >\n {{ item.label }}\n </span>\n\n @for (child of item.children; track child.label) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n (click)=\"child.onClick()\"\n >\n @if (child.icon) {\n <ng-icon\n [name]=\"child.icon\"\n size=\"18\"\n strokeWidth=\"1.5\"\n class=\"size-4 shrink-0\"\n />\n }\n\n {{ child.label }}\n </ui-button>\n }\n </div>\n } @else {\n <div class=\"p-1\">\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n (click)=\"item.onClick()\"\n >\n @if (item.icon) {\n <ng-icon\n [name]=\"item.icon\"\n size=\"18\"\n strokeWidth=\"2\"\n class=\"size-4 shrink-0\"\n />\n }\n\n {{ item.label }}\n </ui-button>\n </div>\n }\n }\n</div>\n",
|
|
11083
|
+
dependencies: [{
|
|
11084
|
+
kind: "component",
|
|
11085
|
+
type: UiButtonComponent,
|
|
11086
|
+
selector: "ui-button",
|
|
11087
|
+
inputs: [
|
|
11088
|
+
"appearance",
|
|
11089
|
+
"intent",
|
|
11090
|
+
"size",
|
|
11091
|
+
"classes",
|
|
11092
|
+
"type",
|
|
11093
|
+
"ariaLabel",
|
|
11094
|
+
"disabled",
|
|
11095
|
+
"loading"
|
|
11096
|
+
]
|
|
11097
|
+
}, {
|
|
11098
|
+
kind: "component",
|
|
11099
|
+
type: NgIcon,
|
|
11100
|
+
selector: "ng-icon",
|
|
11101
|
+
inputs: [
|
|
11102
|
+
"name",
|
|
11103
|
+
"svg",
|
|
11104
|
+
"size",
|
|
11105
|
+
"strokeWidth",
|
|
11106
|
+
"color"
|
|
11107
|
+
]
|
|
11108
|
+
}]
|
|
11546
11109
|
});
|
|
11547
11110
|
};
|
|
11548
11111
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -11554,12 +11117,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11554
11117
|
type: Component,
|
|
11555
11118
|
args: [{
|
|
11556
11119
|
selector: "ui-dropdown-menu",
|
|
11557
|
-
imports: [
|
|
11558
|
-
|
|
11559
|
-
UiCardComponent,
|
|
11560
|
-
NgIcon
|
|
11561
|
-
],
|
|
11562
|
-
template: "<ui-card radius=\"lg\" class=\"divide-y w-3xs max-w-md\" role=\"menu\">\n @for (item of items(); track $index) {\n @if ('divider' in item) {\n <div class=\"my-1 border-border border-t\"></div>\n } @else if ('children' in item) {\n <div class=\"flex flex-col gap-y-0.5 p-1\">\n <span\n class=\"block px-4 pt-2 pb-1 font-medium text-muted-foreground ui-text-caption uppercase\"\n >\n {{ item.label }}\n </span>\n\n @for (child of item.children; track child.label) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n (click)=\"child.onClick()\"\n >\n @if (child.icon) {\n <ng-icon\n [name]=\"child.icon\"\n size=\"18\"\n strokeWidth=\"1.5\"\n class=\"size-4 shrink-0\"\n />\n }\n\n {{ child.label }}\n </ui-button>\n }\n </div>\n } @else {\n <div class=\"p-1\">\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n (click)=\"item.onClick()\"\n >\n @if (item.icon) {\n <ng-icon\n [name]=\"item.icon\"\n size=\"18\"\n strokeWidth=\"2\"\n class=\"size-4 shrink-0\"\n />\n }\n\n {{ item.label }}\n </ui-button>\n </div>\n }\n }\n</ui-card>\n"
|
|
11120
|
+
imports: [UiButtonComponent, NgIcon],
|
|
11121
|
+
template: "<div\n class=\"bg-white shadow-xs border border-dropdown-divider rounded-lg divide-y w-3xs max-w-md\"\n role=\"menu\"\n>\n @for (item of items(); track $index) {\n @if ('divider' in item) {\n <div class=\"my-1 border-border border-t\"></div>\n } @else if ('children' in item) {\n <div class=\"flex flex-col gap-y-0.5 p-1\">\n <span\n class=\"block px-4 pt-2 pb-1 font-medium text-muted-foreground ui-text-caption uppercase\"\n >\n {{ item.label }}\n </span>\n\n @for (child of item.children; track child.label) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n (click)=\"child.onClick()\"\n >\n @if (child.icon) {\n <ng-icon\n [name]=\"child.icon\"\n size=\"18\"\n strokeWidth=\"1.5\"\n class=\"size-4 shrink-0\"\n />\n }\n\n {{ child.label }}\n </ui-button>\n }\n </div>\n } @else {\n <div class=\"p-1\">\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-x-3.5 px-3 py-2 rounded-lg ui-text-body-alt text-dropdown-item-foreground hover:bg-dropdown-item-hover focus:bg-dropdown-item-focus w-full border-transparent focus:outline-hidden!\"\n (click)=\"item.onClick()\"\n >\n @if (item.icon) {\n <ng-icon\n [name]=\"item.icon\"\n size=\"18\"\n strokeWidth=\"2\"\n class=\"size-4 shrink-0\"\n />\n }\n\n {{ item.label }}\n </ui-button>\n </div>\n }\n }\n</div>\n"
|
|
11563
11122
|
}]
|
|
11564
11123
|
}],
|
|
11565
11124
|
propDecorators: { items: [{
|
|
@@ -12013,6 +11572,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12013
11572
|
}]
|
|
12014
11573
|
}
|
|
12015
11574
|
});
|
|
12016
|
-
export { AlertAppearances, AlertIntents, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CalendarModes, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays,
|
|
11575
|
+
export { AlertAppearances, AlertIntents, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CalendarModes, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_LOADING_TYPES, UiAlertComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, 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, UiProgressComponent, UiRadioComponent, UiSelectComponent, UiSidebarComponent, UiSidebarItemComponent, UiSkeletonComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, WeekStarts, defaultDateRangePresets, financialYearPreset, lastDaysPreset, monthPreset, thisWeekPreset, todayPreset, yearPreset };
|
|
12017
11576
|
|
|
12018
11577
|
//# sourceMappingURL=area8975-ui.mjs.map
|