integra-ng 21.0.14 → 21.0.15

package/fesm2022/integra-ng.mjs

@@ -2383,11 +2383,11 @@ class IDialog extends AbstractDialog {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialog, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialog, isStandalone: true, selector: "i-dialog", host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\n<div\n  class=\"i-dialog-overlay\"\n  (click)=\"onOverlayClick($event)\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    #dialogElement\n    class=\"i-dialog-container\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <i-card [title]=\"header\" [closable]=\"closable\" (closeCard)=\"onCloseClick()\">\n      <!-- Main content -->\n      <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n        <ng-content></ng-content>\n      </div>\n    </i-card>\n  </div>\n</div>\n}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;max-height:80vh;animation:slideInDown .2s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;transform:translateZ(0)}@media(max-width:960px){.i-dialog-overlay .i-dialog-container{max-width:75vw}}@media(max-width:640px){.i-dialog-overlay .i-dialog-container{max-width:90vw;max-height:80vh}}.i-dialog-overlay .i-dialog-container .i-card{display:flex;flex-direction:column;max-height:80vh;overflow:hidden}.i-dialog-overlay .i-dialog-container .i-card .i-card-body{flex:1;overflow-y:auto;min-height:0}.i-dialog-overlay .i-dialog-container .i-dialog-content{overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-30px,0) scale3d(.95,.95,1)}to{opacity:1;transform:translateZ(0) scaleZ(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ICard, selector: "i-card", inputs: ["title", "closable", "fullHeight"], outputs: ["closeCard"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IDialog, isStandalone: true, selector: "i-dialog", host: { listeners: { "document:keydown.escape": "onEscapeKey()" } }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (visible) {\n<div\n  class=\"i-dialog-overlay\"\n  (click)=\"onOverlayClick($event)\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    #dialogElement\n    class=\"i-dialog-container\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"i-dialog-card-wrapper\">\n      <i-card [title]=\"header\" [closable]=\"closable\" [fullHeight]=\"true\" (closeCard)=\"onCloseClick()\">\n        <!-- Main content -->\n        <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n          <ng-content></ng-content>\n        </div>\n      </i-card>\n    </div>\n  </div>\n</div>\n}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;max-height:80vh;animation:slideInDown .2s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;transform:translateZ(0)}@media(max-width:960px){.i-dialog-overlay .i-dialog-container{max-width:75vw}}@media(max-width:640px){.i-dialog-overlay .i-dialog-container{max-width:90vw}}.i-dialog-overlay .i-dialog-container .i-dialog-card-wrapper{display:flex;max-height:80vh}.i-dialog-overlay .i-dialog-container .i-dialog-content{overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-30px,0) scale3d(.95,.95,1)}to{opacity:1;transform:translateZ(0) scaleZ(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ICard, selector: "i-card", inputs: ["title", "closable", "fullHeight"], outputs: ["closeCard"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'i-dialog', imports: [CommonModule, ICard], template: "@if (visible) {\n<div\n  class=\"i-dialog-overlay\"\n  (click)=\"onOverlayClick($event)\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    #dialogElement\n    class=\"i-dialog-container\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <i-card [title]=\"header\" [closable]=\"closable\" (closeCard)=\"onCloseClick()\">\n      <!-- Main content -->\n      <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n        <ng-content></ng-content>\n      </div>\n    </i-card>\n  </div>\n</div>\n}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;max-height:80vh;animation:slideInDown .2s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;transform:translateZ(0)}@media(max-width:960px){.i-dialog-overlay .i-dialog-container{max-width:75vw}}@media(max-width:640px){.i-dialog-overlay .i-dialog-container{max-width:90vw;max-height:80vh}}.i-dialog-overlay .i-dialog-container .i-card{display:flex;flex-direction:column;max-height:80vh;overflow:hidden}.i-dialog-overlay .i-dialog-container .i-card .i-card-body{flex:1;overflow-y:auto;min-height:0}.i-dialog-overlay .i-dialog-container .i-dialog-content{overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-30px,0) scale3d(.95,.95,1)}to{opacity:1;transform:translateZ(0) scaleZ(1)}}\n"] }]
+            args: [{ selector: 'i-dialog', imports: [CommonModule, ICard], template: "@if (visible) {\n<div\n  class=\"i-dialog-overlay\"\n  (click)=\"onOverlayClick($event)\"\n  [attr.id]=\"componentId\"\n>\n  <div\n    #dialogElement\n    class=\"i-dialog-container\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <div class=\"i-dialog-card-wrapper\">\n      <i-card [title]=\"header\" [closable]=\"closable\" [fullHeight]=\"true\" (closeCard)=\"onCloseClick()\">\n        <!-- Main content -->\n        <div class=\"i-dialog-content\" [ngStyle]=\"contentStyle\">\n          <ng-content></ng-content>\n        </div>\n      </i-card>\n    </div>\n  </div>\n</div>\n}\n", styles: [".i-dialog-overlay{background:#0006}.i-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s cubic-bezier(.4,0,.2,1);will-change:opacity;transform:translateZ(0)}.i-dialog-overlay .i-dialog-container{display:flex;flex-direction:column;max-width:90vw;max-height:80vh;animation:slideInDown .2s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;transform:translateZ(0)}@media(max-width:960px){.i-dialog-overlay .i-dialog-container{max-width:75vw}}@media(max-width:640px){.i-dialog-overlay .i-dialog-container{max-width:90vw}}.i-dialog-overlay .i-dialog-container .i-dialog-card-wrapper{display:flex;max-height:80vh}.i-dialog-overlay .i-dialog-container .i-dialog-content{overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-30px,0) scale3d(.95,.95,1)}to{opacity:1;transform:translateZ(0) scaleZ(1)}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { dialogElement: [{
                 type: ViewChild,
                 args: ['dialogElement', { static: false }]
@@ -5839,11 +5839,11 @@ class ITabs {
         tabElement?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:#9e9e9e;opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:thin}.i-tabs .i-tabs__header::-webkit-scrollbar{height:4px}.i-tabs .i-tabs__header::-webkit-scrollbar-thumb{border-radius:4px}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ITabs, isStandalone: true, selector: "i-tabs", inputs: { activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange", onClose: "onClose" }, queries: [{ propertyName: "tabPanels", predicate: ITabPanel }], ngImport: i0, template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:#9e9e9e;opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ITabs, decorators: [{
             type: Component,
-            args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:#9e9e9e;opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:thin}.i-tabs .i-tabs__header::-webkit-scrollbar{height:4px}.i-tabs .i-tabs__header::-webkit-scrollbar-thumb{border-radius:4px}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}\n"] }]
+            args: [{ selector: 'i-tabs', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div class=\"i-tabs\" [attr.id]=\"componentId\">\n  <!-- Tab Headers -->\n  <div class=\"i-tabs__header\" role=\"tablist\">\n    @for (tab of tabs; track $index) {\n      <button\n        [attr.id]=\"componentId + '-tab-' + $index\"\n        class=\"i-tabs__tab\"\n        [ngClass]=\"{\n          'i-tabs__tab--active': activeIndex === $index,\n          'i-tabs__tab--disabled': tab.disabled,\n          'i-tabs__tab--icon-only': tab.icon && !tab.header\n        }\"\n        role=\"tab\"\n        [attr.aria-selected]=\"activeIndex === $index\"\n        [attr.aria-controls]=\"componentId + '-panel-' + $index\"\n        [attr.tabindex]=\"activeIndex === $index ? 0 : -1\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab($event, $index)\"\n        (keydown)=\"onKeyDown($event, $index)\"\n      >\n        @if (tab.icon) {\n          <i [ngClass]=\"tab.icon\" class=\"i-tabs__tab-icon\"></i>\n        }\n        @if (tab.header) {\n          <span class=\"i-tabs__tab-label\">{{ tab.header }}</span>\n        }\n        @if (tab.closable && !tab.disabled) {\n          <button\n            class=\"i-tabs__tab-close\"\n            type=\"button\"\n            aria-label=\"Close tab\"\n            (click)=\"closeTab($event, $index)\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </button>\n    }\n  </div>\n\n  <!-- Tab Panels -->\n  <div class=\"i-tabs__panels\">\n    @for (tab of tabs; track $index) {\n      <div\n        [attr.id]=\"componentId + '-panel-' + $index\"\n        class=\"i-tabs__panel\"\n        [ngClass]=\"{ 'i-tabs__panel--active': activeIndex === $index }\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"componentId + '-tab-' + $index\"\n        [attr.hidden]=\"activeIndex !== $index || null\"\n      >\n        @if (activeIndex === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".i-tabs__header{border-bottom:1px solid var(--color-border);background:var(--surface-card)}.i-tabs__header::-webkit-scrollbar-thumb{background:var(--color-border)}.i-tabs__tab{color:var(--color-text-secondary);transition:color .2s,background .2s}.i-tabs__tab:hover:not(:disabled){color:var(--color-text-primary);background:var(--surface-hover)}.i-tabs__tab--active{color:var(--color-primary)}.i-tabs__tab--active:after{background:var(--color-primary)}.i-tabs__tab--disabled{color:#9e9e9e;opacity:.6}.i-tabs__tab-close{transition:background .2s;color:inherit}.i-tabs__tab-close:hover{background:color-mix(in srgb,var(--color-danger) 20%,transparent);color:var(--color-danger)}.i-tabs__panels{background:var(--surface-card)}.i-tabs{display:flex;flex-direction:column;width:100%}.i-tabs .i-tabs__header{display:flex;overflow-x:auto;scrollbar-width:none}.i-tabs .i-tabs__header::-webkit-scrollbar{display:none}.i-tabs .i-tabs__tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;font-size:1em;font-weight:500;cursor:pointer;position:relative;white-space:nowrap}.i-tabs .i-tabs__tab--active:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px}.i-tabs .i-tabs__tab--disabled{cursor:not-allowed}.i-tabs .i-tabs__tab--icon-only{padding:12px 16px}.i-tabs .i-tabs__tab--icon-only .i-tabs__tab-icon{margin:0}.i-tabs .i-tabs__tab .i-tabs__tab-icon{font-size:16px;display:inline-flex;align-items:center}.i-tabs .i-tabs__tab .i-tabs__tab-label{display:inline-block}.i-tabs .i-tabs__tab .i-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.i-tabs .i-tabs__tab .i-tabs__tab-close i{font-size:12px}.i-tabs .i-tabs__panels{flex:1}.i-tabs .i-tabs__panels .i-tabs__panel{display:none;padding:16px}.i-tabs .i-tabs__panels .i-tabs__panel--active{display:block}\n"] }]
         }], propDecorators: { activeIndex: [{
                 type: Input
             }], activeIndexChange: [{