@m1z23r/ngx-ui 1.1.45 → 1.1.47

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -984,11 +984,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\" (mousedown)=\"onBackdropMouseDown($event)\" (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 });
+    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\" (mousedown)=\"onBackdropMouseDown($event)\" (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:var(--ui-backdrop-bg);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, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-modal__backdrop\" (mousedown)=\"onBackdropMouseDown($event)\" (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"] }]
+            args: [{ selector: 'ui-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-modal__backdrop\" (mousedown)=\"onBackdropMouseDown($event)\" (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:var(--ui-backdrop-bg);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']
@@ -2553,11 +2553,11 @@ class BadgeComponent {
         this.removed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BadgeComponent, isStandalone: true, selector: "ui-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span [class]=\"badgeClass()\">\n  <ng-content />\n  @if (removable()) {\n    <button type=\"button\" class=\"ui-badge__remove\" (click)=\"onRemove($event)\" aria-label=\"Remove\">\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M4 4l8 8M12 4l-8 8\"/>\n      </svg>\n    </button>\n  }\n</span>\n", styles: [":host{display:inline-flex}.ui-badge{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);font-weight:500;border-radius:var(--ui-radius-sm);transition:all var(--ui-transition-fast)}.ui-badge--sm{padding:.125rem .375rem;font-size:.675rem}.ui-badge--md{padding:.25rem .5rem;font-size:.75rem}.ui-badge--lg{padding:.375rem .625rem;font-size:.875rem}.ui-badge--rounded{border-radius:9999px}.ui-badge--default{background:var(--ui-bg-tertiary);color:var(--ui-text)}.ui-badge--primary{background:color-mix(in srgb,var(--ui-primary) 15%,transparent);color:var(--ui-primary)}.ui-badge--success{background:color-mix(in srgb,var(--ui-success) 15%,transparent);color:var(--ui-success)}.ui-badge--warning{background:color-mix(in srgb,var(--ui-warning) 15%,transparent);color:var(--ui-warning)}.ui-badge--danger{background:color-mix(in srgb,var(--ui-danger) 15%,transparent);color:var(--ui-danger)}.ui-badge--info{background:color-mix(in srgb,var(--ui-info, #3b82f6) 15%,transparent);color:var(--ui-info, #3b82f6)}.ui-badge__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:currentColor;cursor:pointer;opacity:.7;transition:opacity var(--ui-transition-fast);border-radius:var(--ui-radius-sm)}.ui-badge__remove:hover{opacity:1}.ui-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}.ui-badge__remove svg{width:.75em;height:.75em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: BadgeComponent, isStandalone: true, selector: "ui-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<span [class]=\"badgeClass()\">\n  <ng-content />\n  @if (removable()) {\n    <button type=\"button\" class=\"ui-badge__remove\" (click)=\"onRemove($event)\" aria-label=\"Remove\">\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M4 4l8 8M12 4l-8 8\"/>\n      </svg>\n    </button>\n  }\n</span>\n", styles: [":host{display:inline-flex}.ui-badge{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);font-weight:500;border-radius:var(--ui-radius-sm);transition:all var(--ui-transition-fast)}.ui-badge--sm{padding:.125rem .375rem;font-size:.675rem}.ui-badge--md{padding:.25rem .5rem;font-size:.75rem}.ui-badge--lg{padding:.375rem .625rem;font-size:.875rem}.ui-badge--rounded{border-radius:9999px}.ui-badge--default{background:var(--ui-bg-tertiary);color:var(--ui-text)}.ui-badge--primary{background:color-mix(in srgb,var(--ui-primary) 15%,transparent);color:var(--ui-primary)}.ui-badge--success{background:color-mix(in srgb,var(--ui-success) 15%,transparent);color:var(--ui-success)}.ui-badge--warning{background:color-mix(in srgb,var(--ui-warning) 15%,transparent);color:var(--ui-warning)}.ui-badge--danger{background:color-mix(in srgb,var(--ui-danger) 15%,transparent);color:var(--ui-danger)}.ui-badge--info{background:color-mix(in srgb,var(--ui-info) 15%,transparent);color:var(--ui-info)}.ui-badge__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:currentColor;cursor:pointer;opacity:.7;transition:opacity var(--ui-transition-fast);border-radius:var(--ui-radius-sm)}.ui-badge__remove:hover{opacity:1}.ui-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}.ui-badge__remove svg{width:.75em;height:.75em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"badgeClass()\">\n  <ng-content />\n  @if (removable()) {\n    <button type=\"button\" class=\"ui-badge__remove\" (click)=\"onRemove($event)\" aria-label=\"Remove\">\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M4 4l8 8M12 4l-8 8\"/>\n      </svg>\n    </button>\n  }\n</span>\n", styles: [":host{display:inline-flex}.ui-badge{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);font-weight:500;border-radius:var(--ui-radius-sm);transition:all var(--ui-transition-fast)}.ui-badge--sm{padding:.125rem .375rem;font-size:.675rem}.ui-badge--md{padding:.25rem .5rem;font-size:.75rem}.ui-badge--lg{padding:.375rem .625rem;font-size:.875rem}.ui-badge--rounded{border-radius:9999px}.ui-badge--default{background:var(--ui-bg-tertiary);color:var(--ui-text)}.ui-badge--primary{background:color-mix(in srgb,var(--ui-primary) 15%,transparent);color:var(--ui-primary)}.ui-badge--success{background:color-mix(in srgb,var(--ui-success) 15%,transparent);color:var(--ui-success)}.ui-badge--warning{background:color-mix(in srgb,var(--ui-warning) 15%,transparent);color:var(--ui-warning)}.ui-badge--danger{background:color-mix(in srgb,var(--ui-danger) 15%,transparent);color:var(--ui-danger)}.ui-badge--info{background:color-mix(in srgb,var(--ui-info, #3b82f6) 15%,transparent);color:var(--ui-info, #3b82f6)}.ui-badge__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:currentColor;cursor:pointer;opacity:.7;transition:opacity var(--ui-transition-fast);border-radius:var(--ui-radius-sm)}.ui-badge__remove:hover{opacity:1}.ui-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}.ui-badge__remove svg{width:.75em;height:.75em}\n"] }]
+            args: [{ selector: 'ui-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"badgeClass()\">\n  <ng-content />\n  @if (removable()) {\n    <button type=\"button\" class=\"ui-badge__remove\" (click)=\"onRemove($event)\" aria-label=\"Remove\">\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M4 4l8 8M12 4l-8 8\"/>\n      </svg>\n    </button>\n  }\n</span>\n", styles: [":host{display:inline-flex}.ui-badge{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);font-weight:500;border-radius:var(--ui-radius-sm);transition:all var(--ui-transition-fast)}.ui-badge--sm{padding:.125rem .375rem;font-size:.675rem}.ui-badge--md{padding:.25rem .5rem;font-size:.75rem}.ui-badge--lg{padding:.375rem .625rem;font-size:.875rem}.ui-badge--rounded{border-radius:9999px}.ui-badge--default{background:var(--ui-bg-tertiary);color:var(--ui-text)}.ui-badge--primary{background:color-mix(in srgb,var(--ui-primary) 15%,transparent);color:var(--ui-primary)}.ui-badge--success{background:color-mix(in srgb,var(--ui-success) 15%,transparent);color:var(--ui-success)}.ui-badge--warning{background:color-mix(in srgb,var(--ui-warning) 15%,transparent);color:var(--ui-warning)}.ui-badge--danger{background:color-mix(in srgb,var(--ui-danger) 15%,transparent);color:var(--ui-danger)}.ui-badge--info{background:color-mix(in srgb,var(--ui-info) 15%,transparent);color:var(--ui-info)}.ui-badge__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:currentColor;cursor:pointer;opacity:.7;transition:opacity var(--ui-transition-fast);border-radius:var(--ui-radius-sm)}.ui-badge__remove:hover{opacity:1}.ui-badge__remove:focus-visible{outline:2px solid currentColor;outline-offset:1px}.ui-badge__remove svg{width:.75em;height:.75em}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 class TextareaComponent {
@@ -2619,11 +2619,11 @@ class ProgressComponent {
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "barClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ProgressComponent, isStandalone: true, selector: "ui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"trackClass()\" role=\"progressbar\"\n     [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n     [attr.aria-valuemin]=\"indeterminate() ? null : 0\"\n     [attr.aria-valuemax]=\"indeterminate() ? null : 100\">\n  <div [class]=\"barClass()\" [style.width]=\"barWidth()\">\n    @if (showLabel() && !indeterminate()) {\n      <span class=\"ui-progress__label\">{{ clampedValue() }}%</span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.ui-progress{width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);overflow:hidden}.ui-progress--sm{height:4px}.ui-progress--md{height:8px}.ui-progress--lg{height:12px}.ui-progress__bar{height:100%;border-radius:inherit;transition:width var(--ui-transition-normal) ease;display:flex;align-items:center;justify-content:center}.ui-progress__bar--primary{background:var(--ui-primary)}.ui-progress__bar--success{background:var(--ui-success)}.ui-progress__bar--warning{background:var(--ui-warning)}.ui-progress__bar--danger{background:var(--ui-danger)}.ui-progress__bar--striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.ui-progress__bar--animated{animation:ui-progress-stripes 1s linear infinite}.ui-progress__bar--indeterminate{width:30%!important;animation:ui-progress-indeterminate 1.5s ease-in-out infinite}.ui-progress__label{font-size:.625rem;font-weight:600;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2)}@keyframes ui-progress-stripes{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes ui-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ProgressComponent, isStandalone: true, selector: "ui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"trackClass()\" role=\"progressbar\"\n     [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n     [attr.aria-valuemin]=\"indeterminate() ? null : 0\"\n     [attr.aria-valuemax]=\"indeterminate() ? null : 100\">\n  <div [class]=\"barClass()\" [style.width]=\"barWidth()\">\n    @if (showLabel() && !indeterminate()) {\n      <span class=\"ui-progress__label\">{{ clampedValue() }}%</span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.ui-progress{width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);overflow:hidden}.ui-progress--sm{height:4px}.ui-progress--md{height:8px}.ui-progress--lg{height:12px}.ui-progress__bar{height:100%;border-radius:inherit;transition:width var(--ui-transition-normal) ease;display:flex;align-items:center;justify-content:center}.ui-progress__bar--primary{background:var(--ui-primary)}.ui-progress__bar--success{background:var(--ui-success)}.ui-progress__bar--warning{background:var(--ui-warning)}.ui-progress__bar--danger{background:var(--ui-danger)}.ui-progress__bar--striped{background-image:linear-gradient(45deg,var(--ui-progress-stripe-color) 25%,transparent 25%,transparent 50%,var(--ui-progress-stripe-color) 50%,var(--ui-progress-stripe-color) 75%,transparent 75%,transparent);background-size:1rem 1rem}.ui-progress__bar--animated{animation:ui-progress-stripes 1s linear infinite}.ui-progress__bar--indeterminate{width:30%!important;animation:ui-progress-indeterminate 1.5s ease-in-out infinite}.ui-progress__label{font-size:.625rem;font-weight:600;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2)}@keyframes ui-progress-stripes{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes ui-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-progress', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"trackClass()\" role=\"progressbar\"\n     [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n     [attr.aria-valuemin]=\"indeterminate() ? null : 0\"\n     [attr.aria-valuemax]=\"indeterminate() ? null : 100\">\n  <div [class]=\"barClass()\" [style.width]=\"barWidth()\">\n    @if (showLabel() && !indeterminate()) {\n      <span class=\"ui-progress__label\">{{ clampedValue() }}%</span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.ui-progress{width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);overflow:hidden}.ui-progress--sm{height:4px}.ui-progress--md{height:8px}.ui-progress--lg{height:12px}.ui-progress__bar{height:100%;border-radius:inherit;transition:width var(--ui-transition-normal) ease;display:flex;align-items:center;justify-content:center}.ui-progress__bar--primary{background:var(--ui-primary)}.ui-progress__bar--success{background:var(--ui-success)}.ui-progress__bar--warning{background:var(--ui-warning)}.ui-progress__bar--danger{background:var(--ui-danger)}.ui-progress__bar--striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.ui-progress__bar--animated{animation:ui-progress-stripes 1s linear infinite}.ui-progress__bar--indeterminate{width:30%!important;animation:ui-progress-indeterminate 1.5s ease-in-out infinite}.ui-progress__label{font-size:.625rem;font-weight:600;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2)}@keyframes ui-progress-stripes{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes ui-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}\n"] }]
+            args: [{ selector: 'ui-progress', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"trackClass()\" role=\"progressbar\"\n     [attr.aria-valuenow]=\"indeterminate() ? null : clampedValue()\"\n     [attr.aria-valuemin]=\"indeterminate() ? null : 0\"\n     [attr.aria-valuemax]=\"indeterminate() ? null : 100\">\n  <div [class]=\"barClass()\" [style.width]=\"barWidth()\">\n    @if (showLabel() && !indeterminate()) {\n      <span class=\"ui-progress__label\">{{ clampedValue() }}%</span>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.ui-progress{width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);overflow:hidden}.ui-progress--sm{height:4px}.ui-progress--md{height:8px}.ui-progress--lg{height:12px}.ui-progress__bar{height:100%;border-radius:inherit;transition:width var(--ui-transition-normal) ease;display:flex;align-items:center;justify-content:center}.ui-progress__bar--primary{background:var(--ui-primary)}.ui-progress__bar--success{background:var(--ui-success)}.ui-progress__bar--warning{background:var(--ui-warning)}.ui-progress__bar--danger{background:var(--ui-danger)}.ui-progress__bar--striped{background-image:linear-gradient(45deg,var(--ui-progress-stripe-color) 25%,transparent 25%,transparent 50%,var(--ui-progress-stripe-color) 50%,var(--ui-progress-stripe-color) 75%,transparent 75%,transparent);background-size:1rem 1rem}.ui-progress__bar--animated{animation:ui-progress-stripes 1s linear infinite}.ui-progress__bar--indeterminate{width:30%!important;animation:ui-progress-indeterminate 1.5s ease-in-out infinite}.ui-progress__label{font-size:.625rem;font-weight:600;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2)}@keyframes ui-progress-stripes{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes ui-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
 
 class CircularProgressComponent {
@@ -2696,11 +2696,11 @@ class AlertComponent {
         this.dismissed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AlertComponent, isStandalone: true, selector: "ui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "@if (visible()) {\n  <div [class]=\"alertClass()\" role=\"alert\">\n    @if (showIcon()) {\n      <span class=\"ui-alert__icon\">\n        @switch (variant()) {\n          @case ('success') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @case ('warning') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @case ('danger') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @default {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n        }\n      </span>\n    }\n    <div class=\"ui-alert__content\">\n      @if (title()) {\n        <h4 class=\"ui-alert__title\">{{ title() }}</h4>\n      }\n      <div class=\"ui-alert__message\">\n        <ng-content />\n      </div>\n    </div>\n    @if (dismissible()) {\n      <button type=\"button\" class=\"ui-alert__close\" (click)=\"dismiss()\" aria-label=\"Dismiss\">\n        <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/>\n        </svg>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block}.ui-alert{display:flex;align-items:flex-start;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);border-radius:var(--ui-radius-md);border:1px solid transparent}.ui-alert--info{background:color-mix(in srgb,var(--ui-info, #3b82f6) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-info, #3b82f6) 30%,transparent);color:var(--ui-info, #3b82f6)}.ui-alert--success{background:color-mix(in srgb,var(--ui-success) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-success) 30%,transparent);color:var(--ui-success)}.ui-alert--warning{background:color-mix(in srgb,var(--ui-warning) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-warning) 30%,transparent);color:var(--ui-warning)}.ui-alert--danger{background:color-mix(in srgb,var(--ui-danger) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-danger) 30%,transparent);color:var(--ui-danger)}.ui-alert__icon{flex-shrink:0;width:1.25rem;height:1.25rem}.ui-alert__icon svg{width:100%;height:100%}.ui-alert__content{flex:1;min-width:0}.ui-alert__title{margin:0 0 .25rem;font-size:.875rem;font-weight:600}.ui-alert__message{font-size:.875rem;color:var(--ui-text)}.ui-alert__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;background:transparent;color:currentColor;opacity:.7;cursor:pointer;border-radius:var(--ui-radius-sm);transition:opacity var(--ui-transition-fast)}.ui-alert__close:hover{opacity:1}.ui-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.ui-alert__close svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AlertComponent, isStandalone: true, selector: "ui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "@if (visible()) {\n  <div [class]=\"alertClass()\" role=\"alert\">\n    @if (showIcon()) {\n      <span class=\"ui-alert__icon\">\n        @switch (variant()) {\n          @case ('success') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @case ('warning') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @case ('danger') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @default {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n        }\n      </span>\n    }\n    <div class=\"ui-alert__content\">\n      @if (title()) {\n        <h4 class=\"ui-alert__title\">{{ title() }}</h4>\n      }\n      <div class=\"ui-alert__message\">\n        <ng-content />\n      </div>\n    </div>\n    @if (dismissible()) {\n      <button type=\"button\" class=\"ui-alert__close\" (click)=\"dismiss()\" aria-label=\"Dismiss\">\n        <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/>\n        </svg>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block}.ui-alert{display:flex;align-items:flex-start;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);border-radius:var(--ui-radius-md);border:1px solid transparent}.ui-alert--info{background:color-mix(in srgb,var(--ui-info) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-info) 30%,transparent);color:var(--ui-info)}.ui-alert--success{background:color-mix(in srgb,var(--ui-success) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-success) 30%,transparent);color:var(--ui-success)}.ui-alert--warning{background:color-mix(in srgb,var(--ui-warning) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-warning) 30%,transparent);color:var(--ui-warning)}.ui-alert--danger{background:color-mix(in srgb,var(--ui-danger) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-danger) 30%,transparent);color:var(--ui-danger)}.ui-alert__icon{flex-shrink:0;width:1.25rem;height:1.25rem}.ui-alert__icon svg{width:100%;height:100%}.ui-alert__content{flex:1;min-width:0}.ui-alert__title{margin:0 0 .25rem;font-size:.875rem;font-weight:600}.ui-alert__message{font-size:.875rem;color:var(--ui-text)}.ui-alert__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;background:transparent;color:currentColor;opacity:.7;cursor:pointer;border-radius:var(--ui-radius-sm);transition:opacity var(--ui-transition-fast)}.ui-alert__close:hover{opacity:1}.ui-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.ui-alert__close svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n  <div [class]=\"alertClass()\" role=\"alert\">\n    @if (showIcon()) {\n      <span class=\"ui-alert__icon\">\n        @switch (variant()) {\n          @case ('success') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @case ('warning') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @case ('danger') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @default {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n        }\n      </span>\n    }\n    <div class=\"ui-alert__content\">\n      @if (title()) {\n        <h4 class=\"ui-alert__title\">{{ title() }}</h4>\n      }\n      <div class=\"ui-alert__message\">\n        <ng-content />\n      </div>\n    </div>\n    @if (dismissible()) {\n      <button type=\"button\" class=\"ui-alert__close\" (click)=\"dismiss()\" aria-label=\"Dismiss\">\n        <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/>\n        </svg>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block}.ui-alert{display:flex;align-items:flex-start;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);border-radius:var(--ui-radius-md);border:1px solid transparent}.ui-alert--info{background:color-mix(in srgb,var(--ui-info, #3b82f6) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-info, #3b82f6) 30%,transparent);color:var(--ui-info, #3b82f6)}.ui-alert--success{background:color-mix(in srgb,var(--ui-success) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-success) 30%,transparent);color:var(--ui-success)}.ui-alert--warning{background:color-mix(in srgb,var(--ui-warning) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-warning) 30%,transparent);color:var(--ui-warning)}.ui-alert--danger{background:color-mix(in srgb,var(--ui-danger) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-danger) 30%,transparent);color:var(--ui-danger)}.ui-alert__icon{flex-shrink:0;width:1.25rem;height:1.25rem}.ui-alert__icon svg{width:100%;height:100%}.ui-alert__content{flex:1;min-width:0}.ui-alert__title{margin:0 0 .25rem;font-size:.875rem;font-weight:600}.ui-alert__message{font-size:.875rem;color:var(--ui-text)}.ui-alert__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;background:transparent;color:currentColor;opacity:.7;cursor:pointer;border-radius:var(--ui-radius-sm);transition:opacity var(--ui-transition-fast)}.ui-alert__close:hover{opacity:1}.ui-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.ui-alert__close svg{width:1rem;height:1rem}\n"] }]
+            args: [{ selector: 'ui-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n  <div [class]=\"alertClass()\" role=\"alert\">\n    @if (showIcon()) {\n      <span class=\"ui-alert__icon\">\n        @switch (variant()) {\n          @case ('success') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @case ('warning') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @case ('danger') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n          @default {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"/>\n            </svg>\n          }\n        }\n      </span>\n    }\n    <div class=\"ui-alert__content\">\n      @if (title()) {\n        <h4 class=\"ui-alert__title\">{{ title() }}</h4>\n      }\n      <div class=\"ui-alert__message\">\n        <ng-content />\n      </div>\n    </div>\n    @if (dismissible()) {\n      <button type=\"button\" class=\"ui-alert__close\" (click)=\"dismiss()\" aria-label=\"Dismiss\">\n        <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/>\n        </svg>\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block}.ui-alert{display:flex;align-items:flex-start;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-md);border-radius:var(--ui-radius-md);border:1px solid transparent}.ui-alert--info{background:color-mix(in srgb,var(--ui-info) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-info) 30%,transparent);color:var(--ui-info)}.ui-alert--success{background:color-mix(in srgb,var(--ui-success) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-success) 30%,transparent);color:var(--ui-success)}.ui-alert--warning{background:color-mix(in srgb,var(--ui-warning) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-warning) 30%,transparent);color:var(--ui-warning)}.ui-alert--danger{background:color-mix(in srgb,var(--ui-danger) 10%,var(--ui-bg));border-color:color-mix(in srgb,var(--ui-danger) 30%,transparent);color:var(--ui-danger)}.ui-alert__icon{flex-shrink:0;width:1.25rem;height:1.25rem}.ui-alert__icon svg{width:100%;height:100%}.ui-alert__content{flex:1;min-width:0}.ui-alert__title{margin:0 0 .25rem;font-size:.875rem;font-weight:600}.ui-alert__message{font-size:.875rem;color:var(--ui-text)}.ui-alert__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;background:transparent;color:currentColor;opacity:.7;cursor:pointer;border-radius:var(--ui-radius-sm);transition:opacity var(--ui-transition-fast)}.ui-alert__close:hover{opacity:1}.ui-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.ui-alert__close svg{width:1rem;height:1rem}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
 
 class CardComponent {
@@ -3969,6 +3969,11 @@ class ChipInputComponent {
     allowDuplicates = input(false, ...(ngDevMode ? [{ debugName: "allowDuplicates" }] : []));
     /** When false, only emits the `added` event without adding to the array (useful for custom object chips) */
     autoAdd = input(true, ...(ngDevMode ? [{ debugName: "autoAdd" }] : []));
+    suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    asyncSearch = input(null, ...(ngDevMode ? [{ debugName: "asyncSearch" }] : []));
+    strict = input(false, ...(ngDevMode ? [{ debugName: "strict" }] : []));
+    minSearchLength = input(0, ...(ngDevMode ? [{ debugName: "minSearchLength" }] : []));
+    debounceTime = input(300, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
     /** The array of chip values */
     value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Emitted when a chip is added */
@@ -3977,9 +3982,24 @@ class ChipInputComponent {
     removed = output();
     /** Custom chip template */
     chipTemplate = contentChild(ChipTemplateDirective, { ...(ngDevMode ? { debugName: "chipTemplate" } : {}), read: TemplateRef });
+    optionTemplate = contentChild(OptionTemplateDirective, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
     inputRef;
+    triggerRef;
+    dropdownRef;
     inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
     isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    asyncOptions = signal([], ...(ngDevMode ? [{ debugName: "asyncOptions" }] : []));
+    asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "asyncLoading" }] : []));
+    asyncError = signal(null, ...(ngDevMode ? [{ debugName: "asyncError" }] : []));
+    labelCache = new Map();
+    elementRef = inject(ElementRef);
+    document = inject(DOCUMENT);
+    asyncSearchAbortController = null;
+    debounceTimer = null;
+    blurCloseTimer = null;
+    positionCleanup = null;
     containerClasses = computed(() => {
         const classes = [
             `ui-chip-input--${this.variant()}`,
@@ -3993,27 +4013,115 @@ class ChipInputComponent {
             classes.push('ui-chip-input--error');
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    isAsyncMode = computed(() => this.asyncSearch() !== null, ...(ngDevMode ? [{ debugName: "isAsyncMode" }] : []));
+    normalizedSuggestions = computed(() => {
+        return this.suggestions().map((s) => typeof s === 'string' ? { label: s, value: s } : s);
+    }, ...(ngDevMode ? [{ debugName: "normalizedSuggestions" }] : []));
+    visibleSuggestions = computed(() => {
+        const source = this.isAsyncMode() ? this.asyncOptions() : this.normalizedSuggestions();
+        const selected = this.value();
+        const query = this.inputValue().toLowerCase().trim();
+        const notPicked = source.filter((opt) => !selected.includes(opt.value));
+        if (this.isAsyncMode())
+            return notPicked;
+        if (!query)
+            return notPicked;
+        return notPicked.filter((opt) => opt.label.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "visibleSuggestions" }] : []));
+    exactMatchExists = computed(() => {
+        const query = this.inputValue().toLowerCase().trim();
+        if (!query)
+            return true;
+        const source = this.isAsyncMode() ? this.asyncOptions() : this.normalizedSuggestions();
+        return source.some((opt) => opt.label.toLowerCase() === query);
+    }, ...(ngDevMode ? [{ debugName: "exactMatchExists" }] : []));
+    showCreateRow = computed(() => {
+        return (!this.strict() &&
+            this.inputValue().trim().length > 0 &&
+            !this.exactMatchExists());
+    }, ...(ngDevMode ? [{ debugName: "showCreateRow" }] : []));
+    ngOnDestroy() {
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (dropdown?.parentElement === this.document.body) {
+            this.document.body.removeChild(dropdown);
+        }
+        this.removePositionListeners();
+        this.cancelAsyncSearch();
+        if (this.blurCloseTimer) {
+            clearTimeout(this.blurCloseTimer);
+            this.blurCloseTimer = null;
+        }
+    }
     onContainerClick() {
         if (!this.disabled()) {
             this.inputRef?.nativeElement?.focus();
         }
     }
     onInputKeydown(event) {
-        const value = this.inputValue().trim();
+        const trimmed = this.inputValue().trim();
         switch (event.key) {
-            case 'Enter':
+            case 'Enter': {
                 event.preventDefault();
-                if (value) {
-                    this.addChip(value);
+                const focused = this.focusedIndex();
+                const visible = this.visibleSuggestions();
+                if (focused >= 0 && focused < visible.length) {
+                    this.addSuggestion(visible[focused]);
+                }
+                else if (!this.strict() && trimmed) {
+                    this.addChip(trimmed);
+                    setTimeout(() => this.updateDropdownPosition());
                 }
                 break;
+            }
+            case 'ArrowDown': {
+                if (!this.isOpen()) {
+                    this.open();
+                    return;
+                }
+                event.preventDefault();
+                const visible = this.visibleSuggestions();
+                let next = this.focusedIndex() + 1;
+                while (next < visible.length && visible[next].disabled)
+                    next++;
+                if (next < visible.length)
+                    this.focusedIndex.set(next);
+                break;
+            }
+            case 'ArrowUp': {
+                if (!this.isOpen())
+                    return;
+                event.preventDefault();
+                const visible = this.visibleSuggestions();
+                let prev = this.focusedIndex() - 1;
+                while (prev >= 0 && visible[prev].disabled)
+                    prev--;
+                if (prev >= 0)
+                    this.focusedIndex.set(prev);
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
             case 'Backspace':
-                if (!value && this.value().length > 0) {
+                if (!trimmed && this.value().length > 0) {
                     this.removeChip(this.value()[this.value().length - 1]);
                 }
                 break;
         }
     }
+    onInputChange(value) {
+        this.inputValue.set(value);
+        this.focusedIndex.set(-1);
+        if (!this.isOpen())
+            this.open();
+        if (this.isAsyncMode()) {
+            this.triggerAsyncSearch(value);
+        }
+        else {
+            setTimeout(() => this.updateDropdownPosition());
+        }
+    }
     addChip(chipValue) {
         const current = this.value();
         // For string chips, check duplicates
@@ -4026,8 +4134,29 @@ class ChipInputComponent {
         this.inputValue.set('');
         this.added.emit(chipValue);
     }
+    addSuggestion(option) {
+        if (option.disabled)
+            return;
+        const current = this.value();
+        if (!this.allowDuplicates() && current.includes(option.value))
+            return;
+        if (option.label !== String(option.value)) {
+            this.labelCache.set(option.value, option.label);
+        }
+        if (this.autoAdd()) {
+            this.value.set([...current, option.value]);
+        }
+        this.inputValue.set('');
+        this.added.emit(option.label);
+        this.focusedIndex.set(-1);
+        setTimeout(() => {
+            this.updateDropdownPosition();
+            this.inputRef?.nativeElement?.focus();
+        });
+    }
     removeChip(chipValue) {
         this.value.set(this.value().filter((v) => v !== chipValue));
+        this.labelCache.delete(chipValue);
         this.removed.emit(chipValue);
         // Refocus input after removal
         setTimeout(() => this.inputRef?.nativeElement?.focus());
@@ -4041,23 +4170,202 @@ class ChipInputComponent {
     }
     /** Get display text for a chip (for default template) */
     getChipDisplay(chip) {
-        return String(chip);
+        return this.labelCache.get(chip) ?? String(chip);
     }
     onFocus() {
         this.isFocused.set(true);
+        if (this.blurCloseTimer) {
+            clearTimeout(this.blurCloseTimer);
+            this.blurCloseTimer = null;
+        }
+        this.open();
     }
     onBlur() {
         this.isFocused.set(false);
+        this.blurCloseTimer = setTimeout(() => {
+            this.close();
+            this.blurCloseTimer = null;
+        }, 150);
+    }
+    onDropdownMousedown(event) {
+        event.preventDefault();
+        if (this.blurCloseTimer) {
+            clearTimeout(this.blurCloseTimer);
+            this.blurCloseTimer = null;
+        }
+    }
+    open() {
+        if (this.disabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.focusedIndex.set(-1);
+        this.portalDropdown();
+        if (this.isAsyncMode()) {
+            this.triggerAsyncSearch(this.inputValue());
+        }
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.unportalDropdown();
+        this.isOpen.set(false);
+        this.focusedIndex.set(-1);
+        this.cancelAsyncSearch();
+        this.asyncLoading.set(false);
+        this.asyncError.set(null);
+    }
+    onDocumentClick(event) {
+        const target = event.target;
+        if (!this.elementRef.nativeElement.contains(target) &&
+            !this.dropdownRef?.nativeElement?.contains(target)) {
+            this.close();
+        }
+    }
+    portalDropdown() {
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (!dropdown)
+            return;
+        dropdown.style.display = 'block';
+        this.document.body.appendChild(dropdown);
+        this.updateDropdownPosition();
+        this.addPositionListeners();
+    }
+    unportalDropdown() {
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (!dropdown)
+            return;
+        if (dropdown.parentElement === this.document.body) {
+            const wrapper = this.elementRef.nativeElement.querySelector('.ui-chip-input-wrapper');
+            if (wrapper)
+                wrapper.appendChild(dropdown);
+        }
+        dropdown.style.display = '';
+        dropdown.style.position = '';
+        dropdown.style.top = '';
+        dropdown.style.left = '';
+        dropdown.style.bottom = '';
+        dropdown.style.width = '';
+        dropdown.style.zIndex = '';
+        dropdown.style.margin = '';
+        this.removePositionListeners();
+    }
+    updateDropdownPosition() {
+        const trigger = this.triggerRef?.nativeElement;
+        const dropdown = this.dropdownRef?.nativeElement;
+        if (!trigger || !dropdown)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const dropdownHeight = dropdown.scrollHeight;
+        const gap = 4;
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        const openAbove = spaceBelow < dropdownHeight + gap && spaceAbove > spaceBelow;
+        dropdown.style.position = 'fixed';
+        dropdown.style.width = `${triggerRect.width}px`;
+        dropdown.style.left = `${triggerRect.left}px`;
+        dropdown.style.zIndex = '99999';
+        dropdown.style.margin = '0';
+        if (openAbove) {
+            dropdown.style.top = 'auto';
+            dropdown.style.bottom = `${window.innerHeight - triggerRect.top + gap}px`;
+        }
+        else {
+            dropdown.style.top = `${triggerRect.bottom + gap}px`;
+            dropdown.style.bottom = 'auto';
+        }
+    }
+    addPositionListeners() {
+        const update = () => {
+            if (this.isOpen())
+                this.updateDropdownPosition();
+        };
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        this.positionCleanup = () => {
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+        };
+    }
+    removePositionListeners() {
+        this.positionCleanup?.();
+        this.positionCleanup = null;
+    }
+    triggerAsyncSearch(query) {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        if (this.asyncSearchAbortController) {
+            this.asyncSearchAbortController.abort();
+            this.asyncSearchAbortController = null;
+        }
+        const trimmed = query.trim();
+        if (trimmed.length < this.minSearchLength()) {
+            this.asyncOptions.set([]);
+            this.asyncLoading.set(false);
+            this.asyncError.set(null);
+            this.focusedIndex.set(-1);
+            return;
+        }
+        this.asyncLoading.set(true);
+        this.asyncError.set(null);
+        this.debounceTimer = setTimeout(() => {
+            this.executeAsyncSearch(trimmed);
+        }, this.debounceTime());
+    }
+    async executeAsyncSearch(query) {
+        const searchFn = this.asyncSearch();
+        if (!searchFn)
+            return;
+        this.asyncSearchAbortController = new AbortController();
+        const signal = this.asyncSearchAbortController.signal;
+        try {
+            const results = await searchFn(query);
+            if (signal.aborted)
+                return;
+            this.asyncOptions.set(results);
+            this.asyncLoading.set(false);
+            this.asyncError.set(null);
+            this.focusedIndex.set(-1);
+            setTimeout(() => this.updateDropdownPosition());
+        }
+        catch (error) {
+            if (signal.aborted)
+                return;
+            this.asyncOptions.set([]);
+            this.asyncLoading.set(false);
+            this.asyncError.set(error instanceof Error ? error.message : 'Search failed');
+            this.focusedIndex.set(-1);
+        }
+    }
+    cancelAsyncSearch() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
+        if (this.asyncSearchAbortController) {
+            this.asyncSearchAbortController.abort();
+            this.asyncSearchAbortController = null;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ChipInputComponent, isStandalone: true, selector: "ui-chip-input", 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 }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, autoAdd: { classPropertyName: "autoAdd", publicName: "autoAdd", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", added: "added", removed: "removed" }, queries: [{ propertyName: "chipTemplate", first: true, predicate: ChipTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" 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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"inputValue\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}\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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ChipInputComponent, isStandalone: true, selector: "ui-chip-input", 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 }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, autoAdd: { classPropertyName: "autoAdd", publicName: "autoAdd", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, asyncSearch: { classPropertyName: "asyncSearch", publicName: "asyncSearch", isSignal: true, isRequired: false, transformFunction: null }, strict: { classPropertyName: "strict", publicName: "strict", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", added: "added", removed: "removed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "chipTemplate", first: true, predicate: ChipTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: OptionTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    #triggerRef\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" 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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange($any($event.target).value)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      autocomplete=\"off\"\n    />\n  </div>\n\n  <div\n    #dropdownRef\n    class=\"ui-chip-input__dropdown\"\n    [class.ui-chip-input__dropdown--open]=\"isOpen()\"\n    [attr.role]=\"'listbox'\"\n    (mousedown)=\"onDropdownMousedown($event)\"\n  >\n    <div class=\"ui-chip-input__options\">\n      @if (isAsyncMode() && asyncLoading()) {\n        <div class=\"ui-chip-input__loading\">\n          <svg class=\"ui-chip-input__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 (isAsyncMode() && asyncError()) {\n        <div class=\"ui-chip-input__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 visibleSuggestions(); track option.value; let i = $index) {\n          <div\n            class=\"ui-chip-input__suggestion\"\n            [class.ui-chip-input__suggestion--focused]=\"focusedIndex() === i\"\n            [class.ui-chip-input__suggestion--disabled]=\"option.disabled\"\n            [attr.role]=\"'option'\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"addSuggestion(option)\"\n          >\n            @if (optionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.value, option: option.value, selected: false, disabled: !!option.disabled }\"\n              />\n            } @else {\n              <span class=\"ui-chip-input__suggestion-label\">{{ option.label }}</span>\n            }\n          </div>\n        }\n        @if (visibleSuggestions().length === 0 && !showCreateRow()) {\n          @if (isAsyncMode() && inputValue().trim().length < minSearchLength() && minSearchLength() > 0) {\n            <div class=\"ui-chip-input__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n          } @else {\n            <div class=\"ui-chip-input__empty\">No suggestions</div>\n          }\n        }\n      }\n    </div>\n    @if (showCreateRow()) {\n      <div\n        class=\"ui-chip-input__create\"\n        (click)=\"addChip(inputValue().trim())\"\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 \"{{ inputValue().trim() }}\"\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}.ui-chip-input__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-chip-input__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-chip-input__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-chip-input__suggestion{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-chip-input__suggestion:hover:not(.ui-chip-input__suggestion--disabled){background-color:var(--ui-bg-hover)}.ui-chip-input__suggestion--focused{background-color:var(--ui-bg-hover);outline:none}.ui-chip-input__suggestion--disabled{opacity:.5;cursor:not-allowed}.ui-chip-input__suggestion-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-chip-input__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:.875rem;color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-chip-input__create:hover{background-color:var(--ui-bg-hover)}.ui-chip-input__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:.875rem}.ui-chip-input__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:.875rem}.ui-chip-input__spinner{animation:ui-chip-input-spin 1s linear infinite}@keyframes ui-chip-input-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-chip-input__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:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: ChipInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-chip-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" 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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"inputValue\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}\n"] }]
-        }], 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 }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], autoAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoAdd", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], chipTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChipTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], inputRef: [{
+            args: [{ selector: 'ui-chip-input', standalone: true, imports: [FormsModule, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-chip-input-wrapper\">\n  @if (label()) {\n    <label class=\"ui-chip-input__label\">{{ label() }}</label>\n  }\n\n  <div\n    #triggerRef\n    class=\"ui-chip-input\"\n    [class]=\"containerClasses()\"\n    (click)=\"onContainerClick()\"\n  >\n    @for (chip of value(); track chip) {\n      @if (chipTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate()!\"\n          [ngTemplateOutletContext]=\"getChipContext(chip)\"\n        />\n      } @else {\n        <span class=\"ui-chip-input__chip\">\n          <span class=\"ui-chip-input__chip-text\">{{ getChipDisplay(chip) }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              class=\"ui-chip-input__chip-remove\"\n              (click)=\"removeChip(chip); $event.stopPropagation()\"\n              aria-label=\"Remove\"\n            >\n              <svg width=\"12\" height=\"12\" 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        </span>\n      }\n    }\n    <input\n      #inputRef\n      type=\"text\"\n      class=\"ui-chip-input__input\"\n      [placeholder]=\"value().length === 0 ? placeholder() : ''\"\n      [disabled]=\"disabled()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInputChange($any($event.target).value)\"\n      (keydown)=\"onInputKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      autocomplete=\"off\"\n    />\n  </div>\n\n  <div\n    #dropdownRef\n    class=\"ui-chip-input__dropdown\"\n    [class.ui-chip-input__dropdown--open]=\"isOpen()\"\n    [attr.role]=\"'listbox'\"\n    (mousedown)=\"onDropdownMousedown($event)\"\n  >\n    <div class=\"ui-chip-input__options\">\n      @if (isAsyncMode() && asyncLoading()) {\n        <div class=\"ui-chip-input__loading\">\n          <svg class=\"ui-chip-input__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 (isAsyncMode() && asyncError()) {\n        <div class=\"ui-chip-input__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 visibleSuggestions(); track option.value; let i = $index) {\n          <div\n            class=\"ui-chip-input__suggestion\"\n            [class.ui-chip-input__suggestion--focused]=\"focusedIndex() === i\"\n            [class.ui-chip-input__suggestion--disabled]=\"option.disabled\"\n            [attr.role]=\"'option'\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"addSuggestion(option)\"\n          >\n            @if (optionTemplate(); as tpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tpl.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.value, option: option.value, selected: false, disabled: !!option.disabled }\"\n              />\n            } @else {\n              <span class=\"ui-chip-input__suggestion-label\">{{ option.label }}</span>\n            }\n          </div>\n        }\n        @if (visibleSuggestions().length === 0 && !showCreateRow()) {\n          @if (isAsyncMode() && inputValue().trim().length < minSearchLength() && minSearchLength() > 0) {\n            <div class=\"ui-chip-input__empty\">Type at least {{ minSearchLength() }} characters to search</div>\n          } @else {\n            <div class=\"ui-chip-input__empty\">No suggestions</div>\n          }\n        }\n      }\n    </div>\n    @if (showCreateRow()) {\n      <div\n        class=\"ui-chip-input__create\"\n        (click)=\"addChip(inputValue().trim())\"\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 \"{{ inputValue().trim() }}\"\n      </div>\n    }\n  </div>\n\n  @if (error()) {\n    <span class=\"ui-chip-input__error\">{{ error() }}</span>\n  }\n  @if (hint() && !error()) {\n    <span class=\"ui-chip-input__hint\">{{ hint() }}</span>\n  }\n</div>\n", styles: [".ui-chip-input-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-chip-input__label{font-size:.875rem;font-weight:500;color:var(--ui-text)}.ui-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);min-height:42px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:text;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-chip-input--focused{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 15%,transparent)}.ui-chip-input--error{border-color:var(--ui-danger)}.ui-chip-input--error.ui-chip-input--focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 15%,transparent)}.ui-chip-input--disabled{background:var(--ui-bg-secondary);cursor:not-allowed;opacity:.6}.ui-chip-input--outlined{background:transparent}.ui-chip-input--filled{background:var(--ui-bg-secondary);border-color:transparent}.ui-chip-input--filled.ui-chip-input--focused{border-color:var(--ui-primary)}.ui-chip-input--sm{min-height:34px;padding:var(--ui-spacing-xs);font-size:.8125rem}.ui-chip-input--lg{min-height:50px;padding:var(--ui-spacing-sm);font-size:1rem}.ui-chip-input__chip{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.125rem .5rem;background:var(--ui-bg-secondary);border-radius:var(--ui-radius-sm);font-size:.875rem;color:var(--ui-text);white-space:nowrap}.ui-chip-input--sm .ui-chip-input__chip{padding:.0625rem .375rem;font-size:.75rem}.ui-chip-input--lg .ui-chip-input__chip{padding:.25rem .625rem;font-size:.9375rem}.ui-chip-input__chip-text{line-height:1.4}.ui-chip-input__chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:.125rem;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-chip-input__chip-remove:hover{background:var(--ui-danger);color:#fff}.ui-chip-input__input{flex:1;min-width:80px;padding:.25rem 0;border:none;background:transparent;font:inherit;color:var(--ui-text);outline:none}.ui-chip-input__input::placeholder{color:var(--ui-text-muted)}.ui-chip-input__input:disabled{cursor:not-allowed}.ui-chip-input__hint{font-size:.75rem;color:var(--ui-text-muted)}.ui-chip-input__error{font-size:.75rem;color:var(--ui-danger)}.ui-chip-input__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-chip-input__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-chip-input__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-chip-input__suggestion{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-chip-input__suggestion:hover:not(.ui-chip-input__suggestion--disabled){background-color:var(--ui-bg-hover)}.ui-chip-input__suggestion--focused{background-color:var(--ui-bg-hover);outline:none}.ui-chip-input__suggestion--disabled{opacity:.5;cursor:not-allowed}.ui-chip-input__suggestion-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-chip-input__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:.875rem;color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-chip-input__create:hover{background-color:var(--ui-bg-hover)}.ui-chip-input__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:.875rem}.ui-chip-input__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:.875rem}.ui-chip-input__spinner{animation:ui-chip-input-spin 1s linear infinite}@keyframes ui-chip-input-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-chip-input__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:.875rem}\n"] }]
+        }], 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 }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], autoAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoAdd", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], asyncSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncSearch", required: false }] }], strict: [{ type: i0.Input, args: [{ isSignal: true, alias: "strict", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], chipTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChipTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OptionTemplateDirective), { isSignal: true }] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['triggerRef', { static: true }]
+            }], dropdownRef: [{
+                type: ViewChild,
+                args: ['dropdownRef', { static: true }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class DatepickerComponent {
@@ -5782,11 +6090,11 @@ class ShellComponent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     sidebarService = inject(SidebarService);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ShellComponent, isStandalone: true, selector: "ui-shell", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ui-shell\"\n     [class.ui-shell--header]=\"variant() === 'header'\"\n     [class.ui-shell--simple]=\"variant() === 'simple'\"\n     [class.ui-shell--sidebar-collapsed]=\"sidebarService.collapsed()\"\n     [class.ui-shell--mobile]=\"sidebarService.isMobile()\"\n     [class.ui-shell--mobile-open]=\"sidebarService.mobileOpen()\">\n  <ng-content />\n  @if (sidebarService.isMobile() && sidebarService.mobileOpen()) {\n    <div class=\"ui-shell__backdrop\" (click)=\"sidebarService.closeMobile()\"></div>\n  }\n</div>\n", styles: [":host{display:block;height:100vh;overflow:hidden}.ui-shell{display:grid;grid-template-areas:\"sidebar navbar\" \"sidebar content\" \"sidebar footer\";grid-template-columns:var(--ui-sidebar-width) 1fr;grid-template-rows:var(--ui-navbar-height) 1fr auto;height:100%;transition:grid-template-columns var(--ui-transition-normal)}.ui-shell--sidebar-collapsed{grid-template-columns:var(--ui-sidebar-collapsed-width) 1fr}.ui-shell--header{grid-template-areas:\"navbar  navbar\" \"sidebar content\" \"footer  footer\"}.ui-shell--simple{grid-template-areas:\"sidebar content\";grid-template-rows:1fr}.ui-shell--mobile{grid-template-areas:\"navbar\" \"content\" \"footer\";grid-template-columns:1fr}.ui-shell--simple.ui-shell--mobile{grid-template-areas:\"content\";grid-template-rows:1fr}.ui-shell__backdrop{position:fixed;inset:0;background-color:#00000080;z-index:40}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ShellComponent, isStandalone: true, selector: "ui-shell", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ui-shell\"\n     [class.ui-shell--header]=\"variant() === 'header'\"\n     [class.ui-shell--simple]=\"variant() === 'simple'\"\n     [class.ui-shell--sidebar-collapsed]=\"sidebarService.collapsed()\"\n     [class.ui-shell--mobile]=\"sidebarService.isMobile()\"\n     [class.ui-shell--mobile-open]=\"sidebarService.mobileOpen()\">\n  <ng-content />\n  @if (sidebarService.isMobile() && sidebarService.mobileOpen()) {\n    <div class=\"ui-shell__backdrop\" (click)=\"sidebarService.closeMobile()\"></div>\n  }\n</div>\n", styles: [":host{display:block;height:100vh;overflow:hidden}.ui-shell{display:grid;grid-template-areas:\"sidebar navbar\" \"sidebar content\" \"sidebar footer\";grid-template-columns:var(--ui-sidebar-width) 1fr;grid-template-rows:var(--ui-navbar-height) 1fr auto;height:100%;transition:grid-template-columns var(--ui-transition-normal)}.ui-shell--sidebar-collapsed{grid-template-columns:var(--ui-sidebar-collapsed-width) 1fr}.ui-shell--header{grid-template-areas:\"navbar  navbar\" \"sidebar content\" \"footer  footer\"}.ui-shell--simple{grid-template-areas:\"sidebar content\";grid-template-rows:1fr}.ui-shell--mobile{grid-template-areas:\"navbar\" \"content\" \"footer\";grid-template-columns:1fr}.ui-shell--simple.ui-shell--mobile{grid-template-areas:\"content\";grid-template-rows:1fr}.ui-shell__backdrop{position:fixed;inset:0;background-color:var(--ui-backdrop-bg);z-index:40}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-shell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-shell\"\n     [class.ui-shell--header]=\"variant() === 'header'\"\n     [class.ui-shell--simple]=\"variant() === 'simple'\"\n     [class.ui-shell--sidebar-collapsed]=\"sidebarService.collapsed()\"\n     [class.ui-shell--mobile]=\"sidebarService.isMobile()\"\n     [class.ui-shell--mobile-open]=\"sidebarService.mobileOpen()\">\n  <ng-content />\n  @if (sidebarService.isMobile() && sidebarService.mobileOpen()) {\n    <div class=\"ui-shell__backdrop\" (click)=\"sidebarService.closeMobile()\"></div>\n  }\n</div>\n", styles: [":host{display:block;height:100vh;overflow:hidden}.ui-shell{display:grid;grid-template-areas:\"sidebar navbar\" \"sidebar content\" \"sidebar footer\";grid-template-columns:var(--ui-sidebar-width) 1fr;grid-template-rows:var(--ui-navbar-height) 1fr auto;height:100%;transition:grid-template-columns var(--ui-transition-normal)}.ui-shell--sidebar-collapsed{grid-template-columns:var(--ui-sidebar-collapsed-width) 1fr}.ui-shell--header{grid-template-areas:\"navbar  navbar\" \"sidebar content\" \"footer  footer\"}.ui-shell--simple{grid-template-areas:\"sidebar content\";grid-template-rows:1fr}.ui-shell--mobile{grid-template-areas:\"navbar\" \"content\" \"footer\";grid-template-columns:1fr}.ui-shell--simple.ui-shell--mobile{grid-template-areas:\"content\";grid-template-rows:1fr}.ui-shell__backdrop{position:fixed;inset:0;background-color:#00000080;z-index:40}\n"] }]
+            args: [{ selector: 'ui-shell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-shell\"\n     [class.ui-shell--header]=\"variant() === 'header'\"\n     [class.ui-shell--simple]=\"variant() === 'simple'\"\n     [class.ui-shell--sidebar-collapsed]=\"sidebarService.collapsed()\"\n     [class.ui-shell--mobile]=\"sidebarService.isMobile()\"\n     [class.ui-shell--mobile-open]=\"sidebarService.mobileOpen()\">\n  <ng-content />\n  @if (sidebarService.isMobile() && sidebarService.mobileOpen()) {\n    <div class=\"ui-shell__backdrop\" (click)=\"sidebarService.closeMobile()\"></div>\n  }\n</div>\n", styles: [":host{display:block;height:100vh;overflow:hidden}.ui-shell{display:grid;grid-template-areas:\"sidebar navbar\" \"sidebar content\" \"sidebar footer\";grid-template-columns:var(--ui-sidebar-width) 1fr;grid-template-rows:var(--ui-navbar-height) 1fr auto;height:100%;transition:grid-template-columns var(--ui-transition-normal)}.ui-shell--sidebar-collapsed{grid-template-columns:var(--ui-sidebar-collapsed-width) 1fr}.ui-shell--header{grid-template-areas:\"navbar  navbar\" \"sidebar content\" \"footer  footer\"}.ui-shell--simple{grid-template-areas:\"sidebar content\";grid-template-rows:1fr}.ui-shell--mobile{grid-template-areas:\"navbar\" \"content\" \"footer\";grid-template-columns:1fr}.ui-shell--simple.ui-shell--mobile{grid-template-areas:\"content\";grid-template-rows:1fr}.ui-shell__backdrop{position:fixed;inset:0;background-color:var(--ui-backdrop-bg);z-index:40}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class NavbarComponent {