@m1z23r/ngx-ui 1.0.5 → 1.0.7

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -599,85 +599,11 @@ class ModalComponent {
         return classes.join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalComponent, isStandalone: true, selector: "ui-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" } }, ngImport: i0, template: `
-    <div class="ui-modal__backdrop" (click)="onBackdropClick($event)">
-      <div
-        class="ui-modal__container"
-        [class]="containerClasses()"
-        [style.width]="width()"
-        [style.max-width]="maxWidth()"
-        role="dialog"
-        aria-modal="true"
-      >
-        @if (title()) {
-          <div class="ui-modal__header">
-            <h2 class="ui-modal__title">{{ title() }}</h2>
-            @if (showCloseButton()) {
-              <button
-                type="button"
-                class="ui-modal__close"
-                aria-label="Close"
-                (click)="close()"
-              >
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M18 6L6 18M6 6l12 12"/>
-                </svg>
-              </button>
-            }
-          </div>
-        }
-
-        <div class="ui-modal__body">
-          <ng-content />
-        </div>
-
-        <div class="ui-modal__footer">
-          <ng-content select="[footer]" />
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalComponent, isStandalone: true, selector: "ui-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" } }, ngImport: i0, template: "<div class=\"ui-modal__backdrop\" (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"ui-modal__container\"\n    [class]=\"containerClasses()\"\n    [style.width]=\"width()\"\n    [style.max-width]=\"maxWidth()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    @if (title()) {\n      <div class=\"ui-modal__header\">\n        <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n        @if (showCloseButton()) {\n          <button\n            type=\"button\"\n            class=\"ui-modal__close\"\n            aria-label=\"Close\"\n            (click)=\"close()\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"ui-modal__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ui-modal__footer\">\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-modal', standalone: true, template: `
-    <div class="ui-modal__backdrop" (click)="onBackdropClick($event)">
-      <div
-        class="ui-modal__container"
-        [class]="containerClasses()"
-        [style.width]="width()"
-        [style.max-width]="maxWidth()"
-        role="dialog"
-        aria-modal="true"
-      >
-        @if (title()) {
-          <div class="ui-modal__header">
-            <h2 class="ui-modal__title">{{ title() }}</h2>
-            @if (showCloseButton()) {
-              <button
-                type="button"
-                class="ui-modal__close"
-                aria-label="Close"
-                (click)="close()"
-              >
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M18 6L6 18M6 6l12 12"/>
-                </svg>
-              </button>
-            }
-          </div>
-        }
-
-        <div class="ui-modal__body">
-          <ng-content />
-        </div>
-
-        <div class="ui-modal__footer">
-          <ng-content select="[footer]" />
-        </div>
-      </div>
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
+            args: [{ selector: 'ui-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-modal__backdrop\" (click)=\"onBackdropClick($event)\">\n  <div\n    class=\"ui-modal__container\"\n    [class]=\"containerClasses()\"\n    [style.width]=\"width()\"\n    [style.max-width]=\"maxWidth()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    @if (title()) {\n      <div class=\"ui-modal__header\">\n        <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n        @if (showCloseButton()) {\n          <button\n            type=\"button\"\n            class=\"ui-modal__close\"\n            aria-label=\"Close\"\n            (click)=\"close()\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"ui-modal__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ui-modal__footer\">\n      <ng-content select=\"[footer]\" />\n    </div>\n  </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], onEscapePress: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -1196,6 +1122,7 @@ class SelectComponent {
         const dropdown = this.dropdownRef?.nativeElement;
         if (!dropdown)
             return;
+        dropdown.style.display = 'block';
         document.body.appendChild(dropdown);
         this.updateDropdownPosition();
         this.addPositionListeners();
@@ -1210,6 +1137,7 @@ class SelectComponent {
                 wrapper.appendChild(dropdown);
             }
         }
+        dropdown.style.display = '';
         dropdown.style.position = '';
         dropdown.style.top = '';
         dropdown.style.left = '';
@@ -1262,11 +1190,11 @@ class SelectComponent {
         this.positionCleanup = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: 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]=\"disabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\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    <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    @if (searchable()) {\n      <div class=\"ui-select__search\">\n        <input\n          type=\"text\"\n          class=\"ui-select__search-input\"\n          placeholder=\"Search...\"\n          [ngModel]=\"searchQuery()\"\n          (ngModelChange)=\"searchQuery.set($event)\"\n          (keydown)=\"handleSearchKeydown($event)\"\n          #searchInput\n        />\n      </div>\n    }\n    <div class=\"ui-select__options\">\n      <ng-content />\n    </div>\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;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast),visibility var(--ui-transition-fast)}.ui-select__dropdown--open{visibility:visible;opacity:1;transform:translateY(0)}.ui-select__search{padding:var(--ui-spacing-sm);border-bottom:1px solid var(--ui-border)}.ui-select__search-input{width:100%;padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-family:inherit;font-size:var(--ui-font-sm);color:var(--ui-text);background-color:var(--ui-bg-secondary);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);outline:none}.ui-select__search-input:focus{border-color:var(--ui-border-focus)}.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)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: 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]=\"disabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\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    <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    @if (searchable()) {\n      <div class=\"ui-select__search\">\n        <input\n          type=\"text\"\n          class=\"ui-select__search-input\"\n          placeholder=\"Search...\"\n          [ngModel]=\"searchQuery()\"\n          (ngModelChange)=\"searchQuery.set($event)\"\n          (keydown)=\"handleSearchKeydown($event)\"\n          #searchInput\n        />\n      </div>\n    }\n    <div class=\"ui-select__options\">\n      <ng-content />\n    </div>\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)}.ui-select__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-select__search{padding:var(--ui-spacing-sm);border-bottom:1px solid var(--ui-border)}.ui-select__search-input{width:100%;padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-family:inherit;font-size:var(--ui-font-sm);color:var(--ui-text);background-color:var(--ui-bg-secondary);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);outline:none}.ui-select__search-input:focus{border-color:var(--ui-border-focus)}.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)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-select', standalone: true, imports: [FormsModule], 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]=\"disabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\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    <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    @if (searchable()) {\n      <div class=\"ui-select__search\">\n        <input\n          type=\"text\"\n          class=\"ui-select__search-input\"\n          placeholder=\"Search...\"\n          [ngModel]=\"searchQuery()\"\n          (ngModelChange)=\"searchQuery.set($event)\"\n          (keydown)=\"handleSearchKeydown($event)\"\n          #searchInput\n        />\n      </div>\n    }\n    <div class=\"ui-select__options\">\n      <ng-content />\n    </div>\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;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast),visibility var(--ui-transition-fast)}.ui-select__dropdown--open{visibility:visible;opacity:1;transform:translateY(0)}.ui-select__search{padding:var(--ui-spacing-sm);border-bottom:1px solid var(--ui-border)}.ui-select__search-input{width:100%;padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-family:inherit;font-size:var(--ui-font-sm);color:var(--ui-text);background-color:var(--ui-bg-secondary);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);outline:none}.ui-select__search-input:focus{border-color:var(--ui-border-focus)}.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)}\n"] }]
+            args: [{ selector: 'ui-select', standalone: true, imports: [FormsModule], 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]=\"disabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\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    <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    @if (searchable()) {\n      <div class=\"ui-select__search\">\n        <input\n          type=\"text\"\n          class=\"ui-select__search-input\"\n          placeholder=\"Search...\"\n          [ngModel]=\"searchQuery()\"\n          (ngModelChange)=\"searchQuery.set($event)\"\n          (keydown)=\"handleSearchKeydown($event)\"\n          #searchInput\n        />\n      </div>\n    }\n    <div class=\"ui-select__options\">\n      <ng-content />\n    </div>\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)}.ui-select__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-select__search{padding:var(--ui-spacing-sm);border-bottom:1px solid var(--ui-border)}.ui-select__search-input{width:100%;padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-family:inherit;font-size:var(--ui-font-sm);color:var(--ui-text);background-color:var(--ui-bg-secondary);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);outline:none}.ui-select__search-input:focus{border-color:var(--ui-border-focus)}.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)}\n"] }]
         }], 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 }] }], 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"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }], triggerRef: [{
                 type: ViewChild,
                 args: ['triggerRef', { static: true }]
@@ -1475,6 +1403,7 @@ class DropdownComponent {
         const menu = this.menuRef?.nativeElement;
         if (!menu)
             return;
+        menu.style.display = 'block';
         document.body.appendChild(menu);
         this.updateMenuPosition();
         this.addPositionListeners();
@@ -1489,6 +1418,7 @@ class DropdownComponent {
                 wrapper.appendChild(menu);
             }
         }
+        menu.style.display = '';
         menu.style.position = '';
         menu.style.top = '';
         menu.style.left = '';
@@ -1552,11 +1482,11 @@ class DropdownComponent {
         this.positionCleanup = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: DropdownComponent, isStandalone: true, selector: "ui-dropdown", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown": "onKeydown($event)" } }, queries: [{ propertyName: "trigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ui-dropdown\">\n  <div #triggerRef class=\"ui-dropdown__trigger\">\n    <ng-content select=\"[uiDropdownTrigger]\" />\n  </div>\n\n  <div\n    #menuRef\n    class=\"ui-dropdown__menu\"\n    [class.ui-dropdown__menu--open]=\"isOpen()\"\n    [attr.role]=\"'menu'\"\n  >\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:inline-block;position:relative}.ui-dropdown{position:relative}.ui-dropdown__trigger{display:inline-block}.ui-dropdown__menu{position:absolute;top:100%;left:0;z-index:1000;min-width:160px;margin-top:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) 0;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;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast),visibility var(--ui-transition-fast)}.ui-dropdown__menu--open{visibility:visible;opacity:1;transform:translateY(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: DropdownComponent, isStandalone: true, selector: "ui-dropdown", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown": "onKeydown($event)" } }, queries: [{ propertyName: "trigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "items", predicate: DropdownItemComponent, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "menuRef", first: true, predicate: ["menuRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ui-dropdown\">\n  <div #triggerRef class=\"ui-dropdown__trigger\">\n    <ng-content select=\"[uiDropdownTrigger]\" />\n  </div>\n\n  <div\n    #menuRef\n    class=\"ui-dropdown__menu\"\n    [class.ui-dropdown__menu--open]=\"isOpen()\"\n    [attr.role]=\"'menu'\"\n  >\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:inline-block;position:relative}.ui-dropdown{position:relative}.ui-dropdown__trigger{display:inline-block}.ui-dropdown__menu{position:absolute;top:100%;left:0;z-index:1000;min-width:160px;margin-top:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) 0;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)}.ui-dropdown__menu--open{display:block;opacity:1;transform:translateY(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-dropdown\">\n  <div #triggerRef class=\"ui-dropdown__trigger\">\n    <ng-content select=\"[uiDropdownTrigger]\" />\n  </div>\n\n  <div\n    #menuRef\n    class=\"ui-dropdown__menu\"\n    [class.ui-dropdown__menu--open]=\"isOpen()\"\n    [attr.role]=\"'menu'\"\n  >\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:inline-block;position:relative}.ui-dropdown{position:relative}.ui-dropdown__trigger{display:inline-block}.ui-dropdown__menu{position:absolute;top:100%;left:0;z-index:1000;min-width:160px;margin-top:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) 0;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;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast),visibility var(--ui-transition-fast)}.ui-dropdown__menu--open{visibility:visible;opacity:1;transform:translateY(0)}\n"] }]
+            args: [{ selector: 'ui-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-dropdown\">\n  <div #triggerRef class=\"ui-dropdown__trigger\">\n    <ng-content select=\"[uiDropdownTrigger]\" />\n  </div>\n\n  <div\n    #menuRef\n    class=\"ui-dropdown__menu\"\n    [class.ui-dropdown__menu--open]=\"isOpen()\"\n    [attr.role]=\"'menu'\"\n  >\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:inline-block;position:relative}.ui-dropdown{position:relative}.ui-dropdown__trigger{display:inline-block}.ui-dropdown__menu{position:absolute;top:100%;left:0;z-index:1000;min-width:160px;margin-top:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) 0;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)}.ui-dropdown__menu--open{display:block;opacity:1;transform:translateY(0)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], triggerRef: [{
                 type: ViewChild,
                 args: ['triggerRef', { static: true }]
@@ -2345,6 +2275,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'ui-tabs', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-tabs\" [class]=\"tabsClasses()\">\n  <div\n    #tabList\n    class=\"ui-tabs__list\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel()\"\n  >\n    @for (tab of tabs(); track tab.id() || $index; let i = $index) {\n      <button\n        #tabButton\n        type=\"button\"\n        class=\"ui-tabs__tab\"\n        role=\"tab\"\n        [class.ui-tabs__tab--active]=\"isActive(tab, i)\"\n        [class.ui-tabs__tab--disabled]=\"tab.disabled()\"\n        [attr.aria-selected]=\"isActive(tab, i)\"\n        [attr.aria-controls]=\"'panel-' + (tab.id() || i)\"\n        [attr.tabindex]=\"isActive(tab, i) ? 0 : -1\"\n        [disabled]=\"tab.disabled()\"\n        (click)=\"selectTab(tab, i)\"\n        (keydown)=\"handleKeyDown($event, i)\"\n      >\n        @if (tab.iconTemplate()) {\n          <span class=\"ui-tabs__tab-icon\">\n            <ng-container *ngTemplateOutlet=\"tab.iconTemplate()!\" />\n          </span>\n        }\n        {{ tab.label() }}\n      </button>\n    }\n    @if (variant() === 'underline') {\n      <span\n        class=\"ui-tabs__indicator\"\n        [style.left.px]=\"indicatorLeft()\"\n        [style.width.px]=\"indicatorWidth()\"\n      ></span>\n    }\n  </div>\n  <div class=\"ui-tabs__panels\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }] } });
 
+class AccordionHeaderDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: AccordionHeaderDirective, isStandalone: true, selector: "[uiAccordionHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiAccordionHeader]',
+                    standalone: true,
+                }]
+        }] });
+
+class AccordionItemComponent {
+    header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    headerDirective = contentChild(AccordionHeaderDirective, ...(ngDevMode ? [{ debugName: "headerDirective" }] : []));
+    /** @internal */
+    _index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    _parent = null;
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    headerTemplate = computed(() => {
+        return this.headerDirective()?.templateRef ?? null;
+    }, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    /** @internal */
+    _setParent(parent, index) {
+        this._parent = parent;
+        this._index.set(index);
+        if (this.expanded()) {
+            this.isExpanded.set(true);
+        }
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        if (this.isExpanded()) {
+            this.collapse();
+        }
+        else {
+            this.expand();
+        }
+    }
+    expand() {
+        if (this.disabled())
+            return;
+        this.isExpanded.set(true);
+        this._parent?._onItemToggled(this);
+    }
+    collapse() {
+        this.isExpanded.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AccordionItemComponent, isStandalone: true, selector: "ui-accordion-item", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerDirective", first: true, predicate: AccordionHeaderDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ui-accordion-item\"\n  [class.ui-accordion-item--expanded]=\"isExpanded()\"\n  [class.ui-accordion-item--disabled]=\"disabled()\"\n>\n  <button\n    type=\"button\"\n    class=\"ui-accordion-item__header\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    [attr.aria-controls]=\"'accordion-panel-' + _index()\"\n  >\n    @if (headerTemplate()) {\n      <span class=\"ui-accordion-item__title\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate()!\" />\n      </span>\n    } @else {\n      <span class=\"ui-accordion-item__title\">{{ header() }}</span>\n    }\n    <span\n      class=\"ui-accordion-item__icon\"\n      [class.ui-accordion-item__icon--rotated]=\"isExpanded()\"\n    >\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n  <div\n    class=\"ui-accordion-item__panel\"\n    [attr.id]=\"'accordion-panel-' + _index()\"\n    role=\"region\"\n  >\n    <div class=\"ui-accordion-item__content\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.ui-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ui-spacing-md);border:none;background:transparent;color:var(--ui-text);font-size:var(--ui-font-sm);font-weight:500;cursor:pointer;transition:background-color var(--ui-transition-fast);text-align:left}.ui-accordion-item__header:hover:not(:disabled){background-color:var(--ui-bg-hover)}.ui-accordion-item__header:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px;border-radius:var(--ui-radius-sm)}.ui-accordion-item__header:disabled{color:var(--ui-text-disabled);cursor:not-allowed}.ui-accordion-item__title{flex:1;min-width:0}.ui-accordion-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--ui-spacing-sm);color:var(--ui-text-muted);transition:transform var(--ui-transition-normal)}.ui-accordion-item__icon--rotated{transform:rotate(180deg)}.ui-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ui-transition-normal)}.ui-accordion-item--expanded .ui-accordion-item__panel{grid-template-rows:1fr}.ui-accordion-item__content{overflow:hidden}.ui-accordion-item__content>:first-child{padding:0 var(--ui-spacing-md) var(--ui-spacing-md)}.ui-accordion-item--disabled{opacity:.6}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-accordion-item', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-accordion-item\"\n  [class.ui-accordion-item--expanded]=\"isExpanded()\"\n  [class.ui-accordion-item--disabled]=\"disabled()\"\n>\n  <button\n    type=\"button\"\n    class=\"ui-accordion-item__header\"\n    [disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    [attr.aria-controls]=\"'accordion-panel-' + _index()\"\n  >\n    @if (headerTemplate()) {\n      <span class=\"ui-accordion-item__title\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate()!\" />\n      </span>\n    } @else {\n      <span class=\"ui-accordion-item__title\">{{ header() }}</span>\n    }\n    <span\n      class=\"ui-accordion-item__icon\"\n      [class.ui-accordion-item__icon--rotated]=\"isExpanded()\"\n    >\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n  <div\n    class=\"ui-accordion-item__panel\"\n    [attr.id]=\"'accordion-panel-' + _index()\"\n    role=\"region\"\n  >\n    <div class=\"ui-accordion-item__content\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.ui-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ui-spacing-md);border:none;background:transparent;color:var(--ui-text);font-size:var(--ui-font-sm);font-weight:500;cursor:pointer;transition:background-color var(--ui-transition-fast);text-align:left}.ui-accordion-item__header:hover:not(:disabled){background-color:var(--ui-bg-hover)}.ui-accordion-item__header:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px;border-radius:var(--ui-radius-sm)}.ui-accordion-item__header:disabled{color:var(--ui-text-disabled);cursor:not-allowed}.ui-accordion-item__title{flex:1;min-width:0}.ui-accordion-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--ui-spacing-sm);color:var(--ui-text-muted);transition:transform var(--ui-transition-normal)}.ui-accordion-item__icon--rotated{transform:rotate(180deg)}.ui-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ui-transition-normal)}.ui-accordion-item--expanded .ui-accordion-item__panel{grid-template-rows:1fr}.ui-accordion-item__content{overflow:hidden}.ui-accordion-item__content>:first-child{padding:0 var(--ui-spacing-md) var(--ui-spacing-md)}.ui-accordion-item--disabled{opacity:.6}\n"] }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], headerDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AccordionHeaderDirective), { isSignal: true }] }] } });
+
+class AccordionComponent {
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    items = contentChildren(AccordionItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    accordionClasses = computed(() => {
+        return `ui-accordion--${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "accordionClasses" }] : []));
+    ngAfterContentInit() {
+        this._setupItems();
+    }
+    _setupItems() {
+        const itemList = this.items();
+        itemList.forEach((item, index) => {
+            item._setParent(this, index);
+        });
+    }
+    /** @internal */
+    _onItemToggled(expandedItem) {
+        if (this.multi())
+            return;
+        const itemList = this.items();
+        for (const item of itemList) {
+            if (item !== expandedItem && item.isExpanded()) {
+                item.collapse();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: AccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: AccordionItemComponent, isSignal: true }], ngImport: i0, template: "<div class=\"ui-accordion\" [class]=\"accordionClasses()\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}.ui-accordion{width:100%}.ui-accordion--default{border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden}.ui-accordion--default ::ng-deep>ui-accordion-item+ui-accordion-item{border-top:1px solid var(--ui-border)}.ui-accordion--bordered{border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background-color:var(--ui-bg-secondary);overflow:hidden}.ui-accordion--bordered ::ng-deep>ui-accordion-item+ui-accordion-item{border-top:1px solid var(--ui-border)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__header{background-color:var(--ui-bg-secondary)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__header:hover:not(:disabled){background-color:var(--ui-bg-hover)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__content>:first-child{background-color:var(--ui-bg);border-radius:var(--ui-radius-sm);margin:0 var(--ui-spacing-sm) var(--ui-spacing-sm);padding:var(--ui-spacing-md)}.ui-accordion--separated{display:flex;flex-direction:column;gap:var(--ui-spacing-sm)}.ui-accordion--separated ::ng-deep>ui-accordion-item{border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-accordion', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-accordion\" [class]=\"accordionClasses()\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}.ui-accordion{width:100%}.ui-accordion--default{border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden}.ui-accordion--default ::ng-deep>ui-accordion-item+ui-accordion-item{border-top:1px solid var(--ui-border)}.ui-accordion--bordered{border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background-color:var(--ui-bg-secondary);overflow:hidden}.ui-accordion--bordered ::ng-deep>ui-accordion-item+ui-accordion-item{border-top:1px solid var(--ui-border)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__header{background-color:var(--ui-bg-secondary)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__header:hover:not(:disabled){background-color:var(--ui-bg-hover)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__content>:first-child{background-color:var(--ui-bg);border-radius:var(--ui-radius-sm);margin:0 var(--ui-spacing-sm) var(--ui-spacing-sm);padding:var(--ui-spacing-md)}.ui-accordion--separated{display:flex;flex-direction:column;gap:var(--ui-spacing-sm)}.ui-accordion--separated ::ng-deep>ui-accordion-item{border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden}\n"] }]
+        }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { isSignal: true }] }] } });
+
 class PaginationComponent {
     total = input.required(...(ngDevMode ? [{ debugName: "total" }] : []));
     pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
@@ -2649,5 +2674,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CheckboxComponent, CircularProgressComponent, ContentComponent, DIALOG_DATA, DIALOG_REF, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, FileChooserComponent, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SpinnerComponent, SwitchComponent, TabComponent, TabIconDirective, TableComponent, TabsComponent, TextareaComponent, ToastRef, ToastService, TooltipDirective };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CheckboxComponent, CircularProgressComponent, ContentComponent, DIALOG_DATA, DIALOG_REF, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, FileChooserComponent, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SpinnerComponent, SwitchComponent, TabComponent, TabIconDirective, TableComponent, TabsComponent, TextareaComponent, ToastRef, ToastService, TooltipDirective };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map