@area8975/ui 0.1.1-dev.15 → 0.1.1-dev.18
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 +926 -142
- package/fesm2022/area8975-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/theme.css +2 -13
- package/types/area8975-ui.d.ts +188 -90
package/fesm2022/area8975-ui.mjs
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
|
-
import { ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideAppInitializer, signal, untracked, viewChild } from "@angular/core";
|
|
2
|
+
import { ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideAppInitializer, signal, untracked, viewChild } from "@angular/core";
|
|
3
3
|
import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
|
|
4
|
-
import { NgIcon } from "@ng-icons/core";
|
|
4
|
+
import { NgIcon, provideIcons } from "@ng-icons/core";
|
|
5
|
+
import { heroArrowUp, heroArrowUpTray, heroBars2, heroBars3, heroCalendar, heroCalendarDateRange, heroCheck, heroChevronDoubleLeft, heroChevronDown, heroChevronLeft, heroChevronRight, heroChevronUp, heroChevronUpDown, heroClock, heroDocument, heroEye, heroEyeSlash, heroFunnel, heroMagnifyingGlass, heroMinus, heroPlus, heroQuestionMarkCircle, heroViewColumns, heroXMark } from "@ng-icons/heroicons/outline";
|
|
5
6
|
import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
|
|
6
|
-
import { Subject, catchError, debounceTime, of, skip, switchMap } from "rxjs";
|
|
7
|
+
import { Subject, catchError, debounceTime, filter, of, skip, switchMap } from "rxjs";
|
|
7
8
|
import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
|
|
9
|
+
import { heroCheckCircleSolid, heroExclamationTriangleSolid, heroInformationCircleSolid, heroXCircleSolid } from "@ng-icons/heroicons/solid";
|
|
8
10
|
const UI_FORMAT_DEFAULTS = {
|
|
9
11
|
currency: "GBP",
|
|
10
12
|
locale: "en-GB"
|
|
@@ -1409,7 +1411,6 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1409
1411
|
/>
|
|
1410
1412
|
}
|
|
1411
1413
|
|
|
1412
|
-
<!-- min-h-0 so the drawn chart can't push its own height up, it only follows the space it's given -->
|
|
1413
1414
|
<ui-chart
|
|
1414
1415
|
[class.grow]="fill()"
|
|
1415
1416
|
[class.min-h-0]="fill()"
|
|
@@ -1518,7 +1519,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1518
1519
|
/>
|
|
1519
1520
|
}
|
|
1520
1521
|
|
|
1521
|
-
<!-- min-h-0 so the drawn chart can't push its own height up, it only follows the space it's given -->
|
|
1522
1522
|
<ui-chart
|
|
1523
1523
|
[class.grow]="fill()"
|
|
1524
1524
|
[class.min-h-0]="fill()"
|
|
@@ -2473,7 +2473,7 @@ var UiCheckboxComponent = class UiCheckboxComponent {
|
|
|
2473
2473
|
} },
|
|
2474
2474
|
ngImport: i0,
|
|
2475
2475
|
template: "<input\n type=\"checkbox\"\n [class]=\"generatedClasses()\"\n [id]=\"id()\"\n [name]=\"name()\"\n [required]=\"required()\"\n [checked]=\"value()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (change)=\"toggle()\"\n/>\n",
|
|
2476
|
-
styles: ["@layer properties;:host{display:inline-flex}.ui-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);border-radius:.25rem;border-color:var(--border-line-3);
|
|
2476
|
+
styles: ["@layer properties;:host{display:inline-flex}.ui-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);border-radius:.25rem;border-color:var(--border-line-3);color:var(--color-primary-600, var(--color-blue-600))}.ui-checkbox:not(*:checked):not(*:indeterminate){background-color:var(--layer)}.ui-checkbox:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-checkbox:focus{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox:focus{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-checkbox:disabled{opacity:50%}.ui-checkbox[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500));color:var(--color-danger-600, var(--color-red-600))}.ui-checkbox[data-invalid]:focus{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox[data-invalid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-checkbox[data-valid]{border-color:var(--color-success-500, var(--color-teal-500));color:var(--color-success-600, var(--color-teal-600))}.ui-checkbox[data-valid]:focus{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox[data-valid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
2477
2477
|
});
|
|
2478
2478
|
};
|
|
2479
2479
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -2490,7 +2490,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2490
2490
|
"[attr.name]": "null"
|
|
2491
2491
|
},
|
|
2492
2492
|
template: "<input\n type=\"checkbox\"\n [class]=\"generatedClasses()\"\n [id]=\"id()\"\n [name]=\"name()\"\n [required]=\"required()\"\n [checked]=\"value()\"\n [indeterminate]=\"indeterminate()\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (change)=\"toggle()\"\n/>\n",
|
|
2493
|
-
styles: ["@layer properties;:host{display:inline-flex}.ui-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);border-radius:.25rem;border-color:var(--border-line-3);
|
|
2493
|
+
styles: ["@layer properties;:host{display:inline-flex}.ui-checkbox{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);border-radius:.25rem;border-color:var(--border-line-3);color:var(--color-primary-600, var(--color-blue-600))}.ui-checkbox:not(*:checked):not(*:indeterminate){background-color:var(--layer)}.ui-checkbox:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-checkbox:focus{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox:focus{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-checkbox:disabled{opacity:50%}.ui-checkbox[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500));color:var(--color-danger-600, var(--color-red-600))}.ui-checkbox[data-invalid]:focus{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox[data-invalid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-checkbox[data-valid]{border-color:var(--color-success-500, var(--color-teal-500));color:var(--color-success-600, var(--color-teal-600))}.ui-checkbox[data-valid]:focus{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-checkbox[data-valid]:focus{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
2494
2494
|
}]
|
|
2495
2495
|
}],
|
|
2496
2496
|
propDecorators: {
|
|
@@ -2782,6 +2782,10 @@ var UiDropzoneComponent = class UiDropzoneComponent {
|
|
|
2782
2782
|
value: "valueChange",
|
|
2783
2783
|
rejected: "rejected"
|
|
2784
2784
|
},
|
|
2785
|
+
providers: [provideIcons({
|
|
2786
|
+
heroArrowUpTray,
|
|
2787
|
+
heroDocument
|
|
2788
|
+
})],
|
|
2785
2789
|
viewQueries: [{
|
|
2786
2790
|
propertyName: "picker",
|
|
2787
2791
|
first: true,
|
|
@@ -2816,6 +2820,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2816
2820
|
args: [{
|
|
2817
2821
|
selector: "ui-dropzone",
|
|
2818
2822
|
imports: [NgIcon],
|
|
2823
|
+
providers: [provideIcons({
|
|
2824
|
+
heroArrowUpTray,
|
|
2825
|
+
heroDocument
|
|
2826
|
+
})],
|
|
2819
2827
|
template: "<div\n class=\"ui-dropzone\"\n role=\"button\"\n [attr.id]=\"id() || null\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.data-dragging]=\"isDragging() ? '' : null\"\n [attr.data-invalid]=\"hasRejection() ? '' : null\"\n (click)=\"openPicker()\"\n (keydown)=\"handleKeydown($event)\"\n (dragenter)=\"handleDragEnter($event)\"\n (dragover)=\"handleDragOver($event)\"\n (dragleave)=\"handleDragLeave()\"\n (drop)=\"handleDrop($event)\"\n>\n <span class=\"ui-dropzone-icon\">\n <ng-icon [name]=\"icon()\" size=\"24\" class=\"shrink-0\" />\n </span>\n\n <span class=\"text-foreground ui-text-body\">\n {{ displayTitle() }}\n </span>\n\n @if (hint()) {\n <span class=\"text-muted-foreground-1 ui-text-caption\">\n {{ hint() }}\n </span>\n }\n</div>\n\n<input\n #picker\n type=\"file\"\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"handlePick($event)\"\n/>\n\n@if (files().length) {\n <div class=\"ui-dropzone-files\">\n <ul class=\"ui-dropzone-list\">\n @for (file of files(); track $index) {\n <li class=\"ui-dropzone-file\">\n <ng-icon\n name=\"heroDocument\"\n class=\"text-muted-foreground-1 shrink-0\"\n />\n <span class=\"text-foreground truncate ui-text-body\">\n {{ file.name }}\n </span>\n <span\n class=\"ms-auto text-muted-foreground-1 shrink-0 ui-text-caption\"\n >\n {{ file.size }}\n </span>\n </li>\n }\n </ul>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-dropzone-clear ui-text-caption\"\n (click)=\"clear()\"\n >\n {{ files().length > 1 ? 'Remove files' : 'Remove file' }}\n </button>\n }\n </div>\n}\n",
|
|
2820
2828
|
styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-dropzone{display:flex;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;row-gap:var(--spacing, .25rem);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--border-line-2);background-color:var(--layer);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-dropzone:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone:hover,.ui-dropzone:focus-visible{border-color:var(--color-primary-400, var(--color-blue-400))}.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in srgb,oklch(97% .014 254.604) 40%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in oklab,var(--color-primary-50, var(--color-blue-50)) 40%,transparent)}}.ui-dropzone[data-dragging]{border-color:var(--color-primary-500, var(--color-blue-500));background-color:var(--color-primary-50, var(--color-blue-50))}.ui-dropzone[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500))}.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-dropzone[aria-disabled]{pointer-events:none;cursor:not-allowed;opacity:50%}.ui-dropzone-icon{margin-bottom:var(--spacing, .25rem);display:inline-flex;width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--surface);color:var(--muted-foreground-1)}.ui-dropzone[data-dragging] .ui-dropzone-icon{background-color:var(--color-primary-100, var(--color-blue-100));color:var(--color-primary-600, var(--color-blue-600))}.ui-dropzone-files{display:flex;flex-direction:column;align-items:flex-end;row-gap:var(--spacing, .25rem)}.ui-dropzone-list{width:100%;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2)}:where(.ui-dropzone-list>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-dropzone-list>:not(:last-child)){border-color:var(--border-line-2)}.ui-dropzone-file{display:flex;min-width:0px;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-dropzone-clear{border-radius:.25rem;color:var(--muted-foreground-1)}.ui-dropzone-clear:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone-clear:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone-clear:hover,.ui-dropzone-clear:focus-visible{color:var(--color-danger-600, var(--color-red-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-divide-y-reverse: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
2821
2829
|
}]
|
|
@@ -3395,6 +3403,10 @@ var UiInputComponent = class UiInputComponent {
|
|
|
3395
3403
|
focused: "focused",
|
|
3396
3404
|
blurred: "blurred"
|
|
3397
3405
|
},
|
|
3406
|
+
providers: [provideIcons({
|
|
3407
|
+
heroEyeSlash,
|
|
3408
|
+
heroEye
|
|
3409
|
+
})],
|
|
3398
3410
|
queries: [{
|
|
3399
3411
|
propertyName: "leadingElement",
|
|
3400
3412
|
first: true,
|
|
@@ -3444,6 +3456,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3444
3456
|
args: [{
|
|
3445
3457
|
selector: "ui-input",
|
|
3446
3458
|
imports: [NgTemplateOutlet, NgIcon],
|
|
3459
|
+
providers: [provideIcons({
|
|
3460
|
+
heroEyeSlash,
|
|
3461
|
+
heroEye
|
|
3462
|
+
})],
|
|
3447
3463
|
template: "<ng-container *ngTemplateOutlet=\"leadingElement()\"></ng-container>\n\n<input\n [value]=\"value()\"\n [class]=\"generatedClasses()\"\n [type]=\"shownType()\"\n [attr.id]=\"id() || null\"\n [attr.name]=\"name() || null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.min]=\"min() === '' ? null : min()\"\n [attr.max]=\"max() === '' ? null : max()\"\n [attr.step]=\"step() === '' ? null : step()\"\n [attr.pattern]=\"pattern() || null\"\n [attr.inputmode]=\"inputmode() || null\"\n [attr.maxlength]=\"maxlength()\"\n [attr.minlength]=\"minlength()\"\n \n [attr.spellcheck]=\"spellcheck()\"\n [attr.list]=\"list() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.role]=\"inputRole() || null\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-controls]=\"ariaControls() || null\"\n [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n [attr.aria-haspopup]=\"ariaHasPopup() || null\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n/>\n\n<ng-container *ngTemplateOutlet=\"trailingElement()\"></ng-container>\n\n@if (canReveal()) {\n <button\n type=\"button\"\n class=\"ui-input-reveal\"\n [attr.aria-label]=\"revealed() ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"revealed()\"\n [disabled]=\"disabled()\"\n (click)=\"revealed.set(!revealed())\"\n >\n <ng-icon [name]=\"revealed() ? 'heroEyeSlash' : 'heroEye'\" size=\"18\" class=\"shrink-0\" />\n </button>\n}\n",
|
|
3448
3464
|
styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-input:disabled){opacity:50%}:host:has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-input{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ui-input:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-input:focus{--tw-outline-style: none;outline-style:none}.ui-input-reveal{margin-inline-end:var(--spacing, .25rem);display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1.5);color:var(--muted-foreground-1)}.ui-input-reveal:hover{color:var(--foreground)}.ui-input-reveal:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-input-reveal:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-input-reveal:focus-visible{--tw-outline-style: none;outline-style:none}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3449
3465
|
}]
|
|
@@ -3968,7 +3984,7 @@ var UiRadioComponent = class UiRadioComponent {
|
|
|
3968
3984
|
"attr.name": "null"
|
|
3969
3985
|
} },
|
|
3970
3986
|
ngImport: i0,
|
|
3971
|
-
template: "<input\n type=\"radio\"\n class=\"bg-layer border-line-3 focus:ring-2 focus:ring-primary-200/50 size-4 text-primary-600\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (change)=\"select()\"\n/>\n",
|
|
3987
|
+
template: "<input\n type=\"radio\"\n class=\"not-checked:bg-layer border-line-3 focus:ring-2 focus:ring-primary-200/50 size-4 text-primary-600\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (change)=\"select()\"\n/>\n",
|
|
3972
3988
|
styles: [":host{display:inline-flex}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3973
3989
|
});
|
|
3974
3990
|
};
|
|
@@ -3985,7 +4001,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3985
4001
|
"[attr.id]": "null",
|
|
3986
4002
|
"[attr.name]": "null"
|
|
3987
4003
|
},
|
|
3988
|
-
template: "<input\n type=\"radio\"\n class=\"bg-layer border-line-3 focus:ring-2 focus:ring-primary-200/50 size-4 text-primary-600\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (change)=\"select()\"\n/>\n",
|
|
4004
|
+
template: "<input\n type=\"radio\"\n class=\"not-checked:bg-layer border-line-3 focus:ring-2 focus:ring-primary-200/50 size-4 text-primary-600\"\n [id]=\"id()\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n (change)=\"select()\"\n/>\n",
|
|
3989
4005
|
styles: [":host{display:inline-flex}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3990
4006
|
}]
|
|
3991
4007
|
}],
|
|
@@ -4736,7 +4752,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4736
4752
|
}]
|
|
4737
4753
|
}
|
|
4738
4754
|
});
|
|
4739
|
-
let nextId$
|
|
4755
|
+
let nextId$3 = 0;
|
|
4740
4756
|
var UiSelectComponent = class UiSelectComponent {
|
|
4741
4757
|
isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
4742
4758
|
placement = input("bottom-start", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
|
|
@@ -4787,7 +4803,7 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
4787
4803
|
optionTemplate = contentChild("option", ...ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []);
|
|
4788
4804
|
triggerTemplate = contentChild("trigger", ...ngDevMode ? [{ debugName: "triggerTemplate" }] : /* istanbul ignore next */ []);
|
|
4789
4805
|
activeIndex = signal(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
|
|
4790
|
-
listId = `ui-select-${nextId$
|
|
4806
|
+
listId = `ui-select-${nextId$3++}`;
|
|
4791
4807
|
hasSelection = computed(() => this.multiple() ? this.selectedItems().length > 0 : this.selectedItem() !== null, ...ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []);
|
|
4792
4808
|
triggerLabel = computed(() => {
|
|
4793
4809
|
const display = this.displayWith();
|
|
@@ -4800,6 +4816,7 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
4800
4816
|
if (!selected.length) return this.placeholder();
|
|
4801
4817
|
return counterAfter !== null && selected.length > counterAfter ? this.counterLabel()(selected.length) : selected.map(display).join(", ");
|
|
4802
4818
|
}, ...ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []);
|
|
4819
|
+
isEmpty = computed(() => this.multiple() ? !this.selectedItems().length : this.selectedItem() === null, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
4803
4820
|
showTags = computed(() => this.multiple() && this.multipleDisplay() === "tags" && this.searchMode() !== "inline", ...ngDevMode ? [{ debugName: "showTags" }] : /* istanbul ignore next */ []);
|
|
4804
4821
|
createQuery = computed(() => {
|
|
4805
4822
|
const query = this.query().trim();
|
|
@@ -5220,6 +5237,12 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
5220
5237
|
selectedItems: "selectedItemsChange"
|
|
5221
5238
|
},
|
|
5222
5239
|
host: { listeners: { "focusout": "onFocusOut($event)" } },
|
|
5240
|
+
providers: [provideIcons({
|
|
5241
|
+
heroChevronDown,
|
|
5242
|
+
heroXMark,
|
|
5243
|
+
heroCheck,
|
|
5244
|
+
heroPlus
|
|
5245
|
+
})],
|
|
5223
5246
|
queries: [{
|
|
5224
5247
|
propertyName: "optionTemplate",
|
|
5225
5248
|
first: true,
|
|
@@ -5234,8 +5257,8 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
5234
5257
|
isSignal: true
|
|
5235
5258
|
}],
|
|
5236
5259
|
ngImport: i0,
|
|
5237
|
-
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n [placement]=\"placement()\"\n [closeBehaviour]=\"closeBehaviour()\"\n matchWidth=\"minWidth\"\n class=\"w-full\"\n>\n @if (searchMode() === 'inline') {\n <ui-input\n [value]=\"isOpen() ? query() : triggerLabel()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"triggerLabel()\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaHasPopup=\"listbox\"\n class=\"border-0!\"\n classes=\"h-auto!\"\n autocomplete=\"off\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ng-template #trailing>\n <ng-icon\n name=\"heroChevronDown\"\n class=\"mx-3 size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </ng-template>\n </ui-input>\n } @else {\n <div\n class=\"ui-select-trigger\"\n [class.ui-select-trigger--tags]=\"showTags()\"\n >\n <button\n type=\"button\"\n class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"id() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (showTags()) {\n <!-- the visible tags sit on top, this names the button for screen readers -->\n <span class=\"sr-only\">{{ triggerLabel() }}</span>\n } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n <ng-container\n *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n />\n </span>\n } @else if (multiple()) {\n <span class=\"ui-text-body ui-select-label\">\n <span\n class=\"ui-select-label-sizer\"\n aria-hidden=\"true\"\n >{{ placeholder() }}</span>\n <span class=\"ui-select-label-text\">{{\n triggerLabel()\n }}</span>\n </span>\n } @else {\n <span class=\"ui-text-body truncate\">{{\n triggerLabel()\n }}</span>\n }\n\n <ng-icon\n name=\"heroChevronDown\"\n class=\"ms-auto size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </button>\n\n @if (showTags()) {\n <span\n class=\"ui-text-body ui-select-tags-sizer\"\n aria-hidden=\"true\"\n >\n {{ placeholder() }}\n </span>\n\n <div class=\"ui-select-tags\">\n @for (item of selectedItems(); track $index) {\n <ui-badge\n intent=\"secondary\"\n appearance=\"soft\"\n size=\"xs\"\n classes=\"ui-select-tag ui-text-caption\"\n >\n <span class=\"truncate\">{{\n displayWith()(item)\n }}</span>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-select-tag-remove\"\n [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n (click)=\"removeItem(item)\"\n >\n <ng-icon\n name=\"heroXMark\"\n class=\"size-3 shrink-0\"\n />\n </button>\n }\n </ui-badge>\n } @empty {\n <span\n class=\"text-muted-foreground-1 ui-text-body truncate\"\n >\n {{ placeholder() }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <ui-card radius=\"lg\" class=\"divide-y overflow-hidden\">\n @if (searchMode() === 'dropdown') {\n <div class=\"p-2\">\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n (keydown)=\"onKeydown($event)\"\n [ariaExpanded]=\"true\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaLabel=\"Search options\"\n autocomplete=\"off\"\n placeholder=\"Search...\"\n />\n </div>\n }\n\n <div\n #scrollContainer\n class=\"py-1 max-h-60 overflow-y-auto\"\n role=\"listbox\"\n [attr.id]=\"listId\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll(scrollContainer)\"\n >\n @for (row of rows(); track row.id) {\n @switch (row.kind) {\n @case ('group') {\n <div\n class=\"ui-text-caption ui-select-group\"\n role=\"presentation\"\n >\n {{ row.label }}\n </div>\n }\n @case ('clear') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"text-muted-foreground-1 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"clear()\"\n >\n <span class=\"truncate\">{{\n clearLabel()\n }}</span>\n </button>\n }\n @case ('item') {\n <button\n type=\"button\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"text-dropdown-item-foreground ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.aria-selected]=\"row.selected\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onItemClick(row.item)\"\n >\n @if (optionTemplate(); as template) {\n <span\n class=\"flex items-center gap-2 min-w-0 grow\"\n >\n <ng-container\n *ngTemplateOutlet=\"template; context: {\n $implicit: row.item,\n selected: row.selected,\n active: row.index === activeIndex()\n }\"\n />\n </span>\n } @else {\n <span class=\"truncate\">{{\n row.label\n }}</span>\n }\n\n @if (row.selected) {\n <ng-icon\n name=\"heroCheck\"\n class=\"size-4 text-primary-600! shrink-0\"\n strokeWidth=\"2.5\"\n />\n }\n </button>\n }\n @case ('create') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"justify-start! text-primary-600 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onCreate()\"\n >\n <ng-icon\n name=\"heroPlus\"\n class=\"size-4 shrink-0\"\n />\n <span class=\"truncate\">{{\n createLabel()(row.query)\n }}</span>\n </button>\n }\n }\n }\n\n @if (loading()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n Loading...\n </div>\n }\n\n @if (!loading() && items().length === 0 && !createQuery()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n No results\n </div>\n }\n </div>\n </ui-card>\n </div>\n }\n</ui-dropdown>\n",
|
|
5238
|
-
styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) *
|
|
5260
|
+
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! py-1.5!\"\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-1.5 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\" [class.text-muted-foreground-1]=\"isEmpty()\">\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\" [class.text-muted-foreground-1]=\"isEmpty()\">{{\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 class=\"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",
|
|
5261
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) * 9);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:var(--spacing, .25rem);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
5239
5262
|
dependencies: [
|
|
5240
5263
|
{
|
|
5241
5264
|
kind: "component",
|
|
@@ -5359,8 +5382,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5359
5382
|
NgTemplateOutlet
|
|
5360
5383
|
],
|
|
5361
5384
|
host: { "(focusout)": "onFocusOut($event)" },
|
|
5362
|
-
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n [placement]=\"placement()\"\n [closeBehaviour]=\"closeBehaviour()\"\n matchWidth=\"minWidth\"\n class=\"w-full\"\n>\n @if (searchMode() === 'inline') {\n <ui-input\n [value]=\"isOpen() ? query() : triggerLabel()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"triggerLabel()\"\n [disabled]=\"disabled()\"\n [id]=\"id()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaHasPopup=\"listbox\"\n class=\"border-0!\"\n classes=\"h-auto!\"\n autocomplete=\"off\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n <ng-template #trailing>\n <ng-icon\n name=\"heroChevronDown\"\n class=\"mx-3 size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </ng-template>\n </ui-input>\n } @else {\n <div\n class=\"ui-select-trigger\"\n [class.ui-select-trigger--tags]=\"showTags()\"\n >\n <button\n type=\"button\"\n class=\"flex justify-between items-center gap-2 px-3 py-2 text-left ui-select\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"id() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n [disabled]=\"disabled()\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onKeydown($event)\"\n >\n @if (showTags()) {\n <!-- the visible tags sit on top, this names the button for screen readers -->\n <span class=\"sr-only\">{{ triggerLabel() }}</span>\n } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n <ng-container\n *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n />\n </span>\n } @else if (multiple()) {\n <span class=\"ui-text-body ui-select-label\">\n <span\n class=\"ui-select-label-sizer\"\n aria-hidden=\"true\"\n >{{ placeholder() }}</span>\n <span class=\"ui-select-label-text\">{{\n triggerLabel()\n }}</span>\n </span>\n } @else {\n <span class=\"ui-text-body truncate\">{{\n triggerLabel()\n }}</span>\n }\n\n <ng-icon\n name=\"heroChevronDown\"\n class=\"ms-auto size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n </button>\n\n @if (showTags()) {\n <span\n class=\"ui-text-body ui-select-tags-sizer\"\n aria-hidden=\"true\"\n >\n {{ placeholder() }}\n </span>\n\n <div class=\"ui-select-tags\">\n @for (item of selectedItems(); track $index) {\n <ui-badge\n intent=\"secondary\"\n appearance=\"soft\"\n size=\"xs\"\n classes=\"ui-select-tag ui-text-caption\"\n >\n <span class=\"truncate\">{{\n displayWith()(item)\n }}</span>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-select-tag-remove\"\n [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n (click)=\"removeItem(item)\"\n >\n <ng-icon\n name=\"heroXMark\"\n class=\"size-3 shrink-0\"\n />\n </button>\n }\n </ui-badge>\n } @empty {\n <span\n class=\"text-muted-foreground-1 ui-text-body truncate\"\n >\n {{ placeholder() }}\n </span>\n }\n </div>\n }\n </div>\n }\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <ui-card radius=\"lg\" class=\"divide-y overflow-hidden\">\n @if (searchMode() === 'dropdown') {\n <div class=\"p-2\">\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n (keydown)=\"onKeydown($event)\"\n [ariaExpanded]=\"true\"\n [ariaControls]=\"listId\"\n [ariaActiveDescendant]=\"activeId()\"\n inputRole=\"combobox\"\n ariaAutocomplete=\"list\"\n ariaLabel=\"Search options\"\n autocomplete=\"off\"\n placeholder=\"Search...\"\n />\n </div>\n }\n\n <div\n #scrollContainer\n class=\"py-1 max-h-60 overflow-y-auto\"\n role=\"listbox\"\n [attr.id]=\"listId\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n (scroll)=\"onScroll(scrollContainer)\"\n >\n @for (row of rows(); track row.id) {\n @switch (row.kind) {\n @case ('group') {\n <div\n class=\"ui-text-caption ui-select-group\"\n role=\"presentation\"\n >\n {{ row.label }}\n </div>\n }\n @case ('clear') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"text-muted-foreground-1 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"clear()\"\n >\n <span class=\"truncate\">{{\n clearLabel()\n }}</span>\n </button>\n }\n @case ('item') {\n <button\n type=\"button\"\n role=\"option\"\n tabindex=\"-1\"\n class=\"text-dropdown-item-foreground ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.aria-selected]=\"row.selected\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onItemClick(row.item)\"\n >\n @if (optionTemplate(); as template) {\n <span\n class=\"flex items-center gap-2 min-w-0 grow\"\n >\n <ng-container\n *ngTemplateOutlet=\"template; context: {\n $implicit: row.item,\n selected: row.selected,\n active: row.index === activeIndex()\n }\"\n />\n </span>\n } @else {\n <span class=\"truncate\">{{\n row.label\n }}</span>\n }\n\n @if (row.selected) {\n <ng-icon\n name=\"heroCheck\"\n class=\"size-4 text-primary-600! shrink-0\"\n strokeWidth=\"2.5\"\n />\n }\n </button>\n }\n @case ('create') {\n <button\n type=\"button\"\n role=\"option\"\n aria-selected=\"false\"\n tabindex=\"-1\"\n class=\"justify-start! text-primary-600 ui-text-body-alt ui-select-option\"\n [attr.id]=\"row.id\"\n [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (mouseenter)=\"activeIndex.set(row.index)\"\n (click)=\"onCreate()\"\n >\n <ng-icon\n name=\"heroPlus\"\n class=\"size-4 shrink-0\"\n />\n <span class=\"truncate\">{{\n createLabel()(row.query)\n }}</span>\n </button>\n }\n }\n }\n\n @if (loading()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n Loading...\n </div>\n }\n\n @if (!loading() && items().length === 0 && !createQuery()) {\n <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n No results\n </div>\n }\n </div>\n </ui-card>\n </div>\n }\n</ui-dropdown>\n",
|
|
5363
|
-
|
|
5385
|
+
providers: [provideIcons({
|
|
5386
|
+
heroChevronDown,
|
|
5387
|
+
heroXMark,
|
|
5388
|
+
heroCheck,
|
|
5389
|
+
heroPlus
|
|
5390
|
+
})],
|
|
5391
|
+
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! py-1.5!\"\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-1.5 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\" [class.text-muted-foreground-1]=\"isEmpty()\">\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\" [class.text-muted-foreground-1]=\"isEmpty()\">{{\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 class=\"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",
|
|
5392
|
+
styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) * 9);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:var(--spacing, .25rem);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
5364
5393
|
}]
|
|
5365
5394
|
}],
|
|
5366
5395
|
ctorParameters: () => [],
|
|
@@ -6758,6 +6787,10 @@ var UiCalendarComponent = class UiCalendarComponent {
|
|
|
6758
6787
|
value: "valueChange",
|
|
6759
6788
|
range: "rangeChange"
|
|
6760
6789
|
},
|
|
6790
|
+
providers: [provideIcons({
|
|
6791
|
+
heroChevronLeft,
|
|
6792
|
+
heroChevronRight
|
|
6793
|
+
})],
|
|
6761
6794
|
ngImport: i0,
|
|
6762
6795
|
template: "<div class=\"ui-calendar-header\">\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Previous month\"\n [disabled]=\"!canGoBack()\"\n (click)=\"showMonth(-1)\"\n >\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n </button>\n\n <div class=\"ui-calendar-selects\">\n <ui-select\n class=\"ui-calendar-month\"\n [dataSource]=\"monthSource()\"\n [displayWith]=\"displayMonth\"\n [pageSize]=\"12\"\n [(selectedItem)]=\"viewMonth\"\n />\n <ui-select\n class=\"ui-calendar-year\"\n [dataSource]=\"yearSource()\"\n [pageSize]=\"500\"\n [(selectedItem)]=\"viewYear\"\n />\n </div>\n\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Next month\"\n [disabled]=\"!canGoForward()\"\n (click)=\"showMonth(1)\"\n >\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n </button>\n</div>\n\n<div class=\"ui-calendar-weekdays\" aria-hidden=\"true\">\n @for (weekday of weekdays(); track $index) {\n <span class=\"ui-calendar-weekday ui-text-caption\">{{ weekday }}</span>\n }\n</div>\n\n<div class=\"ui-calendar-grid\" (mouseleave)=\"preview(null)\">\n @for (day of days(); track day.iso) {\n <button\n type=\"button\"\n class=\"ui-calendar-day ui-text-body-alt\"\n [attr.data-date]=\"day.iso\"\n [attr.data-outside]=\"day.isOutside ? '' : null\"\n [attr.data-today]=\"day.isToday ? '' : null\"\n [attr.data-in-range]=\"day.isInRange ? '' : null\"\n [attr.data-range-start]=\"day.isRangeStart ? '' : null\"\n [attr.data-range-end]=\"day.isRangeEnd ? '' : null\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.aria-pressed]=\"day.isSelected\"\n [attr.aria-label]=\"day.label\"\n [tabindex]=\"day.iso === tabbableDate() ? 0 : -1\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n (click)=\"select(day)\"\n (keydown)=\"handleKeydown($event)\"\n (mouseenter)=\"preview(day.iso)\"\n (focus)=\"preview(day.iso)\"\n >\n {{ day.day }}\n </button>\n }\n</div>\n",
|
|
6763
6796
|
styles: ["@layer properties;:host{display:inline-flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-calendar-header{display:flex;align-items:center;column-gap:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem)}.ui-calendar-selects{display:flex;min-width:0px;flex:1;column-gap:var(--spacing, .25rem)}.ui-calendar-month{min-width:0px;flex:1}.ui-calendar-year{width:calc(var(--spacing, .25rem) * 24);flex-shrink:0}.ui-calendar-nav{display:inline-flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));color:var(--foreground)}.ui-calendar-nav:focus{--tw-outline-style: none;outline-style:none}.ui-calendar-nav:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-nav:disabled{pointer-events:none}.ui-calendar-nav:disabled{opacity:50%}.ui-calendar-nav:hover,.ui-calendar-nav:focus-visible{background-color:var(--surface)}.ui-calendar-weekdays,.ui-calendar-grid{display:grid;grid-template-columns:repeat(7,calc(var(--spacing, .25rem) * 10.5));justify-content:center}.ui-calendar-grid{row-gap:calc(var(--spacing, .25rem) * .5)}.ui-calendar-weekday{width:calc(var(--spacing, .25rem) * 10.5);padding-bottom:var(--spacing, .25rem);text-align:center;color:var(--muted-foreground-1)}.ui-calendar-day{position:relative;display:inline-flex;width:calc(var(--spacing, .25rem) * 10.5);height:calc(var(--spacing, .25rem) * 10.5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1.5px;border-color:transparent;color:var(--foreground);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-calendar-day:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-day:focus-visible{--tw-outline-style: none;outline-style:none}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{border-color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-disabled]{cursor:not-allowed;text-decoration-line:line-through;opacity:40%}.ui-calendar-day[aria-disabled]:hover{border-color:transparent}.ui-calendar-day[aria-disabled]:hover{color:inherit}.ui-calendar-day[data-outside]{color:var(--muted-foreground)}.ui-calendar-day[data-today]{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-pressed=true]{border-color:var(--color-primary-600, var(--color-blue-600));background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff)}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{color:var(--color-white, #fff)}.ui-calendar-day[data-in-range]{border-radius:0;background-color:var(--color-primary-100, var(--color-blue-100));color:var(--foreground)}.ui-calendar-day[data-range-start]{border-top-right-radius:0;border-bottom-right-radius:0}.ui-calendar-day[data-range-end]{border-top-left-radius:0;border-bottom-left-radius:0}.ui-calendar-day[data-range-end]:not([aria-pressed=true]){background-color:var(--color-primary-100, var(--color-blue-100))}.ui-calendar-day[data-in-range]:not(:nth-child(7n)),.ui-calendar-day[data-range-start]:not(:nth-child(7n)){--tw-shadow: 1px 0 0 var(--tw-shadow-color, var(--color-primary-100));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day[data-in-range]:nth-child(7n+1),.ui-calendar-day[data-range-end]:nth-child(7n+1){border-top-left-radius:var(--radius-full, calc(infinity * 1px));border-bottom-left-radius:var(--radius-full, calc(infinity * 1px))}.ui-calendar-day[data-in-range]:nth-child(7n),.ui-calendar-day[data-range-start]:nth-child(7n){border-top-right-radius:var(--radius-full, calc(infinity * 1px));border-bottom-right-radius:var(--radius-full, calc(infinity * 1px))}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid;--tw-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
@@ -6822,6 +6855,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
6822
6855
|
args: [{
|
|
6823
6856
|
selector: "ui-calendar",
|
|
6824
6857
|
imports: [NgIcon, UiSelectComponent],
|
|
6858
|
+
providers: [provideIcons({
|
|
6859
|
+
heroChevronLeft,
|
|
6860
|
+
heroChevronRight
|
|
6861
|
+
})],
|
|
6825
6862
|
template: "<div class=\"ui-calendar-header\">\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Previous month\"\n [disabled]=\"!canGoBack()\"\n (click)=\"showMonth(-1)\"\n >\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n </button>\n\n <div class=\"ui-calendar-selects\">\n <ui-select\n class=\"ui-calendar-month\"\n [dataSource]=\"monthSource()\"\n [displayWith]=\"displayMonth\"\n [pageSize]=\"12\"\n [(selectedItem)]=\"viewMonth\"\n />\n <ui-select\n class=\"ui-calendar-year\"\n [dataSource]=\"yearSource()\"\n [pageSize]=\"500\"\n [(selectedItem)]=\"viewYear\"\n />\n </div>\n\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Next month\"\n [disabled]=\"!canGoForward()\"\n (click)=\"showMonth(1)\"\n >\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n </button>\n</div>\n\n<div class=\"ui-calendar-weekdays\" aria-hidden=\"true\">\n @for (weekday of weekdays(); track $index) {\n <span class=\"ui-calendar-weekday ui-text-caption\">{{ weekday }}</span>\n }\n</div>\n\n<div class=\"ui-calendar-grid\" (mouseleave)=\"preview(null)\">\n @for (day of days(); track day.iso) {\n <button\n type=\"button\"\n class=\"ui-calendar-day ui-text-body-alt\"\n [attr.data-date]=\"day.iso\"\n [attr.data-outside]=\"day.isOutside ? '' : null\"\n [attr.data-today]=\"day.isToday ? '' : null\"\n [attr.data-in-range]=\"day.isInRange ? '' : null\"\n [attr.data-range-start]=\"day.isRangeStart ? '' : null\"\n [attr.data-range-end]=\"day.isRangeEnd ? '' : null\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.aria-pressed]=\"day.isSelected\"\n [attr.aria-label]=\"day.label\"\n [tabindex]=\"day.iso === tabbableDate() ? 0 : -1\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n (click)=\"select(day)\"\n (keydown)=\"handleKeydown($event)\"\n (mouseenter)=\"preview(day.iso)\"\n (focus)=\"preview(day.iso)\"\n >\n {{ day.day }}\n </button>\n }\n</div>\n",
|
|
6826
6863
|
styles: ["@layer properties;:host{display:inline-flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-calendar-header{display:flex;align-items:center;column-gap:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem)}.ui-calendar-selects{display:flex;min-width:0px;flex:1;column-gap:var(--spacing, .25rem)}.ui-calendar-month{min-width:0px;flex:1}.ui-calendar-year{width:calc(var(--spacing, .25rem) * 24);flex-shrink:0}.ui-calendar-nav{display:inline-flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));color:var(--foreground)}.ui-calendar-nav:focus{--tw-outline-style: none;outline-style:none}.ui-calendar-nav:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-nav:disabled{pointer-events:none}.ui-calendar-nav:disabled{opacity:50%}.ui-calendar-nav:hover,.ui-calendar-nav:focus-visible{background-color:var(--surface)}.ui-calendar-weekdays,.ui-calendar-grid{display:grid;grid-template-columns:repeat(7,calc(var(--spacing, .25rem) * 10.5));justify-content:center}.ui-calendar-grid{row-gap:calc(var(--spacing, .25rem) * .5)}.ui-calendar-weekday{width:calc(var(--spacing, .25rem) * 10.5);padding-bottom:var(--spacing, .25rem);text-align:center;color:var(--muted-foreground-1)}.ui-calendar-day{position:relative;display:inline-flex;width:calc(var(--spacing, .25rem) * 10.5);height:calc(var(--spacing, .25rem) * 10.5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1.5px;border-color:transparent;color:var(--foreground);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-calendar-day:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-day:focus-visible{--tw-outline-style: none;outline-style:none}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{border-color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-disabled]{cursor:not-allowed;text-decoration-line:line-through;opacity:40%}.ui-calendar-day[aria-disabled]:hover{border-color:transparent}.ui-calendar-day[aria-disabled]:hover{color:inherit}.ui-calendar-day[data-outside]{color:var(--muted-foreground)}.ui-calendar-day[data-today]{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-pressed=true]{border-color:var(--color-primary-600, var(--color-blue-600));background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff)}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{color:var(--color-white, #fff)}.ui-calendar-day[data-in-range]{border-radius:0;background-color:var(--color-primary-100, var(--color-blue-100));color:var(--foreground)}.ui-calendar-day[data-range-start]{border-top-right-radius:0;border-bottom-right-radius:0}.ui-calendar-day[data-range-end]{border-top-left-radius:0;border-bottom-left-radius:0}.ui-calendar-day[data-range-end]:not([aria-pressed=true]){background-color:var(--color-primary-100, var(--color-blue-100))}.ui-calendar-day[data-in-range]:not(:nth-child(7n)),.ui-calendar-day[data-range-start]:not(:nth-child(7n)){--tw-shadow: 1px 0 0 var(--tw-shadow-color, var(--color-primary-100));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day[data-in-range]:nth-child(7n+1),.ui-calendar-day[data-range-end]:nth-child(7n+1){border-top-left-radius:var(--radius-full, calc(infinity * 1px));border-bottom-left-radius:var(--radius-full, calc(infinity * 1px))}.ui-calendar-day[data-in-range]:nth-child(7n),.ui-calendar-day[data-range-start]:nth-child(7n){border-top-right-radius:var(--radius-full, calc(infinity * 1px));border-bottom-right-radius:var(--radius-full, calc(infinity * 1px))}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid;--tw-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
6827
6864
|
}]
|
|
@@ -7027,6 +7064,87 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7027
7064
|
}]
|
|
7028
7065
|
}]
|
|
7029
7066
|
});
|
|
7067
|
+
var UiModalCloseButtonComponent = class UiModalCloseButtonComponent {
|
|
7068
|
+
isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
7069
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
7070
|
+
minVersion: "12.0.0",
|
|
7071
|
+
version: "22.2.1",
|
|
7072
|
+
ngImport: i0,
|
|
7073
|
+
type: UiModalCloseButtonComponent,
|
|
7074
|
+
deps: [],
|
|
7075
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
7076
|
+
});
|
|
7077
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
7078
|
+
minVersion: "17.1.0",
|
|
7079
|
+
version: "22.2.1",
|
|
7080
|
+
type: UiModalCloseButtonComponent,
|
|
7081
|
+
isStandalone: true,
|
|
7082
|
+
selector: "ui-modal-close-btn",
|
|
7083
|
+
inputs: { isOpen: {
|
|
7084
|
+
classPropertyName: "isOpen",
|
|
7085
|
+
publicName: "isOpen",
|
|
7086
|
+
isSignal: true,
|
|
7087
|
+
isRequired: true,
|
|
7088
|
+
transformFunction: null
|
|
7089
|
+
} },
|
|
7090
|
+
outputs: { isOpen: "isOpenChange" },
|
|
7091
|
+
providers: [provideIcons({ heroXMark })],
|
|
7092
|
+
ngImport: i0,
|
|
7093
|
+
template: "<ui-button\n appearance=\"white\"\n intent=\"secondary\"\n classes=\"p-2! border-transparent! shadow-none!\"\n (click)=\"isOpen.set(false)\"\n>\n <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n",
|
|
7094
|
+
dependencies: [{
|
|
7095
|
+
kind: "component",
|
|
7096
|
+
type: UiButtonComponent,
|
|
7097
|
+
selector: "ui-button",
|
|
7098
|
+
inputs: [
|
|
7099
|
+
"appearance",
|
|
7100
|
+
"intent",
|
|
7101
|
+
"size",
|
|
7102
|
+
"classes",
|
|
7103
|
+
"type",
|
|
7104
|
+
"ariaLabel",
|
|
7105
|
+
"disabled",
|
|
7106
|
+
"loading"
|
|
7107
|
+
]
|
|
7108
|
+
}, {
|
|
7109
|
+
kind: "component",
|
|
7110
|
+
type: NgIcon,
|
|
7111
|
+
selector: "ng-icon",
|
|
7112
|
+
inputs: [
|
|
7113
|
+
"name",
|
|
7114
|
+
"svg",
|
|
7115
|
+
"size",
|
|
7116
|
+
"strokeWidth",
|
|
7117
|
+
"color"
|
|
7118
|
+
]
|
|
7119
|
+
}]
|
|
7120
|
+
});
|
|
7121
|
+
};
|
|
7122
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
7123
|
+
minVersion: "12.0.0",
|
|
7124
|
+
version: "22.2.1",
|
|
7125
|
+
ngImport: i0,
|
|
7126
|
+
type: UiModalCloseButtonComponent,
|
|
7127
|
+
decorators: [{
|
|
7128
|
+
type: Component,
|
|
7129
|
+
args: [{
|
|
7130
|
+
selector: "ui-modal-close-btn",
|
|
7131
|
+
imports: [UiButtonComponent, NgIcon],
|
|
7132
|
+
providers: [provideIcons({ heroXMark })],
|
|
7133
|
+
template: "<ui-button\n appearance=\"white\"\n intent=\"secondary\"\n classes=\"p-2! border-transparent! shadow-none!\"\n (click)=\"isOpen.set(false)\"\n>\n <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n"
|
|
7134
|
+
}]
|
|
7135
|
+
}],
|
|
7136
|
+
propDecorators: { isOpen: [{
|
|
7137
|
+
type: i0.Input,
|
|
7138
|
+
args: [{
|
|
7139
|
+
isSignal: true,
|
|
7140
|
+
alias: "isOpen",
|
|
7141
|
+
required: true
|
|
7142
|
+
}]
|
|
7143
|
+
}, {
|
|
7144
|
+
type: i0.Output,
|
|
7145
|
+
args: ["isOpenChange"]
|
|
7146
|
+
}] }
|
|
7147
|
+
});
|
|
7030
7148
|
var UiDrawerComponent = class UiDrawerComponent {
|
|
7031
7149
|
isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
7032
7150
|
enableBackdrop = input(true, {
|
|
@@ -7074,33 +7192,14 @@ var UiDrawerComponent = class UiDrawerComponent {
|
|
|
7074
7192
|
},
|
|
7075
7193
|
host: { properties: { "class.open": "isOpen()" } },
|
|
7076
7194
|
ngImport: i0,
|
|
7077
|
-
template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 h-full transition-transform duration-200\"\n [class.translate-x-full]=\"!isOpen()\"\n>\n <div class=\"flex flex-col h-full\">\n <header\n class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n [class.items-start]=\"subLabel()\"\n [class.items-center]=\"!subLabel()\"\n >\n <div>\n <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n @if (subLabel()) {\n <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n }\n </div>\n <
|
|
7195
|
+
template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 max-w-full h-full transition-transform duration-200\"\n [class.translate-x-full]=\"!isOpen()\"\n>\n <div class=\"flex flex-col h-full\">\n <header\n class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n [class.items-start]=\"subLabel()\"\n [class.items-center]=\"!subLabel()\"\n >\n <div>\n <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n @if (subLabel()) {\n <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n }\n </div>\n <div class=\"flex items-center gap-x-3 shrink-0\">\n <ng-content select=\"[drawer-actions]\" />\n <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n </div>\n </header>\n\n <div class=\"p-5 overflow-y-auto grow\">\n <ng-content />\n </div>\n </div>\n</aside>\n",
|
|
7078
7196
|
styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:100}:host.open{pointer-events:auto}::ng-deep .drawer-close-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))!important;border-color:var(--surface-line)!important;background-color:var(--surface)!important;padding:0!important;color:var(--surface-foreground)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important;--tw-ring-offset-width: 0px !important;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
7079
7197
|
dependencies: [{
|
|
7080
7198
|
kind: "component",
|
|
7081
|
-
type:
|
|
7082
|
-
selector: "ui-
|
|
7083
|
-
inputs: [
|
|
7084
|
-
|
|
7085
|
-
"intent",
|
|
7086
|
-
"size",
|
|
7087
|
-
"classes",
|
|
7088
|
-
"type",
|
|
7089
|
-
"ariaLabel",
|
|
7090
|
-
"disabled",
|
|
7091
|
-
"loading"
|
|
7092
|
-
]
|
|
7093
|
-
}, {
|
|
7094
|
-
kind: "component",
|
|
7095
|
-
type: NgIcon,
|
|
7096
|
-
selector: "ng-icon",
|
|
7097
|
-
inputs: [
|
|
7098
|
-
"name",
|
|
7099
|
-
"svg",
|
|
7100
|
-
"size",
|
|
7101
|
-
"strokeWidth",
|
|
7102
|
-
"color"
|
|
7103
|
-
]
|
|
7199
|
+
type: UiModalCloseButtonComponent,
|
|
7200
|
+
selector: "ui-modal-close-btn",
|
|
7201
|
+
inputs: ["isOpen"],
|
|
7202
|
+
outputs: ["isOpenChange"]
|
|
7104
7203
|
}]
|
|
7105
7204
|
});
|
|
7106
7205
|
};
|
|
@@ -7113,9 +7212,9 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7113
7212
|
type: Component,
|
|
7114
7213
|
args: [{
|
|
7115
7214
|
selector: "ui-drawer",
|
|
7116
|
-
imports: [
|
|
7215
|
+
imports: [UiModalCloseButtonComponent],
|
|
7117
7216
|
host: { "[class.open]": "isOpen()" },
|
|
7118
|
-
template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 h-full transition-transform duration-200\"\n [class.translate-x-full]=\"!isOpen()\"\n>\n <div class=\"flex flex-col h-full\">\n <header\n class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n [class.items-start]=\"subLabel()\"\n [class.items-center]=\"!subLabel()\"\n >\n <div>\n <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n @if (subLabel()) {\n <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n }\n </div>\n <
|
|
7217
|
+
template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 max-w-full h-full transition-transform duration-200\"\n [class.translate-x-full]=\"!isOpen()\"\n>\n <div class=\"flex flex-col h-full\">\n <header\n class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n [class.items-start]=\"subLabel()\"\n [class.items-center]=\"!subLabel()\"\n >\n <div>\n <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n @if (subLabel()) {\n <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n }\n </div>\n <div class=\"flex items-center gap-x-3 shrink-0\">\n <ng-content select=\"[drawer-actions]\" />\n <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n </div>\n </header>\n\n <div class=\"p-5 overflow-y-auto grow\">\n <ng-content />\n </div>\n </div>\n</aside>\n",
|
|
7119
7218
|
styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:100}:host.open{pointer-events:auto}::ng-deep .drawer-close-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))!important;border-color:var(--surface-line)!important;background-color:var(--surface)!important;padding:0!important;color:var(--surface-foreground)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important;--tw-ring-offset-width: 0px !important;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
7120
7219
|
}]
|
|
7121
7220
|
}],
|
|
@@ -7394,6 +7493,7 @@ var UiKpiComponent = class UiKpiComponent {
|
|
|
7394
7493
|
}
|
|
7395
7494
|
},
|
|
7396
7495
|
host: { classAttribute: "block" },
|
|
7496
|
+
providers: [provideIcons({ heroQuestionMarkCircle })],
|
|
7397
7497
|
ngImport: i0,
|
|
7398
7498
|
template: "<ui-card radius=\"xl\" class=\"h-full\">\n <div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon() && iconPosition() === 'left') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n {{ label() }}\n </span>\n\n @if (hint()) {\n <ui-tooltip\n [text]=\"hint()\"\n placement=\"top\"\n trigger=\"hover\"\n >\n <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n </ui-tooltip>\n }\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"font-semibold text-foreground ui-text-h2\">\n <!-- falls back to the plain value when nothing is projected -->\n <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n </h3>\n <ng-content select=\"[kpi-badge]\"></ng-content>\n </div>\n </div>\n\n @if (icon() && iconPosition() === 'right') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n </div>\n</ui-card>\n",
|
|
7399
7499
|
dependencies: [
|
|
@@ -7446,6 +7546,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7446
7546
|
UiTooltipComponent
|
|
7447
7547
|
],
|
|
7448
7548
|
host: { class: "block" },
|
|
7549
|
+
providers: [provideIcons({ heroQuestionMarkCircle })],
|
|
7449
7550
|
template: "<ui-card radius=\"xl\" class=\"h-full\">\n <div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon() && iconPosition() === 'left') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n {{ label() }}\n </span>\n\n @if (hint()) {\n <ui-tooltip\n [text]=\"hint()\"\n placement=\"top\"\n trigger=\"hover\"\n >\n <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n </ui-tooltip>\n }\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"font-semibold text-foreground ui-text-h2\">\n <!-- falls back to the plain value when nothing is projected -->\n <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n </h3>\n <ng-content select=\"[kpi-badge]\"></ng-content>\n </div>\n </div>\n\n @if (icon() && iconPosition() === 'right') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n </div>\n</ui-card>\n"
|
|
7450
7551
|
}]
|
|
7451
7552
|
}],
|
|
@@ -7563,85 +7664,6 @@ const UI_LOADING_TYPES = [
|
|
|
7563
7664
|
"bouncing-dots",
|
|
7564
7665
|
"fading-dots"
|
|
7565
7666
|
];
|
|
7566
|
-
var UiModalCloseButtonComponent = class UiModalCloseButtonComponent {
|
|
7567
|
-
isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
7568
|
-
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
7569
|
-
minVersion: "12.0.0",
|
|
7570
|
-
version: "22.2.1",
|
|
7571
|
-
ngImport: i0,
|
|
7572
|
-
type: UiModalCloseButtonComponent,
|
|
7573
|
-
deps: [],
|
|
7574
|
-
target: i0.ɵɵFactoryTarget.Component
|
|
7575
|
-
});
|
|
7576
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
7577
|
-
minVersion: "17.1.0",
|
|
7578
|
-
version: "22.2.1",
|
|
7579
|
-
type: UiModalCloseButtonComponent,
|
|
7580
|
-
isStandalone: true,
|
|
7581
|
-
selector: "ui-modal-close-btn",
|
|
7582
|
-
inputs: { isOpen: {
|
|
7583
|
-
classPropertyName: "isOpen",
|
|
7584
|
-
publicName: "isOpen",
|
|
7585
|
-
isSignal: true,
|
|
7586
|
-
isRequired: true,
|
|
7587
|
-
transformFunction: null
|
|
7588
|
-
} },
|
|
7589
|
-
outputs: { isOpen: "isOpenChange" },
|
|
7590
|
-
ngImport: i0,
|
|
7591
|
-
template: "<ui-button\n appearance=\"white\"\n intent=\"secondary\"\n classes=\"p-2! border-transparent! shadow-none!\"\n (click)=\"isOpen.set(false)\"\n>\n <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n",
|
|
7592
|
-
dependencies: [{
|
|
7593
|
-
kind: "component",
|
|
7594
|
-
type: UiButtonComponent,
|
|
7595
|
-
selector: "ui-button",
|
|
7596
|
-
inputs: [
|
|
7597
|
-
"appearance",
|
|
7598
|
-
"intent",
|
|
7599
|
-
"size",
|
|
7600
|
-
"classes",
|
|
7601
|
-
"type",
|
|
7602
|
-
"ariaLabel",
|
|
7603
|
-
"disabled",
|
|
7604
|
-
"loading"
|
|
7605
|
-
]
|
|
7606
|
-
}, {
|
|
7607
|
-
kind: "component",
|
|
7608
|
-
type: NgIcon,
|
|
7609
|
-
selector: "ng-icon",
|
|
7610
|
-
inputs: [
|
|
7611
|
-
"name",
|
|
7612
|
-
"svg",
|
|
7613
|
-
"size",
|
|
7614
|
-
"strokeWidth",
|
|
7615
|
-
"color"
|
|
7616
|
-
]
|
|
7617
|
-
}]
|
|
7618
|
-
});
|
|
7619
|
-
};
|
|
7620
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
7621
|
-
minVersion: "12.0.0",
|
|
7622
|
-
version: "22.2.1",
|
|
7623
|
-
ngImport: i0,
|
|
7624
|
-
type: UiModalCloseButtonComponent,
|
|
7625
|
-
decorators: [{
|
|
7626
|
-
type: Component,
|
|
7627
|
-
args: [{
|
|
7628
|
-
selector: "ui-modal-close-btn",
|
|
7629
|
-
imports: [UiButtonComponent, NgIcon],
|
|
7630
|
-
template: "<ui-button\n appearance=\"white\"\n intent=\"secondary\"\n classes=\"p-2! border-transparent! shadow-none!\"\n (click)=\"isOpen.set(false)\"\n>\n <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n"
|
|
7631
|
-
}]
|
|
7632
|
-
}],
|
|
7633
|
-
propDecorators: { isOpen: [{
|
|
7634
|
-
type: i0.Input,
|
|
7635
|
-
args: [{
|
|
7636
|
-
isSignal: true,
|
|
7637
|
-
alias: "isOpen",
|
|
7638
|
-
required: true
|
|
7639
|
-
}]
|
|
7640
|
-
}, {
|
|
7641
|
-
type: i0.Output,
|
|
7642
|
-
args: ["isOpenChange"]
|
|
7643
|
-
}] }
|
|
7644
|
-
});
|
|
7645
7667
|
var UiModalComponent = class UiModalComponent {
|
|
7646
7668
|
isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
7647
7669
|
closeBehaviour = input("whenClickOutside", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
|
|
@@ -8153,6 +8175,10 @@ var UiPaginationComponent = class UiPaginationComponent {
|
|
|
8153
8175
|
},
|
|
8154
8176
|
classAttribute: "ui-pagination"
|
|
8155
8177
|
},
|
|
8178
|
+
providers: [provideIcons({
|
|
8179
|
+
heroChevronLeft,
|
|
8180
|
+
heroChevronRight
|
|
8181
|
+
})],
|
|
8156
8182
|
ngImport: i0,
|
|
8157
8183
|
template: "<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isFirstPage()\"\n (click)=\"goToPage(page() - 1)\"\n>\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n</ui-button>\n\n@for (item of items(); track $index) {\n @if (item === 'ellipsis') {\n <span class=\"ui-text-body ui-pagination-ellipsis\">…</span>\n } @else {\n <ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [class.active]=\"item === page()\"\n (click)=\"goToPage(item)\"\n >\n {{ item + 1 }}\n </ui-button>\n }\n}\n\n<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isLastPage()\"\n (click)=\"goToPage(page() + 1)\"\n>\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n</ui-button>\n",
|
|
8158
8184
|
styles: ["@layer properties;:host(.ui-pagination){display:flex;align-items:center;column-gap:var(--spacing, .25rem)}::ng-deep .ui-pagination--goto-btn{min-height:calc(var(--spacing, .25rem) * 9.5);min-width:calc(var(--spacing, .25rem) * 9.5);justify-content:center!important;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent!important;padding-inline:calc(var(--spacing, .25rem) * 2.5)!important;padding-block:calc(var(--spacing, .25rem) * 2)!important;color:var(--foreground)!important}::ng-deep .active>.ui-pagination--goto-btn{border-color:var(--border-line-2)!important}.ui-pagination-page{min-width:calc(var(--spacing, .25rem) * 9);justify-content:center}.ui-pagination-ellipsis{display:inline-flex;min-width:calc(var(--spacing, .25rem) * 9);justify-content:center;color:var(--muted-foreground-1)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
@@ -8199,6 +8225,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8199
8225
|
"aria-label": "Pagination",
|
|
8200
8226
|
class: "ui-pagination"
|
|
8201
8227
|
},
|
|
8228
|
+
providers: [provideIcons({
|
|
8229
|
+
heroChevronLeft,
|
|
8230
|
+
heroChevronRight
|
|
8231
|
+
})],
|
|
8202
8232
|
template: "<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isFirstPage()\"\n (click)=\"goToPage(page() - 1)\"\n>\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n</ui-button>\n\n@for (item of items(); track $index) {\n @if (item === 'ellipsis') {\n <span class=\"ui-text-body ui-pagination-ellipsis\">…</span>\n } @else {\n <ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [class.active]=\"item === page()\"\n (click)=\"goToPage(item)\"\n >\n {{ item + 1 }}\n </ui-button>\n }\n}\n\n<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isLastPage()\"\n (click)=\"goToPage(page() + 1)\"\n>\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n</ui-button>\n",
|
|
8203
8233
|
styles: ["@layer properties;:host(.ui-pagination){display:flex;align-items:center;column-gap:var(--spacing, .25rem)}::ng-deep .ui-pagination--goto-btn{min-height:calc(var(--spacing, .25rem) * 9.5);min-width:calc(var(--spacing, .25rem) * 9.5);justify-content:center!important;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent!important;padding-inline:calc(var(--spacing, .25rem) * 2.5)!important;padding-block:calc(var(--spacing, .25rem) * 2)!important;color:var(--foreground)!important}::ng-deep .active>.ui-pagination--goto-btn{border-color:var(--border-line-2)!important}.ui-pagination-page{min-width:calc(var(--spacing, .25rem) * 9);justify-content:center}.ui-pagination-ellipsis{display:inline-flex;min-width:calc(var(--spacing, .25rem) * 9);justify-content:center;color:var(--muted-foreground-1)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
8204
8234
|
}]
|
|
@@ -8527,7 +8557,7 @@ const ProgressShapes = [
|
|
|
8527
8557
|
"straight"
|
|
8528
8558
|
];
|
|
8529
8559
|
const ProgressOrientations = ["horizontal", "vertical"];
|
|
8530
|
-
let nextId$
|
|
8560
|
+
let nextId$2 = 0;
|
|
8531
8561
|
var UiSegmentedComponent = class UiSegmentedComponent {
|
|
8532
8562
|
options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
8533
8563
|
value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
@@ -8536,7 +8566,7 @@ var UiSegmentedComponent = class UiSegmentedComponent {
|
|
|
8536
8566
|
...ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {},
|
|
8537
8567
|
transform: booleanAttribute
|
|
8538
8568
|
});
|
|
8539
|
-
name = `ui-segmented-${nextId$
|
|
8569
|
+
name = `ui-segmented-${nextId$2++}`;
|
|
8540
8570
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
8541
8571
|
minVersion: "12.0.0",
|
|
8542
8572
|
version: "22.2.1",
|
|
@@ -8670,7 +8700,7 @@ var UiStatComponent = class UiStatComponent {
|
|
|
8670
8700
|
} },
|
|
8671
8701
|
host: { classAttribute: "block min-w-0" },
|
|
8672
8702
|
ngImport: i0,
|
|
8673
|
-
template: "<dl>\n <dt class=\"text-muted-foreground-1 ui-text-body-alt\">{{ label() }}</dt>\n <dd class=\"flex flex-wrap items-center gap-x-2 gap-y-1 mt-1\">\n <span class=\"font-semibold text-foreground ui-text-h3\">\n <ng-content />\n </span>\n <ng-content select=\"[stat-change]\" />\n </dd>\n
|
|
8703
|
+
template: "<dl>\n <dt class=\"text-muted-foreground-1 ui-text-body-alt\">{{ label() }}</dt>\n <dd class=\"flex flex-wrap items-center gap-x-2 gap-y-1 mt-1\">\n <span class=\"font-semibold text-foreground ui-text-h3\">\n <ng-content />\n </span>\n <ng-content select=\"[stat-change]\" />\n </dd>\n <dd class=\"empty:hidden mt-1 text-muted-foreground-1 ui-text-caption\"><ng-content select=\"[stat-note]\" /></dd>\n</dl>\n"
|
|
8674
8704
|
});
|
|
8675
8705
|
};
|
|
8676
8706
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -8683,7 +8713,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8683
8713
|
args: [{
|
|
8684
8714
|
selector: "ui-stat",
|
|
8685
8715
|
host: { class: "block min-w-0" },
|
|
8686
|
-
template: "<dl>\n <dt class=\"text-muted-foreground-1 ui-text-body-alt\">{{ label() }}</dt>\n <dd class=\"flex flex-wrap items-center gap-x-2 gap-y-1 mt-1\">\n <span class=\"font-semibold text-foreground ui-text-h3\">\n <ng-content />\n </span>\n <ng-content select=\"[stat-change]\" />\n </dd>\n
|
|
8716
|
+
template: "<dl>\n <dt class=\"text-muted-foreground-1 ui-text-body-alt\">{{ label() }}</dt>\n <dd class=\"flex flex-wrap items-center gap-x-2 gap-y-1 mt-1\">\n <span class=\"font-semibold text-foreground ui-text-h3\">\n <ng-content />\n </span>\n <ng-content select=\"[stat-change]\" />\n </dd>\n <dd class=\"empty:hidden mt-1 text-muted-foreground-1 ui-text-caption\"><ng-content select=\"[stat-note]\" /></dd>\n</dl>\n"
|
|
8687
8717
|
}]
|
|
8688
8718
|
}],
|
|
8689
8719
|
propDecorators: { label: [{
|
|
@@ -8905,10 +8935,55 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8905
8935
|
}]
|
|
8906
8936
|
}
|
|
8907
8937
|
});
|
|
8938
|
+
var UiTableRegistry = class UiTableRegistry {
|
|
8939
|
+
tables = signal(/* @__PURE__ */ new Map(), ...ngDevMode ? [{ debugName: "tables" }] : /* istanbul ignore next */ []);
|
|
8940
|
+
get(id) {
|
|
8941
|
+
return this.tables().get(id) ?? null;
|
|
8942
|
+
}
|
|
8943
|
+
register(id, table) {
|
|
8944
|
+
const existing = this.tables().get(id);
|
|
8945
|
+
if (isDevMode() && existing && existing !== table) console.warn(`[ui-table] two tables share the id "${id}", controls will link to the newest one`);
|
|
8946
|
+
this.tables.update((tables) => new Map(tables).set(id, table));
|
|
8947
|
+
}
|
|
8948
|
+
unregister(id, table) {
|
|
8949
|
+
if (this.tables().get(id) !== table) return;
|
|
8950
|
+
this.tables.update((tables) => {
|
|
8951
|
+
const next = new Map(tables);
|
|
8952
|
+
next.delete(id);
|
|
8953
|
+
return next;
|
|
8954
|
+
});
|
|
8955
|
+
}
|
|
8956
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
8957
|
+
minVersion: "12.0.0",
|
|
8958
|
+
version: "22.2.1",
|
|
8959
|
+
ngImport: i0,
|
|
8960
|
+
type: UiTableRegistry,
|
|
8961
|
+
deps: [],
|
|
8962
|
+
target: i0.ɵɵFactoryTarget.Injectable
|
|
8963
|
+
});
|
|
8964
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({
|
|
8965
|
+
minVersion: "12.0.0",
|
|
8966
|
+
version: "22.2.1",
|
|
8967
|
+
ngImport: i0,
|
|
8968
|
+
type: UiTableRegistry,
|
|
8969
|
+
providedIn: "root"
|
|
8970
|
+
});
|
|
8971
|
+
};
|
|
8972
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
8973
|
+
minVersion: "12.0.0",
|
|
8974
|
+
version: "22.2.1",
|
|
8975
|
+
ngImport: i0,
|
|
8976
|
+
type: UiTableRegistry,
|
|
8977
|
+
decorators: [{
|
|
8978
|
+
type: Injectable,
|
|
8979
|
+
args: [{ providedIn: "root" }]
|
|
8980
|
+
}]
|
|
8981
|
+
});
|
|
8908
8982
|
const DEFAULT_COLUMN_WIDTH = 160;
|
|
8909
8983
|
const SELECTION_COLUMN_WIDTH = 44;
|
|
8910
8984
|
var UiTableComponent = class UiTableComponent {
|
|
8911
8985
|
classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
8986
|
+
tableId = input(null, ...ngDevMode ? [{ debugName: "tableId" }] : /* istanbul ignore next */ []);
|
|
8912
8987
|
columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
|
|
8913
8988
|
dataSource = input.required(...ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []);
|
|
8914
8989
|
emptyMessage = input("No data to display.", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
|
|
@@ -9031,12 +9106,21 @@ var UiTableComponent = class UiTableComponent {
|
|
|
9031
9106
|
load$ = new Subject();
|
|
9032
9107
|
destroyRef = inject(DestroyRef);
|
|
9033
9108
|
cdr = inject(ChangeDetectorRef);
|
|
9109
|
+
registry = inject(UiTableRegistry);
|
|
9110
|
+
loadedQuery = "";
|
|
9111
|
+
loadedFilters = {};
|
|
9034
9112
|
resizeState = null;
|
|
9035
9113
|
columnDragState = null;
|
|
9036
9114
|
filterDataSources = /* @__PURE__ */ new Map();
|
|
9037
9115
|
constructor() {
|
|
9038
|
-
|
|
9039
|
-
|
|
9116
|
+
effect((onCleanup) => {
|
|
9117
|
+
const id = this.tableId();
|
|
9118
|
+
if (!id) return;
|
|
9119
|
+
untracked(() => this.registry.register(id, this));
|
|
9120
|
+
onCleanup(() => this.registry.unregister(id, this));
|
|
9121
|
+
});
|
|
9122
|
+
toObservable(this.query).pipe(debounceTime(300), filter((query) => query !== this.loadedQuery), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.resetAndReload());
|
|
9123
|
+
toObservable(this.filters).pipe(debounceTime(300), filter((filters) => filters !== this.loadedFilters), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.resetAndReload());
|
|
9040
9124
|
this.load$.pipe(switchMap(() => this.fetch()), takeUntilDestroyed(this.destroyRef)).subscribe((result) => this.applyResult(result));
|
|
9041
9125
|
}
|
|
9042
9126
|
ngOnInit() {
|
|
@@ -9301,6 +9385,8 @@ var UiTableComponent = class UiTableComponent {
|
|
|
9301
9385
|
sort: this.sort(),
|
|
9302
9386
|
filters: this.filters()
|
|
9303
9387
|
};
|
|
9388
|
+
this.loadedQuery = params.query;
|
|
9389
|
+
this.loadedFilters = params.filters;
|
|
9304
9390
|
return this.dataSource().load(params).pipe(catchError(() => of(null)));
|
|
9305
9391
|
}
|
|
9306
9392
|
applyResult(result) {
|
|
@@ -9333,6 +9419,13 @@ var UiTableComponent = class UiTableComponent {
|
|
|
9333
9419
|
isRequired: false,
|
|
9334
9420
|
transformFunction: null
|
|
9335
9421
|
},
|
|
9422
|
+
tableId: {
|
|
9423
|
+
classPropertyName: "tableId",
|
|
9424
|
+
publicName: "tableId",
|
|
9425
|
+
isSignal: true,
|
|
9426
|
+
isRequired: false,
|
|
9427
|
+
transformFunction: null
|
|
9428
|
+
},
|
|
9336
9429
|
columns: {
|
|
9337
9430
|
classPropertyName: "columns",
|
|
9338
9431
|
publicName: "columns",
|
|
@@ -9460,6 +9553,15 @@ var UiTableComponent = class UiTableComponent {
|
|
|
9460
9553
|
rowsReordered: "rowsReordered"
|
|
9461
9554
|
},
|
|
9462
9555
|
host: { classAttribute: "block" },
|
|
9556
|
+
providers: [provideIcons({
|
|
9557
|
+
heroMagnifyingGlass,
|
|
9558
|
+
heroFunnel,
|
|
9559
|
+
heroViewColumns,
|
|
9560
|
+
heroBars2,
|
|
9561
|
+
heroChevronUpDown,
|
|
9562
|
+
heroChevronUp,
|
|
9563
|
+
heroChevronDown
|
|
9564
|
+
})],
|
|
9463
9565
|
ngImport: i0,
|
|
9464
9566
|
template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <ng-icon\n [name]=\"sortIcon(column)\"\n class=\"ms-auto size-4 shrink-0\"\n />\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
|
|
9465
9567
|
styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
@@ -9636,6 +9738,15 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9636
9738
|
UiLoadingComponent
|
|
9637
9739
|
],
|
|
9638
9740
|
host: { class: "block" },
|
|
9741
|
+
providers: [provideIcons({
|
|
9742
|
+
heroMagnifyingGlass,
|
|
9743
|
+
heroFunnel,
|
|
9744
|
+
heroViewColumns,
|
|
9745
|
+
heroBars2,
|
|
9746
|
+
heroChevronUpDown,
|
|
9747
|
+
heroChevronUp,
|
|
9748
|
+
heroChevronDown
|
|
9749
|
+
})],
|
|
9639
9750
|
template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <ng-icon\n [name]=\"sortIcon(column)\"\n class=\"ms-auto size-4 shrink-0\"\n />\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
|
|
9640
9751
|
styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
9641
9752
|
}]
|
|
@@ -9650,6 +9761,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9650
9761
|
required: false
|
|
9651
9762
|
}]
|
|
9652
9763
|
}],
|
|
9764
|
+
tableId: [{
|
|
9765
|
+
type: i0.Input,
|
|
9766
|
+
args: [{
|
|
9767
|
+
isSignal: true,
|
|
9768
|
+
alias: "tableId",
|
|
9769
|
+
required: false
|
|
9770
|
+
}]
|
|
9771
|
+
}],
|
|
9653
9772
|
columns: [{
|
|
9654
9773
|
type: i0.Input,
|
|
9655
9774
|
args: [{
|
|
@@ -9952,6 +10071,13 @@ var UiToastComponent = class UiToastComponent {
|
|
|
9952
10071
|
"focusin": "setFocused(true)",
|
|
9953
10072
|
"focusout": "setFocused(false)"
|
|
9954
10073
|
} },
|
|
10074
|
+
providers: [provideIcons({
|
|
10075
|
+
heroInformationCircleSolid,
|
|
10076
|
+
heroCheckCircleSolid,
|
|
10077
|
+
heroExclamationTriangleSolid,
|
|
10078
|
+
heroXCircleSolid,
|
|
10079
|
+
heroXMark
|
|
10080
|
+
})],
|
|
9955
10081
|
ngImport: i0,
|
|
9956
10082
|
template: "<ui-card\n radius=\"xl\"\n class=\"p-4 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</ui-card>\n",
|
|
9957
10083
|
dependencies: [{
|
|
@@ -9989,6 +10115,13 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9989
10115
|
"(focusin)": "setFocused(true)",
|
|
9990
10116
|
"(focusout)": "setFocused(false)"
|
|
9991
10117
|
},
|
|
10118
|
+
providers: [provideIcons({
|
|
10119
|
+
heroInformationCircleSolid,
|
|
10120
|
+
heroCheckCircleSolid,
|
|
10121
|
+
heroExclamationTriangleSolid,
|
|
10122
|
+
heroXCircleSolid,
|
|
10123
|
+
heroXMark
|
|
10124
|
+
})],
|
|
9992
10125
|
template: "<ui-card\n radius=\"xl\"\n class=\"p-4 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</ui-card>\n"
|
|
9993
10126
|
}]
|
|
9994
10127
|
}],
|
|
@@ -10284,9 +10417,13 @@ var UiSidebarComponent = class UiSidebarComponent {
|
|
|
10284
10417
|
listeners: { "document:keydown.escape": "isOpen.set(false)" },
|
|
10285
10418
|
properties: { "class.open": "isOpen()" }
|
|
10286
10419
|
},
|
|
10420
|
+
providers: [provideIcons({
|
|
10421
|
+
heroChevronDoubleLeft,
|
|
10422
|
+
heroBars3
|
|
10423
|
+
})],
|
|
10287
10424
|
exportAs: ["uiSidebar"],
|
|
10288
10425
|
ngImport: i0,
|
|
10289
|
-
template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\">\n</div>\n\n<aside class=\"ui-sidebar-panel\">\n <div class=\"ui-sidebar-content\">\n <ng-content />\n </div>\n\n <footer class=\"ui-sidebar-footer\">\n
|
|
10426
|
+
template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\">\n</div>\n\n<aside class=\"ui-sidebar-panel\">\n <div class=\"ui-sidebar-content\">\n <ng-content />\n </div>\n\n <footer class=\"ui-sidebar-footer\">\n <div class=\"ui-sidebar-footer-content\">\n <ng-content select=\"[sidebar-footer]\" />\n </div>\n\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"justify-center size-10 p-0!\"\n [ariaLabel]=\"isOpen() ? 'Collapse sidebar' : 'Expand sidebar'\"\n (click)=\"toggle()\"\n >\n <ng-icon\n name=\"heroChevronDoubleLeft\"\n size=\"16\"\n strokeWidth=\"2\"\n class=\"duration-300 shrink-0\"\n [class.rotate-180]=\"!isOpen()\"\n />\n </ui-button>\n </footer>\n</aside>\n\n@if (!isOpen()) {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n class=\"ui-sidebar-open-btn\"\n classes=\"p-3! rounded-full! shadow-lg!\"\n ariaLabel=\"Open sidebar\"\n (click)=\"isOpen.set(true)\"\n >\n <ng-icon name=\"heroBars3\" size=\"20\" strokeWidth=\"2\" class=\"shrink-0\" />\n </ui-button>\n}\n",
|
|
10290
10427
|
styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--sidebar-line);background-color:var(--sidebar);transition-property:translate,width,visibility;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@media(width<48rem){.ui-sidebar-panel{visibility:hidden}}@media(width>=48rem){.ui-sidebar-panel{position:relative}}@media(width>=48rem){.ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 16)}}@media(width>=48rem){.ui-sidebar-panel{translate:none}}@media(width<48rem){:host(.open) .ui-sidebar-panel{visibility:visible;--tw-translate-x: 0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(width>=48rem){:host(.open) .ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 60)}}.ui-sidebar-content{display:flex;min-height:0px;flex-grow:1;flex-direction:column;align-items:flex-start;row-gap:var(--spacing, .25rem);overflow-x:hidden;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-content{align-items:stretch}.ui-sidebar-footer{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-footer{flex-direction:row;justify-content:flex-end}.ui-sidebar-footer-content{display:flex;min-width:0px;justify-content:center}.ui-sidebar-footer-content:empty{display:none}:host(.open) .ui-sidebar-footer-content{flex-grow:1;justify-content:flex-start}.ui-sidebar-open-btn{pointer-events:auto;position:fixed;bottom:calc(var(--spacing, .25rem) * 4);left:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.ui-sidebar-open-btn{display:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
10291
10428
|
dependencies: [{
|
|
10292
10429
|
kind: "component",
|
|
@@ -10331,7 +10468,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10331
10468
|
"[class.open]": "isOpen()",
|
|
10332
10469
|
"(document:keydown.escape)": "isOpen.set(false)"
|
|
10333
10470
|
},
|
|
10334
|
-
|
|
10471
|
+
providers: [provideIcons({
|
|
10472
|
+
heroChevronDoubleLeft,
|
|
10473
|
+
heroBars3
|
|
10474
|
+
})],
|
|
10475
|
+
template: "<div class=\"ui-sidebar-backdrop\" aria-hidden=\"true\" (click)=\"isOpen.set(false)\">\n</div>\n\n<aside class=\"ui-sidebar-panel\">\n <div class=\"ui-sidebar-content\">\n <ng-content />\n </div>\n\n <footer class=\"ui-sidebar-footer\">\n <div class=\"ui-sidebar-footer-content\">\n <ng-content select=\"[sidebar-footer]\" />\n </div>\n\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"justify-center size-10 p-0!\"\n [ariaLabel]=\"isOpen() ? 'Collapse sidebar' : 'Expand sidebar'\"\n (click)=\"toggle()\"\n >\n <ng-icon\n name=\"heroChevronDoubleLeft\"\n size=\"16\"\n strokeWidth=\"2\"\n class=\"duration-300 shrink-0\"\n [class.rotate-180]=\"!isOpen()\"\n />\n </ui-button>\n </footer>\n</aside>\n\n@if (!isOpen()) {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n class=\"ui-sidebar-open-btn\"\n classes=\"p-3! rounded-full! shadow-lg!\"\n ariaLabel=\"Open sidebar\"\n (click)=\"isOpen.set(true)\"\n >\n <ng-icon name=\"heroBars3\" size=\"20\" strokeWidth=\"2\" class=\"shrink-0\" />\n </ui-button>\n}\n",
|
|
10335
10476
|
styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--sidebar-line);background-color:var(--sidebar);transition-property:translate,width,visibility;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@media(width<48rem){.ui-sidebar-panel{visibility:hidden}}@media(width>=48rem){.ui-sidebar-panel{position:relative}}@media(width>=48rem){.ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 16)}}@media(width>=48rem){.ui-sidebar-panel{translate:none}}@media(width<48rem){:host(.open) .ui-sidebar-panel{visibility:visible;--tw-translate-x: 0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(width>=48rem){:host(.open) .ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 60)}}.ui-sidebar-content{display:flex;min-height:0px;flex-grow:1;flex-direction:column;align-items:flex-start;row-gap:var(--spacing, .25rem);overflow-x:hidden;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-content{align-items:stretch}.ui-sidebar-footer{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-footer{flex-direction:row;justify-content:flex-end}.ui-sidebar-footer-content{display:flex;min-width:0px;justify-content:center}.ui-sidebar-footer-content:empty{display:none}:host(.open) .ui-sidebar-footer-content{flex-grow:1;justify-content:flex-start}.ui-sidebar-open-btn{pointer-events:auto;position:fixed;bottom:calc(var(--spacing, .25rem) * 4);left:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.ui-sidebar-open-btn{display:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
10336
10477
|
}]
|
|
10337
10478
|
}],
|
|
@@ -10347,11 +10488,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10347
10488
|
args: ["isOpenChange"]
|
|
10348
10489
|
}] }
|
|
10349
10490
|
});
|
|
10350
|
-
let nextId = 0;
|
|
10491
|
+
let nextId$1 = 0;
|
|
10351
10492
|
var UiSidebarGroupComponent = class UiSidebarGroupComponent {
|
|
10352
10493
|
sidebar = inject(UiSidebarComponent, { optional: true });
|
|
10353
10494
|
label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
10354
|
-
labelId = `ui-sidebar-group-${nextId++}`;
|
|
10495
|
+
labelId = `ui-sidebar-group-${nextId$1++}`;
|
|
10355
10496
|
isCollapsed = computed(() => this.sidebar?.isCollapsed() ?? false, ...ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []);
|
|
10356
10497
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
10357
10498
|
minVersion: "12.0.0",
|
|
@@ -10375,7 +10516,7 @@ var UiSidebarGroupComponent = class UiSidebarGroupComponent {
|
|
|
10375
10516
|
transformFunction: null
|
|
10376
10517
|
} },
|
|
10377
10518
|
ngImport: i0,
|
|
10378
|
-
template: "@if (isCollapsed()) {\n <div class=\"ui-sidebar-group-divider\" aria-hidden=\"true\"></div>\n} @else {\n <span class=\"ui-sidebar-group-label ui-text-caption\" [id]=\"labelId\">{{ label() }}</span>\n}\n\n
|
|
10519
|
+
template: "@if (isCollapsed()) {\n <div class=\"ui-sidebar-group-divider\" aria-hidden=\"true\"></div>\n} @else {\n <span class=\"ui-sidebar-group-label ui-text-caption\" [id]=\"labelId\">{{ label() }}</span>\n}\n\n<div\n class=\"ui-sidebar-group-items\"\n role=\"group\"\n [attr.aria-labelledby]=\"isCollapsed() ? null : labelId\"\n [attr.aria-label]=\"isCollapsed() ? label() : null\"\n>\n <ng-content />\n</div>\n",
|
|
10379
10520
|
styles: ["@layer properties;:host{display:flex;flex-direction:column;align-self:stretch}:host(:not(:first-child)){margin-top:calc(var(--spacing, .25rem) * 4)}.ui-sidebar-group-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-bottom:calc(var(--spacing, .25rem) * 1.5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-sidebar-group-divider{margin-inline:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--sidebar-line)}:host(:first-child) .ui-sidebar-group-divider{display:none}.ui-sidebar-group-items{display:flex;flex-direction:column;row-gap:var(--spacing, .25rem)}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
10380
10521
|
});
|
|
10381
10522
|
};
|
|
@@ -10388,7 +10529,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10388
10529
|
type: Component,
|
|
10389
10530
|
args: [{
|
|
10390
10531
|
selector: "ui-sidebar-group",
|
|
10391
|
-
template: "@if (isCollapsed()) {\n <div class=\"ui-sidebar-group-divider\" aria-hidden=\"true\"></div>\n} @else {\n <span class=\"ui-sidebar-group-label ui-text-caption\" [id]=\"labelId\">{{ label() }}</span>\n}\n\n
|
|
10532
|
+
template: "@if (isCollapsed()) {\n <div class=\"ui-sidebar-group-divider\" aria-hidden=\"true\"></div>\n} @else {\n <span class=\"ui-sidebar-group-label ui-text-caption\" [id]=\"labelId\">{{ label() }}</span>\n}\n\n<div\n class=\"ui-sidebar-group-items\"\n role=\"group\"\n [attr.aria-labelledby]=\"isCollapsed() ? null : labelId\"\n [attr.aria-label]=\"isCollapsed() ? label() : null\"\n>\n <ng-content />\n</div>\n",
|
|
10392
10533
|
styles: ["@layer properties;:host{display:flex;flex-direction:column;align-self:stretch}:host(:not(:first-child)){margin-top:calc(var(--spacing, .25rem) * 4)}.ui-sidebar-group-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-bottom:calc(var(--spacing, .25rem) * 1.5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-sidebar-group-divider{margin-inline:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--sidebar-line)}:host(:first-child) .ui-sidebar-group-divider{display:none}.ui-sidebar-group-items{display:flex;flex-direction:column;row-gap:var(--spacing, .25rem)}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
10393
10534
|
}]
|
|
10394
10535
|
}],
|
|
@@ -10764,6 +10905,10 @@ var UiCounterComponent = class UiCounterComponent {
|
|
|
10764
10905
|
}
|
|
10765
10906
|
},
|
|
10766
10907
|
outputs: { value: "valueChange" },
|
|
10908
|
+
providers: [provideIcons({
|
|
10909
|
+
heroPlus,
|
|
10910
|
+
heroMinus
|
|
10911
|
+
})],
|
|
10767
10912
|
queries: [{
|
|
10768
10913
|
propertyName: "leadingElement",
|
|
10769
10914
|
first: true,
|
|
@@ -10862,6 +11007,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10862
11007
|
NgTemplateOutlet,
|
|
10863
11008
|
NgIcon
|
|
10864
11009
|
],
|
|
11010
|
+
providers: [provideIcons({
|
|
11011
|
+
heroPlus,
|
|
11012
|
+
heroMinus
|
|
11013
|
+
})],
|
|
10865
11014
|
template: "<ui-input\n [(value)]=\"value\"\n [placeholder]=\"placeholder()\"\n type=\"number\"\n classes=\"[&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [appearance:textfield]\"\n>\n <ng-template #leading>\n <ng-container *ngTemplateOutlet=\"leadingElement()\" />\n </ng-template>\n <ng-template #trailing>\n <ng-container *ngTemplateOutlet=\"trailingElement()\" />\n\n <div class=\"flex self-stretch ms-2\">\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center w-8\"\n (click)=\"onStepUp()\"\n >\n <ng-icon name=\"heroPlus\" class=\"shrink-0\" />\n </button>\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center w-8\"\n (click)=\"onStepDown()\"\n >\n <ng-icon name=\"heroMinus\" class=\"shrink-0\" />\n </button>\n </div>\n </ng-template>\n</ui-input>\n"
|
|
10866
11015
|
}]
|
|
10867
11016
|
}],
|
|
@@ -11123,6 +11272,10 @@ var UiDateRangePickerComponent = class UiDateRangePickerComponent {
|
|
|
11123
11272
|
},
|
|
11124
11273
|
outputs: { value: "valueChange" },
|
|
11125
11274
|
host: { classAttribute: "block" },
|
|
11275
|
+
providers: [provideIcons({
|
|
11276
|
+
heroCalendarDateRange,
|
|
11277
|
+
heroXMark
|
|
11278
|
+
})],
|
|
11126
11279
|
viewQueries: [{
|
|
11127
11280
|
propertyName: "calendar",
|
|
11128
11281
|
first: true,
|
|
@@ -11244,6 +11397,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11244
11397
|
NgIcon
|
|
11245
11398
|
],
|
|
11246
11399
|
host: { class: "block" },
|
|
11400
|
+
providers: [provideIcons({
|
|
11401
|
+
heroCalendarDateRange,
|
|
11402
|
+
heroXMark
|
|
11403
|
+
})],
|
|
11247
11404
|
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n class=\"w-full\"\n>\n <ui-input\n [value]=\"display()\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n ariaHasPopup=\"dialog\"\n [validationState]=\"validationState()\"\n classes=\"cursor-pointer\"\n autocomplete=\"off\"\n readonly\n (click)=\"toggle()\"\n (keydown)=\"handleInputKeydown($event)\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroCalendarDateRange\"\n class=\"ms-3 text-muted-foreground-1 shrink-0\"\n />\n </ng-template>\n\n <ng-template #trailing>\n @if (clearable() && hasValue() && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center w-8 self-stretch text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear dates\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-date-range-panel\">\n @if (presets().length) {\n <div class=\"ui-date-range-presets\" role=\"group\" aria-label=\"Quick ranges\">\n @for (preset of presets(); track preset.label; let index = $index) {\n <button\n type=\"button\"\n class=\"ui-date-range-preset ui-text-body-alt\"\n [attr.aria-pressed]=\"index === activePreset()\"\n (click)=\"choosePreset(preset)\"\n (keydown)=\"handlePanelKeydown($event)\"\n >\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ui-calendar\n class=\"p-3\"\n mode=\"range\"\n [(range)]=\"value\"\n [min]=\"min()\"\n [max]=\"max()\"\n [isDateDisabled]=\"isDateDisabled()\"\n [weekStart]=\"weekStart()\"\n [locale]=\"locale()\"\n (rangeChange)=\"handleRange($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n </div>\n </div>\n }\n</ui-dropdown>\n",
|
|
11248
11405
|
styles: ["@layer properties;@layer components{:host{width:100%}}.ui-date-range-panel{display:flex;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-date-range-presets{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:calc(var(--spacing, .25rem) * .5);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--border-line-2);padding:calc(var(--spacing, .25rem) * 2)}.ui-date-range-preset{border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left;white-space:nowrap;color:var(--foreground)}.ui-date-range-preset:focus{--tw-outline-style: none;outline-style:none}.ui-date-range-preset:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-date-range-preset:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-date-range-preset:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-date-range-preset:hover,.ui-date-range-preset:focus-visible{background-color:var(--surface)}.ui-date-range-preset[aria-pressed=true]{background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-700, var(--color-blue-700))}.ui-date-range-preset[aria-pressed=true]:hover,.ui-date-range-preset[aria-pressed=true]:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
11249
11406
|
}]
|
|
@@ -11502,6 +11659,7 @@ var UiTimeSelectComponent = class UiTimeSelectComponent {
|
|
|
11502
11659
|
},
|
|
11503
11660
|
outputs: { value: "valueChange" },
|
|
11504
11661
|
host: { classAttribute: "inline-flex items-center gap-x-1" },
|
|
11662
|
+
providers: [provideIcons({ heroClock })],
|
|
11505
11663
|
ngImport: i0,
|
|
11506
11664
|
template: "<ng-icon name=\"heroClock\" class=\"me-1 text-muted-foreground-1 shrink-0\" />\n\n<ui-select\n class=\"ui-time-select-part\"\n [dataSource]=\"hourSource\"\n [displayWith]=\"pad\"\n [pageSize]=\"24\"\n [selectedItem]=\"hours()\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"setHours($event)\"\n/>\n\n<span class=\"text-muted-foreground-1\" aria-hidden=\"true\">:</span>\n\n<ui-select\n class=\"ui-time-select-part\"\n [dataSource]=\"minuteSource()\"\n [displayWith]=\"pad\"\n [pageSize]=\"60\"\n [selectedItem]=\"minutes()\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"setMinutes($event)\"\n/>\n",
|
|
11507
11665
|
styles: [".ui-time-select-part{width:calc(var(--spacing, .25rem) * 20);flex-shrink:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
@@ -11567,6 +11725,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11567
11725
|
selector: "ui-time-select",
|
|
11568
11726
|
imports: [UiSelectComponent, NgIcon],
|
|
11569
11727
|
host: { class: "inline-flex items-center gap-x-1" },
|
|
11728
|
+
providers: [provideIcons({ heroClock })],
|
|
11570
11729
|
template: "<ng-icon name=\"heroClock\" class=\"me-1 text-muted-foreground-1 shrink-0\" />\n\n<ui-select\n class=\"ui-time-select-part\"\n [dataSource]=\"hourSource\"\n [displayWith]=\"pad\"\n [pageSize]=\"24\"\n [selectedItem]=\"hours()\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"setHours($event)\"\n/>\n\n<span class=\"text-muted-foreground-1\" aria-hidden=\"true\">:</span>\n\n<ui-select\n class=\"ui-time-select-part\"\n [dataSource]=\"minuteSource()\"\n [displayWith]=\"pad\"\n [pageSize]=\"60\"\n [selectedItem]=\"minutes()\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"setMinutes($event)\"\n/>\n",
|
|
11571
11730
|
styles: [".ui-time-select-part{width:calc(var(--spacing, .25rem) * 20);flex-shrink:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
11572
11731
|
}]
|
|
@@ -11816,6 +11975,10 @@ var UiDatepickerComponent = class UiDatepickerComponent {
|
|
|
11816
11975
|
},
|
|
11817
11976
|
outputs: { value: "valueChange" },
|
|
11818
11977
|
host: { classAttribute: "block" },
|
|
11978
|
+
providers: [provideIcons({
|
|
11979
|
+
heroCalendar,
|
|
11980
|
+
heroXMark
|
|
11981
|
+
})],
|
|
11819
11982
|
viewQueries: [{
|
|
11820
11983
|
propertyName: "calendar",
|
|
11821
11984
|
first: true,
|
|
@@ -11972,6 +12135,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
11972
12135
|
UiCardComponent
|
|
11973
12136
|
],
|
|
11974
12137
|
host: { class: "block" },
|
|
12138
|
+
providers: [provideIcons({
|
|
12139
|
+
heroCalendar,
|
|
12140
|
+
heroXMark
|
|
12141
|
+
})],
|
|
11975
12142
|
template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n class=\"w-full\"\n>\n <ui-input\n [value]=\"display()\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n ariaHasPopup=\"dialog\"\n [validationState]=\"validationState()\"\n classes=\"cursor-pointer\"\n autocomplete=\"off\"\n readonly\n (click)=\"toggle()\"\n (keydown)=\"handleInputKeydown($event)\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroCalendar\"\n class=\"ms-3 text-muted-foreground-1 shrink-0\"\n />\n </ng-template>\n\n <ng-template #trailing>\n @if (clearable() && value() && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear date\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <ui-card radius=\"xl\" class=\"p-3\">\n <ui-calendar\n [value]=\"datePart()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [isDateDisabled]=\"isDateDisabled()\"\n [weekStart]=\"weekStart()\"\n [locale]=\"locale()\"\n (valueChange)=\"handlePick($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n\n @if (withTime()) {\n <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-line-2 border-t\">\n <ui-time-select\n [value]=\"timePart()\"\n [minuteStep]=\"minuteStep()\"\n (valueChange)=\"handleTime($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n\n <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n </div>\n }\n </ui-card>\n </div>\n }\n</ui-dropdown>\n",
|
|
11976
12143
|
styles: ["@layer components{:host{width:100%}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
11977
12144
|
}]
|
|
@@ -12164,6 +12331,7 @@ var UiDropdownButtonComponent = class UiDropdownButtonComponent {
|
|
|
12164
12331
|
}
|
|
12165
12332
|
},
|
|
12166
12333
|
outputs: { isOpen: "isOpenChange" },
|
|
12334
|
+
providers: [provideIcons({ heroChevronDown })],
|
|
12167
12335
|
ngImport: i0,
|
|
12168
12336
|
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 transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n</ui-button>\n",
|
|
12169
12337
|
dependencies: [{
|
|
@@ -12204,6 +12372,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12204
12372
|
args: [{
|
|
12205
12373
|
selector: "ui-dropdown-button",
|
|
12206
12374
|
imports: [UiButtonComponent, NgIcon],
|
|
12375
|
+
providers: [provideIcons({ heroChevronDown })],
|
|
12207
12376
|
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 transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n</ui-button>\n"
|
|
12208
12377
|
}]
|
|
12209
12378
|
}],
|
|
@@ -12458,6 +12627,10 @@ var UiFileInputComponent = class UiFileInputComponent {
|
|
|
12458
12627
|
value: "valueChange",
|
|
12459
12628
|
rejected: "rejected"
|
|
12460
12629
|
},
|
|
12630
|
+
providers: [provideIcons({
|
|
12631
|
+
heroArrowUp,
|
|
12632
|
+
heroXMark
|
|
12633
|
+
})],
|
|
12461
12634
|
viewQueries: [{
|
|
12462
12635
|
propertyName: "picker",
|
|
12463
12636
|
first: true,
|
|
@@ -12563,6 +12736,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12563
12736
|
UiButtonComponent,
|
|
12564
12737
|
NgIcon
|
|
12565
12738
|
],
|
|
12739
|
+
providers: [provideIcons({
|
|
12740
|
+
heroArrowUp,
|
|
12741
|
+
heroXMark
|
|
12742
|
+
})],
|
|
12566
12743
|
template: "<ui-input-group [validationState]=\"hasRejection() ? false : null\">\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"h-full\"\n [disabled]=\"disabled()\"\n (click)=\"openPicker()\"\n >\n <ng-icon name=\"heroArrowUpTray\" class=\"shrink-0\" />\n {{ buttonLabel() }}\n </ui-button>\n\n <input\n #picker\n type=\"file\"\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"handlePick($event)\"\n />\n\n <ui-input\n [value]=\"summary()\"\n [id]=\"id()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [describedBy]=\"describedBy()\"\n classes=\"truncate cursor-pointer\"\n readonly\n (click)=\"openPicker()\"\n >\n <ng-template #trailing>\n @if (value().length && !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 files\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n</ui-input-group>\n"
|
|
12567
12744
|
}]
|
|
12568
12745
|
}],
|
|
@@ -12652,34 +12829,291 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12652
12829
|
}]
|
|
12653
12830
|
}
|
|
12654
12831
|
});
|
|
12655
|
-
var
|
|
12656
|
-
|
|
12657
|
-
|
|
12658
|
-
|
|
12832
|
+
var UiSearchComponent = class UiSearchComponent {
|
|
12833
|
+
host = inject(ElementRef);
|
|
12834
|
+
registry = inject(UiTableRegistry);
|
|
12835
|
+
value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
12836
|
+
placeholder = input("Search", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
|
|
12837
|
+
ariaLabel = input("Search", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
|
|
12659
12838
|
disabled = input(false, {
|
|
12660
12839
|
...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
|
|
12661
12840
|
transform: booleanAttribute
|
|
12662
12841
|
});
|
|
12842
|
+
debounce = input(300, {
|
|
12843
|
+
...ngDevMode ? { debugName: "debounce" } : /* istanbul ignore next */ {},
|
|
12844
|
+
transform: numberAttribute
|
|
12845
|
+
});
|
|
12846
|
+
table = input(null, ...ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []);
|
|
12847
|
+
searched = output();
|
|
12848
|
+
linked = computed(() => {
|
|
12849
|
+
const id = this.table();
|
|
12850
|
+
return id ? this.registry.get(id) : null;
|
|
12851
|
+
}, ...ngDevMode ? [{ debugName: "linked" }] : /* istanbul ignore next */ []);
|
|
12852
|
+
timer;
|
|
12853
|
+
constructor() {
|
|
12854
|
+
let previous = null;
|
|
12855
|
+
effect(() => {
|
|
12856
|
+
const table = this.linked();
|
|
12857
|
+
const query = table?.query() ?? "";
|
|
12858
|
+
untracked(() => {
|
|
12859
|
+
const justLinked = table !== previous;
|
|
12860
|
+
previous = table;
|
|
12861
|
+
if (!table) return;
|
|
12862
|
+
if (justLinked && !query && this.value()) {
|
|
12863
|
+
table.query.set(this.value());
|
|
12864
|
+
return;
|
|
12865
|
+
}
|
|
12866
|
+
this.value.set(query);
|
|
12867
|
+
});
|
|
12868
|
+
});
|
|
12869
|
+
inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
|
|
12870
|
+
}
|
|
12871
|
+
onInput(value) {
|
|
12872
|
+
this.value.set(value);
|
|
12873
|
+
this.linked()?.query.set(value);
|
|
12874
|
+
clearTimeout(this.timer);
|
|
12875
|
+
this.timer = setTimeout(() => this.searched.emit(value), this.debounce());
|
|
12876
|
+
}
|
|
12877
|
+
clear() {
|
|
12878
|
+
if (!this.value()) return;
|
|
12879
|
+
clearTimeout(this.timer);
|
|
12880
|
+
this.value.set("");
|
|
12881
|
+
this.linked()?.query.set("");
|
|
12882
|
+
this.searched.emit("");
|
|
12883
|
+
this.host.nativeElement.querySelector("input")?.focus();
|
|
12884
|
+
}
|
|
12663
12885
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
12664
12886
|
minVersion: "12.0.0",
|
|
12665
12887
|
version: "22.2.1",
|
|
12666
12888
|
ngImport: i0,
|
|
12667
|
-
type:
|
|
12889
|
+
type: UiSearchComponent,
|
|
12668
12890
|
deps: [],
|
|
12669
12891
|
target: i0.ɵɵFactoryTarget.Component
|
|
12670
12892
|
});
|
|
12671
12893
|
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
12672
|
-
minVersion: "17.
|
|
12894
|
+
minVersion: "17.0.0",
|
|
12673
12895
|
version: "22.2.1",
|
|
12674
|
-
type:
|
|
12896
|
+
type: UiSearchComponent,
|
|
12675
12897
|
isStandalone: true,
|
|
12676
|
-
selector: "ui-
|
|
12898
|
+
selector: "ui-search",
|
|
12677
12899
|
inputs: {
|
|
12678
12900
|
value: {
|
|
12679
12901
|
classPropertyName: "value",
|
|
12680
12902
|
publicName: "value",
|
|
12681
12903
|
isSignal: true,
|
|
12682
|
-
isRequired:
|
|
12904
|
+
isRequired: false,
|
|
12905
|
+
transformFunction: null
|
|
12906
|
+
},
|
|
12907
|
+
placeholder: {
|
|
12908
|
+
classPropertyName: "placeholder",
|
|
12909
|
+
publicName: "placeholder",
|
|
12910
|
+
isSignal: true,
|
|
12911
|
+
isRequired: false,
|
|
12912
|
+
transformFunction: null
|
|
12913
|
+
},
|
|
12914
|
+
ariaLabel: {
|
|
12915
|
+
classPropertyName: "ariaLabel",
|
|
12916
|
+
publicName: "ariaLabel",
|
|
12917
|
+
isSignal: true,
|
|
12918
|
+
isRequired: false,
|
|
12919
|
+
transformFunction: null
|
|
12920
|
+
},
|
|
12921
|
+
disabled: {
|
|
12922
|
+
classPropertyName: "disabled",
|
|
12923
|
+
publicName: "disabled",
|
|
12924
|
+
isSignal: true,
|
|
12925
|
+
isRequired: false,
|
|
12926
|
+
transformFunction: null
|
|
12927
|
+
},
|
|
12928
|
+
debounce: {
|
|
12929
|
+
classPropertyName: "debounce",
|
|
12930
|
+
publicName: "debounce",
|
|
12931
|
+
isSignal: true,
|
|
12932
|
+
isRequired: false,
|
|
12933
|
+
transformFunction: null
|
|
12934
|
+
},
|
|
12935
|
+
table: {
|
|
12936
|
+
classPropertyName: "table",
|
|
12937
|
+
publicName: "table",
|
|
12938
|
+
isSignal: true,
|
|
12939
|
+
isRequired: false,
|
|
12940
|
+
transformFunction: null
|
|
12941
|
+
}
|
|
12942
|
+
},
|
|
12943
|
+
outputs: {
|
|
12944
|
+
value: "valueChange",
|
|
12945
|
+
searched: "searched"
|
|
12946
|
+
},
|
|
12947
|
+
host: { classAttribute: "block" },
|
|
12948
|
+
providers: [provideIcons({
|
|
12949
|
+
heroMagnifyingGlass,
|
|
12950
|
+
heroXMark
|
|
12951
|
+
})],
|
|
12952
|
+
ngImport: i0,
|
|
12953
|
+
template: "<ui-input\n [value]=\"value()\"\n (valueChange)=\"onInput($event)\"\n [placeholder]=\"placeholder()\"\n [ariaLabel]=\"ariaLabel()\"\n [disabled]=\"disabled()\"\n [spellcheck]=\"false\"\n inputRole=\"searchbox\"\n autocomplete=\"off\"\n (keydown.escape)=\"clear()\"\n>\n <ng-template #leading>\n <ng-icon name=\"heroMagnifyingGlass\" class=\"ms-3 size-4 text-muted-foreground-1 shrink-0\" />\n </ng-template>\n\n <ng-template #trailing>\n @if (value() && !disabled()) {\n <button type=\"button\" class=\"ui-search-clear\" aria-label=\"Clear search\" (click)=\"clear()\">\n <ng-icon name=\"heroXMark\" size=\"16\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n</ui-input>\n",
|
|
12954
|
+
styles: ["@layer properties;.ui-search-clear{margin-inline-end:var(--spacing, .25rem);display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1.5);color:var(--muted-foreground-1)}.ui-search-clear:hover{color:var(--foreground)}.ui-search-clear:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-search-clear:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-search-clear:focus-visible{--tw-outline-style: none;outline-style:none}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
12955
|
+
dependencies: [{
|
|
12956
|
+
kind: "component",
|
|
12957
|
+
type: UiInputComponent,
|
|
12958
|
+
selector: "ui-input",
|
|
12959
|
+
inputs: [
|
|
12960
|
+
"value",
|
|
12961
|
+
"classes",
|
|
12962
|
+
"type",
|
|
12963
|
+
"id",
|
|
12964
|
+
"name",
|
|
12965
|
+
"placeholder",
|
|
12966
|
+
"autocomplete",
|
|
12967
|
+
"inputmode",
|
|
12968
|
+
"required",
|
|
12969
|
+
"disabled",
|
|
12970
|
+
"readonly",
|
|
12971
|
+
"validationState",
|
|
12972
|
+
"min",
|
|
12973
|
+
"max",
|
|
12974
|
+
"step",
|
|
12975
|
+
"pattern",
|
|
12976
|
+
"minlength",
|
|
12977
|
+
"maxlength",
|
|
12978
|
+
"autofocus",
|
|
12979
|
+
"spellcheck",
|
|
12980
|
+
"revealable",
|
|
12981
|
+
"list",
|
|
12982
|
+
"ariaLabel",
|
|
12983
|
+
"describedBy",
|
|
12984
|
+
"inputRole",
|
|
12985
|
+
"ariaExpanded",
|
|
12986
|
+
"ariaControls",
|
|
12987
|
+
"ariaActiveDescendant",
|
|
12988
|
+
"ariaAutocomplete",
|
|
12989
|
+
"ariaHasPopup"
|
|
12990
|
+
],
|
|
12991
|
+
outputs: [
|
|
12992
|
+
"valueChange",
|
|
12993
|
+
"validationStateChange",
|
|
12994
|
+
"focused",
|
|
12995
|
+
"blurred"
|
|
12996
|
+
]
|
|
12997
|
+
}, {
|
|
12998
|
+
kind: "component",
|
|
12999
|
+
type: NgIcon,
|
|
13000
|
+
selector: "ng-icon",
|
|
13001
|
+
inputs: [
|
|
13002
|
+
"name",
|
|
13003
|
+
"svg",
|
|
13004
|
+
"size",
|
|
13005
|
+
"strokeWidth",
|
|
13006
|
+
"color"
|
|
13007
|
+
]
|
|
13008
|
+
}]
|
|
13009
|
+
});
|
|
13010
|
+
};
|
|
13011
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
13012
|
+
minVersion: "12.0.0",
|
|
13013
|
+
version: "22.2.1",
|
|
13014
|
+
ngImport: i0,
|
|
13015
|
+
type: UiSearchComponent,
|
|
13016
|
+
decorators: [{
|
|
13017
|
+
type: Component,
|
|
13018
|
+
args: [{
|
|
13019
|
+
selector: "ui-search",
|
|
13020
|
+
imports: [UiInputComponent, NgIcon],
|
|
13021
|
+
providers: [provideIcons({
|
|
13022
|
+
heroMagnifyingGlass,
|
|
13023
|
+
heroXMark
|
|
13024
|
+
})],
|
|
13025
|
+
host: { class: "block" },
|
|
13026
|
+
template: "<ui-input\n [value]=\"value()\"\n (valueChange)=\"onInput($event)\"\n [placeholder]=\"placeholder()\"\n [ariaLabel]=\"ariaLabel()\"\n [disabled]=\"disabled()\"\n [spellcheck]=\"false\"\n inputRole=\"searchbox\"\n autocomplete=\"off\"\n (keydown.escape)=\"clear()\"\n>\n <ng-template #leading>\n <ng-icon name=\"heroMagnifyingGlass\" class=\"ms-3 size-4 text-muted-foreground-1 shrink-0\" />\n </ng-template>\n\n <ng-template #trailing>\n @if (value() && !disabled()) {\n <button type=\"button\" class=\"ui-search-clear\" aria-label=\"Clear search\" (click)=\"clear()\">\n <ng-icon name=\"heroXMark\" size=\"16\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n</ui-input>\n",
|
|
13027
|
+
styles: ["@layer properties;.ui-search-clear{margin-inline-end:var(--spacing, .25rem);display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1.5);color:var(--muted-foreground-1)}.ui-search-clear:hover{color:var(--foreground)}.ui-search-clear:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-search-clear:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-search-clear:focus-visible{--tw-outline-style: none;outline-style:none}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
13028
|
+
}]
|
|
13029
|
+
}],
|
|
13030
|
+
ctorParameters: () => [],
|
|
13031
|
+
propDecorators: {
|
|
13032
|
+
value: [{
|
|
13033
|
+
type: i0.Input,
|
|
13034
|
+
args: [{
|
|
13035
|
+
isSignal: true,
|
|
13036
|
+
alias: "value",
|
|
13037
|
+
required: false
|
|
13038
|
+
}]
|
|
13039
|
+
}, {
|
|
13040
|
+
type: i0.Output,
|
|
13041
|
+
args: ["valueChange"]
|
|
13042
|
+
}],
|
|
13043
|
+
placeholder: [{
|
|
13044
|
+
type: i0.Input,
|
|
13045
|
+
args: [{
|
|
13046
|
+
isSignal: true,
|
|
13047
|
+
alias: "placeholder",
|
|
13048
|
+
required: false
|
|
13049
|
+
}]
|
|
13050
|
+
}],
|
|
13051
|
+
ariaLabel: [{
|
|
13052
|
+
type: i0.Input,
|
|
13053
|
+
args: [{
|
|
13054
|
+
isSignal: true,
|
|
13055
|
+
alias: "ariaLabel",
|
|
13056
|
+
required: false
|
|
13057
|
+
}]
|
|
13058
|
+
}],
|
|
13059
|
+
disabled: [{
|
|
13060
|
+
type: i0.Input,
|
|
13061
|
+
args: [{
|
|
13062
|
+
isSignal: true,
|
|
13063
|
+
alias: "disabled",
|
|
13064
|
+
required: false
|
|
13065
|
+
}]
|
|
13066
|
+
}],
|
|
13067
|
+
debounce: [{
|
|
13068
|
+
type: i0.Input,
|
|
13069
|
+
args: [{
|
|
13070
|
+
isSignal: true,
|
|
13071
|
+
alias: "debounce",
|
|
13072
|
+
required: false
|
|
13073
|
+
}]
|
|
13074
|
+
}],
|
|
13075
|
+
table: [{
|
|
13076
|
+
type: i0.Input,
|
|
13077
|
+
args: [{
|
|
13078
|
+
isSignal: true,
|
|
13079
|
+
alias: "table",
|
|
13080
|
+
required: false
|
|
13081
|
+
}]
|
|
13082
|
+
}],
|
|
13083
|
+
searched: [{
|
|
13084
|
+
type: i0.Output,
|
|
13085
|
+
args: ["searched"]
|
|
13086
|
+
}]
|
|
13087
|
+
}
|
|
13088
|
+
});
|
|
13089
|
+
var UiSwitchComponent = class UiSwitchComponent {
|
|
13090
|
+
value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
13091
|
+
id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
|
|
13092
|
+
name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
|
|
13093
|
+
disabled = input(false, {
|
|
13094
|
+
...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
|
|
13095
|
+
transform: booleanAttribute
|
|
13096
|
+
});
|
|
13097
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
13098
|
+
minVersion: "12.0.0",
|
|
13099
|
+
version: "22.2.1",
|
|
13100
|
+
ngImport: i0,
|
|
13101
|
+
type: UiSwitchComponent,
|
|
13102
|
+
deps: [],
|
|
13103
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
13104
|
+
});
|
|
13105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
13106
|
+
minVersion: "17.1.0",
|
|
13107
|
+
version: "22.2.1",
|
|
13108
|
+
type: UiSwitchComponent,
|
|
13109
|
+
isStandalone: true,
|
|
13110
|
+
selector: "ui-switch",
|
|
13111
|
+
inputs: {
|
|
13112
|
+
value: {
|
|
13113
|
+
classPropertyName: "value",
|
|
13114
|
+
publicName: "value",
|
|
13115
|
+
isSignal: true,
|
|
13116
|
+
isRequired: true,
|
|
12683
13117
|
transformFunction: null
|
|
12684
13118
|
},
|
|
12685
13119
|
id: {
|
|
@@ -12776,6 +13210,356 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12776
13210
|
}]
|
|
12777
13211
|
}
|
|
12778
13212
|
});
|
|
13213
|
+
const TableFiltersBreakpoints = {
|
|
13214
|
+
sm: "40rem",
|
|
13215
|
+
md: "48rem",
|
|
13216
|
+
lg: "64rem",
|
|
13217
|
+
xl: "80rem",
|
|
13218
|
+
"2xl": "96rem"
|
|
13219
|
+
};
|
|
13220
|
+
let nextId = 0;
|
|
13221
|
+
var UiTableFiltersComponent = class UiTableFiltersComponent {
|
|
13222
|
+
registry = inject(UiTableRegistry);
|
|
13223
|
+
facets = input.required(...ngDevMode ? [{ debugName: "facets" }] : /* istanbul ignore next */ []);
|
|
13224
|
+
table = input(null, ...ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []);
|
|
13225
|
+
value = model({}, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
13226
|
+
collapseBelow = input("lg", ...ngDevMode ? [{ debugName: "collapseBelow" }] : /* istanbul ignore next */ []);
|
|
13227
|
+
idPrefix = `ui-table-filters-${nextId++}`;
|
|
13228
|
+
anyDate = "any";
|
|
13229
|
+
customDate = "custom";
|
|
13230
|
+
customDates = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "customDates" }] : /* istanbul ignore next */ []);
|
|
13231
|
+
linked = computed(() => {
|
|
13232
|
+
const id = this.table();
|
|
13233
|
+
return id ? this.registry.get(id) : null;
|
|
13234
|
+
}, ...ngDevMode ? [{ debugName: "linked" }] : /* istanbul ignore next */ []);
|
|
13235
|
+
appliedCount = computed(() => this.facets().filter((facet) => facet.id in this.value()).length, ...ngDevMode ? [{ debugName: "appliedCount" }] : /* istanbul ignore next */ []);
|
|
13236
|
+
anyApplied = computed(() => this.appliedCount() > 0, ...ngDevMode ? [{ debugName: "anyApplied" }] : /* istanbul ignore next */ []);
|
|
13237
|
+
window = inject(DOCUMENT).defaultView;
|
|
13238
|
+
wide = signal(true, ...ngDevMode ? [{ debugName: "wide" }] : /* istanbul ignore next */ []);
|
|
13239
|
+
constructor() {
|
|
13240
|
+
effect((onCleanup) => {
|
|
13241
|
+
const media = this.window?.matchMedia?.(`(min-width: ${TableFiltersBreakpoints[this.collapseBelow()]})`);
|
|
13242
|
+
if (!media) return;
|
|
13243
|
+
const onChange = (event) => this.wide.set(event.matches);
|
|
13244
|
+
this.wide.set(media.matches);
|
|
13245
|
+
media.addEventListener("change", onChange);
|
|
13246
|
+
onCleanup(() => media.removeEventListener("change", onChange));
|
|
13247
|
+
});
|
|
13248
|
+
let previous = null;
|
|
13249
|
+
effect(() => {
|
|
13250
|
+
const table = this.linked();
|
|
13251
|
+
const filters = table?.filters() ?? {};
|
|
13252
|
+
untracked(() => {
|
|
13253
|
+
const justLinked = table !== previous;
|
|
13254
|
+
previous = table;
|
|
13255
|
+
if (!table) return;
|
|
13256
|
+
if (justLinked && this.anyApplied() && !this.hasAny(filters)) {
|
|
13257
|
+
table.filters.set({
|
|
13258
|
+
...filters,
|
|
13259
|
+
...this.ownFilters(this.value())
|
|
13260
|
+
});
|
|
13261
|
+
return;
|
|
13262
|
+
}
|
|
13263
|
+
this.value.set(filters);
|
|
13264
|
+
});
|
|
13265
|
+
});
|
|
13266
|
+
}
|
|
13267
|
+
groupName(facet) {
|
|
13268
|
+
return `${this.idPrefix}-${facet.id}`;
|
|
13269
|
+
}
|
|
13270
|
+
choiceId(facet, choice) {
|
|
13271
|
+
return `${this.groupName(facet)}-${choice}`;
|
|
13272
|
+
}
|
|
13273
|
+
picked(facet) {
|
|
13274
|
+
return this.value()[facet.id] ?? null;
|
|
13275
|
+
}
|
|
13276
|
+
pick(facet, value) {
|
|
13277
|
+
this.apply(facet.id, value ?? void 0);
|
|
13278
|
+
}
|
|
13279
|
+
isChecked(facet, option) {
|
|
13280
|
+
const applied = this.value()[facet.id];
|
|
13281
|
+
return Array.isArray(applied) && applied.includes(option.value);
|
|
13282
|
+
}
|
|
13283
|
+
check(facet, option, checked) {
|
|
13284
|
+
const applied = this.value()[facet.id];
|
|
13285
|
+
const picked = (Array.isArray(applied) ? applied : []).filter((value) => value !== option.value);
|
|
13286
|
+
const next = checked ? [...picked, option.value] : picked;
|
|
13287
|
+
this.apply(facet.id, next.length ? next : void 0);
|
|
13288
|
+
}
|
|
13289
|
+
range(facet) {
|
|
13290
|
+
return this.value()[facet.id] ?? {
|
|
13291
|
+
start: null,
|
|
13292
|
+
end: null
|
|
13293
|
+
};
|
|
13294
|
+
}
|
|
13295
|
+
dateMode(facet) {
|
|
13296
|
+
if (this.customDates().has(facet.id)) return "custom";
|
|
13297
|
+
const applied = this.range(facet);
|
|
13298
|
+
if (!applied.start) return "any";
|
|
13299
|
+
const index = (facet.presets ?? []).findIndex((preset) => {
|
|
13300
|
+
const range = preset.range();
|
|
13301
|
+
return range.start === applied.start && range.end === applied.end;
|
|
13302
|
+
});
|
|
13303
|
+
return index === -1 ? "custom" : index;
|
|
13304
|
+
}
|
|
13305
|
+
pickDate(facet, mode) {
|
|
13306
|
+
this.setCustom(facet.id, mode === "custom");
|
|
13307
|
+
if (mode === "any") this.apply(facet.id, void 0);
|
|
13308
|
+
else if (mode !== "custom") this.apply(facet.id, facet.presets?.[mode]?.range());
|
|
13309
|
+
}
|
|
13310
|
+
setRange(facet, range) {
|
|
13311
|
+
this.apply(facet.id, range.start ? range : void 0);
|
|
13312
|
+
}
|
|
13313
|
+
clearAll() {
|
|
13314
|
+
this.customDates.set(/* @__PURE__ */ new Set());
|
|
13315
|
+
this.write(this.withoutOwn(this.currentFilters()));
|
|
13316
|
+
}
|
|
13317
|
+
setCustom(id, custom) {
|
|
13318
|
+
this.customDates.update((ids) => {
|
|
13319
|
+
const next = new Set(ids);
|
|
13320
|
+
if (custom) next.add(id);
|
|
13321
|
+
else next.delete(id);
|
|
13322
|
+
return next;
|
|
13323
|
+
});
|
|
13324
|
+
}
|
|
13325
|
+
apply(id, applied) {
|
|
13326
|
+
const next = { ...this.currentFilters() };
|
|
13327
|
+
if (applied === void 0) delete next[id];
|
|
13328
|
+
else next[id] = applied;
|
|
13329
|
+
this.write(next);
|
|
13330
|
+
}
|
|
13331
|
+
write(filters) {
|
|
13332
|
+
this.value.set(filters);
|
|
13333
|
+
this.linked()?.filters.set(filters);
|
|
13334
|
+
}
|
|
13335
|
+
currentFilters() {
|
|
13336
|
+
return this.linked()?.filters() ?? this.value();
|
|
13337
|
+
}
|
|
13338
|
+
ownFilters(filters) {
|
|
13339
|
+
const ids = new Set(this.facets().map((facet) => facet.id));
|
|
13340
|
+
return Object.fromEntries(Object.entries(filters).filter(([id]) => ids.has(id)));
|
|
13341
|
+
}
|
|
13342
|
+
withoutOwn(filters) {
|
|
13343
|
+
const ids = new Set(this.facets().map((facet) => facet.id));
|
|
13344
|
+
return Object.fromEntries(Object.entries(filters).filter(([id]) => !ids.has(id)));
|
|
13345
|
+
}
|
|
13346
|
+
hasAny(filters) {
|
|
13347
|
+
return Object.keys(this.ownFilters(filters)).length > 0;
|
|
13348
|
+
}
|
|
13349
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
13350
|
+
minVersion: "12.0.0",
|
|
13351
|
+
version: "22.2.1",
|
|
13352
|
+
ngImport: i0,
|
|
13353
|
+
type: UiTableFiltersComponent,
|
|
13354
|
+
deps: [],
|
|
13355
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
13356
|
+
});
|
|
13357
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
13358
|
+
minVersion: "17.0.0",
|
|
13359
|
+
version: "22.2.1",
|
|
13360
|
+
type: UiTableFiltersComponent,
|
|
13361
|
+
isStandalone: true,
|
|
13362
|
+
selector: "ui-table-filters",
|
|
13363
|
+
inputs: {
|
|
13364
|
+
facets: {
|
|
13365
|
+
classPropertyName: "facets",
|
|
13366
|
+
publicName: "facets",
|
|
13367
|
+
isSignal: true,
|
|
13368
|
+
isRequired: true,
|
|
13369
|
+
transformFunction: null
|
|
13370
|
+
},
|
|
13371
|
+
table: {
|
|
13372
|
+
classPropertyName: "table",
|
|
13373
|
+
publicName: "table",
|
|
13374
|
+
isSignal: true,
|
|
13375
|
+
isRequired: false,
|
|
13376
|
+
transformFunction: null
|
|
13377
|
+
},
|
|
13378
|
+
value: {
|
|
13379
|
+
classPropertyName: "value",
|
|
13380
|
+
publicName: "value",
|
|
13381
|
+
isSignal: true,
|
|
13382
|
+
isRequired: false,
|
|
13383
|
+
transformFunction: null
|
|
13384
|
+
},
|
|
13385
|
+
collapseBelow: {
|
|
13386
|
+
classPropertyName: "collapseBelow",
|
|
13387
|
+
publicName: "collapseBelow",
|
|
13388
|
+
isSignal: true,
|
|
13389
|
+
isRequired: false,
|
|
13390
|
+
transformFunction: null
|
|
13391
|
+
}
|
|
13392
|
+
},
|
|
13393
|
+
outputs: { value: "valueChange" },
|
|
13394
|
+
host: { classAttribute: "block" },
|
|
13395
|
+
ngImport: i0,
|
|
13396
|
+
template: "@if (wide()) {\n <div class=\"ui-table-filters-panel ui-table-filters-panel--card\">\n <ng-container *ngTemplateOutlet=\"body; context: { $implicit: true }\" />\n </div>\n} @else {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"gap-x-2 h-9.5 py-0!\"\n (click)=\"drawer.isOpen.set(true)\"\n >\n Filters\n @if (appliedCount()) {\n <ui-badge appearance=\"soft\" size=\"xs\" class=\"ui-text-caption\">{{\n appliedCount()\n }}</ui-badge>\n }\n </ui-button>\n\n <ui-drawer #drawer label=\"Filters\">\n <button\n drawer-actions\n type=\"button\"\n class=\"ui-table-filters-clear ui-text-body-alt\"\n [class.invisible]=\"!anyApplied()\"\n (click)=\"clearAll()\"\n >\n Clear all\n </button>\n\n <div class=\"ui-table-filters-panel\">\n <ng-container\n *ngTemplateOutlet=\"body; context: { $implicit: false }\"\n />\n </div>\n </ui-drawer>\n}\n\n<ng-template #body let-showHeader>\n @if (showHeader) {\n <div class=\"ui-table-filters-header\">\n <span class=\"ui-table-filters-title ui-text-body\">\n Filters\n </span>\n\n <button\n type=\"button\"\n class=\"ui-table-filters-clear ui-text-body-alt\"\n [class.invisible]=\"!anyApplied()\"\n (click)=\"clearAll()\"\n >\n Clear all\n </button>\n </div>\n }\n\n @for (facet of facets(); track facet.id) {\n <fieldset class=\"ui-table-filters-facet\">\n <legend class=\"ui-table-filters-legend ui-text-body-alt\">\n {{ facet.label }}\n </legend>\n\n <div class=\"ui-table-filters-choices\">\n @switch (facet.kind) {\n @case ('options') {\n @if (facet.multiple) {\n @for (option of facet.options; track option.value; let index = $index) {\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, index)\"\n >\n <ui-checkbox\n [id]=\"choiceId(facet, index)\"\n [value]=\"isChecked(facet, option)\"\n (valueChange)=\"check(facet, option, $event)\"\n />\n <span class=\"truncate\">{{\n option.label\n }}</span>\n </label>\n }\n } @else {\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, 'any')\"\n >\n <ui-radio\n [id]=\"choiceId(facet, 'any')\"\n [value]=\"picked(facet)\"\n (valueChange)=\"pick(facet, $event)\"\n [option]=\"null\"\n [name]=\"groupName(facet)\"\n />\n <span class=\"truncate\">Any</span>\n </label>\n\n @for (option of facet.options; track option.value; let index = $index) {\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, index)\"\n >\n <ui-radio\n [id]=\"choiceId(facet, index)\"\n [value]=\"picked(facet)\"\n (valueChange)=\"pick(facet, $event)\"\n [option]=\"option.value\"\n [name]=\"groupName(facet)\"\n />\n <span class=\"truncate\">{{\n option.label\n }}</span>\n </label>\n }\n }\n }\n @case ('dateRange') {\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, 'any')\"\n >\n <ui-radio\n [id]=\"choiceId(facet, 'any')\"\n [value]=\"dateMode(facet)\"\n (valueChange)=\"pickDate(facet, $event)\"\n [option]=\"anyDate\"\n [name]=\"groupName(facet)\"\n />\n <span class=\"truncate\">Any time</span>\n </label>\n\n @for (preset of facet.presets ?? []; track preset.label; let index = $index) {\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, index)\"\n >\n <ui-radio\n [id]=\"choiceId(facet, index)\"\n [value]=\"dateMode(facet)\"\n (valueChange)=\"pickDate(facet, $event)\"\n [option]=\"index\"\n [name]=\"groupName(facet)\"\n />\n <span class=\"truncate\">{{ preset.label }}</span>\n </label>\n }\n\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, 'custom')\"\n >\n <ui-radio\n [id]=\"choiceId(facet, 'custom')\"\n [value]=\"dateMode(facet)\"\n (valueChange)=\"pickDate(facet, $event)\"\n [option]=\"customDate\"\n [name]=\"groupName(facet)\"\n />\n <span class=\"truncate\">Custom range</span>\n </label>\n\n @if (dateMode(facet) === 'custom') {\n <label\n class=\"sr-only\"\n [for]=\"groupName(facet) + '-range'\"\n >{{ facet.label }} range</label>\n <ui-date-range-picker\n class=\"ui-table-filters-range\"\n [id]=\"groupName(facet) + '-range'\"\n [value]=\"range(facet)\"\n (valueChange)=\"setRange(facet, $event)\"\n [placeholder]=\"facet.placeholder ?? 'Select dates'\"\n [min]=\"facet.min ?? null\"\n [max]=\"facet.max ?? null\"\n />\n }\n }\n }\n </div>\n </fieldset>\n }\n</ng-template>\n",
|
|
13397
|
+
styles: ["@layer properties;.ui-table-filters-panel{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 6)}.ui-table-filters-panel--card{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * 5)}.ui-table-filters-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-table-filters-title{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-clear{cursor:pointer;color:var(--muted-foreground-1)}.ui-table-filters-clear:hover{color:var(--foreground)}.ui-table-filters-clear:focus-visible{text-decoration-line:underline}.ui-table-filters-clear:focus-visible{--tw-outline-style: none;outline-style:none}.ui-table-filters-facet{margin:0;min-width:0px;border-style:var(--tw-border-style);border-width:0px;padding:0}.ui-table-filters-legend{margin-bottom:calc(var(--spacing, .25rem) * 3);padding:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-choices{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2.5)}.ui-table-filters-choice{display:flex;min-width:0px;cursor:pointer;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2.5);color:var(--muted-foreground-2)}.ui-table-filters-choice:hover{color:var(--foreground)}.ui-table-filters-range{margin-top:calc(var(--spacing, .25rem) * .5)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
|
|
13398
|
+
dependencies: [
|
|
13399
|
+
{
|
|
13400
|
+
kind: "directive",
|
|
13401
|
+
type: NgTemplateOutlet,
|
|
13402
|
+
selector: "[ngTemplateOutlet]",
|
|
13403
|
+
inputs: [
|
|
13404
|
+
"ngTemplateOutletContext",
|
|
13405
|
+
"ngTemplateOutlet",
|
|
13406
|
+
"ngTemplateOutletInjector"
|
|
13407
|
+
]
|
|
13408
|
+
},
|
|
13409
|
+
{
|
|
13410
|
+
kind: "component",
|
|
13411
|
+
type: UiButtonComponent,
|
|
13412
|
+
selector: "ui-button",
|
|
13413
|
+
inputs: [
|
|
13414
|
+
"appearance",
|
|
13415
|
+
"intent",
|
|
13416
|
+
"size",
|
|
13417
|
+
"classes",
|
|
13418
|
+
"type",
|
|
13419
|
+
"ariaLabel",
|
|
13420
|
+
"disabled",
|
|
13421
|
+
"loading"
|
|
13422
|
+
]
|
|
13423
|
+
},
|
|
13424
|
+
{
|
|
13425
|
+
kind: "component",
|
|
13426
|
+
type: UiBadgeComponent,
|
|
13427
|
+
selector: "ui-badge",
|
|
13428
|
+
inputs: [
|
|
13429
|
+
"appearance",
|
|
13430
|
+
"intent",
|
|
13431
|
+
"size"
|
|
13432
|
+
]
|
|
13433
|
+
},
|
|
13434
|
+
{
|
|
13435
|
+
kind: "component",
|
|
13436
|
+
type: UiDrawerComponent,
|
|
13437
|
+
selector: "ui-drawer",
|
|
13438
|
+
inputs: [
|
|
13439
|
+
"enableBackdrop",
|
|
13440
|
+
"label",
|
|
13441
|
+
"subLabel"
|
|
13442
|
+
]
|
|
13443
|
+
},
|
|
13444
|
+
{
|
|
13445
|
+
kind: "component",
|
|
13446
|
+
type: UiCheckboxComponent,
|
|
13447
|
+
selector: "ui-checkbox",
|
|
13448
|
+
inputs: [
|
|
13449
|
+
"value",
|
|
13450
|
+
"id",
|
|
13451
|
+
"name",
|
|
13452
|
+
"required",
|
|
13453
|
+
"disabled",
|
|
13454
|
+
"indeterminate",
|
|
13455
|
+
"validationState",
|
|
13456
|
+
"classes"
|
|
13457
|
+
],
|
|
13458
|
+
outputs: ["valueChange", "validationStateChange"]
|
|
13459
|
+
},
|
|
13460
|
+
{
|
|
13461
|
+
kind: "component",
|
|
13462
|
+
type: UiRadioComponent,
|
|
13463
|
+
selector: "ui-radio",
|
|
13464
|
+
inputs: [
|
|
13465
|
+
"value",
|
|
13466
|
+
"option",
|
|
13467
|
+
"id",
|
|
13468
|
+
"name",
|
|
13469
|
+
"required",
|
|
13470
|
+
"disabled",
|
|
13471
|
+
"validationState",
|
|
13472
|
+
"compareWith"
|
|
13473
|
+
],
|
|
13474
|
+
outputs: ["valueChange", "validationStateChange"]
|
|
13475
|
+
},
|
|
13476
|
+
{
|
|
13477
|
+
kind: "component",
|
|
13478
|
+
type: UiDateRangePickerComponent,
|
|
13479
|
+
selector: "ui-date-range-picker",
|
|
13480
|
+
inputs: [
|
|
13481
|
+
"value",
|
|
13482
|
+
"id",
|
|
13483
|
+
"placeholder",
|
|
13484
|
+
"disabled",
|
|
13485
|
+
"clearable",
|
|
13486
|
+
"validationState",
|
|
13487
|
+
"describedBy",
|
|
13488
|
+
"min",
|
|
13489
|
+
"max",
|
|
13490
|
+
"isDateDisabled",
|
|
13491
|
+
"weekStart",
|
|
13492
|
+
"locale",
|
|
13493
|
+
"format",
|
|
13494
|
+
"presets"
|
|
13495
|
+
],
|
|
13496
|
+
outputs: ["valueChange"]
|
|
13497
|
+
}
|
|
13498
|
+
]
|
|
13499
|
+
});
|
|
13500
|
+
};
|
|
13501
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
13502
|
+
minVersion: "12.0.0",
|
|
13503
|
+
version: "22.2.1",
|
|
13504
|
+
ngImport: i0,
|
|
13505
|
+
type: UiTableFiltersComponent,
|
|
13506
|
+
decorators: [{
|
|
13507
|
+
type: Component,
|
|
13508
|
+
args: [{
|
|
13509
|
+
selector: "ui-table-filters",
|
|
13510
|
+
imports: [
|
|
13511
|
+
NgTemplateOutlet,
|
|
13512
|
+
UiButtonComponent,
|
|
13513
|
+
UiBadgeComponent,
|
|
13514
|
+
UiDrawerComponent,
|
|
13515
|
+
UiCheckboxComponent,
|
|
13516
|
+
UiRadioComponent,
|
|
13517
|
+
UiDateRangePickerComponent
|
|
13518
|
+
],
|
|
13519
|
+
host: { class: "block" },
|
|
13520
|
+
template: "@if (wide()) {\n <div class=\"ui-table-filters-panel ui-table-filters-panel--card\">\n <ng-container *ngTemplateOutlet=\"body; context: { $implicit: true }\" />\n </div>\n} @else {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"gap-x-2 h-9.5 py-0!\"\n (click)=\"drawer.isOpen.set(true)\"\n >\n Filters\n @if (appliedCount()) {\n <ui-badge appearance=\"soft\" size=\"xs\" class=\"ui-text-caption\">{{\n appliedCount()\n }}</ui-badge>\n }\n </ui-button>\n\n <ui-drawer #drawer label=\"Filters\">\n <button\n drawer-actions\n type=\"button\"\n class=\"ui-table-filters-clear ui-text-body-alt\"\n [class.invisible]=\"!anyApplied()\"\n (click)=\"clearAll()\"\n >\n Clear all\n </button>\n\n <div class=\"ui-table-filters-panel\">\n <ng-container\n *ngTemplateOutlet=\"body; context: { $implicit: false }\"\n />\n </div>\n </ui-drawer>\n}\n\n<ng-template #body let-showHeader>\n @if (showHeader) {\n <div class=\"ui-table-filters-header\">\n <span class=\"ui-table-filters-title ui-text-body\">\n Filters\n </span>\n\n <button\n type=\"button\"\n class=\"ui-table-filters-clear ui-text-body-alt\"\n [class.invisible]=\"!anyApplied()\"\n (click)=\"clearAll()\"\n >\n Clear all\n </button>\n </div>\n }\n\n @for (facet of facets(); track facet.id) {\n <fieldset class=\"ui-table-filters-facet\">\n <legend class=\"ui-table-filters-legend ui-text-body-alt\">\n {{ facet.label }}\n </legend>\n\n <div class=\"ui-table-filters-choices\">\n @switch (facet.kind) {\n @case ('options') {\n @if (facet.multiple) {\n @for (option of facet.options; track option.value; let index = $index) {\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, index)\"\n >\n <ui-checkbox\n [id]=\"choiceId(facet, index)\"\n [value]=\"isChecked(facet, option)\"\n (valueChange)=\"check(facet, option, $event)\"\n />\n <span class=\"truncate\">{{\n option.label\n }}</span>\n </label>\n }\n } @else {\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, 'any')\"\n >\n <ui-radio\n [id]=\"choiceId(facet, 'any')\"\n [value]=\"picked(facet)\"\n (valueChange)=\"pick(facet, $event)\"\n [option]=\"null\"\n [name]=\"groupName(facet)\"\n />\n <span class=\"truncate\">Any</span>\n </label>\n\n @for (option of facet.options; track option.value; let index = $index) {\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, index)\"\n >\n <ui-radio\n [id]=\"choiceId(facet, index)\"\n [value]=\"picked(facet)\"\n (valueChange)=\"pick(facet, $event)\"\n [option]=\"option.value\"\n [name]=\"groupName(facet)\"\n />\n <span class=\"truncate\">{{\n option.label\n }}</span>\n </label>\n }\n }\n }\n @case ('dateRange') {\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, 'any')\"\n >\n <ui-radio\n [id]=\"choiceId(facet, 'any')\"\n [value]=\"dateMode(facet)\"\n (valueChange)=\"pickDate(facet, $event)\"\n [option]=\"anyDate\"\n [name]=\"groupName(facet)\"\n />\n <span class=\"truncate\">Any time</span>\n </label>\n\n @for (preset of facet.presets ?? []; track preset.label; let index = $index) {\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, index)\"\n >\n <ui-radio\n [id]=\"choiceId(facet, index)\"\n [value]=\"dateMode(facet)\"\n (valueChange)=\"pickDate(facet, $event)\"\n [option]=\"index\"\n [name]=\"groupName(facet)\"\n />\n <span class=\"truncate\">{{ preset.label }}</span>\n </label>\n }\n\n <label\n class=\"ui-table-filters-choice ui-text-body-alt\"\n [for]=\"choiceId(facet, 'custom')\"\n >\n <ui-radio\n [id]=\"choiceId(facet, 'custom')\"\n [value]=\"dateMode(facet)\"\n (valueChange)=\"pickDate(facet, $event)\"\n [option]=\"customDate\"\n [name]=\"groupName(facet)\"\n />\n <span class=\"truncate\">Custom range</span>\n </label>\n\n @if (dateMode(facet) === 'custom') {\n <label\n class=\"sr-only\"\n [for]=\"groupName(facet) + '-range'\"\n >{{ facet.label }} range</label>\n <ui-date-range-picker\n class=\"ui-table-filters-range\"\n [id]=\"groupName(facet) + '-range'\"\n [value]=\"range(facet)\"\n (valueChange)=\"setRange(facet, $event)\"\n [placeholder]=\"facet.placeholder ?? 'Select dates'\"\n [min]=\"facet.min ?? null\"\n [max]=\"facet.max ?? null\"\n />\n }\n }\n }\n </div>\n </fieldset>\n }\n</ng-template>\n",
|
|
13521
|
+
styles: ["@layer properties;.ui-table-filters-panel{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 6)}.ui-table-filters-panel--card{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * 5)}.ui-table-filters-header{display:flex;align-items:center;justify-content:space-between;column-gap:calc(var(--spacing, .25rem) * 3)}.ui-table-filters-title{display:flex;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-clear{cursor:pointer;color:var(--muted-foreground-1)}.ui-table-filters-clear:hover{color:var(--foreground)}.ui-table-filters-clear:focus-visible{text-decoration-line:underline}.ui-table-filters-clear:focus-visible{--tw-outline-style: none;outline-style:none}.ui-table-filters-facet{margin:0;min-width:0px;border-style:var(--tw-border-style);border-width:0px;padding:0}.ui-table-filters-legend{margin-bottom:calc(var(--spacing, .25rem) * 3);padding:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}.ui-table-filters-choices{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2.5)}.ui-table-filters-choice{display:flex;min-width:0px;cursor:pointer;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2.5);color:var(--muted-foreground-2)}.ui-table-filters-choice:hover{color:var(--foreground)}.ui-table-filters-range{margin-top:calc(var(--spacing, .25rem) * .5)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
13522
|
+
}]
|
|
13523
|
+
}],
|
|
13524
|
+
ctorParameters: () => [],
|
|
13525
|
+
propDecorators: {
|
|
13526
|
+
facets: [{
|
|
13527
|
+
type: i0.Input,
|
|
13528
|
+
args: [{
|
|
13529
|
+
isSignal: true,
|
|
13530
|
+
alias: "facets",
|
|
13531
|
+
required: true
|
|
13532
|
+
}]
|
|
13533
|
+
}],
|
|
13534
|
+
table: [{
|
|
13535
|
+
type: i0.Input,
|
|
13536
|
+
args: [{
|
|
13537
|
+
isSignal: true,
|
|
13538
|
+
alias: "table",
|
|
13539
|
+
required: false
|
|
13540
|
+
}]
|
|
13541
|
+
}],
|
|
13542
|
+
value: [{
|
|
13543
|
+
type: i0.Input,
|
|
13544
|
+
args: [{
|
|
13545
|
+
isSignal: true,
|
|
13546
|
+
alias: "value",
|
|
13547
|
+
required: false
|
|
13548
|
+
}]
|
|
13549
|
+
}, {
|
|
13550
|
+
type: i0.Output,
|
|
13551
|
+
args: ["valueChange"]
|
|
13552
|
+
}],
|
|
13553
|
+
collapseBelow: [{
|
|
13554
|
+
type: i0.Input,
|
|
13555
|
+
args: [{
|
|
13556
|
+
isSignal: true,
|
|
13557
|
+
alias: "collapseBelow",
|
|
13558
|
+
required: false
|
|
13559
|
+
}]
|
|
13560
|
+
}]
|
|
13561
|
+
}
|
|
13562
|
+
});
|
|
12779
13563
|
const UI_THEME_CONFIG = new InjectionToken("UI_THEME_CONFIG", {
|
|
12780
13564
|
providedIn: "root",
|
|
12781
13565
|
factory: () => ({ storageKey: "ui-theme" })
|
|
@@ -13175,6 +13959,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
13175
13959
|
}]
|
|
13176
13960
|
}
|
|
13177
13961
|
});
|
|
13178
|
-
export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiProgressComponent, UiRadioComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, lastDaysPreset, monthPreset, provideUiFormat, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
|
|
13962
|
+
export { AlertAppearances, AlertIntents, AvatarSizes, BadgeAppearances, BadgeIntents, BadgeSizes, BarChartOrientations, ButtonAppearances, ButtonIntents, ButtonSizes, ButtonTypes, CHART_INK, CHART_INK_DARK, CHART_MAX_LINE_SERIES, CHART_MAX_SERIES, CHART_PALETTE, CHART_PALETTE_DARK, CalendarModes, CardHeadingLevels, CardRadii, FileRejectionReasons, InputAriaAutocompletes, InputAriaHasPopups, InputModes, InputTypes, LineChartCurves, MoneySignDisplays, PieChartVariants, ProgressIntents, ProgressLabelPositions, ProgressOrientations, ProgressShapes, ProgressSizes, SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, SkeletonShapes, TableFiltersBreakpoints, TableLocalDataSource, TableRemoteDataSource, TextareaResizeOptions, ToastIntents, ToasterPositions, UI_FORMAT, UI_FORMAT_DEFAULTS, UI_LOADING_TYPES, UI_THEME_CONFIG, UiAlertComponent, UiAvatarComponent, UiBadgeComponent, UiBarChartComponent, UiButtonComponent, UiButtonGroupComponent, UiCalendarComponent, UiCardComponent, UiCardHeaderComponent, UiChartComponent, UiChartFrameComponent, UiChartLegendComponent, UiChartTableComponent, UiCheckboxComponent, UiColourComponent, UiContainerComponent, UiCounterComponent, UiDateRangePickerComponent, UiDatepickerComponent, UiDrawerComponent, UiDropdownButtonComponent, UiDropdownComponent, UiDropdownDirective, UiDropdownMenuComponent, UiDropzoneComponent, UiFieldComponent, UiFileInputComponent, UiInputAddonComponent, UiInputComponent, UiInputGroupComponent, UiKpiComponent, UiLayoutComponent, UiLineChartComponent, UiLoadingComponent, UiModalComponent, UiMoneyComponent, UiOverlayComponent, UiPaginationComponent, UiPieChartComponent, UiProgressComponent, UiRadioComponent, UiSearchComponent, UiSegmentedComponent, UiSelectComponent, UiSidebarComponent, UiSidebarGroupComponent, UiSidebarItemComponent, UiSkeletonComponent, UiStatComponent, UiSwitchComponent, UiTabComponent, UiTabDirective, UiTableComponent, UiTableFiltersComponent, UiTableRegistry, UiTextareaComponent, UiThemeService, UiThemeSwitchComponent, UiTimeSelectComponent, UiToastComponent, UiToastService, UiToasterComponent, UiTooltipComponent, UiUserMenuComponent, WeekStarts, chartColour, chartInk, chartSeriesStyle, defaultDateRangePresets, financialYearPreset, injectMoneyFormatter, lastDaysPreset, monthPreset, provideUiFormat, provideUiTheme, radiusClasses, thisWeekPreset, todayPreset, yearPreset };
|
|
13179
13963
|
|
|
13180
13964
|
//# sourceMappingURL=area8975-ui.mjs.map
|