@m1z23r/ngx-ui 1.1.37 → 1.1.39

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 (5) hide show
  1. package/README.md +74 -27
  2. package/fesm2022/m1z23r-ngx-ui.mjs +58 -32
  3. package/fesm2022/m1z23r-ngx-ui.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/m1z23r-ngx-ui.d.ts +17 -3
package/fesm2022/m1z23r-ngx-ui.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { inject, PLATFORM_ID, signal, Injectable, computed, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, input, output, ChangeDetectionStrategy, Component, ElementRef, HostListener, effect, Directive, model, Pipe, contentChildren, TemplateRef, contentChild, ViewChild, viewChild, afterRenderEffect, DestroyRef } from '@angular/core';
3
- import { isPlatformBrowser, NgTemplateOutlet, NgComponentOutlet, DOCUMENT, DecimalPipe } from '@angular/common';
3
+ import { isPlatformBrowser, DOCUMENT, NgTemplateOutlet, NgComponentOutlet, DecimalPipe } from '@angular/common';
4
4
  import * as i1 from '@angular/forms';
5
5
  import { FormsModule } from '@angular/forms';
6
6
 
@@ -378,6 +378,8 @@ const DEFAULT_DIALOG_CONFIG = {
378
378
  class DialogService {
379
379
  appRef = inject(ApplicationRef);
380
380
  injector = inject(EnvironmentInjector);
381
+ document = inject(DOCUMENT);
382
+ platformId = inject(PLATFORM_ID);
381
383
  /**
382
384
  * Opens a dialog with the specified component.
383
385
  *
@@ -397,7 +399,9 @@ class DialogService {
397
399
  const hostElement = componentRef.location.nativeElement;
398
400
  hostElement.dataset['dialogConfig'] = JSON.stringify(mergedConfig);
399
401
  this.appRef.attachView(componentRef.hostView);
400
- document.body.appendChild(hostElement);
402
+ if (isPlatformBrowser(this.platformId)) {
403
+ this.document.body.appendChild(hostElement);
404
+ }
401
405
  return dialogRef;
402
406
  }
403
407
  destroy(componentRef) {
@@ -550,6 +554,8 @@ const TOAST_DATA = new InjectionToken('TOAST_DATA');
550
554
  class ToastService {
551
555
  appRef = inject(ApplicationRef);
552
556
  injector = inject(EnvironmentInjector);
557
+ document = inject(DOCUMENT);
558
+ platformId = inject(PLATFORM_ID);
553
559
  containerRef = null;
554
560
  toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
555
561
  toastRefs = new Map();
@@ -658,7 +664,9 @@ class ToastService {
658
664
  });
659
665
  this.updateContainer();
660
666
  this.appRef.attachView(this.containerRef.hostView);
661
- document.body.appendChild(this.containerRef.location.nativeElement);
667
+ if (isPlatformBrowser(this.platformId)) {
668
+ this.document.body.appendChild(this.containerRef.location.nativeElement);
669
+ }
662
670
  }
663
671
  updateContainer() {
664
672
  if (!this.containerRef)
@@ -1407,6 +1415,7 @@ class SelectComponent {
1407
1415
  asyncSearch = input(null, ...(ngDevMode ? [{ debugName: "asyncSearch" }] : []));
1408
1416
  debounceTime = input(300, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
1409
1417
  minSearchLength = input(0, ...(ngDevMode ? [{ debugName: "minSearchLength" }] : []));
1418
+ initialLoad = input(false, ...(ngDevMode ? [{ debugName: "initialLoad" }] : []));
1410
1419
  // Two-way binding
1411
1420
  value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
1412
1421
  // Outputs
@@ -1432,6 +1441,7 @@ class SelectComponent {
1432
1441
  asyncSearchAbortController = null;
1433
1442
  debounceTimer = null;
1434
1443
  elementRef = inject(ElementRef);
1444
+ document = inject(DOCUMENT);
1435
1445
  positionCleanup = null;
1436
1446
  initializedOptions = new WeakSet();
1437
1447
  constructor() {
@@ -1476,6 +1486,12 @@ class SelectComponent {
1476
1486
  this.options(); // track changes
1477
1487
  this.setupOptionHandlers();
1478
1488
  });
1489
+ // Initial load for async search
1490
+ effect(() => {
1491
+ if (this.initialLoad() && this.asyncSearch()) {
1492
+ this.executeAsyncSearch('');
1493
+ }
1494
+ });
1479
1495
  }
1480
1496
  ngAfterContentInit() {
1481
1497
  // Initial setup handled by effect
@@ -1496,8 +1512,8 @@ class SelectComponent {
1496
1512
  }
1497
1513
  ngOnDestroy() {
1498
1514
  const dropdown = this.dropdownRef?.nativeElement;
1499
- if (dropdown?.parentElement === document.body) {
1500
- document.body.removeChild(dropdown);
1515
+ if (dropdown?.parentElement === this.document.body) {
1516
+ this.document.body.removeChild(dropdown);
1501
1517
  }
1502
1518
  this.removePositionListeners();
1503
1519
  this.cancelAsyncSearch();
@@ -2011,7 +2027,7 @@ class SelectComponent {
2011
2027
  if (!dropdown)
2012
2028
  return;
2013
2029
  dropdown.style.display = 'block';
2014
- document.body.appendChild(dropdown);
2030
+ this.document.body.appendChild(dropdown);
2015
2031
  this.updateDropdownPosition();
2016
2032
  this.addPositionListeners();
2017
2033
  }
@@ -2019,7 +2035,7 @@ class SelectComponent {
2019
2035
  const dropdown = this.dropdownRef?.nativeElement;
2020
2036
  if (!dropdown)
2021
2037
  return;
2022
- if (dropdown.parentElement === document.body) {
2038
+ if (dropdown.parentElement === this.document.body) {
2023
2039
  const wrapper = this.elementRef.nativeElement.querySelector('.ui-select-wrapper');
2024
2040
  if (wrapper) {
2025
2041
  wrapper.appendChild(dropdown);
@@ -2078,12 +2094,12 @@ class SelectComponent {
2078
2094
  this.positionCleanup = null;
2079
2095
  }
2080
2096
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2081
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, asyncSearch: { classPropertyName: "asyncSearch", publicName: "asyncSearch", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed", created: "created", deleted: "deleted" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: OptionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"ui-select-wrapper\"\n [class.ui-select-wrapper--error]=\"error()\"\n [class.ui-select-wrapper--disabled]=\"disabled()\"\n [class.ui-select-wrapper--open]=\"isOpen()\"\n>\n @if (label()) {\n <label class=\"ui-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerRef\n class=\"ui-select__trigger\"\n [class]=\"triggerClasses()\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"searchable() ? -1 : (disabled() ? -1 : 0)\"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\"\n >\n @if (searchable()) {\n <input\n #searchInput\n type=\"text\"\n class=\"ui-select__input\"\n [placeholder]=\"inputPlaceholder()\"\n [value]=\"isOpen() ? searchQuery() : (selectable() ? displayValue() : '')\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown)=\"handleSearchInputKeydown($event)\"\n (focus)=\"toggle()\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"ui-select__value\">\n @if (displayValue()) {\n {{ displayValue() }}\n } @else {\n <span class=\"ui-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n }\n\n <div class=\"ui-select__icons\">\n @if (clearable() && hasValue() && !disabled()) {\n <button\n type=\"button\"\n class=\"ui-select__clear\"\n (click)=\"clear($event)\"\n aria-label=\"Clear selection\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n <svg\n class=\"ui-select__arrow\"\n [class.ui-select__arrow--open]=\"isOpen()\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </div>\n </div>\n\n <div\n #dropdownRef\n class=\"ui-select__dropdown\"\n [class.ui-select__dropdown--open]=\"isOpen()\"\n [attr.role]=\"'listbox'\"\n [attr.aria-multiselectable]=\"multiple()\"\n >\n <div class=\"ui-select__options\">\n @if (isAsyncMode()) {\n <!-- Async mode: render options from asyncSearch results -->\n @if (asyncLoading()) {\n <div class=\"ui-select__loading\">\n <svg class=\"ui-select__spinner\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-opacity=\"0.25\"></circle>\n <path d=\"M12 2a10 10 0 0 1 10 10\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Searching...</span>\n </div>\n } @else if (asyncError()) {\n <div class=\"ui-select__error-message\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n </svg>\n <span>{{ asyncError() }}</span>\n </div>\n } @else {\n @for (option of visibleAsyncOptions(); track option.value; let i = $index) {\n <div\n class=\"ui-async-option\"\n [class.ui-async-option--selected]=\"isAsyncOptionSelected(option)\"\n [class.ui-async-option--disabled]=\"option.disabled\"\n [class.ui-async-option--focused]=\"focusedIndex() === i\"\n [attr.role]=\"'option'\"\n [attr.aria-selected]=\"isAsyncOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n (click)=\"selectAsyncOption(option, $event)\"\n >\n @if (multiple() && isAsyncOptionSelected(option)) {\n <svg class=\"ui-async-option__check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n }\n <span class=\"ui-async-option__content\">\n @if (optionTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: option.value, option: option.value, selected: isAsyncOptionSelected(option), disabled: !!option.disabled }\"></ng-container>\n } @else {\n {{ option.label }}\n }\n </span>\n </div>\n }\n @if (visibleAsyncOptions().length === 0 && searchQuery().trim().length >= minSearchLength()) {\n <div class=\"ui-select__empty\">No results found</div>\n }\n @if (searchQuery().trim().length < minSearchLength() && minSearchLength() > 0) {\n <div class=\"ui-select__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n }\n }\n } @else {\n <!-- Static mode: render content children -->\n <ng-content />\n @if (visibleOptions().length === 0 && !(creatable() && searchQuery().trim())) {\n <div class=\"ui-select__empty\">No options found</div>\n }\n }\n </div>\n @if (creatable() && searchQuery().trim() && !exactMatchExists()) {\n <div\n class=\"ui-select__create\"\n (click)=\"handleCreate()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n </svg>\n Create \"{{ searchQuery().trim() }}\"\n </div>\n }\n </div>\n\n @if (error()) {\n <span class=\"ui-select__error\">{{ error() }}</span>\n }\n @if (hint() && !error()) {\n <span class=\"ui-select__hint\">{{ hint() }}</span>\n }\n</div>\n", styles: [":host{display:block;position:relative}.ui-select-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-select__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-sm);width:100%;background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:pointer;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-select__trigger:hover:not([aria-disabled=true]){border-color:var(--ui-border-hover)}.ui-select__trigger:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-select__trigger[aria-disabled=true]{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-select__trigger--sm{padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-size:var(--ui-font-sm)}.ui-select__trigger--md{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-md)}.ui-select__trigger--lg{padding:var(--ui-spacing-md) var(--ui-spacing-lg);font-size:var(--ui-font-lg)}.ui-select__trigger--outlined{background-color:transparent}.ui-select__trigger--filled{background-color:var(--ui-bg-secondary);border-color:transparent}.ui-select__trigger--filled:hover:not([aria-disabled=true]){background-color:var(--ui-bg-tertiary)}.ui-select__trigger--filled:focus{border-color:var(--ui-border-focus)}.ui-select__value{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__placeholder{color:var(--ui-text-muted)}.ui-select__icons{display:flex;align-items:center;gap:var(--ui-spacing-xs);flex-shrink:0}.ui-select__clear{display:flex;align-items:center;justify-content:center;padding:2px;background:none;border:none;cursor:pointer;color:var(--ui-text-muted);border-radius:var(--ui-radius-sm);transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-select__clear:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-select__arrow{color:var(--ui-text-muted);transition:transform var(--ui-transition-fast)}.ui-select__arrow--open{transform:rotate(180deg)}.ui-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--ui-spacing-xs);background-color:var(--ui-dropdown-bg, var(--ui-bg));border:1px solid var(--ui-dropdown-border, var(--ui-border));border-radius:var(--ui-dropdown-radius, var(--ui-radius-md));box-shadow:var(--ui-dropdown-shadow, var(--ui-shadow-lg));overflow:hidden;display:none;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast);box-sizing:border-box}.ui-select__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-select__input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;color:inherit;padding:0;text-align:left;text-overflow:ellipsis;cursor:pointer}.ui-select__input::placeholder{color:var(--ui-text-muted)}.ui-select__input:focus{cursor:text}.ui-select__input:disabled{cursor:not-allowed}.ui-select__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-sm);color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-select__create:hover{background-color:var(--ui-bg-hover)}.ui-select__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-select__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select-wrapper--error .ui-select__trigger{border-color:var(--ui-danger)}.ui-select-wrapper--error .ui-select__trigger:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-select__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-select__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-async-option{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-async-option:hover:not(.ui-async-option--disabled){background-color:var(--ui-bg-hover)}.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent)}.ui-async-option--selected:hover:not(.ui-async-option--disabled){background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--focused{background-color:var(--ui-bg-hover);outline:none}.ui-async-option--focused.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--disabled{opacity:.5;cursor:not-allowed}.ui-async-option__check{flex-shrink:0;color:var(--ui-primary)}.ui-async-option__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__loading{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-lg) var(--ui-spacing-md);color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select__spinner{animation:ui-select-spin 1s linear infinite}@keyframes ui-select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-select__error-message{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);color:var(--ui-danger);font-size:var(--ui-font-sm)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2097
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, asyncSearch: { classPropertyName: "asyncSearch", publicName: "asyncSearch", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, initialLoad: { classPropertyName: "initialLoad", publicName: "initialLoad", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed", created: "created", deleted: "deleted" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: OptionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"ui-select-wrapper\"\n [class.ui-select-wrapper--error]=\"error()\"\n [class.ui-select-wrapper--disabled]=\"disabled()\"\n [class.ui-select-wrapper--open]=\"isOpen()\"\n>\n @if (label()) {\n <label class=\"ui-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerRef\n class=\"ui-select__trigger\"\n [class]=\"triggerClasses()\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"searchable() ? -1 : (disabled() ? -1 : 0)\"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\"\n >\n @if (searchable()) {\n <input\n #searchInput\n type=\"text\"\n class=\"ui-select__input\"\n [placeholder]=\"inputPlaceholder()\"\n [value]=\"isOpen() ? searchQuery() : (selectable() ? displayValue() : '')\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown)=\"handleSearchInputKeydown($event)\"\n (focus)=\"toggle()\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"ui-select__value\">\n @if (displayValue()) {\n {{ displayValue() }}\n } @else {\n <span class=\"ui-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n }\n\n <div class=\"ui-select__icons\">\n @if (clearable() && hasValue() && !disabled()) {\n <button\n type=\"button\"\n class=\"ui-select__clear\"\n (click)=\"clear($event)\"\n aria-label=\"Clear selection\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n <svg\n class=\"ui-select__arrow\"\n [class.ui-select__arrow--open]=\"isOpen()\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </div>\n </div>\n\n <div\n #dropdownRef\n class=\"ui-select__dropdown\"\n [class.ui-select__dropdown--open]=\"isOpen()\"\n [attr.role]=\"'listbox'\"\n [attr.aria-multiselectable]=\"multiple()\"\n >\n <div class=\"ui-select__options\">\n @if (isAsyncMode()) {\n <!-- Async mode: render options from asyncSearch results -->\n @if (asyncLoading()) {\n <div class=\"ui-select__loading\">\n <svg class=\"ui-select__spinner\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-opacity=\"0.25\"></circle>\n <path d=\"M12 2a10 10 0 0 1 10 10\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Searching...</span>\n </div>\n } @else if (asyncError()) {\n <div class=\"ui-select__error-message\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n </svg>\n <span>{{ asyncError() }}</span>\n </div>\n } @else {\n @for (option of visibleAsyncOptions(); track option.value; let i = $index) {\n <div\n class=\"ui-async-option\"\n [class.ui-async-option--selected]=\"isAsyncOptionSelected(option)\"\n [class.ui-async-option--disabled]=\"option.disabled\"\n [class.ui-async-option--focused]=\"focusedIndex() === i\"\n [attr.role]=\"'option'\"\n [attr.aria-selected]=\"isAsyncOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n (click)=\"selectAsyncOption(option, $event)\"\n >\n @if (multiple() && isAsyncOptionSelected(option)) {\n <svg class=\"ui-async-option__check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n }\n <span class=\"ui-async-option__content\">\n @if (optionTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: option.value, option: option.value, selected: isAsyncOptionSelected(option), disabled: !!option.disabled }\"></ng-container>\n } @else {\n {{ option.label }}\n }\n </span>\n </div>\n }\n @if (visibleAsyncOptions().length === 0 && searchQuery().trim().length >= minSearchLength()) {\n <div class=\"ui-select__empty\">No results found</div>\n }\n @if (searchQuery().trim().length < minSearchLength() && minSearchLength() > 0) {\n <div class=\"ui-select__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n }\n }\n } @else {\n <!-- Static mode: render content children -->\n <ng-content />\n @if (visibleOptions().length === 0 && !(creatable() && searchQuery().trim())) {\n <div class=\"ui-select__empty\">No options found</div>\n }\n }\n </div>\n @if (creatable() && searchQuery().trim() && !exactMatchExists()) {\n <div\n class=\"ui-select__create\"\n (click)=\"handleCreate()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n </svg>\n Create \"{{ searchQuery().trim() }}\"\n </div>\n }\n </div>\n\n @if (error()) {\n <span class=\"ui-select__error\">{{ error() }}</span>\n }\n @if (hint() && !error()) {\n <span class=\"ui-select__hint\">{{ hint() }}</span>\n }\n</div>\n", styles: [":host{display:block;position:relative}.ui-select-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-select__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-sm);width:100%;background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:pointer;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-select__trigger:hover:not([aria-disabled=true]){border-color:var(--ui-border-hover)}.ui-select__trigger:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-select__trigger[aria-disabled=true]{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-select__trigger--sm{padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-size:var(--ui-font-sm)}.ui-select__trigger--md{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-md)}.ui-select__trigger--lg{padding:var(--ui-spacing-md) var(--ui-spacing-lg);font-size:var(--ui-font-lg)}.ui-select__trigger--outlined{background-color:transparent}.ui-select__trigger--filled{background-color:var(--ui-bg-secondary);border-color:transparent}.ui-select__trigger--filled:hover:not([aria-disabled=true]){background-color:var(--ui-bg-tertiary)}.ui-select__trigger--filled:focus{border-color:var(--ui-border-focus)}.ui-select__value{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__placeholder{color:var(--ui-text-muted)}.ui-select__icons{display:flex;align-items:center;gap:var(--ui-spacing-xs);flex-shrink:0}.ui-select__clear{display:flex;align-items:center;justify-content:center;padding:2px;background:none;border:none;cursor:pointer;color:var(--ui-text-muted);border-radius:var(--ui-radius-sm);transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-select__clear:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-select__arrow{color:var(--ui-text-muted);transition:transform var(--ui-transition-fast)}.ui-select__arrow--open{transform:rotate(180deg)}.ui-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--ui-spacing-xs);background-color:var(--ui-dropdown-bg, var(--ui-bg));border:1px solid var(--ui-dropdown-border, var(--ui-border));border-radius:var(--ui-dropdown-radius, var(--ui-radius-md));box-shadow:var(--ui-dropdown-shadow, var(--ui-shadow-lg));overflow:hidden;display:none;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast);box-sizing:border-box}.ui-select__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-select__input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;color:inherit;padding:0;text-align:left;text-overflow:ellipsis;cursor:pointer}.ui-select__input::placeholder{color:var(--ui-text-muted)}.ui-select__input:focus{cursor:text}.ui-select__input:disabled{cursor:not-allowed}.ui-select__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-sm);color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-select__create:hover{background-color:var(--ui-bg-hover)}.ui-select__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-select__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select-wrapper--error .ui-select__trigger{border-color:var(--ui-danger)}.ui-select-wrapper--error .ui-select__trigger:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-select__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-select__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-async-option{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-async-option:hover:not(.ui-async-option--disabled){background-color:var(--ui-bg-hover)}.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent)}.ui-async-option--selected:hover:not(.ui-async-option--disabled){background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--focused{background-color:var(--ui-bg-hover);outline:none}.ui-async-option--focused.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--disabled{opacity:.5;cursor:not-allowed}.ui-async-option__check{flex-shrink:0;color:var(--ui-primary)}.ui-async-option__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__loading{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-lg) var(--ui-spacing-md);color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select__spinner{animation:ui-select-spin 1s linear infinite}@keyframes ui-select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-select__error-message{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);color:var(--ui-danger);font-size:var(--ui-font-sm)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2082
2098
  }
2083
2099
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectComponent, decorators: [{
2084
2100
  type: Component,
2085
2101
  args: [{ selector: 'ui-select', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ui-select-wrapper\"\n [class.ui-select-wrapper--error]=\"error()\"\n [class.ui-select-wrapper--disabled]=\"disabled()\"\n [class.ui-select-wrapper--open]=\"isOpen()\"\n>\n @if (label()) {\n <label class=\"ui-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerRef\n class=\"ui-select__trigger\"\n [class]=\"triggerClasses()\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"searchable() ? -1 : (disabled() ? -1 : 0)\"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\"\n >\n @if (searchable()) {\n <input\n #searchInput\n type=\"text\"\n class=\"ui-select__input\"\n [placeholder]=\"inputPlaceholder()\"\n [value]=\"isOpen() ? searchQuery() : (selectable() ? displayValue() : '')\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown)=\"handleSearchInputKeydown($event)\"\n (focus)=\"toggle()\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"ui-select__value\">\n @if (displayValue()) {\n {{ displayValue() }}\n } @else {\n <span class=\"ui-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n }\n\n <div class=\"ui-select__icons\">\n @if (clearable() && hasValue() && !disabled()) {\n <button\n type=\"button\"\n class=\"ui-select__clear\"\n (click)=\"clear($event)\"\n aria-label=\"Clear selection\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n <svg\n class=\"ui-select__arrow\"\n [class.ui-select__arrow--open]=\"isOpen()\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </div>\n </div>\n\n <div\n #dropdownRef\n class=\"ui-select__dropdown\"\n [class.ui-select__dropdown--open]=\"isOpen()\"\n [attr.role]=\"'listbox'\"\n [attr.aria-multiselectable]=\"multiple()\"\n >\n <div class=\"ui-select__options\">\n @if (isAsyncMode()) {\n <!-- Async mode: render options from asyncSearch results -->\n @if (asyncLoading()) {\n <div class=\"ui-select__loading\">\n <svg class=\"ui-select__spinner\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" stroke-opacity=\"0.25\"></circle>\n <path d=\"M12 2a10 10 0 0 1 10 10\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Searching...</span>\n </div>\n } @else if (asyncError()) {\n <div class=\"ui-select__error-message\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n </svg>\n <span>{{ asyncError() }}</span>\n </div>\n } @else {\n @for (option of visibleAsyncOptions(); track option.value; let i = $index) {\n <div\n class=\"ui-async-option\"\n [class.ui-async-option--selected]=\"isAsyncOptionSelected(option)\"\n [class.ui-async-option--disabled]=\"option.disabled\"\n [class.ui-async-option--focused]=\"focusedIndex() === i\"\n [attr.role]=\"'option'\"\n [attr.aria-selected]=\"isAsyncOptionSelected(option)\"\n [attr.aria-disabled]=\"option.disabled\"\n (click)=\"selectAsyncOption(option, $event)\"\n >\n @if (multiple() && isAsyncOptionSelected(option)) {\n <svg class=\"ui-async-option__check\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n }\n <span class=\"ui-async-option__content\">\n @if (optionTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl.templateRef; context: { $implicit: option.value, option: option.value, selected: isAsyncOptionSelected(option), disabled: !!option.disabled }\"></ng-container>\n } @else {\n {{ option.label }}\n }\n </span>\n </div>\n }\n @if (visibleAsyncOptions().length === 0 && searchQuery().trim().length >= minSearchLength()) {\n <div class=\"ui-select__empty\">No results found</div>\n }\n @if (searchQuery().trim().length < minSearchLength() && minSearchLength() > 0) {\n <div class=\"ui-select__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n }\n }\n } @else {\n <!-- Static mode: render content children -->\n <ng-content />\n @if (visibleOptions().length === 0 && !(creatable() && searchQuery().trim())) {\n <div class=\"ui-select__empty\">No options found</div>\n }\n }\n </div>\n @if (creatable() && searchQuery().trim() && !exactMatchExists()) {\n <div\n class=\"ui-select__create\"\n (click)=\"handleCreate()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n </svg>\n Create \"{{ searchQuery().trim() }}\"\n </div>\n }\n </div>\n\n @if (error()) {\n <span class=\"ui-select__error\">{{ error() }}</span>\n }\n @if (hint() && !error()) {\n <span class=\"ui-select__hint\">{{ hint() }}</span>\n }\n</div>\n", styles: [":host{display:block;position:relative}.ui-select-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-select__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-sm);width:100%;background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:pointer;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-select__trigger:hover:not([aria-disabled=true]){border-color:var(--ui-border-hover)}.ui-select__trigger:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-select__trigger[aria-disabled=true]{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-select__trigger--sm{padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-size:var(--ui-font-sm)}.ui-select__trigger--md{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-md)}.ui-select__trigger--lg{padding:var(--ui-spacing-md) var(--ui-spacing-lg);font-size:var(--ui-font-lg)}.ui-select__trigger--outlined{background-color:transparent}.ui-select__trigger--filled{background-color:var(--ui-bg-secondary);border-color:transparent}.ui-select__trigger--filled:hover:not([aria-disabled=true]){background-color:var(--ui-bg-tertiary)}.ui-select__trigger--filled:focus{border-color:var(--ui-border-focus)}.ui-select__value{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__placeholder{color:var(--ui-text-muted)}.ui-select__icons{display:flex;align-items:center;gap:var(--ui-spacing-xs);flex-shrink:0}.ui-select__clear{display:flex;align-items:center;justify-content:center;padding:2px;background:none;border:none;cursor:pointer;color:var(--ui-text-muted);border-radius:var(--ui-radius-sm);transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-select__clear:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-select__arrow{color:var(--ui-text-muted);transition:transform var(--ui-transition-fast)}.ui-select__arrow--open{transform:rotate(180deg)}.ui-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--ui-spacing-xs);background-color:var(--ui-dropdown-bg, var(--ui-bg));border:1px solid var(--ui-dropdown-border, var(--ui-border));border-radius:var(--ui-dropdown-radius, var(--ui-radius-md));box-shadow:var(--ui-dropdown-shadow, var(--ui-shadow-lg));overflow:hidden;display:none;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast);box-sizing:border-box}.ui-select__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-select__input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;color:inherit;padding:0;text-align:left;text-overflow:ellipsis;cursor:pointer}.ui-select__input::placeholder{color:var(--ui-text-muted)}.ui-select__input:focus{cursor:text}.ui-select__input:disabled{cursor:not-allowed}.ui-select__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-sm);color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-select__create:hover{background-color:var(--ui-bg-hover)}.ui-select__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-select__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select-wrapper--error .ui-select__trigger{border-color:var(--ui-danger)}.ui-select-wrapper--error .ui-select__trigger:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-select__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-select__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-async-option{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-async-option:hover:not(.ui-async-option--disabled){background-color:var(--ui-bg-hover)}.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent)}.ui-async-option--selected:hover:not(.ui-async-option--disabled){background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--focused{background-color:var(--ui-bg-hover);outline:none}.ui-async-option--focused.ui-async-option--selected{background-color:color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-async-option--disabled{opacity:.5;cursor:not-allowed}.ui-async-option__check{flex-shrink:0;color:var(--ui-primary)}.ui-async-option__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__loading{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-lg) var(--ui-spacing-md);color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select__spinner{animation:ui-select-spin 1s linear infinite}@keyframes ui-select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-select__error-message{display:flex;align-items:center;justify-content:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);color:var(--ui-danger);font-size:var(--ui-font-sm)}\n"] }]
2086
- }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], creatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "creatable", required: false }] }], deletable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], asyncSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncSearch", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], created: [{ type: i0.Output, args: ["created"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OptionTemplateDirective), { isSignal: true }] }], triggerRef: [{
2102
+ }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], creatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "creatable", required: false }] }], deletable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], asyncSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncSearch", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], initialLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLoad", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], created: [{ type: i0.Output, args: ["created"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OptionTemplateDirective), { isSignal: true }] }], triggerRef: [{
2087
2103
  type: ViewChild,
2088
2104
  args: ['triggerRef', { static: true }]
2089
2105
  }], dropdownRef: [{
@@ -2159,6 +2175,7 @@ class DropdownComponent {
2159
2175
  triggerRef;
2160
2176
  menuRef;
2161
2177
  elementRef = inject(ElementRef);
2178
+ document = inject(DOCUMENT);
2162
2179
  positionCleanup = null;
2163
2180
  contextMenuPosition = null;
2164
2181
  trigger = contentChild(DropdownTriggerDirective, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
@@ -2194,8 +2211,8 @@ class DropdownComponent {
2194
2211
  }
2195
2212
  ngOnDestroy() {
2196
2213
  const menu = this.menuRef?.nativeElement;
2197
- if (menu?.parentElement === document.body) {
2198
- document.body.removeChild(menu);
2214
+ if (menu?.parentElement === this.document.body) {
2215
+ this.document.body.removeChild(menu);
2199
2216
  }
2200
2217
  this.removePositionListeners();
2201
2218
  }
@@ -2296,7 +2313,7 @@ class DropdownComponent {
2296
2313
  if (!menu)
2297
2314
  return;
2298
2315
  menu.style.display = 'block';
2299
- document.body.appendChild(menu);
2316
+ this.document.body.appendChild(menu);
2300
2317
  this.updateMenuPosition();
2301
2318
  this.addPositionListeners();
2302
2319
  }
@@ -2304,7 +2321,7 @@ class DropdownComponent {
2304
2321
  const menu = this.menuRef?.nativeElement;
2305
2322
  if (!menu)
2306
2323
  return;
2307
- if (menu.parentElement === document.body) {
2324
+ if (menu.parentElement === this.document.body) {
2308
2325
  const wrapper = this.elementRef.nativeElement.querySelector('.ui-dropdown');
2309
2326
  if (wrapper) {
2310
2327
  wrapper.appendChild(menu);
@@ -2684,6 +2701,8 @@ class TooltipDirective {
2684
2701
  tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
2685
2702
  tooltipDelay = input(200, ...(ngDevMode ? [{ debugName: "tooltipDelay" }] : []));
2686
2703
  tooltipDisabled = input(false, ...(ngDevMode ? [{ debugName: "tooltipDisabled" }] : []));
2704
+ document = inject(DOCUMENT);
2705
+ platformId = inject(PLATFORM_ID);
2687
2706
  tooltipElement = null;
2688
2707
  showTimeout = null;
2689
2708
  isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
@@ -2748,7 +2767,7 @@ class TooltipDirective {
2748
2767
  const arrow = this.renderer.createElement('span');
2749
2768
  this.renderer.addClass(arrow, 'ui-tooltip__arrow');
2750
2769
  this.renderer.appendChild(this.tooltipElement, arrow);
2751
- this.renderer.appendChild(document.body, this.tooltipElement);
2770
+ this.renderer.appendChild(this.document.body, this.tooltipElement);
2752
2771
  this.injectStyles();
2753
2772
  }
2754
2773
  positionTooltip() {
@@ -2787,13 +2806,13 @@ class TooltipDirective {
2787
2806
  }
2788
2807
  destroyTooltip() {
2789
2808
  if (this.tooltipElement) {
2790
- this.renderer.removeChild(document.body, this.tooltipElement);
2809
+ this.renderer.removeChild(this.document.body, this.tooltipElement);
2791
2810
  this.tooltipElement = null;
2792
2811
  }
2793
2812
  }
2794
2813
  injectStyles() {
2795
2814
  const styleId = 'ui-tooltip-styles';
2796
- if (document.getElementById(styleId))
2815
+ if (!isPlatformBrowser(this.platformId) || this.document.getElementById(styleId))
2797
2816
  return;
2798
2817
  const style = this.renderer.createElement('style');
2799
2818
  this.renderer.setProperty(style, 'id', styleId);
@@ -2856,7 +2875,7 @@ class TooltipDirective {
2856
2875
  margin-top: -4px;
2857
2876
  }
2858
2877
  `);
2859
- this.renderer.appendChild(document.head, style);
2878
+ this.renderer.appendChild(this.document.head, style);
2860
2879
  }
2861
2880
  ngOnDestroy() {
2862
2881
  this.hide();
@@ -4032,6 +4051,7 @@ class DatepickerComponent {
4032
4051
  focusedDate = signal(null, ...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
4033
4052
  hoveredDate = signal(null, ...(ngDevMode ? [{ debugName: "hoveredDate" }] : []));
4034
4053
  elementRef = inject(ElementRef);
4054
+ document = inject(DOCUMENT);
4035
4055
  positionCleanup = null;
4036
4056
  static nextId = 0;
4037
4057
  generatedId = `ui-datepicker-${++DatepickerComponent.nextId}`;
@@ -4289,8 +4309,8 @@ class DatepickerComponent {
4289
4309
  }, ...(ngDevMode ? [{ debugName: "canNavigateNext" }] : []));
4290
4310
  ngOnDestroy() {
4291
4311
  const dropdown = this.dropdownRef?.nativeElement;
4292
- if (dropdown?.parentElement === document.body) {
4293
- document.body.removeChild(dropdown);
4312
+ if (dropdown?.parentElement === this.document.body) {
4313
+ this.document.body.removeChild(dropdown);
4294
4314
  }
4295
4315
  this.removePositionListeners();
4296
4316
  }
@@ -4606,7 +4626,7 @@ class DatepickerComponent {
4606
4626
  if (!dropdown)
4607
4627
  return;
4608
4628
  dropdown.style.display = 'block';
4609
- document.body.appendChild(dropdown);
4629
+ this.document.body.appendChild(dropdown);
4610
4630
  this.updateDropdownPosition();
4611
4631
  this.addPositionListeners();
4612
4632
  }
@@ -4614,7 +4634,7 @@ class DatepickerComponent {
4614
4634
  const dropdown = this.dropdownRef?.nativeElement;
4615
4635
  if (!dropdown)
4616
4636
  return;
4617
- if (dropdown.parentElement === document.body) {
4637
+ if (dropdown.parentElement === this.document.body) {
4618
4638
  const wrapper = this.elementRef.nativeElement.querySelector('.ui-datepicker-wrapper');
4619
4639
  if (wrapper) {
4620
4640
  wrapper.appendChild(dropdown);
@@ -4723,6 +4743,7 @@ class TimepickerComponent {
4723
4743
  selectedSecond = signal(0, ...(ngDevMode ? [{ debugName: "selectedSecond" }] : []));
4724
4744
  selectedPeriod = signal('AM', ...(ngDevMode ? [{ debugName: "selectedPeriod" }] : []));
4725
4745
  elementRef = inject(ElementRef);
4746
+ document = inject(DOCUMENT);
4726
4747
  positionCleanup = null;
4727
4748
  static nextId = 0;
4728
4749
  generatedId = `ui-timepicker-${++TimepickerComponent.nextId}`;
@@ -4788,8 +4809,8 @@ class TimepickerComponent {
4788
4809
  }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
4789
4810
  ngOnDestroy() {
4790
4811
  const dropdown = this.dropdownRef?.nativeElement;
4791
- if (dropdown?.parentElement === document.body) {
4792
- document.body.removeChild(dropdown);
4812
+ if (dropdown?.parentElement === this.document.body) {
4813
+ this.document.body.removeChild(dropdown);
4793
4814
  }
4794
4815
  this.removePositionListeners();
4795
4816
  }
@@ -4951,7 +4972,7 @@ class TimepickerComponent {
4951
4972
  if (!dropdown)
4952
4973
  return;
4953
4974
  dropdown.style.display = 'block';
4954
- document.body.appendChild(dropdown);
4975
+ this.document.body.appendChild(dropdown);
4955
4976
  this.updateDropdownPosition();
4956
4977
  this.addPositionListeners();
4957
4978
  }
@@ -4959,7 +4980,7 @@ class TimepickerComponent {
4959
4980
  const dropdown = this.dropdownRef?.nativeElement;
4960
4981
  if (!dropdown)
4961
4982
  return;
4962
- if (dropdown.parentElement === document.body) {
4983
+ if (dropdown.parentElement === this.document.body) {
4963
4984
  const wrapper = this.elementRef.nativeElement.querySelector('.ui-timepicker-wrapper');
4964
4985
  if (wrapper) {
4965
4986
  wrapper.appendChild(dropdown);
@@ -5075,6 +5096,7 @@ class DatetimepickerComponent {
5075
5096
  selectedSecond = signal(0, ...(ngDevMode ? [{ debugName: "selectedSecond" }] : []));
5076
5097
  selectedPeriod = signal('AM', ...(ngDevMode ? [{ debugName: "selectedPeriod" }] : []));
5077
5098
  elementRef = inject(ElementRef);
5099
+ document = inject(DOCUMENT);
5078
5100
  positionCleanup = null;
5079
5101
  static nextId = 0;
5080
5102
  generatedId = `ui-datetimepicker-${++DatetimepickerComponent.nextId}`;
@@ -5283,8 +5305,8 @@ class DatetimepickerComponent {
5283
5305
  }, ...(ngDevMode ? [{ debugName: "canNavigateNext" }] : []));
5284
5306
  ngOnDestroy() {
5285
5307
  const dropdown = this.dropdownRef?.nativeElement;
5286
- if (dropdown?.parentElement === document.body) {
5287
- document.body.removeChild(dropdown);
5308
+ if (dropdown?.parentElement === this.document.body) {
5309
+ this.document.body.removeChild(dropdown);
5288
5310
  }
5289
5311
  this.removePositionListeners();
5290
5312
  }
@@ -5630,7 +5652,7 @@ class DatetimepickerComponent {
5630
5652
  if (!dropdown)
5631
5653
  return;
5632
5654
  dropdown.style.display = 'block';
5633
- document.body.appendChild(dropdown);
5655
+ this.document.body.appendChild(dropdown);
5634
5656
  this.updateDropdownPosition();
5635
5657
  this.addPositionListeners();
5636
5658
  }
@@ -5638,7 +5660,7 @@ class DatetimepickerComponent {
5638
5660
  const dropdown = this.dropdownRef?.nativeElement;
5639
5661
  if (!dropdown)
5640
5662
  return;
5641
- if (dropdown.parentElement === document.body) {
5663
+ if (dropdown.parentElement === this.document.body) {
5642
5664
  const wrapper = this.elementRef.nativeElement.querySelector('.ui-datetimepicker-wrapper');
5643
5665
  if (wrapper) {
5644
5666
  wrapper.appendChild(dropdown);
@@ -6276,6 +6298,8 @@ class TemplateInputComponent {
6276
6298
  inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
6277
6299
  popoverRef;
6278
6300
  hostRef = inject(ElementRef);
6301
+ document = inject(DOCUMENT);
6302
+ platformId = inject(PLATFORM_ID);
6279
6303
  positionCleanup = null;
6280
6304
  currentSpanRect = null;
6281
6305
  isPortaled = false;
@@ -6470,7 +6494,9 @@ class TemplateInputComponent {
6470
6494
  `;
6471
6495
  injectStyles() {
6472
6496
  const styleId = 'ui-tmpl-styles';
6473
- let existing = document.getElementById(styleId);
6497
+ if (!isPlatformBrowser(this.platformId))
6498
+ return;
6499
+ let existing = this.document.getElementById(styleId);
6474
6500
  // Always replace to handle HMR / version upgrades
6475
6501
  if (existing) {
6476
6502
  existing.textContent = TemplateInputComponent.STYLE_CONTENT;
@@ -6479,11 +6505,11 @@ class TemplateInputComponent {
6479
6505
  const style = this.renderer.createElement('style');
6480
6506
  this.renderer.setProperty(style, 'id', styleId);
6481
6507
  this.renderer.setProperty(style, 'textContent', TemplateInputComponent.STYLE_CONTENT);
6482
- this.renderer.appendChild(document.head, style);
6508
+ this.renderer.appendChild(this.document.head, style);
6483
6509
  }
6484
6510
  portalPopover() {
6485
6511
  const el = this.popoverRef.nativeElement;
6486
- document.body.appendChild(el);
6512
+ this.document.body.appendChild(el);
6487
6513
  el.style.display = 'block';
6488
6514
  this.isPortaled = true;
6489
6515
  requestAnimationFrame(() => this.updatePopoverPosition());