@area8975/ui 0.1.1-dev.17 → 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 +706 -29
- package/fesm2022/area8975-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/theme.css +2 -13
- package/types/area8975-ui.d.ts +184 -87
package/fesm2022/area8975-ui.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
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
4
|
import { NgIcon, provideIcons } from "@ng-icons/core";
|
|
5
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";
|
|
6
6
|
import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
|
|
7
|
-
import { Subject, catchError, debounceTime, of, skip, switchMap } from "rxjs";
|
|
7
|
+
import { Subject, catchError, debounceTime, filter, of, skip, switchMap } from "rxjs";
|
|
8
8
|
import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
|
|
9
9
|
import { heroCheckCircleSolid, heroExclamationTriangleSolid, heroInformationCircleSolid, heroXCircleSolid } from "@ng-icons/heroicons/solid";
|
|
10
10
|
const UI_FORMAT_DEFAULTS = {
|
|
@@ -1411,7 +1411,6 @@ var UiChartFrameComponent = class UiChartFrameComponent {
|
|
|
1411
1411
|
/>
|
|
1412
1412
|
}
|
|
1413
1413
|
|
|
1414
|
-
<!-- min-h-0 so the drawn chart can't push its own height up, it only follows the space it's given -->
|
|
1415
1414
|
<ui-chart
|
|
1416
1415
|
[class.grow]="fill()"
|
|
1417
1416
|
[class.min-h-0]="fill()"
|
|
@@ -1520,7 +1519,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1520
1519
|
/>
|
|
1521
1520
|
}
|
|
1522
1521
|
|
|
1523
|
-
<!-- min-h-0 so the drawn chart can't push its own height up, it only follows the space it's given -->
|
|
1524
1522
|
<ui-chart
|
|
1525
1523
|
[class.grow]="fill()"
|
|
1526
1524
|
[class.min-h-0]="fill()"
|
|
@@ -2475,7 +2473,7 @@ var UiCheckboxComponent = class UiCheckboxComponent {
|
|
|
2475
2473
|
} },
|
|
2476
2474
|
ngImport: i0,
|
|
2477
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",
|
|
2478
|
-
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"]
|
|
2479
2477
|
});
|
|
2480
2478
|
};
|
|
2481
2479
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -2492,7 +2490,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
2492
2490
|
"[attr.name]": "null"
|
|
2493
2491
|
},
|
|
2494
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",
|
|
2495
|
-
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"]
|
|
2496
2494
|
}]
|
|
2497
2495
|
}],
|
|
2498
2496
|
propDecorators: {
|
|
@@ -3986,7 +3984,7 @@ var UiRadioComponent = class UiRadioComponent {
|
|
|
3986
3984
|
"attr.name": "null"
|
|
3987
3985
|
} },
|
|
3988
3986
|
ngImport: i0,
|
|
3989
|
-
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",
|
|
3990
3988
|
styles: [":host{display:inline-flex}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
3991
3989
|
});
|
|
3992
3990
|
};
|
|
@@ -4003,7 +4001,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4003
4001
|
"[attr.id]": "null",
|
|
4004
4002
|
"[attr.name]": "null"
|
|
4005
4003
|
},
|
|
4006
|
-
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",
|
|
4007
4005
|
styles: [":host{display:inline-flex}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
|
|
4008
4006
|
}]
|
|
4009
4007
|
}],
|
|
@@ -4754,7 +4752,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
4754
4752
|
}]
|
|
4755
4753
|
}
|
|
4756
4754
|
});
|
|
4757
|
-
let nextId$
|
|
4755
|
+
let nextId$3 = 0;
|
|
4758
4756
|
var UiSelectComponent = class UiSelectComponent {
|
|
4759
4757
|
isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
|
|
4760
4758
|
placement = input("bottom-start", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
|
|
@@ -4805,7 +4803,7 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
4805
4803
|
optionTemplate = contentChild("option", ...ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []);
|
|
4806
4804
|
triggerTemplate = contentChild("trigger", ...ngDevMode ? [{ debugName: "triggerTemplate" }] : /* istanbul ignore next */ []);
|
|
4807
4805
|
activeIndex = signal(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
|
|
4808
|
-
listId = `ui-select-${nextId$
|
|
4806
|
+
listId = `ui-select-${nextId$3++}`;
|
|
4809
4807
|
hasSelection = computed(() => this.multiple() ? this.selectedItems().length > 0 : this.selectedItem() !== null, ...ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []);
|
|
4810
4808
|
triggerLabel = computed(() => {
|
|
4811
4809
|
const display = this.displayWith();
|
|
@@ -4818,6 +4816,7 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
4818
4816
|
if (!selected.length) return this.placeholder();
|
|
4819
4817
|
return counterAfter !== null && selected.length > counterAfter ? this.counterLabel()(selected.length) : selected.map(display).join(", ");
|
|
4820
4818
|
}, ...ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []);
|
|
4819
|
+
isEmpty = computed(() => this.multiple() ? !this.selectedItems().length : this.selectedItem() === null, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
|
|
4821
4820
|
showTags = computed(() => this.multiple() && this.multipleDisplay() === "tags" && this.searchMode() !== "inline", ...ngDevMode ? [{ debugName: "showTags" }] : /* istanbul ignore next */ []);
|
|
4822
4821
|
createQuery = computed(() => {
|
|
4823
4822
|
const query = this.query().trim();
|
|
@@ -5258,8 +5257,8 @@ var UiSelectComponent = class UiSelectComponent {
|
|
|
5258
5257
|
isSignal: true
|
|
5259
5258
|
}],
|
|
5260
5259
|
ngImport: i0,
|
|
5261
|
-
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",
|
|
5262
|
-
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"],
|
|
5263
5262
|
dependencies: [
|
|
5264
5263
|
{
|
|
5265
5264
|
kind: "component",
|
|
@@ -5389,8 +5388,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5389
5388
|
heroCheck,
|
|
5390
5389
|
heroPlus
|
|
5391
5390
|
})],
|
|
5392
|
-
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",
|
|
5393
|
-
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) *
|
|
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"]
|
|
5394
5393
|
}]
|
|
5395
5394
|
}],
|
|
5396
5395
|
ctorParameters: () => [],
|
|
@@ -7193,7 +7192,7 @@ var UiDrawerComponent = class UiDrawerComponent {
|
|
|
7193
7192
|
},
|
|
7194
7193
|
host: { properties: { "class.open": "isOpen()" } },
|
|
7195
7194
|
ngImport: i0,
|
|
7196
|
-
template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 h-full transition-transform duration-200\"\n [class.translate-x-full]=\"!isOpen()\"\n>\n <div class=\"flex flex-col h-full\">\n <header\n class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n [class.items-start]=\"subLabel()\"\n [class.items-center]=\"!subLabel()\"\n >\n <div>\n <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n @if (subLabel()) {\n <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n }\n </div>\n <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n </header>\n </div>\n</aside>\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",
|
|
7197
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"],
|
|
7198
7197
|
dependencies: [{
|
|
7199
7198
|
kind: "component",
|
|
@@ -7215,7 +7214,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
7215
7214
|
selector: "ui-drawer",
|
|
7216
7215
|
imports: [UiModalCloseButtonComponent],
|
|
7217
7216
|
host: { "[class.open]": "isOpen()" },
|
|
7218
|
-
template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 h-full transition-transform duration-200\"\n [class.translate-x-full]=\"!isOpen()\"\n>\n <div class=\"flex flex-col h-full\">\n <header\n class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n [class.items-start]=\"subLabel()\"\n [class.items-center]=\"!subLabel()\"\n >\n <div>\n <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n @if (subLabel()) {\n <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n }\n </div>\n <ui-modal-close-btn [(isOpen)]=\"isOpen\" />\n </header>\n </div>\n</aside>\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",
|
|
7219
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"]
|
|
7220
7219
|
}]
|
|
7221
7220
|
}],
|
|
@@ -8558,7 +8557,7 @@ const ProgressShapes = [
|
|
|
8558
8557
|
"straight"
|
|
8559
8558
|
];
|
|
8560
8559
|
const ProgressOrientations = ["horizontal", "vertical"];
|
|
8561
|
-
let nextId$
|
|
8560
|
+
let nextId$2 = 0;
|
|
8562
8561
|
var UiSegmentedComponent = class UiSegmentedComponent {
|
|
8563
8562
|
options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
|
|
8564
8563
|
value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
@@ -8567,7 +8566,7 @@ var UiSegmentedComponent = class UiSegmentedComponent {
|
|
|
8567
8566
|
...ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {},
|
|
8568
8567
|
transform: booleanAttribute
|
|
8569
8568
|
});
|
|
8570
|
-
name = `ui-segmented-${nextId$
|
|
8569
|
+
name = `ui-segmented-${nextId$2++}`;
|
|
8571
8570
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
8572
8571
|
minVersion: "12.0.0",
|
|
8573
8572
|
version: "22.2.1",
|
|
@@ -8701,7 +8700,7 @@ var UiStatComponent = class UiStatComponent {
|
|
|
8701
8700
|
} },
|
|
8702
8701
|
host: { classAttribute: "block min-w-0" },
|
|
8703
8702
|
ngImport: i0,
|
|
8704
|
-
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"
|
|
8705
8704
|
});
|
|
8706
8705
|
};
|
|
8707
8706
|
i0.ɵɵngDeclareClassMetadata({
|
|
@@ -8714,7 +8713,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8714
8713
|
args: [{
|
|
8715
8714
|
selector: "ui-stat",
|
|
8716
8715
|
host: { class: "block min-w-0" },
|
|
8717
|
-
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"
|
|
8718
8717
|
}]
|
|
8719
8718
|
}],
|
|
8720
8719
|
propDecorators: { label: [{
|
|
@@ -8936,10 +8935,55 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8936
8935
|
}]
|
|
8937
8936
|
}
|
|
8938
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
|
+
});
|
|
8939
8982
|
const DEFAULT_COLUMN_WIDTH = 160;
|
|
8940
8983
|
const SELECTION_COLUMN_WIDTH = 44;
|
|
8941
8984
|
var UiTableComponent = class UiTableComponent {
|
|
8942
8985
|
classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
|
|
8986
|
+
tableId = input(null, ...ngDevMode ? [{ debugName: "tableId" }] : /* istanbul ignore next */ []);
|
|
8943
8987
|
columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
|
|
8944
8988
|
dataSource = input.required(...ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []);
|
|
8945
8989
|
emptyMessage = input("No data to display.", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
|
|
@@ -9062,12 +9106,21 @@ var UiTableComponent = class UiTableComponent {
|
|
|
9062
9106
|
load$ = new Subject();
|
|
9063
9107
|
destroyRef = inject(DestroyRef);
|
|
9064
9108
|
cdr = inject(ChangeDetectorRef);
|
|
9109
|
+
registry = inject(UiTableRegistry);
|
|
9110
|
+
loadedQuery = "";
|
|
9111
|
+
loadedFilters = {};
|
|
9065
9112
|
resizeState = null;
|
|
9066
9113
|
columnDragState = null;
|
|
9067
9114
|
filterDataSources = /* @__PURE__ */ new Map();
|
|
9068
9115
|
constructor() {
|
|
9069
|
-
|
|
9070
|
-
|
|
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());
|
|
9071
9124
|
this.load$.pipe(switchMap(() => this.fetch()), takeUntilDestroyed(this.destroyRef)).subscribe((result) => this.applyResult(result));
|
|
9072
9125
|
}
|
|
9073
9126
|
ngOnInit() {
|
|
@@ -9332,6 +9385,8 @@ var UiTableComponent = class UiTableComponent {
|
|
|
9332
9385
|
sort: this.sort(),
|
|
9333
9386
|
filters: this.filters()
|
|
9334
9387
|
};
|
|
9388
|
+
this.loadedQuery = params.query;
|
|
9389
|
+
this.loadedFilters = params.filters;
|
|
9335
9390
|
return this.dataSource().load(params).pipe(catchError(() => of(null)));
|
|
9336
9391
|
}
|
|
9337
9392
|
applyResult(result) {
|
|
@@ -9364,6 +9419,13 @@ var UiTableComponent = class UiTableComponent {
|
|
|
9364
9419
|
isRequired: false,
|
|
9365
9420
|
transformFunction: null
|
|
9366
9421
|
},
|
|
9422
|
+
tableId: {
|
|
9423
|
+
classPropertyName: "tableId",
|
|
9424
|
+
publicName: "tableId",
|
|
9425
|
+
isSignal: true,
|
|
9426
|
+
isRequired: false,
|
|
9427
|
+
transformFunction: null
|
|
9428
|
+
},
|
|
9367
9429
|
columns: {
|
|
9368
9430
|
classPropertyName: "columns",
|
|
9369
9431
|
publicName: "columns",
|
|
@@ -9699,6 +9761,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9699
9761
|
required: false
|
|
9700
9762
|
}]
|
|
9701
9763
|
}],
|
|
9764
|
+
tableId: [{
|
|
9765
|
+
type: i0.Input,
|
|
9766
|
+
args: [{
|
|
9767
|
+
isSignal: true,
|
|
9768
|
+
alias: "tableId",
|
|
9769
|
+
required: false
|
|
9770
|
+
}]
|
|
9771
|
+
}],
|
|
9702
9772
|
columns: [{
|
|
9703
9773
|
type: i0.Input,
|
|
9704
9774
|
args: [{
|
|
@@ -10353,7 +10423,7 @@ var UiSidebarComponent = class UiSidebarComponent {
|
|
|
10353
10423
|
})],
|
|
10354
10424
|
exportAs: ["uiSidebar"],
|
|
10355
10425
|
ngImport: i0,
|
|
10356
|
-
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",
|
|
10357
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"],
|
|
10358
10428
|
dependencies: [{
|
|
10359
10429
|
kind: "component",
|
|
@@ -10402,7 +10472,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10402
10472
|
heroChevronDoubleLeft,
|
|
10403
10473
|
heroBars3
|
|
10404
10474
|
})],
|
|
10405
|
-
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
|
|
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",
|
|
10406
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"]
|
|
10407
10477
|
}]
|
|
10408
10478
|
}],
|
|
@@ -10418,11 +10488,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10418
10488
|
args: ["isOpenChange"]
|
|
10419
10489
|
}] }
|
|
10420
10490
|
});
|
|
10421
|
-
let nextId = 0;
|
|
10491
|
+
let nextId$1 = 0;
|
|
10422
10492
|
var UiSidebarGroupComponent = class UiSidebarGroupComponent {
|
|
10423
10493
|
sidebar = inject(UiSidebarComponent, { optional: true });
|
|
10424
10494
|
label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
|
|
10425
|
-
labelId = `ui-sidebar-group-${nextId++}`;
|
|
10495
|
+
labelId = `ui-sidebar-group-${nextId$1++}`;
|
|
10426
10496
|
isCollapsed = computed(() => this.sidebar?.isCollapsed() ?? false, ...ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []);
|
|
10427
10497
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
10428
10498
|
minVersion: "12.0.0",
|
|
@@ -10446,7 +10516,7 @@ var UiSidebarGroupComponent = class UiSidebarGroupComponent {
|
|
|
10446
10516
|
transformFunction: null
|
|
10447
10517
|
} },
|
|
10448
10518
|
ngImport: i0,
|
|
10449
|
-
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",
|
|
10450
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"]
|
|
10451
10521
|
});
|
|
10452
10522
|
};
|
|
@@ -10459,7 +10529,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10459
10529
|
type: Component,
|
|
10460
10530
|
args: [{
|
|
10461
10531
|
selector: "ui-sidebar-group",
|
|
10462
|
-
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",
|
|
10463
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"]
|
|
10464
10534
|
}]
|
|
10465
10535
|
}],
|
|
@@ -12759,6 +12829,263 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12759
12829
|
}]
|
|
12760
12830
|
}
|
|
12761
12831
|
});
|
|
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 */ []);
|
|
12838
|
+
disabled = input(false, {
|
|
12839
|
+
...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
|
|
12840
|
+
transform: booleanAttribute
|
|
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
|
+
}
|
|
12885
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
12886
|
+
minVersion: "12.0.0",
|
|
12887
|
+
version: "22.2.1",
|
|
12888
|
+
ngImport: i0,
|
|
12889
|
+
type: UiSearchComponent,
|
|
12890
|
+
deps: [],
|
|
12891
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
12892
|
+
});
|
|
12893
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({
|
|
12894
|
+
minVersion: "17.0.0",
|
|
12895
|
+
version: "22.2.1",
|
|
12896
|
+
type: UiSearchComponent,
|
|
12897
|
+
isStandalone: true,
|
|
12898
|
+
selector: "ui-search",
|
|
12899
|
+
inputs: {
|
|
12900
|
+
value: {
|
|
12901
|
+
classPropertyName: "value",
|
|
12902
|
+
publicName: "value",
|
|
12903
|
+
isSignal: true,
|
|
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
|
+
});
|
|
12762
13089
|
var UiSwitchComponent = class UiSwitchComponent {
|
|
12763
13090
|
value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
12764
13091
|
id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
|
|
@@ -12883,6 +13210,356 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12883
13210
|
}]
|
|
12884
13211
|
}
|
|
12885
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
|
+
});
|
|
12886
13563
|
const UI_THEME_CONFIG = new InjectionToken("UI_THEME_CONFIG", {
|
|
12887
13564
|
providedIn: "root",
|
|
12888
13565
|
factory: () => ({ storageKey: "ui-theme" })
|
|
@@ -13282,6 +13959,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
13282
13959
|
}]
|
|
13283
13960
|
}
|
|
13284
13961
|
});
|
|
13285
|
-
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 };
|
|
13286
13963
|
|
|
13287
13964
|
//# sourceMappingURL=area8975-ui.mjs.map
|