@area8975/ui 0.1.1-dev.15 → 0.1.1-dev.17

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.
Files changed (4) hide show
  1. package/fesm2022/area8975-ui.mjs +213 -106
  2. package/fesm2022/area8975-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/area8975-ui.d.ts +4 -3
package/fesm2022/area8975-ui.mjs CHANGED
@@ -1,10 +1,12 @@
1
1
  import * as i0 from "@angular/core";
2
2
  import { ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideAppInitializer, signal, untracked, viewChild } from "@angular/core";
3
3
  import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
4
- import { NgIcon } from "@ng-icons/core";
4
+ import { NgIcon, provideIcons } from "@ng-icons/core";
5
+ import { heroArrowUp, heroArrowUpTray, heroBars2, heroBars3, heroCalendar, heroCalendarDateRange, heroCheck, heroChevronDoubleLeft, heroChevronDown, heroChevronLeft, heroChevronRight, heroChevronUp, heroChevronUpDown, heroClock, heroDocument, heroEye, heroEyeSlash, heroFunnel, heroMagnifyingGlass, heroMinus, heroPlus, heroQuestionMarkCircle, heroViewColumns, heroXMark } from "@ng-icons/heroicons/outline";
5
6
  import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
6
7
  import { Subject, catchError, debounceTime, of, skip, switchMap } from "rxjs";
7
8
  import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
9
+ import { heroCheckCircleSolid, heroExclamationTriangleSolid, heroInformationCircleSolid, heroXCircleSolid } from "@ng-icons/heroicons/solid";
8
10
  const UI_FORMAT_DEFAULTS = {
9
11
  currency: "GBP",
10
12
  locale: "en-GB"
@@ -2782,6 +2784,10 @@ var UiDropzoneComponent = class UiDropzoneComponent {
2782
2784
  value: "valueChange",
2783
2785
  rejected: "rejected"
2784
2786
  },
2787
+ providers: [provideIcons({
2788
+ heroArrowUpTray,
2789
+ heroDocument
2790
+ })],
2785
2791
  viewQueries: [{
2786
2792
  propertyName: "picker",
2787
2793
  first: true,
@@ -2816,6 +2822,10 @@ i0.ɵɵngDeclareClassMetadata({
2816
2822
  args: [{
2817
2823
  selector: "ui-dropzone",
2818
2824
  imports: [NgIcon],
2825
+ providers: [provideIcons({
2826
+ heroArrowUpTray,
2827
+ heroDocument
2828
+ })],
2819
2829
  template: "<div\n class=\"ui-dropzone\"\n role=\"button\"\n [attr.id]=\"id() || null\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-disabled]=\"disabled() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.data-dragging]=\"isDragging() ? '' : null\"\n [attr.data-invalid]=\"hasRejection() ? '' : null\"\n (click)=\"openPicker()\"\n (keydown)=\"handleKeydown($event)\"\n (dragenter)=\"handleDragEnter($event)\"\n (dragover)=\"handleDragOver($event)\"\n (dragleave)=\"handleDragLeave()\"\n (drop)=\"handleDrop($event)\"\n>\n <span class=\"ui-dropzone-icon\">\n <ng-icon [name]=\"icon()\" size=\"24\" class=\"shrink-0\" />\n </span>\n\n <span class=\"text-foreground ui-text-body\">\n {{ displayTitle() }}\n </span>\n\n @if (hint()) {\n <span class=\"text-muted-foreground-1 ui-text-caption\">\n {{ hint() }}\n </span>\n }\n</div>\n\n<input\n #picker\n type=\"file\"\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"handlePick($event)\"\n/>\n\n@if (files().length) {\n <div class=\"ui-dropzone-files\">\n <ul class=\"ui-dropzone-list\">\n @for (file of files(); track $index) {\n <li class=\"ui-dropzone-file\">\n <ng-icon\n name=\"heroDocument\"\n class=\"text-muted-foreground-1 shrink-0\"\n />\n <span class=\"text-foreground truncate ui-text-body\">\n {{ file.name }}\n </span>\n <span\n class=\"ms-auto text-muted-foreground-1 shrink-0 ui-text-caption\"\n >\n {{ file.size }}\n </span>\n </li>\n }\n </ul>\n\n @if (!disabled()) {\n <button\n type=\"button\"\n class=\"ui-dropzone-clear ui-text-caption\"\n (click)=\"clear()\"\n >\n {{ files().length > 1 ? 'Remove files' : 'Remove file' }}\n </button>\n }\n </div>\n}\n",
2820
2830
  styles: ["@layer properties;@layer components{:host{width:100%}}:host{display:flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-dropzone{display:flex;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;row-gap:var(--spacing, .25rem);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;border-color:var(--border-line-2);background-color:var(--layer);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;transition-property:colors,box-shadow;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-dropzone:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone:hover,.ui-dropzone:focus-visible{border-color:var(--color-primary-400, var(--color-blue-400))}.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in srgb,oklch(97% .014 254.604) 40%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone:hover,.ui-dropzone:focus-visible{background-color:color-mix(in oklab,var(--color-primary-50, var(--color-blue-50)) 40%,transparent)}}.ui-dropzone[data-dragging]{border-color:var(--color-primary-500, var(--color-blue-500));background-color:var(--color-primary-50, var(--color-blue-50))}.ui-dropzone[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500))}.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone[data-invalid]:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-dropzone[aria-disabled]{pointer-events:none;cursor:not-allowed;opacity:50%}.ui-dropzone-icon{margin-bottom:var(--spacing, .25rem);display:inline-flex;width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--surface);color:var(--muted-foreground-1)}.ui-dropzone[data-dragging] .ui-dropzone-icon{background-color:var(--color-primary-100, var(--color-blue-100));color:var(--color-primary-600, var(--color-blue-600))}.ui-dropzone-files{display:flex;flex-direction:column;align-items:flex-end;row-gap:var(--spacing, .25rem)}.ui-dropzone-list{width:100%;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2)}:where(.ui-dropzone-list>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.ui-dropzone-list>:not(:last-child)){border-color:var(--border-line-2)}.ui-dropzone-file{display:flex;min-width:0px;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ui-dropzone-clear{border-radius:.25rem;color:var(--muted-foreground-1)}.ui-dropzone-clear:focus{--tw-outline-style: none;outline-style:none}.ui-dropzone-clear:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-dropzone-clear:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-dropzone-clear:hover,.ui-dropzone-clear:focus-visible{color:var(--color-danger-600, var(--color-red-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-divide-y-reverse: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
2821
2831
  }]
@@ -3395,6 +3405,10 @@ var UiInputComponent = class UiInputComponent {
3395
3405
  focused: "focused",
3396
3406
  blurred: "blurred"
3397
3407
  },
3408
+ providers: [provideIcons({
3409
+ heroEyeSlash,
3410
+ heroEye
3411
+ })],
3398
3412
  queries: [{
3399
3413
  propertyName: "leadingElement",
3400
3414
  first: true,
@@ -3444,6 +3458,10 @@ i0.ɵɵngDeclareClassMetadata({
3444
3458
  args: [{
3445
3459
  selector: "ui-input",
3446
3460
  imports: [NgTemplateOutlet, NgIcon],
3461
+ providers: [provideIcons({
3462
+ heroEyeSlash,
3463
+ heroEye
3464
+ })],
3447
3465
  template: "<ng-container *ngTemplateOutlet=\"leadingElement()\"></ng-container>\n\n<input\n [value]=\"value()\"\n [class]=\"generatedClasses()\"\n [type]=\"shownType()\"\n [attr.id]=\"id() || null\"\n [attr.name]=\"name() || null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [autocomplete]=\"autocomplete()\"\n [attr.min]=\"min() === '' ? null : min()\"\n [attr.max]=\"max() === '' ? null : max()\"\n [attr.step]=\"step() === '' ? null : step()\"\n [attr.pattern]=\"pattern() || null\"\n [attr.inputmode]=\"inputmode() || null\"\n [attr.maxlength]=\"maxlength()\"\n [attr.minlength]=\"minlength()\"\n \n [attr.spellcheck]=\"spellcheck()\"\n [attr.list]=\"list() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-describedby]=\"describedBy() || null\"\n [attr.role]=\"inputRole() || null\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-controls]=\"ariaControls() || null\"\n [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n [attr.aria-autocomplete]=\"ariaAutocomplete() || null\"\n [attr.aria-haspopup]=\"ariaHasPopup() || null\"\n [attr.data-invalid]=\"validationState() === false ? '' : null\"\n [attr.data-valid]=\"validationState() === true ? '' : null\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n/>\n\n<ng-container *ngTemplateOutlet=\"trailingElement()\"></ng-container>\n\n@if (canReveal()) {\n <button\n type=\"button\"\n class=\"ui-input-reveal\"\n [attr.aria-label]=\"revealed() ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"revealed()\"\n [disabled]=\"disabled()\"\n (click)=\"revealed.set(!revealed())\"\n >\n <ng-icon [name]=\"revealed() ? 'heroEyeSlash' : 'heroEye'\" size=\"18\" class=\"shrink-0\" />\n </button>\n}\n",
3448
3466
  styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-input:disabled){opacity:50%}:host:has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-input[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-input[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-input[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-input{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent}.ui-input:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-input:focus{--tw-outline-style: none;outline-style:none}.ui-input-reveal{margin-inline-end:var(--spacing, .25rem);display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1.5);color:var(--muted-foreground-1)}.ui-input-reveal:hover{color:var(--foreground)}.ui-input-reveal:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-input-reveal:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-input-reveal:focus-visible{--tw-outline-style: none;outline-style:none}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
3449
3467
  }]
@@ -5220,6 +5238,12 @@ var UiSelectComponent = class UiSelectComponent {
5220
5238
  selectedItems: "selectedItemsChange"
5221
5239
  },
5222
5240
  host: { listeners: { "focusout": "onFocusOut($event)" } },
5241
+ providers: [provideIcons({
5242
+ heroChevronDown,
5243
+ heroXMark,
5244
+ heroCheck,
5245
+ heroPlus
5246
+ })],
5223
5247
  queries: [{
5224
5248
  propertyName: "optionTemplate",
5225
5249
  first: true,
@@ -5359,6 +5383,12 @@ i0.ɵɵngDeclareClassMetadata({
5359
5383
  NgTemplateOutlet
5360
5384
  ],
5361
5385
  host: { "(focusout)": "onFocusOut($event)" },
5386
+ providers: [provideIcons({
5387
+ heroChevronDown,
5388
+ heroXMark,
5389
+ heroCheck,
5390
+ heroPlus
5391
+ })],
5362
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",
5363
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) * 10);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:calc(var(--spacing, .25rem) * 1.5);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
5364
5394
  }]
@@ -6758,6 +6788,10 @@ var UiCalendarComponent = class UiCalendarComponent {
6758
6788
  value: "valueChange",
6759
6789
  range: "rangeChange"
6760
6790
  },
6791
+ providers: [provideIcons({
6792
+ heroChevronLeft,
6793
+ heroChevronRight
6794
+ })],
6761
6795
  ngImport: i0,
6762
6796
  template: "<div class=\"ui-calendar-header\">\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Previous month\"\n [disabled]=\"!canGoBack()\"\n (click)=\"showMonth(-1)\"\n >\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n </button>\n\n <div class=\"ui-calendar-selects\">\n <ui-select\n class=\"ui-calendar-month\"\n [dataSource]=\"monthSource()\"\n [displayWith]=\"displayMonth\"\n [pageSize]=\"12\"\n [(selectedItem)]=\"viewMonth\"\n />\n <ui-select\n class=\"ui-calendar-year\"\n [dataSource]=\"yearSource()\"\n [pageSize]=\"500\"\n [(selectedItem)]=\"viewYear\"\n />\n </div>\n\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Next month\"\n [disabled]=\"!canGoForward()\"\n (click)=\"showMonth(1)\"\n >\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n </button>\n</div>\n\n<div class=\"ui-calendar-weekdays\" aria-hidden=\"true\">\n @for (weekday of weekdays(); track $index) {\n <span class=\"ui-calendar-weekday ui-text-caption\">{{ weekday }}</span>\n }\n</div>\n\n<div class=\"ui-calendar-grid\" (mouseleave)=\"preview(null)\">\n @for (day of days(); track day.iso) {\n <button\n type=\"button\"\n class=\"ui-calendar-day ui-text-body-alt\"\n [attr.data-date]=\"day.iso\"\n [attr.data-outside]=\"day.isOutside ? '' : null\"\n [attr.data-today]=\"day.isToday ? '' : null\"\n [attr.data-in-range]=\"day.isInRange ? '' : null\"\n [attr.data-range-start]=\"day.isRangeStart ? '' : null\"\n [attr.data-range-end]=\"day.isRangeEnd ? '' : null\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.aria-pressed]=\"day.isSelected\"\n [attr.aria-label]=\"day.label\"\n [tabindex]=\"day.iso === tabbableDate() ? 0 : -1\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n (click)=\"select(day)\"\n (keydown)=\"handleKeydown($event)\"\n (mouseenter)=\"preview(day.iso)\"\n (focus)=\"preview(day.iso)\"\n >\n {{ day.day }}\n </button>\n }\n</div>\n",
6763
6797
  styles: ["@layer properties;:host{display:inline-flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-calendar-header{display:flex;align-items:center;column-gap:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem)}.ui-calendar-selects{display:flex;min-width:0px;flex:1;column-gap:var(--spacing, .25rem)}.ui-calendar-month{min-width:0px;flex:1}.ui-calendar-year{width:calc(var(--spacing, .25rem) * 24);flex-shrink:0}.ui-calendar-nav{display:inline-flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));color:var(--foreground)}.ui-calendar-nav:focus{--tw-outline-style: none;outline-style:none}.ui-calendar-nav:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-nav:disabled{pointer-events:none}.ui-calendar-nav:disabled{opacity:50%}.ui-calendar-nav:hover,.ui-calendar-nav:focus-visible{background-color:var(--surface)}.ui-calendar-weekdays,.ui-calendar-grid{display:grid;grid-template-columns:repeat(7,calc(var(--spacing, .25rem) * 10.5));justify-content:center}.ui-calendar-grid{row-gap:calc(var(--spacing, .25rem) * .5)}.ui-calendar-weekday{width:calc(var(--spacing, .25rem) * 10.5);padding-bottom:var(--spacing, .25rem);text-align:center;color:var(--muted-foreground-1)}.ui-calendar-day{position:relative;display:inline-flex;width:calc(var(--spacing, .25rem) * 10.5);height:calc(var(--spacing, .25rem) * 10.5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1.5px;border-color:transparent;color:var(--foreground);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-calendar-day:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-day:focus-visible{--tw-outline-style: none;outline-style:none}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{border-color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-disabled]{cursor:not-allowed;text-decoration-line:line-through;opacity:40%}.ui-calendar-day[aria-disabled]:hover{border-color:transparent}.ui-calendar-day[aria-disabled]:hover{color:inherit}.ui-calendar-day[data-outside]{color:var(--muted-foreground)}.ui-calendar-day[data-today]{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-pressed=true]{border-color:var(--color-primary-600, var(--color-blue-600));background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff)}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{color:var(--color-white, #fff)}.ui-calendar-day[data-in-range]{border-radius:0;background-color:var(--color-primary-100, var(--color-blue-100));color:var(--foreground)}.ui-calendar-day[data-range-start]{border-top-right-radius:0;border-bottom-right-radius:0}.ui-calendar-day[data-range-end]{border-top-left-radius:0;border-bottom-left-radius:0}.ui-calendar-day[data-range-end]:not([aria-pressed=true]){background-color:var(--color-primary-100, var(--color-blue-100))}.ui-calendar-day[data-in-range]:not(:nth-child(7n)),.ui-calendar-day[data-range-start]:not(:nth-child(7n)){--tw-shadow: 1px 0 0 var(--tw-shadow-color, var(--color-primary-100));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day[data-in-range]:nth-child(7n+1),.ui-calendar-day[data-range-end]:nth-child(7n+1){border-top-left-radius:var(--radius-full, calc(infinity * 1px));border-bottom-left-radius:var(--radius-full, calc(infinity * 1px))}.ui-calendar-day[data-in-range]:nth-child(7n),.ui-calendar-day[data-range-start]:nth-child(7n){border-top-right-radius:var(--radius-full, calc(infinity * 1px));border-bottom-right-radius:var(--radius-full, calc(infinity * 1px))}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid;--tw-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
@@ -6822,6 +6856,10 @@ i0.ɵɵngDeclareClassMetadata({
6822
6856
  args: [{
6823
6857
  selector: "ui-calendar",
6824
6858
  imports: [NgIcon, UiSelectComponent],
6859
+ providers: [provideIcons({
6860
+ heroChevronLeft,
6861
+ heroChevronRight
6862
+ })],
6825
6863
  template: "<div class=\"ui-calendar-header\">\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Previous month\"\n [disabled]=\"!canGoBack()\"\n (click)=\"showMonth(-1)\"\n >\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n </button>\n\n <div class=\"ui-calendar-selects\">\n <ui-select\n class=\"ui-calendar-month\"\n [dataSource]=\"monthSource()\"\n [displayWith]=\"displayMonth\"\n [pageSize]=\"12\"\n [(selectedItem)]=\"viewMonth\"\n />\n <ui-select\n class=\"ui-calendar-year\"\n [dataSource]=\"yearSource()\"\n [pageSize]=\"500\"\n [(selectedItem)]=\"viewYear\"\n />\n </div>\n\n <button\n type=\"button\"\n class=\"ui-calendar-nav\"\n aria-label=\"Next month\"\n [disabled]=\"!canGoForward()\"\n (click)=\"showMonth(1)\"\n >\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n </button>\n</div>\n\n<div class=\"ui-calendar-weekdays\" aria-hidden=\"true\">\n @for (weekday of weekdays(); track $index) {\n <span class=\"ui-calendar-weekday ui-text-caption\">{{ weekday }}</span>\n }\n</div>\n\n<div class=\"ui-calendar-grid\" (mouseleave)=\"preview(null)\">\n @for (day of days(); track day.iso) {\n <button\n type=\"button\"\n class=\"ui-calendar-day ui-text-body-alt\"\n [attr.data-date]=\"day.iso\"\n [attr.data-outside]=\"day.isOutside ? '' : null\"\n [attr.data-today]=\"day.isToday ? '' : null\"\n [attr.data-in-range]=\"day.isInRange ? '' : null\"\n [attr.data-range-start]=\"day.isRangeStart ? '' : null\"\n [attr.data-range-end]=\"day.isRangeEnd ? '' : null\"\n [attr.aria-current]=\"day.isToday ? 'date' : null\"\n [attr.aria-pressed]=\"day.isSelected\"\n [attr.aria-label]=\"day.label\"\n [tabindex]=\"day.iso === tabbableDate() ? 0 : -1\"\n [attr.aria-disabled]=\"day.isDisabled || null\"\n (click)=\"select(day)\"\n (keydown)=\"handleKeydown($event)\"\n (mouseenter)=\"preview(day.iso)\"\n (focus)=\"preview(day.iso)\"\n >\n {{ day.day }}\n </button>\n }\n</div>\n",
6826
6864
  styles: ["@layer properties;:host{display:inline-flex;flex-direction:column;row-gap:calc(var(--spacing, .25rem) * 2)}.ui-calendar-header{display:flex;align-items:center;column-gap:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem)}.ui-calendar-selects{display:flex;min-width:0px;flex:1;column-gap:var(--spacing, .25rem)}.ui-calendar-month{min-width:0px;flex:1}.ui-calendar-year{width:calc(var(--spacing, .25rem) * 24);flex-shrink:0}.ui-calendar-nav{display:inline-flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));color:var(--foreground)}.ui-calendar-nav:focus{--tw-outline-style: none;outline-style:none}.ui-calendar-nav:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-nav:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-nav:disabled{pointer-events:none}.ui-calendar-nav:disabled{opacity:50%}.ui-calendar-nav:hover,.ui-calendar-nav:focus-visible{background-color:var(--surface)}.ui-calendar-weekdays,.ui-calendar-grid{display:grid;grid-template-columns:repeat(7,calc(var(--spacing, .25rem) * 10.5));justify-content:center}.ui-calendar-grid{row-gap:calc(var(--spacing, .25rem) * .5)}.ui-calendar-weekday{width:calc(var(--spacing, .25rem) * 10.5);padding-bottom:var(--spacing, .25rem);text-align:center;color:var(--muted-foreground-1)}.ui-calendar-day{position:relative;display:inline-flex;width:calc(var(--spacing, .25rem) * 10.5);height:calc(var(--spacing, .25rem) * 10.5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));border-style:var(--tw-border-style);border-width:1.5px;border-color:transparent;color:var(--foreground);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.ui-calendar-day:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-calendar-day:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-calendar-day:focus-visible{--tw-outline-style: none;outline-style:none}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{border-color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day:hover,.ui-calendar-day:focus-visible{color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-disabled]{cursor:not-allowed;text-decoration-line:line-through;opacity:40%}.ui-calendar-day[aria-disabled]:hover{border-color:transparent}.ui-calendar-day[aria-disabled]:hover{color:inherit}.ui-calendar-day[data-outside]{color:var(--muted-foreground)}.ui-calendar-day[data-today]{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-primary-600, var(--color-blue-600))}.ui-calendar-day[aria-pressed=true]{border-color:var(--color-primary-600, var(--color-blue-600));background-color:var(--color-primary-600, var(--color-blue-600));color:var(--color-white, #fff)}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{border-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{background-color:var(--color-primary-700, var(--color-blue-700))}.ui-calendar-day[aria-pressed=true]:hover,.ui-calendar-day[aria-pressed=true]:focus-visible{color:var(--color-white, #fff)}.ui-calendar-day[data-in-range]{border-radius:0;background-color:var(--color-primary-100, var(--color-blue-100));color:var(--foreground)}.ui-calendar-day[data-range-start]{border-top-right-radius:0;border-bottom-right-radius:0}.ui-calendar-day[data-range-end]{border-top-left-radius:0;border-bottom-left-radius:0}.ui-calendar-day[data-range-end]:not([aria-pressed=true]){background-color:var(--color-primary-100, var(--color-blue-100))}.ui-calendar-day[data-in-range]:not(:nth-child(7n)),.ui-calendar-day[data-range-start]:not(:nth-child(7n)){--tw-shadow: 1px 0 0 var(--tw-shadow-color, var(--color-primary-100));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-calendar-day[data-in-range]:nth-child(7n+1),.ui-calendar-day[data-range-end]:nth-child(7n+1){border-top-left-radius:var(--radius-full, calc(infinity * 1px));border-bottom-left-radius:var(--radius-full, calc(infinity * 1px))}.ui-calendar-day[data-in-range]:nth-child(7n),.ui-calendar-day[data-range-start]:nth-child(7n){border-top-right-radius:var(--radius-full, calc(infinity * 1px));border-bottom-right-radius:var(--radius-full, calc(infinity * 1px))}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-border-style: solid;--tw-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
6827
6865
  }]
@@ -7027,6 +7065,87 @@ i0.ɵɵngDeclareClassMetadata({
7027
7065
  }]
7028
7066
  }]
7029
7067
  });
7068
+ var UiModalCloseButtonComponent = class UiModalCloseButtonComponent {
7069
+ isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
7070
+ static ɵfac = i0.ɵɵngDeclareFactory({
7071
+ minVersion: "12.0.0",
7072
+ version: "22.2.1",
7073
+ ngImport: i0,
7074
+ type: UiModalCloseButtonComponent,
7075
+ deps: [],
7076
+ target: i0.ɵɵFactoryTarget.Component
7077
+ });
7078
+ static ɵcmp = i0.ɵɵngDeclareComponent({
7079
+ minVersion: "17.1.0",
7080
+ version: "22.2.1",
7081
+ type: UiModalCloseButtonComponent,
7082
+ isStandalone: true,
7083
+ selector: "ui-modal-close-btn",
7084
+ inputs: { isOpen: {
7085
+ classPropertyName: "isOpen",
7086
+ publicName: "isOpen",
7087
+ isSignal: true,
7088
+ isRequired: true,
7089
+ transformFunction: null
7090
+ } },
7091
+ outputs: { isOpen: "isOpenChange" },
7092
+ providers: [provideIcons({ heroXMark })],
7093
+ ngImport: i0,
7094
+ template: "<ui-button\n appearance=\"white\"\n intent=\"secondary\"\n classes=\"p-2! border-transparent! shadow-none!\"\n (click)=\"isOpen.set(false)\"\n>\n <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n",
7095
+ dependencies: [{
7096
+ kind: "component",
7097
+ type: UiButtonComponent,
7098
+ selector: "ui-button",
7099
+ inputs: [
7100
+ "appearance",
7101
+ "intent",
7102
+ "size",
7103
+ "classes",
7104
+ "type",
7105
+ "ariaLabel",
7106
+ "disabled",
7107
+ "loading"
7108
+ ]
7109
+ }, {
7110
+ kind: "component",
7111
+ type: NgIcon,
7112
+ selector: "ng-icon",
7113
+ inputs: [
7114
+ "name",
7115
+ "svg",
7116
+ "size",
7117
+ "strokeWidth",
7118
+ "color"
7119
+ ]
7120
+ }]
7121
+ });
7122
+ };
7123
+ i0.ɵɵngDeclareClassMetadata({
7124
+ minVersion: "12.0.0",
7125
+ version: "22.2.1",
7126
+ ngImport: i0,
7127
+ type: UiModalCloseButtonComponent,
7128
+ decorators: [{
7129
+ type: Component,
7130
+ args: [{
7131
+ selector: "ui-modal-close-btn",
7132
+ imports: [UiButtonComponent, NgIcon],
7133
+ providers: [provideIcons({ heroXMark })],
7134
+ template: "<ui-button\n appearance=\"white\"\n intent=\"secondary\"\n classes=\"p-2! border-transparent! shadow-none!\"\n (click)=\"isOpen.set(false)\"\n>\n <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n"
7135
+ }]
7136
+ }],
7137
+ propDecorators: { isOpen: [{
7138
+ type: i0.Input,
7139
+ args: [{
7140
+ isSignal: true,
7141
+ alias: "isOpen",
7142
+ required: true
7143
+ }]
7144
+ }, {
7145
+ type: i0.Output,
7146
+ args: ["isOpenChange"]
7147
+ }] }
7148
+ });
7030
7149
  var UiDrawerComponent = class UiDrawerComponent {
7031
7150
  isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
7032
7151
  enableBackdrop = input(true, {
@@ -7074,33 +7193,14 @@ var UiDrawerComponent = class UiDrawerComponent {
7074
7193
  },
7075
7194
  host: { properties: { "class.open": "isOpen()" } },
7076
7195
  ngImport: i0,
7077
- template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 h-full transition-transform duration-200\"\n [class.translate-x-full]=\"!isOpen()\"\n>\n <div class=\"flex flex-col h-full\">\n <header\n class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n [class.items-start]=\"subLabel()\"\n [class.items-center]=\"!subLabel()\"\n >\n <div>\n <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n @if (subLabel()) {\n <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n }\n </div>\n <ui-button\n appearance=\"none\"\n classes=\"drawer-close-btn\"\n (click)=\"isOpen.set(false)\"\n >\n <ng-icon\n name=\"heroXMark\"\n size=\"20\"\n strokeWidth=\"2\"\n class=\"size-4 shrink-0\"\n />\n </ui-button>\n </header>\n </div>\n</aside>\n",
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",
7078
7197
  styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:100}:host.open{pointer-events:auto}::ng-deep .drawer-close-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))!important;border-color:var(--surface-line)!important;background-color:var(--surface)!important;padding:0!important;color:var(--surface-foreground)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important;--tw-ring-offset-width: 0px !important;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
7079
7198
  dependencies: [{
7080
7199
  kind: "component",
7081
- type: UiButtonComponent,
7082
- selector: "ui-button",
7083
- inputs: [
7084
- "appearance",
7085
- "intent",
7086
- "size",
7087
- "classes",
7088
- "type",
7089
- "ariaLabel",
7090
- "disabled",
7091
- "loading"
7092
- ]
7093
- }, {
7094
- kind: "component",
7095
- type: NgIcon,
7096
- selector: "ng-icon",
7097
- inputs: [
7098
- "name",
7099
- "svg",
7100
- "size",
7101
- "strokeWidth",
7102
- "color"
7103
- ]
7200
+ type: UiModalCloseButtonComponent,
7201
+ selector: "ui-modal-close-btn",
7202
+ inputs: ["isOpen"],
7203
+ outputs: ["isOpenChange"]
7104
7204
  }]
7105
7205
  });
7106
7206
  };
@@ -7113,9 +7213,9 @@ i0.ɵɵngDeclareClassMetadata({
7113
7213
  type: Component,
7114
7214
  args: [{
7115
7215
  selector: "ui-drawer",
7116
- imports: [UiButtonComponent, NgIcon],
7216
+ imports: [UiModalCloseButtonComponent],
7117
7217
  host: { "[class.open]": "isOpen()" },
7118
- template: "@if (enableBackdrop()) {\n <div\n class=\"absolute inset-0 bg-black/10 transition-opacity\"\n [class.opacity-0]=\"!isOpen()\"\n [class.pointer-events-none]=\"!isOpen()\"\n aria-hidden=\"true\"\n (click)=\"isOpen.set(false)\"\n >\n </div>\n}\n\n<aside\n class=\"right-0 absolute inset-y-0 bg-layer border-line-2 border-s w-100 h-full transition-transform duration-200\"\n [class.translate-x-full]=\"!isOpen()\"\n>\n <div class=\"flex flex-col h-full\">\n <header\n class=\"flex justify-between px-5 py-2.5 border-line-2 border-b\"\n [class.items-start]=\"subLabel()\"\n [class.items-center]=\"!subLabel()\"\n >\n <div>\n <h3 class=\"font-semibold ui-text-h3\">{{ label() }}</h3>\n\n @if (subLabel()) {\n <h4 class=\"ui-text-body\">{{ subLabel() }}</h4>\n }\n </div>\n <ui-button\n appearance=\"none\"\n classes=\"drawer-close-btn\"\n (click)=\"isOpen.set(false)\"\n >\n <ng-icon\n name=\"heroXMark\"\n size=\"20\"\n strokeWidth=\"2\"\n class=\"size-4 shrink-0\"\n />\n </ui-button>\n </header>\n </div>\n</aside>\n",
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",
7119
7219
  styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:100}:host.open{pointer-events:auto}::ng-deep .drawer-close-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))!important;border-color:var(--surface-line)!important;background-color:var(--surface)!important;padding:0!important;color:var(--surface-foreground)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important;--tw-ring-offset-width: 0px !important;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
7120
7220
  }]
7121
7221
  }],
@@ -7394,6 +7494,7 @@ var UiKpiComponent = class UiKpiComponent {
7394
7494
  }
7395
7495
  },
7396
7496
  host: { classAttribute: "block" },
7497
+ providers: [provideIcons({ heroQuestionMarkCircle })],
7397
7498
  ngImport: i0,
7398
7499
  template: "<ui-card radius=\"xl\" class=\"h-full\">\n <div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon() && iconPosition() === 'left') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n {{ label() }}\n </span>\n\n @if (hint()) {\n <ui-tooltip\n [text]=\"hint()\"\n placement=\"top\"\n trigger=\"hover\"\n >\n <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n </ui-tooltip>\n }\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"font-semibold text-foreground ui-text-h2\">\n <!-- falls back to the plain value when nothing is projected -->\n <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n </h3>\n <ng-content select=\"[kpi-badge]\"></ng-content>\n </div>\n </div>\n\n @if (icon() && iconPosition() === 'right') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n </div>\n</ui-card>\n",
7399
7500
  dependencies: [
@@ -7446,6 +7547,7 @@ i0.ɵɵngDeclareClassMetadata({
7446
7547
  UiTooltipComponent
7447
7548
  ],
7448
7549
  host: { class: "block" },
7550
+ providers: [provideIcons({ heroQuestionMarkCircle })],
7449
7551
  template: "<ui-card radius=\"xl\" class=\"h-full\">\n <div class=\"flex gap-x-4 p-4 md:p-5\">\n @if (icon() && iconPosition() === 'left') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n\n <div class=\"grow\">\n <div class=\"flex items-center gap-x-2 text-muted-foreground-2\">\n <span class=\"font-semibold ui-text-h4 text-sm uppercase\">\n {{ label() }}\n </span>\n\n @if (hint()) {\n <ui-tooltip\n [text]=\"hint()\"\n placement=\"top\"\n trigger=\"hover\"\n >\n <ng-icon name=\"heroQuestionMarkCircle\" size=\"18\" />\n </ui-tooltip>\n }\n </div>\n\n <div class=\"flex flex-wrap items-center gap-2 mt-1\">\n <h3 class=\"font-semibold text-foreground ui-text-h2\">\n <!-- falls back to the plain value when nothing is projected -->\n <ng-content select=\"[kpi-value]\">{{ value() }}</ng-content>\n </h3>\n <ng-content select=\"[kpi-badge]\"></ng-content>\n </div>\n </div>\n\n @if (icon() && iconPosition() === 'right') {\n <div class=\"flex justify-center items-center bg-surface rounded-lg size-12 shrink-0\">\n <ng-icon\n [name]=\"icon()\"\n size=\"32\"\n class=\"size-8 text-muted-foreground-2 shrink-0\"\n strokeWidth=\"1.5\"\n />\n </div>\n }\n </div>\n</ui-card>\n"
7450
7552
  }]
7451
7553
  }],
@@ -7563,85 +7665,6 @@ const UI_LOADING_TYPES = [
7563
7665
  "bouncing-dots",
7564
7666
  "fading-dots"
7565
7667
  ];
7566
- var UiModalCloseButtonComponent = class UiModalCloseButtonComponent {
7567
- isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
7568
- static ɵfac = i0.ɵɵngDeclareFactory({
7569
- minVersion: "12.0.0",
7570
- version: "22.2.1",
7571
- ngImport: i0,
7572
- type: UiModalCloseButtonComponent,
7573
- deps: [],
7574
- target: i0.ɵɵFactoryTarget.Component
7575
- });
7576
- static ɵcmp = i0.ɵɵngDeclareComponent({
7577
- minVersion: "17.1.0",
7578
- version: "22.2.1",
7579
- type: UiModalCloseButtonComponent,
7580
- isStandalone: true,
7581
- selector: "ui-modal-close-btn",
7582
- inputs: { isOpen: {
7583
- classPropertyName: "isOpen",
7584
- publicName: "isOpen",
7585
- isSignal: true,
7586
- isRequired: true,
7587
- transformFunction: null
7588
- } },
7589
- outputs: { isOpen: "isOpenChange" },
7590
- ngImport: i0,
7591
- template: "<ui-button\n appearance=\"white\"\n intent=\"secondary\"\n classes=\"p-2! border-transparent! shadow-none!\"\n (click)=\"isOpen.set(false)\"\n>\n <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n",
7592
- dependencies: [{
7593
- kind: "component",
7594
- type: UiButtonComponent,
7595
- selector: "ui-button",
7596
- inputs: [
7597
- "appearance",
7598
- "intent",
7599
- "size",
7600
- "classes",
7601
- "type",
7602
- "ariaLabel",
7603
- "disabled",
7604
- "loading"
7605
- ]
7606
- }, {
7607
- kind: "component",
7608
- type: NgIcon,
7609
- selector: "ng-icon",
7610
- inputs: [
7611
- "name",
7612
- "svg",
7613
- "size",
7614
- "strokeWidth",
7615
- "color"
7616
- ]
7617
- }]
7618
- });
7619
- };
7620
- i0.ɵɵngDeclareClassMetadata({
7621
- minVersion: "12.0.0",
7622
- version: "22.2.1",
7623
- ngImport: i0,
7624
- type: UiModalCloseButtonComponent,
7625
- decorators: [{
7626
- type: Component,
7627
- args: [{
7628
- selector: "ui-modal-close-btn",
7629
- imports: [UiButtonComponent, NgIcon],
7630
- template: "<ui-button\n appearance=\"white\"\n intent=\"secondary\"\n classes=\"p-2! border-transparent! shadow-none!\"\n (click)=\"isOpen.set(false)\"\n>\n <ng-icon name=\"heroXMark\" strokeWidth=\"2.5\" />\n</ui-button>\n"
7631
- }]
7632
- }],
7633
- propDecorators: { isOpen: [{
7634
- type: i0.Input,
7635
- args: [{
7636
- isSignal: true,
7637
- alias: "isOpen",
7638
- required: true
7639
- }]
7640
- }, {
7641
- type: i0.Output,
7642
- args: ["isOpenChange"]
7643
- }] }
7644
- });
7645
7668
  var UiModalComponent = class UiModalComponent {
7646
7669
  isOpen = model.required(...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
7647
7670
  closeBehaviour = input("whenClickOutside", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
@@ -8153,6 +8176,10 @@ var UiPaginationComponent = class UiPaginationComponent {
8153
8176
  },
8154
8177
  classAttribute: "ui-pagination"
8155
8178
  },
8179
+ providers: [provideIcons({
8180
+ heroChevronLeft,
8181
+ heroChevronRight
8182
+ })],
8156
8183
  ngImport: i0,
8157
8184
  template: "<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isFirstPage()\"\n (click)=\"goToPage(page() - 1)\"\n>\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n</ui-button>\n\n@for (item of items(); track $index) {\n @if (item === 'ellipsis') {\n <span class=\"ui-text-body ui-pagination-ellipsis\">…</span>\n } @else {\n <ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [class.active]=\"item === page()\"\n (click)=\"goToPage(item)\"\n >\n {{ item + 1 }}\n </ui-button>\n }\n}\n\n<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isLastPage()\"\n (click)=\"goToPage(page() + 1)\"\n>\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n</ui-button>\n",
8158
8185
  styles: ["@layer properties;:host(.ui-pagination){display:flex;align-items:center;column-gap:var(--spacing, .25rem)}::ng-deep .ui-pagination--goto-btn{min-height:calc(var(--spacing, .25rem) * 9.5);min-width:calc(var(--spacing, .25rem) * 9.5);justify-content:center!important;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent!important;padding-inline:calc(var(--spacing, .25rem) * 2.5)!important;padding-block:calc(var(--spacing, .25rem) * 2)!important;color:var(--foreground)!important}::ng-deep .active>.ui-pagination--goto-btn{border-color:var(--border-line-2)!important}.ui-pagination-page{min-width:calc(var(--spacing, .25rem) * 9);justify-content:center}.ui-pagination-ellipsis{display:inline-flex;min-width:calc(var(--spacing, .25rem) * 9);justify-content:center;color:var(--muted-foreground-1)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
@@ -8199,6 +8226,10 @@ i0.ɵɵngDeclareClassMetadata({
8199
8226
  "aria-label": "Pagination",
8200
8227
  class: "ui-pagination"
8201
8228
  },
8229
+ providers: [provideIcons({
8230
+ heroChevronLeft,
8231
+ heroChevronRight
8232
+ })],
8202
8233
  template: "<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isFirstPage()\"\n (click)=\"goToPage(page() - 1)\"\n>\n <ng-icon name=\"heroChevronLeft\" class=\"shrink-0\" />\n</ui-button>\n\n@for (item of items(); track $index) {\n @if (item === 'ellipsis') {\n <span class=\"ui-text-body ui-pagination-ellipsis\">…</span>\n } @else {\n <ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [class.active]=\"item === page()\"\n (click)=\"goToPage(item)\"\n >\n {{ item + 1 }}\n </ui-button>\n }\n}\n\n<ui-button\n appearance=\"none\"\n classes=\"ui-pagination--goto-btn ui-text-body\"\n [disabled]=\"isLastPage()\"\n (click)=\"goToPage(page() + 1)\"\n>\n <ng-icon name=\"heroChevronRight\" class=\"shrink-0\" />\n</ui-button>\n",
8203
8234
  styles: ["@layer properties;:host(.ui-pagination){display:flex;align-items:center;column-gap:var(--spacing, .25rem)}::ng-deep .ui-pagination--goto-btn{min-height:calc(var(--spacing, .25rem) * 9.5);min-width:calc(var(--spacing, .25rem) * 9.5);justify-content:center!important;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent!important;padding-inline:calc(var(--spacing, .25rem) * 2.5)!important;padding-block:calc(var(--spacing, .25rem) * 2)!important;color:var(--foreground)!important}::ng-deep .active>.ui-pagination--goto-btn{border-color:var(--border-line-2)!important}.ui-pagination-page{min-width:calc(var(--spacing, .25rem) * 9);justify-content:center}.ui-pagination-ellipsis{display:inline-flex;min-width:calc(var(--spacing, .25rem) * 9);justify-content:center;color:var(--muted-foreground-1)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
8204
8235
  }]
@@ -9460,6 +9491,15 @@ var UiTableComponent = class UiTableComponent {
9460
9491
  rowsReordered: "rowsReordered"
9461
9492
  },
9462
9493
  host: { classAttribute: "block" },
9494
+ providers: [provideIcons({
9495
+ heroMagnifyingGlass,
9496
+ heroFunnel,
9497
+ heroViewColumns,
9498
+ heroBars2,
9499
+ heroChevronUpDown,
9500
+ heroChevronUp,
9501
+ heroChevronDown
9502
+ })],
9463
9503
  ngImport: i0,
9464
9504
  template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <ng-icon\n [name]=\"sortIcon(column)\"\n class=\"ms-auto size-4 shrink-0\"\n />\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
9465
9505
  styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
@@ -9636,6 +9676,15 @@ i0.ɵɵngDeclareClassMetadata({
9636
9676
  UiLoadingComponent
9637
9677
  ],
9638
9678
  host: { class: "block" },
9679
+ providers: [provideIcons({
9680
+ heroMagnifyingGlass,
9681
+ heroFunnel,
9682
+ heroViewColumns,
9683
+ heroBars2,
9684
+ heroChevronUpDown,
9685
+ heroChevronUp,
9686
+ heroChevronDown
9687
+ })],
9639
9688
  template: "@if (searchable() || hasFilterableColumns() || toggleableColumns()) {\n <div class=\"ui-table-toolbar\">\n @if (searchable()) {\n <ui-input\n [value]=\"query()\"\n (valueChange)=\"onQueryChange($event)\"\n [placeholder]=\"searchPlaceholder()\"\n class=\"max-w-xs\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroMagnifyingGlass\"\n class=\"ms-3 size-4 text-muted-foreground-1\"\n />\n </ng-template>\n </ui-input>\n }\n\n @if (hasFilterableColumns()) {\n <ui-dropdown\n [isOpen]=\"filterMenuOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"filterMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroFunnel\" class=\"size-4\" />\n Filters\n @if (activeFilterCount()) {\n <span class=\"ui-table-filter-count ui-text-caption\">\n {{ activeFilterCount() }}\n </span>\n }\n </ui-button>\n\n @if (filterMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-table-filter-menu\">\n @for (column of filterableColumns(); track column.id) {\n <div class=\"flex flex-col gap-1\">\n <span\n class=\"text-muted-foreground-1 ui-text-caption\"\n >\n {{ column.header }}\n </span>\n\n @if (column.filterOptions) {\n <ui-select\n [dataSource]=\"filterDataSource(column)\"\n [selectedItem]=\"selectedFilterOption(column)\"\n (selectionChange)=\"onFilterSelect(column.id, $event)\"\n [displayWith]=\"filterOptionLabel\"\n [clearable]=\"true\"\n clearLabel=\"All\"\n placeholder=\"All\"\n />\n } @else {\n <ui-input\n [value]=\"filterValue(column.id)\"\n (valueChange)=\"onFilterInput(column.id, $event)\"\n placeholder=\"Filter...\"\n [ariaLabel]=\"'Filter ' + column.header\"\n />\n }\n </div>\n }\n\n @if (activeFilterCount()) {\n <ui-button\n appearance=\"link\"\n intent=\"secondary\"\n class=\"text-end\"\n classes=\"self-end p-0! text-sm\"\n (click)=\"clearFilters()\"\n >\n Clear filters\n </ui-button>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n\n @if (toggleableColumns()) {\n <ui-dropdown\n [isOpen]=\"columnMenuOpen\"\n placement=\"bottom-end\"\n closeBehaviour=\"whenClickOutside\"\n class=\"ms-auto\"\n >\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n (click)=\"columnMenuOpen.update(open => !open)\"\n >\n <ng-icon name=\"heroViewColumns\" class=\"size-4\" />\n Columns\n </ui-button>\n\n @if (columnMenuOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"bg-layer shadow-xs py-1 border border-dropdown-divider rounded-lg min-w-40\">\n @for (column of hideableColumns(); track column.id) {\n <label\n class=\"flex items-center gap-2 hover:bg-dropdown-item-hover px-3 py-2 ui-text-body-alt cursor-pointer\"\n >\n <ui-checkbox\n [value]=\"isColumnVisible(column)\"\n (valueChange)=\"toggleColumnVisibility(column)\"\n />\n {{ column.header }}\n </label>\n }\n </div>\n </div>\n }\n </ui-dropdown>\n }\n </div>\n}\n\n<div class=\"ui-table-scroll\">\n <table [class]=\"generatedClasses()\">\n <colgroup>\n @if (selectable()) {\n <col [style.width.px]=\"44\" />\n }\n\n @for (column of renderColumns(); track column.id) {\n <col [style.width.px]=\"columnWidth(column)\" />\n }\n\n @if (hasActions()) {\n <col [style.width.px]=\"actionsColumnWidth()\" />\n }\n </colgroup>\n\n <thead [class.ui-table-sticky]=\"stickyHeader()\">\n <tr>\n @if (selectable()) {\n <th class=\"text-center! ui-table-select-cell\">\n <ui-checkbox\n [value]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (valueChange)=\"toggleSelectAll()\"\n />\n </th>\n }\n\n @for (column of renderColumns(); track column.id) {\n <th\n scope=\"col\"\n [attr.data-column-id]=\"column.id\"\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [class.ui-table-column-dragging]=\"draggedColumnId() === column.id\"\n [class.ui-table-column-drag-over]=\"dragOverColumnId() === column.id\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n <div class=\"ui-table-th-content\">\n @if (reorderableColumns() && column.reorderable !== false) {\n <ng-icon\n name=\"heroBars2\"\n class=\"ui-table-drag-handle\"\n (pointerdown)=\"onColumnDragStart($event, column)\"\n />\n }\n\n @if (column.sortable) {\n <ui-button\n appearance=\"none\"\n classes=\"flex items-center gap-1 p-0! border-transparent! rounded-none! cursor-pointer hocus:text-foreground\"\n (click)=\"toggleSort(column)\"\n >\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n <ng-icon\n [name]=\"sortIcon(column)\"\n class=\"ms-auto size-4 shrink-0\"\n />\n </ui-button>\n } @else {\n <span\n class=\"font-medium text-muted-foreground-1 ui-text-caption ui-text-caption uppercase\"\n >\n {{ column.header }}\n </span>\n }\n </div>\n\n @if (column.resizable) {\n <span\n class=\"ui-table-resize-handle\"\n (pointerdown)=\"startResize($event, column)\"\n ></span>\n }\n </th>\n }\n\n @if (hasActions()) {\n <th class=\"ui-table-actions-cell\"></th>\n }\n </tr>\n </thead>\n\n <tbody class=\"ui-text-body-alt\">\n @if (loading()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n <ui-loading type=\"loading-dots\" />\n </td>\n </tr>\n } @else if (error()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status ui-table-status-error\"\n >\n {{ errorMessage() }}\n <ui-button\n appearance=\"link\"\n intent=\"danger\"\n classes=\"ms-1 p-0! text-sm underline\"\n (click)=\"reload()\"\n >\n Retry\n </ui-button>\n </td>\n </tr>\n } @else if (isEmpty()) {\n <tr>\n <td\n [attr.colspan]=\"renderColumns().length + (selectable() ? 1 : 0) + (hasActions() ? 1 : 0)\"\n class=\"ui-table-status\"\n >\n {{ emptyMessage() }}\n </td>\n </tr>\n } @else {\n @for (row of rows(); track rowId()(row, $index); let i = $index) {\n <tr\n [class.ui-table-row-selected]=\"isRowSelected(row, i)\"\n [class.ui-table-row-dragging]=\"draggedRowIndex() === i\"\n [draggable]=\"canReorderRows()\"\n (dragstart)=\"onRowDragStart($event, i)\"\n (dragover)=\"onRowDragOver($event)\"\n (drop)=\"onRowDrop($event, i)\"\n >\n @if (selectable()) {\n <td class=\"ui-table-select-cell\">\n <ui-checkbox\n [value]=\"isRowSelected(row, i)\"\n (valueChange)=\"toggleRow(row, i)\"\n />\n </td>\n }\n\n @for (column of renderColumns(); track column.id) {\n <td\n [class.ui-table-pinned]=\"isPinned(column)\"\n [attr.data-pin]=\"column.pin || null\"\n [style.left.px]=\"leftOffset(column)\"\n [style.right.px]=\"rightOffset(column)\"\n >\n @if (column.displayType === 'icon') {\n <ng-icon\n [name]=\"cellIconValue(column, row)\"\n class=\"size-4\"\n />\n } @else {\n {{ formattedCellValue(column, row) }}\n }\n </td>\n }\n\n @if (hasActions()) {\n <td class=\"ui-table-actions-cell\">\n @for (action of actions(); track action.id) {\n <ui-button\n appearance=\"none\"\n classes=\"p-1.5! border-transparent! rounded-md! text-muted-foreground-1 cursor-pointer hocus:bg-surface hocus:text-foreground disabled:opacity-40! disabled:cursor-not-allowed\"\n [disabled]=\"!!action.disabled?.(row)\"\n [ariaLabel]=\"action.label\"\n [title]=\"action.label\"\n (click)=\"action.onClick(row)\"\n >\n <ng-icon\n [name]=\"action.icon\"\n class=\"size-4\"\n />\n </ui-button>\n }\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n\n@if (dragPreview(); as preview) {\n <div\n class=\"ui-table-drag-preview ui-text-body-alt\"\n [style.left.px]=\"preview.x\"\n [style.top.px]=\"preview.y\"\n [style.width.px]=\"preview.width\"\n [style.height.px]=\"preview.height\"\n >\n <ng-icon name=\"heroBars2\" class=\"ui-table-drag-preview-icon\" />\n <span class=\"truncate\">{{ preview.label }}</span>\n </div>\n}\n\n@if (paginated()) {\n <div class=\"ui-table-footer\">\n <span class=\"text-muted-foreground-1 ui-text-caption\">{{\n resultsLabel()\n }}</span>\n\n <div class=\"ui-table-pagination\">\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() === 0\"\n (click)=\"goToPage(currentPage() - 1)\"\n >\n Prev\n </ui-button>\n\n <span class=\"ui-text-body-alt\">Page {{ currentPage() + 1 }} of {{\n totalPages()\n }}</span>\n\n <ui-button\n size=\"sm\"\n appearance=\"white\"\n intent=\"secondary\"\n [disabled]=\"currentPage() + 1 >= totalPages()\"\n (click)=\"goToPage(currentPage() + 1)\"\n >\n Next\n </ui-button>\n </div>\n </div>\n}\n",
9640
9689
  styles: ["@layer properties;:host{min-width:100%}.ui-table-toolbar{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-scroll{overflow-x:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--table-line)}.ui-table-scroll::-webkit-scrollbar{height:calc(var(--spacing, .25rem) * 2)}.ui-table-scroll::-webkit-scrollbar-thumb{border-radius:0}.ui-table-scroll::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb)}.ui-table-scroll::-webkit-scrollbar-track{background-color:var(--scrollbar-track)}.ui-table-scroll:has(.ui-table-sticky){max-height:480px}.ui-table{min-width:100%}.ui-table thead{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--table-line);background-color:var(--muted)}.ui-table thead.ui-table-sticky{position:sticky;top:0;z-index:20}.ui-table th{padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start}.ui-table td{overflow:hidden;text-overflow:ellipsis;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4);white-space:nowrap}:where(.ui-table tbody>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-color:var(--table-line)}.ui-table tbody tr:last-child{border-bottom-style:var(--tw-border-style)!important;border-bottom-width:0px!important}.ui-table tbody tr:hover{background-color:var(--muted)}.ui-table-row-selected{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-row-dragging{opacity:40%}.ui-table-pinned{position:sticky;z-index:10;background-color:var(--layer)}.ui-table-row-selected .ui-table-pinned{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table th.ui-table-pinned{position:sticky;z-index:30;background-color:var(--muted)}.ui-table [data-pin=left]{border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--border-line-2)}.ui-table [data-pin=right]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--border-line-2)}.ui-table-th-content{display:flex;align-items:center;gap:var(--spacing, .25rem)}.ui-table-drag-handle{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:grab;color:var(--muted-foreground-1)}.ui-table-column-dragging{opacity:40%}.ui-table-column-drag-over{background-color:var(--color-primary-50, var(--color-blue-50))}.ui-table-drag-preview{pointer-events:none;position:fixed;z-index:50;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);padding-right:calc(var(--spacing, .25rem) * 3);padding-left:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-drag-preview-icon{width:calc(var(--spacing, .25rem) * 3.5);height:calc(var(--spacing, .25rem) * 3.5);flex-shrink:0;color:var(--color-primary-500, var(--color-blue-500))}.ui-table-resize-handle{position:absolute;top:0;right:0;height:100%;width:calc(var(--spacing, .25rem) * 1.5);cursor:col-resize}.ui-table-resize-handle:hover,.ui-table-resize-handle:focus-visible{background-color:var(--color-primary-300, var(--color-blue-300))}.ui-table-filter-menu{display:flex;width:calc(var(--spacing, .25rem) * 64);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--dropdown-divider);background-color:var(--layer);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-table-filter-count{display:inline-flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px));background-color:var(--color-primary-50, var(--color-blue-50));padding-inline:var(--spacing, .25rem);color:var(--color-primary-600, var(--color-blue-600))}.ui-table-select-cell,.ui-table-actions-cell{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center}.ui-table-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacing, .25rem)}.ui-table-status{padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;color:var(--muted-foreground-1)}.ui-table-status-error{color:var(--color-danger-500, var(--color-red-500))}.ui-table-footer{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}.ui-table-pagination{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-divide-y-reverse: 0;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
9641
9690
  }]
@@ -9952,6 +10001,13 @@ var UiToastComponent = class UiToastComponent {
9952
10001
  "focusin": "setFocused(true)",
9953
10002
  "focusout": "setFocused(false)"
9954
10003
  } },
10004
+ providers: [provideIcons({
10005
+ heroInformationCircleSolid,
10006
+ heroCheckCircleSolid,
10007
+ heroExclamationTriangleSolid,
10008
+ heroXCircleSolid,
10009
+ heroXMark
10010
+ })],
9955
10011
  ngImport: i0,
9956
10012
  template: "<ui-card\n radius=\"xl\"\n class=\"p-4 w-full max-w-xs\"\n [class]=\"classes()\"\n [attr.role]=\"role()\"\n tabindex=\"-1\"\n>\n <div class=\"flex gap-x-3\">\n <div class=\"inline-flex\" [class]=\"iconColour()\">\n <ng-icon\n [name]=\"icon()\"\n class=\"shrink-0\"\n size=\"24\"\n />\n </div>\n <div class=\"grow\">\n <p class=\"text-layer-foreground ui-text-body\">\n <ng-content />\n </p>\n </div>\n @if (dismissable()) {\n <button\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"dismissed.emit()\"\n >\n <ng-icon name=\"heroXMark\" />\n </button>\n }\n </div>\n</ui-card>\n",
9957
10013
  dependencies: [{
@@ -9989,6 +10045,13 @@ i0.ɵɵngDeclareClassMetadata({
9989
10045
  "(focusin)": "setFocused(true)",
9990
10046
  "(focusout)": "setFocused(false)"
9991
10047
  },
10048
+ providers: [provideIcons({
10049
+ heroInformationCircleSolid,
10050
+ heroCheckCircleSolid,
10051
+ heroExclamationTriangleSolid,
10052
+ heroXCircleSolid,
10053
+ heroXMark
10054
+ })],
9992
10055
  template: "<ui-card\n radius=\"xl\"\n class=\"p-4 w-full max-w-xs\"\n [class]=\"classes()\"\n [attr.role]=\"role()\"\n tabindex=\"-1\"\n>\n <div class=\"flex gap-x-3\">\n <div class=\"inline-flex\" [class]=\"iconColour()\">\n <ng-icon\n [name]=\"icon()\"\n class=\"shrink-0\"\n size=\"24\"\n />\n </div>\n <div class=\"grow\">\n <p class=\"text-layer-foreground ui-text-body\">\n <ng-content />\n </p>\n </div>\n @if (dismissable()) {\n <button\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"dismissed.emit()\"\n >\n <ng-icon name=\"heroXMark\" />\n </button>\n }\n </div>\n</ui-card>\n"
9993
10056
  }]
9994
10057
  }],
@@ -10284,6 +10347,10 @@ var UiSidebarComponent = class UiSidebarComponent {
10284
10347
  listeners: { "document:keydown.escape": "isOpen.set(false)" },
10285
10348
  properties: { "class.open": "isOpen()" }
10286
10349
  },
10350
+ providers: [provideIcons({
10351
+ heroChevronDoubleLeft,
10352
+ heroBars3
10353
+ })],
10287
10354
  exportAs: ["uiSidebar"],
10288
10355
  ngImport: i0,
10289
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 <!-- app content, e.g. an account menu, hidden when nothing is projected -->\n <div class=\"ui-sidebar-footer-content\">\n <ng-content select=\"[sidebar-footer]\" />\n </div>\n\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"justify-center size-10 p-0!\"\n [ariaLabel]=\"isOpen() ? 'Collapse sidebar' : 'Expand sidebar'\"\n (click)=\"toggle()\"\n >\n <ng-icon\n name=\"heroChevronDoubleLeft\"\n size=\"16\"\n strokeWidth=\"2\"\n class=\"duration-300 shrink-0\"\n [class.rotate-180]=\"!isOpen()\"\n />\n </ui-button>\n </footer>\n</aside>\n\n@if (!isOpen()) {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n class=\"ui-sidebar-open-btn\"\n classes=\"p-3! rounded-full! shadow-lg!\"\n ariaLabel=\"Open sidebar\"\n (click)=\"isOpen.set(true)\"\n >\n <ng-icon name=\"heroBars3\" size=\"20\" strokeWidth=\"2\" class=\"shrink-0\" />\n </ui-button>\n}\n",
@@ -10331,6 +10398,10 @@ i0.ɵɵngDeclareClassMetadata({
10331
10398
  "[class.open]": "isOpen()",
10332
10399
  "(document:keydown.escape)": "isOpen.set(false)"
10333
10400
  },
10401
+ providers: [provideIcons({
10402
+ heroChevronDoubleLeft,
10403
+ heroBars3
10404
+ })],
10334
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 <!-- app content, e.g. an account menu, hidden when nothing is projected -->\n <div class=\"ui-sidebar-footer-content\">\n <ng-content select=\"[sidebar-footer]\" />\n </div>\n\n <ui-button\n appearance=\"ghost\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"justify-center size-10 p-0!\"\n [ariaLabel]=\"isOpen() ? 'Collapse sidebar' : 'Expand sidebar'\"\n (click)=\"toggle()\"\n >\n <ng-icon\n name=\"heroChevronDoubleLeft\"\n size=\"16\"\n strokeWidth=\"2\"\n class=\"duration-300 shrink-0\"\n [class.rotate-180]=\"!isOpen()\"\n />\n </ui-button>\n </footer>\n</aside>\n\n@if (!isOpen()) {\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n class=\"ui-sidebar-open-btn\"\n classes=\"p-3! rounded-full! shadow-lg!\"\n ariaLabel=\"Open sidebar\"\n (click)=\"isOpen.set(true)\"\n >\n <ng-icon name=\"heroBars3\" size=\"20\" strokeWidth=\"2\" class=\"shrink-0\" />\n </ui-button>\n}\n",
10335
10406
  styles: ["@layer properties;:host{pointer-events:none;position:fixed;inset:0;z-index:50}@media(width>=48rem){:host{pointer-events:auto}}@media(width>=48rem){:host{position:static}}@media(width>=48rem){:host{display:block}}@media(width>=48rem){:host{height:100%}}.ui-sidebar-backdrop{position:absolute;inset:0;background-color:color-mix(in srgb,#000 10%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@supports (color: color-mix(in lab,red,red)){.ui-sidebar-backdrop{background-color:color-mix(in oklab,var(--color-black, #000) 10%,transparent)}}@media(width>=48rem){.ui-sidebar-backdrop{display:none}}:host(.open) .ui-sidebar-backdrop{pointer-events:auto;opacity:100%}.ui-sidebar-panel{pointer-events:auto;position:absolute;inset-block:0px;left:0;display:flex;height:100%;width:calc(var(--spacing, .25rem) * 60);--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y);flex-direction:column;border-right-style:var(--tw-border-style);border-right-width:1px;border-color:var(--sidebar-line);background-color:var(--sidebar);transition-property:translate,width,visibility;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}@media(width<48rem){.ui-sidebar-panel{visibility:hidden}}@media(width>=48rem){.ui-sidebar-panel{position:relative}}@media(width>=48rem){.ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 16)}}@media(width>=48rem){.ui-sidebar-panel{translate:none}}@media(width<48rem){:host(.open) .ui-sidebar-panel{visibility:visible;--tw-translate-x: 0px;translate:var(--tw-translate-x) var(--tw-translate-y)}}@media(width>=48rem){:host(.open) .ui-sidebar-panel{width:calc(var(--spacing, .25rem) * 60)}}.ui-sidebar-content{display:flex;min-height:0px;flex-grow:1;flex-direction:column;align-items:flex-start;row-gap:var(--spacing, .25rem);overflow-x:hidden;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-content{align-items:stretch}.ui-sidebar-footer{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}:host(.open) .ui-sidebar-footer{flex-direction:row;justify-content:flex-end}.ui-sidebar-footer-content{display:flex;min-width:0px;justify-content:center}.ui-sidebar-footer-content:empty{display:none}:host(.open) .ui-sidebar-footer-content{flex-grow:1;justify-content:flex-start}.ui-sidebar-open-btn{pointer-events:auto;position:fixed;bottom:calc(var(--spacing, .25rem) * 4);left:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.ui-sidebar-open-btn{display:none}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
10336
10407
  }]
@@ -10764,6 +10835,10 @@ var UiCounterComponent = class UiCounterComponent {
10764
10835
  }
10765
10836
  },
10766
10837
  outputs: { value: "valueChange" },
10838
+ providers: [provideIcons({
10839
+ heroPlus,
10840
+ heroMinus
10841
+ })],
10767
10842
  queries: [{
10768
10843
  propertyName: "leadingElement",
10769
10844
  first: true,
@@ -10862,6 +10937,10 @@ i0.ɵɵngDeclareClassMetadata({
10862
10937
  NgTemplateOutlet,
10863
10938
  NgIcon
10864
10939
  ],
10940
+ providers: [provideIcons({
10941
+ heroPlus,
10942
+ heroMinus
10943
+ })],
10865
10944
  template: "<ui-input\n [(value)]=\"value\"\n [placeholder]=\"placeholder()\"\n type=\"number\"\n classes=\"[&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [appearance:textfield]\"\n>\n <ng-template #leading>\n <ng-container *ngTemplateOutlet=\"leadingElement()\" />\n </ng-template>\n <ng-template #trailing>\n <ng-container *ngTemplateOutlet=\"trailingElement()\" />\n\n <div class=\"flex self-stretch ms-2\">\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center w-8\"\n (click)=\"onStepUp()\"\n >\n <ng-icon name=\"heroPlus\" class=\"shrink-0\" />\n </button>\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center w-8\"\n (click)=\"onStepDown()\"\n >\n <ng-icon name=\"heroMinus\" class=\"shrink-0\" />\n </button>\n </div>\n </ng-template>\n</ui-input>\n"
10866
10945
  }]
10867
10946
  }],
@@ -11123,6 +11202,10 @@ var UiDateRangePickerComponent = class UiDateRangePickerComponent {
11123
11202
  },
11124
11203
  outputs: { value: "valueChange" },
11125
11204
  host: { classAttribute: "block" },
11205
+ providers: [provideIcons({
11206
+ heroCalendarDateRange,
11207
+ heroXMark
11208
+ })],
11126
11209
  viewQueries: [{
11127
11210
  propertyName: "calendar",
11128
11211
  first: true,
@@ -11244,6 +11327,10 @@ i0.ɵɵngDeclareClassMetadata({
11244
11327
  NgIcon
11245
11328
  ],
11246
11329
  host: { class: "block" },
11330
+ providers: [provideIcons({
11331
+ heroCalendarDateRange,
11332
+ heroXMark
11333
+ })],
11247
11334
  template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n class=\"w-full\"\n>\n <ui-input\n [value]=\"display()\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n ariaHasPopup=\"dialog\"\n [validationState]=\"validationState()\"\n classes=\"cursor-pointer\"\n autocomplete=\"off\"\n readonly\n (click)=\"toggle()\"\n (keydown)=\"handleInputKeydown($event)\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroCalendarDateRange\"\n class=\"ms-3 text-muted-foreground-1 shrink-0\"\n />\n </ng-template>\n\n <ng-template #trailing>\n @if (clearable() && hasValue() && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center w-8 self-stretch text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear dates\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <div class=\"ui-date-range-panel\">\n @if (presets().length) {\n <div class=\"ui-date-range-presets\" role=\"group\" aria-label=\"Quick ranges\">\n @for (preset of presets(); track preset.label; let index = $index) {\n <button\n type=\"button\"\n class=\"ui-date-range-preset ui-text-body-alt\"\n [attr.aria-pressed]=\"index === activePreset()\"\n (click)=\"choosePreset(preset)\"\n (keydown)=\"handlePanelKeydown($event)\"\n >\n {{ preset.label }}\n </button>\n }\n </div>\n }\n\n <ui-calendar\n class=\"p-3\"\n mode=\"range\"\n [(range)]=\"value\"\n [min]=\"min()\"\n [max]=\"max()\"\n [isDateDisabled]=\"isDateDisabled()\"\n [weekStart]=\"weekStart()\"\n [locale]=\"locale()\"\n (rangeChange)=\"handleRange($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n </div>\n </div>\n }\n</ui-dropdown>\n",
11248
11335
  styles: ["@layer properties;@layer components{:host{width:100%}}.ui-date-range-panel{display:flex;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-date-range-presets{display:flex;min-width:calc(var(--spacing, .25rem) * 36);flex-direction:column;row-gap:calc(var(--spacing, .25rem) * .5);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--border-line-2);padding:calc(var(--spacing, .25rem) * 2)}.ui-date-range-preset{border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left;white-space:nowrap;color:var(--foreground)}.ui-date-range-preset:focus{--tw-outline-style: none;outline-style:none}.ui-date-range-preset:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-date-range-preset:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-date-range-preset:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-date-range-preset:hover,.ui-date-range-preset:focus-visible{background-color:var(--surface)}.ui-date-range-preset[aria-pressed=true]{background-color:var(--color-primary-50, var(--color-blue-50));color:var(--color-primary-700, var(--color-blue-700))}.ui-date-range-preset[aria-pressed=true]:hover,.ui-date-range-preset[aria-pressed=true]:focus-visible{background-color:var(--color-primary-100, var(--color-blue-100))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
11249
11336
  }]
@@ -11502,6 +11589,7 @@ var UiTimeSelectComponent = class UiTimeSelectComponent {
11502
11589
  },
11503
11590
  outputs: { value: "valueChange" },
11504
11591
  host: { classAttribute: "inline-flex items-center gap-x-1" },
11592
+ providers: [provideIcons({ heroClock })],
11505
11593
  ngImport: i0,
11506
11594
  template: "<ng-icon name=\"heroClock\" class=\"me-1 text-muted-foreground-1 shrink-0\" />\n\n<ui-select\n class=\"ui-time-select-part\"\n [dataSource]=\"hourSource\"\n [displayWith]=\"pad\"\n [pageSize]=\"24\"\n [selectedItem]=\"hours()\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"setHours($event)\"\n/>\n\n<span class=\"text-muted-foreground-1\" aria-hidden=\"true\">:</span>\n\n<ui-select\n class=\"ui-time-select-part\"\n [dataSource]=\"minuteSource()\"\n [displayWith]=\"pad\"\n [pageSize]=\"60\"\n [selectedItem]=\"minutes()\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"setMinutes($event)\"\n/>\n",
11507
11595
  styles: [".ui-time-select-part{width:calc(var(--spacing, .25rem) * 20);flex-shrink:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
@@ -11567,6 +11655,7 @@ i0.ɵɵngDeclareClassMetadata({
11567
11655
  selector: "ui-time-select",
11568
11656
  imports: [UiSelectComponent, NgIcon],
11569
11657
  host: { class: "inline-flex items-center gap-x-1" },
11658
+ providers: [provideIcons({ heroClock })],
11570
11659
  template: "<ng-icon name=\"heroClock\" class=\"me-1 text-muted-foreground-1 shrink-0\" />\n\n<ui-select\n class=\"ui-time-select-part\"\n [dataSource]=\"hourSource\"\n [displayWith]=\"pad\"\n [pageSize]=\"24\"\n [selectedItem]=\"hours()\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"setHours($event)\"\n/>\n\n<span class=\"text-muted-foreground-1\" aria-hidden=\"true\">:</span>\n\n<ui-select\n class=\"ui-time-select-part\"\n [dataSource]=\"minuteSource()\"\n [displayWith]=\"pad\"\n [pageSize]=\"60\"\n [selectedItem]=\"minutes()\"\n [disabled]=\"disabled()\"\n (selectionChange)=\"setMinutes($event)\"\n/>\n",
11571
11660
  styles: [".ui-time-select-part{width:calc(var(--spacing, .25rem) * 20);flex-shrink:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
11572
11661
  }]
@@ -11816,6 +11905,10 @@ var UiDatepickerComponent = class UiDatepickerComponent {
11816
11905
  },
11817
11906
  outputs: { value: "valueChange" },
11818
11907
  host: { classAttribute: "block" },
11908
+ providers: [provideIcons({
11909
+ heroCalendar,
11910
+ heroXMark
11911
+ })],
11819
11912
  viewQueries: [{
11820
11913
  propertyName: "calendar",
11821
11914
  first: true,
@@ -11972,6 +12065,10 @@ i0.ɵɵngDeclareClassMetadata({
11972
12065
  UiCardComponent
11973
12066
  ],
11974
12067
  host: { class: "block" },
12068
+ providers: [provideIcons({
12069
+ heroCalendar,
12070
+ heroXMark
12071
+ })],
11975
12072
  template: "<ui-dropdown\n [isOpen]=\"isOpen\"\n placement=\"bottom-start\"\n closeBehaviour=\"whenClickOutside\"\n class=\"w-full\"\n>\n <ui-input\n [value]=\"display()\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [describedBy]=\"describedBy()\"\n [ariaExpanded]=\"isOpen()\"\n ariaHasPopup=\"dialog\"\n [validationState]=\"validationState()\"\n classes=\"cursor-pointer\"\n autocomplete=\"off\"\n readonly\n (click)=\"toggle()\"\n (keydown)=\"handleInputKeydown($event)\"\n >\n <ng-template #leading>\n <ng-icon\n name=\"heroCalendar\"\n class=\"ms-3 text-muted-foreground-1 shrink-0\"\n />\n </ng-template>\n\n <ng-template #trailing>\n @if (clearable() && value() && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear date\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n\n @if (isOpen()) {\n <div uiDropdownContent class=\"py-2\">\n <ui-card radius=\"xl\" class=\"p-3\">\n <ui-calendar\n [value]=\"datePart()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [isDateDisabled]=\"isDateDisabled()\"\n [weekStart]=\"weekStart()\"\n [locale]=\"locale()\"\n (valueChange)=\"handlePick($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n\n @if (withTime()) {\n <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-line-2 border-t\">\n <ui-time-select\n [value]=\"timePart()\"\n [minuteStep]=\"minuteStep()\"\n (valueChange)=\"handleTime($event)\"\n (keydown)=\"handlePanelKeydown($event)\"\n />\n\n <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n </div>\n }\n </ui-card>\n </div>\n }\n</ui-dropdown>\n",
11976
12073
  styles: ["@layer components{:host{width:100%}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
11977
12074
  }]
@@ -12164,6 +12261,7 @@ var UiDropdownButtonComponent = class UiDropdownButtonComponent {
12164
12261
  }
12165
12262
  },
12166
12263
  outputs: { isOpen: "isOpenChange" },
12264
+ providers: [provideIcons({ heroChevronDown })],
12167
12265
  ngImport: i0,
12168
12266
  template: "<ui-button\n [intent]=\"intent()\"\n [appearance]=\"appearance()\"\n (click)=\"isOpen.update(value => !value)\"\n>\n <ng-content />\n <ng-icon\n name=\"heroChevronDown\"\n class=\"size-4 transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n</ui-button>\n",
12169
12267
  dependencies: [{
@@ -12204,6 +12302,7 @@ i0.ɵɵngDeclareClassMetadata({
12204
12302
  args: [{
12205
12303
  selector: "ui-dropdown-button",
12206
12304
  imports: [UiButtonComponent, NgIcon],
12305
+ providers: [provideIcons({ heroChevronDown })],
12207
12306
  template: "<ui-button\n [intent]=\"intent()\"\n [appearance]=\"appearance()\"\n (click)=\"isOpen.update(value => !value)\"\n>\n <ng-content />\n <ng-icon\n name=\"heroChevronDown\"\n class=\"size-4 transition-transform duration-100 shrink-0\"\n [class.rotate-180]=\"isOpen()\"\n />\n</ui-button>\n"
12208
12307
  }]
12209
12308
  }],
@@ -12458,6 +12557,10 @@ var UiFileInputComponent = class UiFileInputComponent {
12458
12557
  value: "valueChange",
12459
12558
  rejected: "rejected"
12460
12559
  },
12560
+ providers: [provideIcons({
12561
+ heroArrowUp,
12562
+ heroXMark
12563
+ })],
12461
12564
  viewQueries: [{
12462
12565
  propertyName: "picker",
12463
12566
  first: true,
@@ -12563,6 +12666,10 @@ i0.ɵɵngDeclareClassMetadata({
12563
12666
  UiButtonComponent,
12564
12667
  NgIcon
12565
12668
  ],
12669
+ providers: [provideIcons({
12670
+ heroArrowUp,
12671
+ heroXMark
12672
+ })],
12566
12673
  template: "<ui-input-group [validationState]=\"hasRejection() ? false : null\">\n <ui-button\n appearance=\"white\"\n intent=\"secondary\"\n size=\"sm\"\n classes=\"h-full\"\n [disabled]=\"disabled()\"\n (click)=\"openPicker()\"\n >\n <ng-icon name=\"heroArrowUpTray\" class=\"shrink-0\" />\n {{ buttonLabel() }}\n </ui-button>\n\n <input\n #picker\n type=\"file\"\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"handlePick($event)\"\n />\n\n <ui-input\n [value]=\"summary()\"\n [id]=\"id()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [describedBy]=\"describedBy()\"\n classes=\"truncate cursor-pointer\"\n readonly\n (click)=\"openPicker()\"\n >\n <ng-template #trailing>\n @if (value().length && !disabled()) {\n <button\n type=\"button\"\n class=\"inline-flex justify-center items-center w-8 self-stretch text-muted-foreground-1 hover:text-foreground\"\n aria-label=\"Clear files\"\n (click)=\"clear($event)\"\n >\n <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n </button>\n }\n </ng-template>\n </ui-input>\n</ui-input-group>\n"
12567
12674
  }]
12568
12675
  }],