@cute-widgets/base 20.0.4 → 21.0.0

package/fesm2022/cute-widgets-base-tabs.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, TemplateRef, DestroyRef, EventEmitter, ViewContainerRef, forwardRef, booleanAttribute, numberAttribute, Output, Input, ViewChild, ViewChildren, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, ContentChild, NgModule } from '@angular/core';
-import { animation, state, animate, style, trigger, transition } from '@angular/animations';
+import { InjectionToken, inject, Directive, TemplateRef, DestroyRef, EventEmitter, ViewContainerRef, booleanAttribute, numberAttribute, Output, Input, ViewChild, ViewChildren, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, ContentChild, NgModule } from '@angular/core';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import { CuteLayoutControl, CuteFocusableControl } from '@cute-widgets/base/abstract';
 import { fromEvent, debounceTime, Subject } from 'rxjs';
@@ -8,7 +7,9 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i1 from '@cute-widgets/base/core/nav';
 import { CuteNavModule, CuteNavLink } from '@cute-widgets/base/core/nav';
-import { CuteButton } from '@cute-widgets/base/button';
+import { Scheduler, _animationsDisabled } from '@cute-widgets/base/core';
+import * as i2 from '@cute-widgets/base/button';
+import { CuteButtonModule } from '@cute-widgets/base/button';
 import { CuteObserveVisibility } from '@cute-widgets/base/core/observers';
 
 /**
@@ -33,10 +34,10 @@ class CuteTabLabel {
     constructor() {
         this._closestTab = inject(CUTE_TAB, { optional: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteTabLabel, isStandalone: true, selector: "ng-template[cute-tab-label], ng-template[cuteTabLabel]", providers: [{ provide: CUTE_TAB_LABEL, useExisting: CuteTabLabel }], exportAs: ["cuteTabLabel"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTabLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteTabLabel, isStandalone: true, selector: "ng-template[cute-tab-label], ng-template[cuteTabLabel]", providers: [{ provide: CUTE_TAB_LABEL, useExisting: CuteTabLabel }], exportAs: ["cuteTabLabel"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTabLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[cute-tab-label], ng-template[cuteTabLabel]',
@@ -67,10 +68,10 @@ class CuteTabContent {
     constructor() {
         this.template = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteTabContent, isStandalone: true, selector: "ng-template[cute-tab-content], ng-template[cuteTabContent]", providers: [{ provide: CUTE_TAB_CONTENT, useExisting: CuteTabContent }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CuteTabContent, isStandalone: true, selector: "ng-template[cute-tab-content], ng-template[cuteTabContent]", providers: [{ provide: CUTE_TAB_CONTENT, useExisting: CuteTabContent }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTabContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[cute-tab-content], ng-template[cuteTabContent]',
@@ -89,10 +90,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * This code is a modification of the `@angular/material` original
  * code licensed under MIT-style License (https://angular.dev/license).
  */
-const transitionAnimation = animation([
-    state('void', style({ transform: 'translateX({{offset}})', opacity: 0 })),
-    animate('300ms ease-out', style({ transform: 'translateX(0)', opacity: 1 })),
-], { params: { offset: '30px' } });
 let nextId$1 = 0;
 /**
  * Used to provide a tab group to a tab without causing a circular dependency.
@@ -170,6 +167,24 @@ class CuteTabGroup extends CuteLayoutControl {
             this._stretchTabs = "none";
         }
     }
+    /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
+    get animationDuration() { return this._animationDuration; }
+    set animationDuration(value) {
+        const stringValue = value + '';
+        this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
+    }
+    /**
+     * Possible position for the tab header.
+     * @default top
+     */
+    get headerPosition() { return this._headerPosition; }
+    set headerPosition(newPosition) {
+        if (newPosition !== this._headerPosition) {
+            this._headerPosition = newPosition;
+            Promise.resolve().then(() => this.scrollToTab());
+            this.headerPositionChange.emit(newPosition);
+        }
+    }
     constructor() {
         super();
         this._indexToChange = null;
@@ -186,13 +201,10 @@ class CuteTabGroup extends CuteLayoutControl {
          */
         this.alignTabs = "start";
         this._stretchTabs = "none";
+        this._animationDuration = "";
         /** Whether the tab group will change its height to the height of the currently active tab. */
         this.dynamicHeight = false;
-        /**
-         * Possible positions for the tab header.
-         * @default top
-         */
-        this.headerPosition = 'top';
+        this._headerPosition = 'top';
         /** Use `underline` style for horizontal tabs. */
         this.underlineTabs = false;
         /**
@@ -209,10 +221,12 @@ class CuteTabGroup extends CuteLayoutControl {
         this.selectedIndexChange = new EventEmitter();
         /** Event emitted when the active tab selection is about to change. */
         this.selectedTabChanging = new EventEmitter();
-        /** Event emitted when the tab selection has changed. */
+        /** Event emitted when the tab selection has been changed. */
         this.selectedTabChange = new EventEmitter();
         /** Event emitted when focus has changed within a tab group. */
         this.focusChange = new EventEmitter();
+        /** Event emitted when the position of tabs header has been changed. */
+        this.headerPositionChange = new EventEmitter();
         /** Event emitted after the new tab was added. */
         this.tabAdded = new EventEmitter();
         /** Event emitted after the closable tab was removed. */
@@ -272,32 +286,37 @@ class CuteTabGroup extends CuteLayoutControl {
         }, 300);
     }
     /**
-     * Activates tab with specified index.
+     * Activates tab with the specified index.
      * @param index Tab index
      * @param origin (optional) Focus origin
+     * @returns A promise of a "logical" result, where _true_ means a successful change of the active tab, and _false_ otherwise.
+     * @async
      */
-    selectTab(index, origin = "program") {
+    async selectTab(index, origin = "program") {
         if (!this.tabs)
-            return;
+            return false;
         if (index < 0 || index >= this.tabs.length)
-            return;
+            return false;
         if (index === this.selectedIndex)
-            return;
+            return true;
         const tabsArray = this.tabs.toArray();
         if (tabsArray[index].disabled)
-            return;
+            return false;
         this._indexToChange = null;
         this._selectedIndex = index;
         this.tabs.forEach((tab, i) => {
-            tab.active = (i === index);
+            //tab.active = (i === index);
+            tab.active = false;
         });
-        setTimeout(() => {
+        tabsArray[index].active = true;
+        await Scheduler.postTask(() => {
             if (tabsArray[index].scrollNeeded) {
                 this.scrollToTab(index);
             }
-        }, 100);
+        }, { delay: 100 });
         this.selectedIndexChange.emit(index);
         this.markForCheck();
+        return true;
     }
     _createChangeEvent(event) {
         const tabsArray = this.tabs?.toArray() ?? [];
@@ -328,6 +347,7 @@ class CuteTabGroup extends CuteLayoutControl {
         return this.tabs?.toArray().indexOf(tab);
     }
     scrollToTab(index) {
+        index = index ?? this.selectedIndex;
         if (index != null) {
             const tabElement = this.tabLinks?.toArray()[index]?.element.nativeElement;
             if (tabElement) {
@@ -381,7 +401,7 @@ class CuteTabGroup extends CuteLayoutControl {
         newTab.contentTemplate = content;
         newTab.contentContext = context;
         newTab.active = true; // !this.tabs || this.tabs.length === 0;
-        newTab.isDynamic = true;
+        newTab._isDynamic = true;
         //componentRef.setInput("closable", true);
         newTab.closable = closable ?? true;
         componentRef.changeDetectorRef.detectChanges();
@@ -389,10 +409,13 @@ class CuteTabGroup extends CuteLayoutControl {
         const tabsArray = this.tabs?.toArray() || [];
         tabsArray.push(newTab);
         this.tabs?.reset(tabsArray);
-        this.tabAdded.emit();
         if (newTab.active) {
-            this.selectTab(tabsArray.length - 1);
+            const newIndex = tabsArray.length - 1;
+            if (await this.selectTab(newIndex)) {
+                this.scrollToTab(newIndex);
+            }
         }
+        this.tabAdded.emit();
         return componentRef;
     }
     /**
@@ -424,6 +447,7 @@ class CuteTabGroup extends CuteLayoutControl {
             this.selectedIndex = newIndex;
             this.tabs.get(newIndex)?.link?.focus();
         }
+        this.checkScrollButtons();
         //this.markForCheck();
     }
     ngAfterViewInit() {
@@ -444,12 +468,12 @@ class CuteTabGroup extends CuteLayoutControl {
         super.ngOnDestroy();
         this._resizeObserver?.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteTabGroup, isStandalone: true, selector: "cute-tab-group", inputs: { selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], alignTabs: ["cute-align-tabs", "alignTabs"], stretchTabs: ["cute-stretch-tabs", "stretchTabs"], preserveContent: ["preserveContent", "preserveContent", booleanAttribute], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], headerPosition: "headerPosition", underlineTabs: ["underlineTabs", "underlineTabs", booleanAttribute], dragEnabled: ["dragEnabled", "dragEnabled", booleanAttribute], tabScrollingAlignment: "tabScrollingAlignment" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChanging: "selectedTabChanging", selectedTabChange: "selectedTabChange", focusChange: "focusChange", tabAdded: "tabAdded", tabRemoved: "tabRemoved" }, host: { properties: { "class.tabs-top": "headerPosition === 'top'", "class.tabs-bottom": "headerPosition === 'bottom'", "class.tabs-left": "headerPosition === 'left'", "class.tabs-right": "headerPosition === 'right'", "class.tabs-end": "headerPosition === 'end'", "class.tabs-start": "headerPosition === 'start'" }, classAttribute: "cute-tab-group" }, providers: [
-            { provide: CUTE_TAB_GROUP, useExisting: forwardRef(() => CuteTabGroup) },
-        ], queries: [{ propertyName: "tabs", predicate: CuteTab }], viewQueries: [{ propertyName: "dynamicTabsContainer", first: true, predicate: ["dynamicTabs"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, static: true }, { propertyName: "headerScroll", first: true, predicate: ["headerScroll"], descendants: true, static: true }, { propertyName: "tabLinks", predicate: ["tabLink"], descendants: true, read: CuteNavLink }], exportAs: ["cuteTabGroup"], usesInheritance: true, ngImport: i0, template: "<div class=\"tab-header-wrapper\" #headerContainer>\r\n  <div class=\"tab-header-scroll\" #headerScroll\r\n       cdkDropList\r\n       [cdkDropListOrientation]=\"isHorizontal ? 'horizontal' : 'vertical'\"\r\n       (cdkDropListDropped)=\"onDrop($event)\">\r\n    <nav [cuteNav]=\"isHorizontal ? (underlineTabs ? 'underline' : 'tabs') : 'pills'\"\r\n         [selectedIndex]=\"selectedIndex\"\r\n         [alignment]=\"alignTabs\"\r\n         [stretchItems]=\"stretchTabs\"\r\n         [preserveTabContent]=\"preserveContent\"\r\n         [color]=\"color\"\r\n         [class.flex-column]=\"!isHorizontal\"\r\n         (selectedIndexChange)=\"selectTab($event)\"\r\n         (selectedLinkChanging)=\"onNavLinkChanging($event)\"\r\n         (selectedLinkChange)=\"onNavLinkChange($event)\"\r\n         (focusChange)=\"onNavFocusChange($event)\">\r\n      @for (tab of tabs; track tab.id; let i = $index) {\r\n        <li cute-nav-item\r\n            cdkDrag\r\n            [cdkDragDisabled]=\"!dragEnabled || tabCount <= 1\"\r\n            [cdkDragData]=\"tab\">\r\n          <a href=\"#\" cute-nav-link\r\n             [cuteObserveVisibility]=\"1\"\r\n             [cuteObserveVisibilityRoot]=\"headerScroll\"\r\n             (cuteObserveVisibility)=\"tab._visibilityChanged($event)\"\r\n             [active]=\"tab.active\"\r\n             [disabled]=\"tab.disabled\"\r\n             [id]=\"tab.ariaLabelledby || undefined\"\r\n             [attr.aria-disabled]=\"tab.disabled\"\r\n             [attr.aria-controls]=\"tab.id\"\r\n             [attr.tabindex]=\"tab.active && !tab.disabled ? 0 : -1\"\r\n             role=\"tab\"\r\n             #tabLink>\r\n\r\n            @if (tab._templateLabel) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tab._templateLabel; context: getLabelContext(tab, i)\">\r\n              </ng-container>\r\n            } @else {\r\n              <!--            <ng-container>-->\r\n                <!--              @if (dragEnabled && tabCount > 1) {-->\r\n                <!--                <span cdkDragHandle>\u2630</span>-->\r\n                <!--              }-->\r\n              {{ tab.textLabel || 'Tab '+i }}\r\n              <!--            </ng-container>-->\r\n            }\r\n\r\n            @if (tab.closable && tab.isDynamic) {\r\n              <button cuteButton=\"close-button\"\r\n                      magnitude=\"smallest\"\r\n                      tabIndex=\"-1\"\r\n                      (click)=\"removeTab(i); $event.preventDefault();\"\r\n                      aria-label=\"Close tab\">\r\n              </button>\r\n            }\r\n\r\n          </a>\r\n        </li>\r\n      }\r\n    </nav>\r\n\r\n  </div>\r\n\r\n  @if (showScrollButtons) {\r\n    <button cuteButton class=\"scroll-button left\"\r\n            tabindex=\"-1\"\r\n            magnitude=\"smallest\"\r\n            visuallyHiddenLabel=\"Prev\"\r\n            aria-hidden=\"true\"\r\n            (click)=\"scrollHeader(-1)\"\r\n            [disabled]=\"!canScrollLeft\">\r\n      <!--\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-chevron-left\" viewBox=\"0 0 16 16\">\r\n        <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\"/>\r\n      </svg>\r\n      -->\r\n    </button>\r\n    <button cuteButton  class=\"scroll-button right\"\r\n            tabindex=\"-1\"\r\n            magnitude=\"smallest\"\r\n            visuallyHiddenLabel=\"Next\"\r\n            aria-hidden=\"true\"\r\n            (click)=\"scrollHeader(1)\"\r\n            [disabled]=\"!canScrollRight\">\r\n      <!--\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-chevron-right\" viewBox=\"0 0 16 16\">\r\n        <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\"/>\r\n      </svg>\r\n      -->\r\n    </button>\r\n    <!--\r\n    <div class=\"scroll-indicator\"\r\n         [class.active]=\"showScrollButtons\"\r\n         [class.left-visible]=\"canScrollLeft\"\r\n         [class.right-visible]=\"canScrollRight\">\r\n    </div>\r\n    -->\r\n  }\r\n\r\n</div>\r\n\r\n<div class=\"tab-content-wrapper\">\r\n<!--  <div class=\"tab-content\">-->\r\n    <ng-content></ng-content>\r\n    <ng-container #dynamicTabs></ng-container>\r\n<!--  </div>-->\r\n</div>\r\n", styles: [".cute-tab-group{display:flex;flex-flow:column nowrap;width:100%}.cute-tab-group.tabs-top{flex-direction:column}.cute-tab-group.tabs-top .tab-header-wrapper{margin-bottom:.75rem}.cute-tab-group.tabs-bottom{flex-direction:column-reverse;justify-content:space-between}.cute-tab-group.tabs-bottom .tab-header-wrapper{margin-top:1rem}.cute-tab-group.tabs-bottom .nav-tabs{border:0;border-top:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.cute-tab-group.tabs-bottom .nav-tabs .nav-link{margin-top:calc(-2 * var(--bs-nav-tabs-border-width));margin-bottom:0;border-radius:0 0 var(--bs-nav-tabs-border-radius) var(--bs-nav-tabs-border-radius)}.cute-tab-group.tabs-bottom .nav-tabs .nav-link.active,.cute-tab-group.tabs-bottom .nav-tabs .nav-link:focus{border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.cute-tab-group.tabs-left,.cute-tab-group.tabs-start,[dir=rtl] .cute-tab-group.tabs-end{flex-direction:row}.cute-tab-group.tabs-left .tab-header-wrapper,.cute-tab-group.tabs-start .tab-header-wrapper,[dir=rtl] .cute-tab-group.tabs-end .tab-header-wrapper{flex-direction:row-reverse;margin-right:1rem}.cute-tab-group.tabs-right,.cute-tab-group.tabs-end,[dir=rtl] .cute-tab-group.tabs-start{flex-direction:row-reverse}.cute-tab-group.tabs-right .tab-header-wrapper,.cute-tab-group.tabs-end .tab-header-wrapper,[dir=rtl] .cute-tab-group.tabs-start .tab-header-wrapper{margin-left:1rem}.cute-tab-group .tab-header-wrapper{position:relative;overflow:hidden}.cute-tab-group .tab-header-scroll{display:flex;width:100%}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll{white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll::-webkit-scrollbar,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll::-webkit-scrollbar{display:none}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll .cute-nav,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll .cute-nav{flex-wrap:nowrap;white-space:nowrap;flex-basis:100%}.cute-tab-group.tabs-left .tab-header-wrapper,.cute-tab-group.tabs-right .tab-header-wrapper,.cute-tab-group.tabs-start .tab-header-wrapper,.cute-tab-group.tabs-end .tab-header-wrapper{min-width:100px;height:100%;overflow-x:hidden;overflow-y:auto}.cute-tab-group.tabs-left .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-right .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-start .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-end .tab-header-wrapper .cute-nav{flex-wrap:nowrap;padding:.25rem;gap:.25rem;text-align:center;height:100%}.cute-tab-group.tabs-left .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-right .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-start .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-end .tab-header-wrapper .btn-add-tab{position:sticky;top:0}.cute-tab-group .tab-content-wrapper{overflow:auto;height:100%;flex:1;transform:none}.cute-tab-group .cute-nav-link{display:flex;align-items:center;justify-content:center;width:100%;gap:.25rem}[dir=rtl] .cute-tab-group .cute-nav-link{flex-direction:row-reverse}.cdk-drag-preview{display:flex;opacity:.8;box-sizing:border-box;border:none;border-radius:var(--bs-nav-tabs-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none;overflow:hidden;align-items:center;justify-content:center}.cdk-drag-placeholder{opacity:.2}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.scroll-button{position:absolute;top:0;bottom:0;width:1rem;font-weight:700;background:rgba(var(--bs-body-bg-rgb),.9);border:none;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.scroll-button:hover{opacity:1!important}.scroll-button[disabled]{opacity:0!important;cursor:default;pointer-events:none}.scroll-button.left{left:0;background:linear-gradient(to right,var(--bs-body-color) 0%,rgba(var(--bs-body-bg-rgb),0) 100%)}.scroll-button.right{right:0;background:linear-gradient(to left,var(--bs-body-color) 0%,rgba(var(--bs-body-bg-rgb),0) 100%)}.tab-header-wrapper:hover .scroll-button{opacity:.7}.scroll-indicator{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--bs-body-color)}.scroll-indicator:before,.scroll-indicator:after{content:\"\";position:absolute;bottom:0;width:30%;height:1px;background:var(--bs-primary);transform:scaleX(0);transition:transform .3s}.scroll-indicator.left-visible:before{transform:scaleX(1);left:0}.scroll-indicator.right-visible:after{transform:scaleX(1);right:0}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CuteNavModule }, { kind: "directive", type: i1.CuteNav, selector: "[cute-nav], [cuteNav]", inputs: ["cuteNav", "orientation", "alignment", "stretchItems", "preserveTabContent", "animation", "autoSelect", "selectedIndex"], outputs: ["selectedIndexChange", "selectedLinkChange", "selectedLinkChanging", "focusChange"], exportAs: ["cuteNav"] }, { kind: "component", type: i1.CuteNavItem, selector: "cute-nav-item, [cute-nav-item], [cuteNavItem]", inputs: ["preserveTabContent"], exportAs: ["cuteNavItem"] }, { kind: "directive", type: i1.CuteNavLink, selector: "a[cute-nav-link], a[cuteNavLink],             button[cute-nav-link], button[cuteNavLink]  ", inputs: ["active", "aria-controls"], exportAs: ["cuteNavLink"] }, { kind: "component", type: CuteButton, selector: "button[cuteButton],             button[cute-button],             a[cuteButton],             a[cute-button],  ", exportAs: ["cuteButton"] }, { kind: "directive", type: CuteObserveVisibility, selector: "[cuteObserveVisibility], [cute-observe-visibility]", inputs: ["cuteObserveVisibilityDisabled", "cuteObserveVisibilityDebounce", "cuteObserveVisibility", "cuteObserveVisibilityRootMargin", "cuteObserveVisibilityRoot"], outputs: ["cuteObserveVisibility"], exportAs: ["cuteObserveVisibility"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CuteTabGroup, isStandalone: true, selector: "cute-tab-group", inputs: { selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], alignTabs: ["cute-align-tabs", "alignTabs"], stretchTabs: ["cute-stretch-tabs", "stretchTabs"], animationDuration: "animationDuration", preserveContent: ["preserveContent", "preserveContent", booleanAttribute], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], headerPosition: "headerPosition", underlineTabs: ["underlineTabs", "underlineTabs", booleanAttribute], dragEnabled: ["dragEnabled", "dragEnabled", booleanAttribute], tabScrollingAlignment: "tabScrollingAlignment" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChanging: "selectedTabChanging", selectedTabChange: "selectedTabChange", focusChange: "focusChange", headerPositionChange: "headerPositionChange", tabAdded: "tabAdded", tabRemoved: "tabRemoved" }, host: { properties: { "class.tabs-top": "headerPosition === 'top'", "class.tabs-bottom": "headerPosition === 'bottom'", "class.tabs-left": "headerPosition === 'left'", "class.tabs-right": "headerPosition === 'right'", "class.tabs-end": "headerPosition === 'end'", "class.tabs-start": "headerPosition === 'start'", "attr.cute-align-tabs": "alignTabs", "style.--cute-tab-animation-duration": "animationDuration" }, classAttribute: "cute-tab-group" }, providers: [
+            { provide: CUTE_TAB_GROUP, useExisting: CuteTabGroup },
+        ], queries: [{ propertyName: "tabs", predicate: CuteTab }], viewQueries: [{ propertyName: "dynamicTabsContainer", first: true, predicate: ["dynamicTabs"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, static: true }, { propertyName: "headerScroll", first: true, predicate: ["headerScroll"], descendants: true, static: true }, { propertyName: "tabLinks", predicate: ["tabLink"], descendants: true, read: CuteNavLink }], exportAs: ["cuteTabGroup"], usesInheritance: true, ngImport: i0, template: "<div class=\"tab-header-wrapper\" #headerContainer>\r\n  <div class=\"tab-header-scroll\" #headerScroll\r\n       cdkDropList\r\n       [cdkDropListOrientation]=\"isHorizontal ? 'horizontal' : 'vertical'\"\r\n       (cdkDropListDropped)=\"onDrop($event)\">\r\n    <nav [cuteNav]=\"isHorizontal ? (underlineTabs ? 'underline' : 'tabs') : 'pills'\"\r\n         [selectedIndex]=\"selectedIndex\"\r\n         [alignment]=\"alignTabs\"\r\n         [stretchItems]=\"stretchTabs\"\r\n         [preserveTabContent]=\"preserveContent\"\r\n         [color]=\"color\"\r\n         [class.flex-column]=\"!isHorizontal\"\r\n         (selectedIndexChange)=\"selectTab($event)\"\r\n         (selectedLinkChanging)=\"onNavLinkChanging($event)\"\r\n         (selectedLinkChange)=\"onNavLinkChange($event)\"\r\n         (focusChange)=\"onNavFocusChange($event)\">\r\n      @for (tab of tabs; track tab.id; let i = $index) {\r\n        <li cute-nav-item\r\n            cdkDrag\r\n            [cdkDragDisabled]=\"!dragEnabled || tabCount <= 1\"\r\n            [cdkDragData]=\"tab\">\r\n          <a href=\"#\" cute-nav-link\r\n             [cuteObserveVisibility]=\"1\"\r\n             [cuteObserveVisibilityRoot]=\"headerScroll\"\r\n             (cuteObserveVisibility)=\"tab._visibilityChanged($event)\"\r\n             [active]=\"tab.active\"\r\n             [disabled]=\"tab.disabled\"\r\n             [id]=\"tab.ariaLabelledby || undefined\"\r\n             [attr.aria-disabled]=\"tab.disabled\"\r\n             [attr.aria-controls]=\"tab.id\"\r\n             [attr.tabindex]=\"tab.active && !tab.disabled ? 0 : -1\"\r\n             role=\"tab\"\r\n             #tabLink>\r\n\r\n            @if (tab._templateLabel) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tab._templateLabel; context: getLabelContext(tab, i)\">\r\n              </ng-container>\r\n            } @else {\r\n              <!--            <ng-container>-->\r\n                <!--              @if (dragEnabled && tabCount > 1) {-->\r\n                <!--                <span cdkDragHandle>\u2630</span>-->\r\n                <!--              }-->\r\n              {{ tab.textLabel || 'Tab '+i }}\r\n              <!--            </ng-container>-->\r\n            }\r\n\r\n            @if (tab.closable && tab._isDynamic) {\r\n              <button cuteButton=\"close-button\"\r\n                      magnitude=\"smallest\"\r\n                      tabIndex=\"-1\"\r\n                      (click)=\"removeTab(i); $event.preventDefault();\"\r\n                      aria-label=\"Close tab\">\r\n              </button>\r\n            }\r\n\r\n          </a>\r\n        </li>\r\n      }\r\n    </nav>\r\n\r\n  </div>\r\n\r\n  @if (showScrollButtons) {\r\n    <button cuteButton class=\"scroll-button left\"\r\n            tabindex=\"-1\"\r\n            magnitude=\"smallest\"\r\n            visuallyHiddenLabel=\"Prev\"\r\n            aria-hidden=\"true\"\r\n            (click)=\"scrollHeader(-1)\"\r\n            [disabled]=\"!canScrollLeft\">\r\n      <!--\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-chevron-left\" viewBox=\"0 0 16 16\">\r\n        <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\"/>\r\n      </svg>\r\n      -->\r\n    </button>\r\n    <button cuteButton  class=\"scroll-button right\"\r\n            tabindex=\"-1\"\r\n            magnitude=\"smallest\"\r\n            visuallyHiddenLabel=\"Next\"\r\n            aria-hidden=\"true\"\r\n            (click)=\"scrollHeader(1)\"\r\n            [disabled]=\"!canScrollRight\">\r\n      <!--\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-chevron-right\" viewBox=\"0 0 16 16\">\r\n        <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\"/>\r\n      </svg>\r\n      -->\r\n    </button>\r\n    <!--\r\n    <div class=\"scroll-indicator\"\r\n         [class.active]=\"showScrollButtons\"\r\n         [class.left-visible]=\"canScrollLeft\"\r\n         [class.right-visible]=\"canScrollRight\">\r\n    </div>\r\n    -->\r\n  }\r\n\r\n</div>\r\n\r\n<div class=\"tab-content-wrapper\">\r\n<!--  <div class=\"tab-content\">-->\r\n    <ng-content></ng-content>\r\n    <ng-container #dynamicTabs></ng-container>\r\n<!--  </div>-->\r\n</div>\r\n", styles: [".cute-tab-group{display:flex;flex-flow:column nowrap;width:100%}.cute-tab-group.tabs-top{flex-direction:column}.cute-tab-group.tabs-top .tab-header-wrapper{margin-bottom:.75rem}.cute-tab-group.tabs-bottom{flex-direction:column-reverse;justify-content:space-between}.cute-tab-group.tabs-bottom .tab-header-wrapper{margin-top:1rem}.cute-tab-group.tabs-bottom .nav-tabs{border:0;border-top:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.cute-tab-group.tabs-bottom .nav-tabs .nav-link{margin-top:calc(-2 * var(--bs-nav-tabs-border-width));margin-bottom:0;border-top:0;border-radius:0 0 var(--bs-nav-tabs-border-radius) var(--bs-nav-tabs-border-radius)}.cute-tab-group.tabs-bottom .nav-tabs .nav-link.active,.cute-tab-group.tabs-bottom .nav-tabs .nav-link:focus{border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.cute-tab-group.tabs-left,.cute-tab-group.tabs-start,[dir=rtl] .cute-tab-group.tabs-end{flex-direction:row}.cute-tab-group.tabs-left .tab-header-wrapper,.cute-tab-group.tabs-start .tab-header-wrapper,[dir=rtl] .cute-tab-group.tabs-end .tab-header-wrapper{flex-direction:row-reverse;margin-right:1rem}.cute-tab-group.tabs-right,.cute-tab-group.tabs-end,[dir=rtl] .cute-tab-group.tabs-start{flex-direction:row-reverse}.cute-tab-group.tabs-right .tab-header-wrapper,.cute-tab-group.tabs-end .tab-header-wrapper,[dir=rtl] .cute-tab-group.tabs-start .tab-header-wrapper{margin-left:1rem}.cute-tab-group .tab-header-wrapper{position:relative;overflow:hidden}.cute-tab-group .tab-header-scroll{display:flex;width:100%}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding-top:.25rem;padding-bottom:.25rem;scrollbar-width:none}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll::-webkit-scrollbar,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll::-webkit-scrollbar{display:none}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll .cute-nav,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll .cute-nav{flex-wrap:nowrap;white-space:nowrap;flex-basis:100%}.cute-tab-group.tabs-left .tab-header-wrapper,.cute-tab-group.tabs-right .tab-header-wrapper,.cute-tab-group.tabs-start .tab-header-wrapper,.cute-tab-group.tabs-end .tab-header-wrapper{min-width:100px;height:100%;overflow-x:hidden;overflow-y:auto}.cute-tab-group.tabs-left .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-right .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-start .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-end .tab-header-wrapper .cute-nav{flex-wrap:nowrap;padding:.25rem;gap:.25rem;text-align:center;height:100%}.cute-tab-group.tabs-left .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-right .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-start .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-end .tab-header-wrapper .btn-add-tab{position:sticky;top:0}.cute-tab-group .tab-content-wrapper{overflow:auto;height:100%;flex:1;transform:none}.cute-tab-group .cute-nav-link{display:flex;align-items:center;justify-content:center;width:100%;gap:.5rem}[dir=rtl] .cute-tab-group .cute-nav-link{flex-direction:row-reverse}.cdk-drag-preview{display:flex;opacity:.8;box-sizing:border-box;border:none;border-radius:var(--bs-nav-tabs-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none;overflow:hidden;align-items:center;justify-content:center}.cdk-drag-placeholder{opacity:.2}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.scroll-button{position:absolute;top:0;bottom:0;width:1rem;font-weight:700;background:rgba(var(--bs-body-bg-rgb),.9);border:none;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.scroll-button:hover{opacity:1!important}.scroll-button[disabled]{opacity:0!important;cursor:default;pointer-events:none}.scroll-button.left{left:0;background:linear-gradient(to right,var(--bs-body-color) 0%,rgba(var(--bs-body-bg-rgb),0) 100%)}.scroll-button.right{right:0;background:linear-gradient(to left,var(--bs-body-color) 0%,rgba(var(--bs-body-bg-rgb),0) 100%)}.tab-header-wrapper:hover .scroll-button{opacity:.7}.scroll-indicator{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--bs-body-color)}.scroll-indicator:before,.scroll-indicator:after{content:\"\";position:absolute;bottom:0;width:30%;height:1px;background:var(--bs-primary);transform:scaleX(0);transition:transform .3s}.scroll-indicator.left-visible:before{transform:scaleX(1);left:0}.scroll-indicator.right-visible:after{transform:scaleX(1);right:0}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CuteNavModule }, { kind: "directive", type: i1.CuteNav, selector: "[cute-nav], [cuteNav]", inputs: ["cuteNav", "orientation", "alignment", "stretchItems", "preserveTabContent", "animation", "autoSelect", "selectedIndex"], outputs: ["selectedIndexChange", "selectedLinkChange", "selectedLinkChanging", "focusChange"], exportAs: ["cuteNav"] }, { kind: "component", type: i1.CuteNavItem, selector: "cute-nav-item, [cute-nav-item], [cuteNavItem]", inputs: ["preserveTabContent"], exportAs: ["cuteNavItem"] }, { kind: "directive", type: i1.CuteNavLink, selector: "a[cute-nav-link], a[cuteNavLink],             button[cute-nav-link], button[cuteNavLink]  ", inputs: ["active", "aria-controls"], exportAs: ["cuteNavLink"] }, { kind: "ngmodule", type: CuteButtonModule }, { kind: "component", type: i2.CuteButton, selector: "button[cuteButton],             button[cute-button],             a[cuteButton],             a[cute-button],  ", exportAs: ["cuteButton"] }, { kind: "directive", type: CuteObserveVisibility, selector: "[cuteObserveVisibility], [cute-observe-visibility]", inputs: ["cuteObserveVisibilityDisabled", "cuteObserveVisibilityDebounce", "cuteObserveVisibility", "cuteObserveVisibilityRootMargin", "cuteObserveVisibilityRoot"], outputs: ["cuteObserveVisibility"], exportAs: ["cuteObserveVisibility"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTabGroup, decorators: [{
             type: Component,
             args: [{ selector: 'cute-tab-group', exportAs: "cuteTabGroup", host: {
                         "class": "cute-tab-group",
@@ -459,16 +483,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         "[class.tabs-right]": "headerPosition === 'right'",
                         "[class.tabs-end]": "headerPosition === 'end'",
                         "[class.tabs-start]": "headerPosition === 'start'",
+                        "[attr.cute-align-tabs]": "alignTabs",
+                        "[style.--cute-tab-animation-duration]": "animationDuration",
                     }, imports: [
                         CdkDropList,
                         CdkDrag,
                         NgTemplateOutlet,
                         CuteNavModule,
-                        CuteButton,
+                        CuteButtonModule,
                         CuteObserveVisibility,
                     ], providers: [
-                        { provide: CUTE_TAB_GROUP, useExisting: forwardRef(() => CuteTabGroup) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tab-header-wrapper\" #headerContainer>\r\n  <div class=\"tab-header-scroll\" #headerScroll\r\n       cdkDropList\r\n       [cdkDropListOrientation]=\"isHorizontal ? 'horizontal' : 'vertical'\"\r\n       (cdkDropListDropped)=\"onDrop($event)\">\r\n    <nav [cuteNav]=\"isHorizontal ? (underlineTabs ? 'underline' : 'tabs') : 'pills'\"\r\n         [selectedIndex]=\"selectedIndex\"\r\n         [alignment]=\"alignTabs\"\r\n         [stretchItems]=\"stretchTabs\"\r\n         [preserveTabContent]=\"preserveContent\"\r\n         [color]=\"color\"\r\n         [class.flex-column]=\"!isHorizontal\"\r\n         (selectedIndexChange)=\"selectTab($event)\"\r\n         (selectedLinkChanging)=\"onNavLinkChanging($event)\"\r\n         (selectedLinkChange)=\"onNavLinkChange($event)\"\r\n         (focusChange)=\"onNavFocusChange($event)\">\r\n      @for (tab of tabs; track tab.id; let i = $index) {\r\n        <li cute-nav-item\r\n            cdkDrag\r\n            [cdkDragDisabled]=\"!dragEnabled || tabCount <= 1\"\r\n            [cdkDragData]=\"tab\">\r\n          <a href=\"#\" cute-nav-link\r\n             [cuteObserveVisibility]=\"1\"\r\n             [cuteObserveVisibilityRoot]=\"headerScroll\"\r\n             (cuteObserveVisibility)=\"tab._visibilityChanged($event)\"\r\n             [active]=\"tab.active\"\r\n             [disabled]=\"tab.disabled\"\r\n             [id]=\"tab.ariaLabelledby || undefined\"\r\n             [attr.aria-disabled]=\"tab.disabled\"\r\n             [attr.aria-controls]=\"tab.id\"\r\n             [attr.tabindex]=\"tab.active && !tab.disabled ? 0 : -1\"\r\n             role=\"tab\"\r\n             #tabLink>\r\n\r\n            @if (tab._templateLabel) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tab._templateLabel; context: getLabelContext(tab, i)\">\r\n              </ng-container>\r\n            } @else {\r\n              <!--            <ng-container>-->\r\n                <!--              @if (dragEnabled && tabCount > 1) {-->\r\n                <!--                <span cdkDragHandle>\u2630</span>-->\r\n                <!--              }-->\r\n              {{ tab.textLabel || 'Tab '+i }}\r\n              <!--            </ng-container>-->\r\n            }\r\n\r\n            @if (tab.closable && tab.isDynamic) {\r\n              <button cuteButton=\"close-button\"\r\n                      magnitude=\"smallest\"\r\n                      tabIndex=\"-1\"\r\n                      (click)=\"removeTab(i); $event.preventDefault();\"\r\n                      aria-label=\"Close tab\">\r\n              </button>\r\n            }\r\n\r\n          </a>\r\n        </li>\r\n      }\r\n    </nav>\r\n\r\n  </div>\r\n\r\n  @if (showScrollButtons) {\r\n    <button cuteButton class=\"scroll-button left\"\r\n            tabindex=\"-1\"\r\n            magnitude=\"smallest\"\r\n            visuallyHiddenLabel=\"Prev\"\r\n            aria-hidden=\"true\"\r\n            (click)=\"scrollHeader(-1)\"\r\n            [disabled]=\"!canScrollLeft\">\r\n      <!--\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-chevron-left\" viewBox=\"0 0 16 16\">\r\n        <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\"/>\r\n      </svg>\r\n      -->\r\n    </button>\r\n    <button cuteButton  class=\"scroll-button right\"\r\n            tabindex=\"-1\"\r\n            magnitude=\"smallest\"\r\n            visuallyHiddenLabel=\"Next\"\r\n            aria-hidden=\"true\"\r\n            (click)=\"scrollHeader(1)\"\r\n            [disabled]=\"!canScrollRight\">\r\n      <!--\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-chevron-right\" viewBox=\"0 0 16 16\">\r\n        <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\"/>\r\n      </svg>\r\n      -->\r\n    </button>\r\n    <!--\r\n    <div class=\"scroll-indicator\"\r\n         [class.active]=\"showScrollButtons\"\r\n         [class.left-visible]=\"canScrollLeft\"\r\n         [class.right-visible]=\"canScrollRight\">\r\n    </div>\r\n    -->\r\n  }\r\n\r\n</div>\r\n\r\n<div class=\"tab-content-wrapper\">\r\n<!--  <div class=\"tab-content\">-->\r\n    <ng-content></ng-content>\r\n    <ng-container #dynamicTabs></ng-container>\r\n<!--  </div>-->\r\n</div>\r\n", styles: [".cute-tab-group{display:flex;flex-flow:column nowrap;width:100%}.cute-tab-group.tabs-top{flex-direction:column}.cute-tab-group.tabs-top .tab-header-wrapper{margin-bottom:.75rem}.cute-tab-group.tabs-bottom{flex-direction:column-reverse;justify-content:space-between}.cute-tab-group.tabs-bottom .tab-header-wrapper{margin-top:1rem}.cute-tab-group.tabs-bottom .nav-tabs{border:0;border-top:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.cute-tab-group.tabs-bottom .nav-tabs .nav-link{margin-top:calc(-2 * var(--bs-nav-tabs-border-width));margin-bottom:0;border-radius:0 0 var(--bs-nav-tabs-border-radius) var(--bs-nav-tabs-border-radius)}.cute-tab-group.tabs-bottom .nav-tabs .nav-link.active,.cute-tab-group.tabs-bottom .nav-tabs .nav-link:focus{border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.cute-tab-group.tabs-left,.cute-tab-group.tabs-start,[dir=rtl] .cute-tab-group.tabs-end{flex-direction:row}.cute-tab-group.tabs-left .tab-header-wrapper,.cute-tab-group.tabs-start .tab-header-wrapper,[dir=rtl] .cute-tab-group.tabs-end .tab-header-wrapper{flex-direction:row-reverse;margin-right:1rem}.cute-tab-group.tabs-right,.cute-tab-group.tabs-end,[dir=rtl] .cute-tab-group.tabs-start{flex-direction:row-reverse}.cute-tab-group.tabs-right .tab-header-wrapper,.cute-tab-group.tabs-end .tab-header-wrapper,[dir=rtl] .cute-tab-group.tabs-start .tab-header-wrapper{margin-left:1rem}.cute-tab-group .tab-header-wrapper{position:relative;overflow:hidden}.cute-tab-group .tab-header-scroll{display:flex;width:100%}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll{white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll::-webkit-scrollbar,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll::-webkit-scrollbar{display:none}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll .cute-nav,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll .cute-nav{flex-wrap:nowrap;white-space:nowrap;flex-basis:100%}.cute-tab-group.tabs-left .tab-header-wrapper,.cute-tab-group.tabs-right .tab-header-wrapper,.cute-tab-group.tabs-start .tab-header-wrapper,.cute-tab-group.tabs-end .tab-header-wrapper{min-width:100px;height:100%;overflow-x:hidden;overflow-y:auto}.cute-tab-group.tabs-left .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-right .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-start .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-end .tab-header-wrapper .cute-nav{flex-wrap:nowrap;padding:.25rem;gap:.25rem;text-align:center;height:100%}.cute-tab-group.tabs-left .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-right .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-start .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-end .tab-header-wrapper .btn-add-tab{position:sticky;top:0}.cute-tab-group .tab-content-wrapper{overflow:auto;height:100%;flex:1;transform:none}.cute-tab-group .cute-nav-link{display:flex;align-items:center;justify-content:center;width:100%;gap:.25rem}[dir=rtl] .cute-tab-group .cute-nav-link{flex-direction:row-reverse}.cdk-drag-preview{display:flex;opacity:.8;box-sizing:border-box;border:none;border-radius:var(--bs-nav-tabs-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none;overflow:hidden;align-items:center;justify-content:center}.cdk-drag-placeholder{opacity:.2}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.scroll-button{position:absolute;top:0;bottom:0;width:1rem;font-weight:700;background:rgba(var(--bs-body-bg-rgb),.9);border:none;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.scroll-button:hover{opacity:1!important}.scroll-button[disabled]{opacity:0!important;cursor:default;pointer-events:none}.scroll-button.left{left:0;background:linear-gradient(to right,var(--bs-body-color) 0%,rgba(var(--bs-body-bg-rgb),0) 100%)}.scroll-button.right{right:0;background:linear-gradient(to left,var(--bs-body-color) 0%,rgba(var(--bs-body-bg-rgb),0) 100%)}.tab-header-wrapper:hover .scroll-button{opacity:.7}.scroll-indicator{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--bs-body-color)}.scroll-indicator:before,.scroll-indicator:after{content:\"\";position:absolute;bottom:0;width:30%;height:1px;background:var(--bs-primary);transform:scaleX(0);transition:transform .3s}.scroll-indicator.left-visible:before{transform:scaleX(1);left:0}.scroll-indicator.right-visible:after{transform:scaleX(1);right:0}\n"] }]
+                        { provide: CUTE_TAB_GROUP, useExisting: CuteTabGroup },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tab-header-wrapper\" #headerContainer>\r\n  <div class=\"tab-header-scroll\" #headerScroll\r\n       cdkDropList\r\n       [cdkDropListOrientation]=\"isHorizontal ? 'horizontal' : 'vertical'\"\r\n       (cdkDropListDropped)=\"onDrop($event)\">\r\n    <nav [cuteNav]=\"isHorizontal ? (underlineTabs ? 'underline' : 'tabs') : 'pills'\"\r\n         [selectedIndex]=\"selectedIndex\"\r\n         [alignment]=\"alignTabs\"\r\n         [stretchItems]=\"stretchTabs\"\r\n         [preserveTabContent]=\"preserveContent\"\r\n         [color]=\"color\"\r\n         [class.flex-column]=\"!isHorizontal\"\r\n         (selectedIndexChange)=\"selectTab($event)\"\r\n         (selectedLinkChanging)=\"onNavLinkChanging($event)\"\r\n         (selectedLinkChange)=\"onNavLinkChange($event)\"\r\n         (focusChange)=\"onNavFocusChange($event)\">\r\n      @for (tab of tabs; track tab.id; let i = $index) {\r\n        <li cute-nav-item\r\n            cdkDrag\r\n            [cdkDragDisabled]=\"!dragEnabled || tabCount <= 1\"\r\n            [cdkDragData]=\"tab\">\r\n          <a href=\"#\" cute-nav-link\r\n             [cuteObserveVisibility]=\"1\"\r\n             [cuteObserveVisibilityRoot]=\"headerScroll\"\r\n             (cuteObserveVisibility)=\"tab._visibilityChanged($event)\"\r\n             [active]=\"tab.active\"\r\n             [disabled]=\"tab.disabled\"\r\n             [id]=\"tab.ariaLabelledby || undefined\"\r\n             [attr.aria-disabled]=\"tab.disabled\"\r\n             [attr.aria-controls]=\"tab.id\"\r\n             [attr.tabindex]=\"tab.active && !tab.disabled ? 0 : -1\"\r\n             role=\"tab\"\r\n             #tabLink>\r\n\r\n            @if (tab._templateLabel) {\r\n              <ng-container\r\n                *ngTemplateOutlet=\"tab._templateLabel; context: getLabelContext(tab, i)\">\r\n              </ng-container>\r\n            } @else {\r\n              <!--            <ng-container>-->\r\n                <!--              @if (dragEnabled && tabCount > 1) {-->\r\n                <!--                <span cdkDragHandle>\u2630</span>-->\r\n                <!--              }-->\r\n              {{ tab.textLabel || 'Tab '+i }}\r\n              <!--            </ng-container>-->\r\n            }\r\n\r\n            @if (tab.closable && tab._isDynamic) {\r\n              <button cuteButton=\"close-button\"\r\n                      magnitude=\"smallest\"\r\n                      tabIndex=\"-1\"\r\n                      (click)=\"removeTab(i); $event.preventDefault();\"\r\n                      aria-label=\"Close tab\">\r\n              </button>\r\n            }\r\n\r\n          </a>\r\n        </li>\r\n      }\r\n    </nav>\r\n\r\n  </div>\r\n\r\n  @if (showScrollButtons) {\r\n    <button cuteButton class=\"scroll-button left\"\r\n            tabindex=\"-1\"\r\n            magnitude=\"smallest\"\r\n            visuallyHiddenLabel=\"Prev\"\r\n            aria-hidden=\"true\"\r\n            (click)=\"scrollHeader(-1)\"\r\n            [disabled]=\"!canScrollLeft\">\r\n      <!--\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-chevron-left\" viewBox=\"0 0 16 16\">\r\n        <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\"/>\r\n      </svg>\r\n      -->\r\n    </button>\r\n    <button cuteButton  class=\"scroll-button right\"\r\n            tabindex=\"-1\"\r\n            magnitude=\"smallest\"\r\n            visuallyHiddenLabel=\"Next\"\r\n            aria-hidden=\"true\"\r\n            (click)=\"scrollHeader(1)\"\r\n            [disabled]=\"!canScrollRight\">\r\n      <!--\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-chevron-right\" viewBox=\"0 0 16 16\">\r\n        <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\"/>\r\n      </svg>\r\n      -->\r\n    </button>\r\n    <!--\r\n    <div class=\"scroll-indicator\"\r\n         [class.active]=\"showScrollButtons\"\r\n         [class.left-visible]=\"canScrollLeft\"\r\n         [class.right-visible]=\"canScrollRight\">\r\n    </div>\r\n    -->\r\n  }\r\n\r\n</div>\r\n\r\n<div class=\"tab-content-wrapper\">\r\n<!--  <div class=\"tab-content\">-->\r\n    <ng-content></ng-content>\r\n    <ng-container #dynamicTabs></ng-container>\r\n<!--  </div>-->\r\n</div>\r\n", styles: [".cute-tab-group{display:flex;flex-flow:column nowrap;width:100%}.cute-tab-group.tabs-top{flex-direction:column}.cute-tab-group.tabs-top .tab-header-wrapper{margin-bottom:.75rem}.cute-tab-group.tabs-bottom{flex-direction:column-reverse;justify-content:space-between}.cute-tab-group.tabs-bottom .tab-header-wrapper{margin-top:1rem}.cute-tab-group.tabs-bottom .nav-tabs{border:0;border-top:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.cute-tab-group.tabs-bottom .nav-tabs .nav-link{margin-top:calc(-2 * var(--bs-nav-tabs-border-width));margin-bottom:0;border-top:0;border-radius:0 0 var(--bs-nav-tabs-border-radius) var(--bs-nav-tabs-border-radius)}.cute-tab-group.tabs-bottom .nav-tabs .nav-link.active,.cute-tab-group.tabs-bottom .nav-tabs .nav-link:focus{border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.cute-tab-group.tabs-left,.cute-tab-group.tabs-start,[dir=rtl] .cute-tab-group.tabs-end{flex-direction:row}.cute-tab-group.tabs-left .tab-header-wrapper,.cute-tab-group.tabs-start .tab-header-wrapper,[dir=rtl] .cute-tab-group.tabs-end .tab-header-wrapper{flex-direction:row-reverse;margin-right:1rem}.cute-tab-group.tabs-right,.cute-tab-group.tabs-end,[dir=rtl] .cute-tab-group.tabs-start{flex-direction:row-reverse}.cute-tab-group.tabs-right .tab-header-wrapper,.cute-tab-group.tabs-end .tab-header-wrapper,[dir=rtl] .cute-tab-group.tabs-start .tab-header-wrapper{margin-left:1rem}.cute-tab-group .tab-header-wrapper{position:relative;overflow:hidden}.cute-tab-group .tab-header-scroll{display:flex;width:100%}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding-top:.25rem;padding-bottom:.25rem;scrollbar-width:none}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll::-webkit-scrollbar,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll::-webkit-scrollbar{display:none}.cute-tab-group.tabs-top .tab-header-wrapper .tab-header-scroll .cute-nav,.cute-tab-group.tabs-bottom .tab-header-wrapper .tab-header-scroll .cute-nav{flex-wrap:nowrap;white-space:nowrap;flex-basis:100%}.cute-tab-group.tabs-left .tab-header-wrapper,.cute-tab-group.tabs-right .tab-header-wrapper,.cute-tab-group.tabs-start .tab-header-wrapper,.cute-tab-group.tabs-end .tab-header-wrapper{min-width:100px;height:100%;overflow-x:hidden;overflow-y:auto}.cute-tab-group.tabs-left .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-right .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-start .tab-header-wrapper .cute-nav,.cute-tab-group.tabs-end .tab-header-wrapper .cute-nav{flex-wrap:nowrap;padding:.25rem;gap:.25rem;text-align:center;height:100%}.cute-tab-group.tabs-left .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-right .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-start .tab-header-wrapper .btn-add-tab,.cute-tab-group.tabs-end .tab-header-wrapper .btn-add-tab{position:sticky;top:0}.cute-tab-group .tab-content-wrapper{overflow:auto;height:100%;flex:1;transform:none}.cute-tab-group .cute-nav-link{display:flex;align-items:center;justify-content:center;width:100%;gap:.5rem}[dir=rtl] .cute-tab-group .cute-nav-link{flex-direction:row-reverse}.cdk-drag-preview{display:flex;opacity:.8;box-sizing:border-box;border:none;border-radius:var(--bs-nav-tabs-border-radius);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none;overflow:hidden;align-items:center;justify-content:center}.cdk-drag-placeholder{opacity:.2}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.scroll-button{position:absolute;top:0;bottom:0;width:1rem;font-weight:700;background:rgba(var(--bs-body-bg-rgb),.9);border:none;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.scroll-button:hover{opacity:1!important}.scroll-button[disabled]{opacity:0!important;cursor:default;pointer-events:none}.scroll-button.left{left:0;background:linear-gradient(to right,var(--bs-body-color) 0%,rgba(var(--bs-body-bg-rgb),0) 100%)}.scroll-button.right{right:0;background:linear-gradient(to left,var(--bs-body-color) 0%,rgba(var(--bs-body-bg-rgb),0) 100%)}.tab-header-wrapper:hover .scroll-button{opacity:.7}.scroll-indicator{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--bs-body-color)}.scroll-indicator:before,.scroll-indicator:after{content:\"\";position:absolute;bottom:0;width:30%;height:1px;background:var(--bs-primary);transform:scaleX(0);transition:transform .3s}.scroll-indicator.left-visible:before{transform:scaleX(1);left:0}.scroll-indicator.right-visible:after{transform:scaleX(1);right:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [CuteTab]
@@ -493,6 +519,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }], stretchTabs: [{
                 type: Input,
                 args: [{ alias: 'cute-stretch-tabs' }]
+            }], animationDuration: [{
+                type: Input
             }], preserveContent: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -517,6 +545,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], focusChange: [{
                 type: Output
+            }], headerPositionChange: [{
+                type: Output
             }], tabAdded: [{
                 type: Output
             }], tabRemoved: [{
@@ -546,6 +576,12 @@ class CuteTab extends CuteFocusableControl {
     set active(value) {
         if (value !== this._active) {
             this._active = value;
+            if (this._animationEnabled) {
+                setTimeout(() => this.toggleClass("show", value), 150);
+            }
+            else {
+                this.toggleClass("show", value);
+            }
             this._stateChanges.next();
         }
     }
@@ -554,7 +590,7 @@ class CuteTab extends CuteFocusableControl {
         return this._intersectionRatio < 1;
     }
     isPreserveContent() {
-        return this.preserveContent ?? this._tabGroup?.preserveContent ?? false;
+        return this.preserveContent ?? this._closestTabGroup?.preserveContent ?? false;
     }
     /** Tab content defined by <ng-template cute-tab-content> or directly referenced where the latter has more priority. */
     get explicitContent() {
@@ -564,19 +600,20 @@ class CuteTab extends CuteFocusableControl {
     // @ViewChild(TemplateRef, {static: true}) _implicitContent: TemplateRef<any> | undefined;
     constructor() {
         super();
-        this._tabGroup = inject(CUTE_TAB_GROUP, { optional: true });
         this._intersectionRatio = NaN;
+        this._closestTabGroup = inject(CUTE_TAB_GROUP, { optional: true });
+        this._animationEnabled = !_animationsDisabled();
         /** Plain text label for the tab, used when there is no template label. */
         this.textLabel = "";
-        /** Lazy loading label's outlet context */
+        /** Lazy loading label's outlet context. */
         this.labelContext = {};
-        /** Lazy loading content's outlet context */
+        /** Lazy loading content's outlet context. */
         this.contentContext = {};
         /** Whether the tab is closable. */
         this.closable = false;
         this._active = false;
         /** Whether the tab was added dynamically */
-        this.isDynamic = false;
+        this._isDynamic = false;
         /** Emits whenever the internal state of the tab changes. */
         this._stateChanges = new Subject();
         /** Whether the tab content was loaded */
@@ -592,7 +629,7 @@ class CuteTab extends CuteFocusableControl {
     getContentContext() {
         return { ...this.contentContext,
             $implicit: this,
-            index: this._tabGroup?.getTabIndex(this),
+            index: this._closestTabGroup?.getTabIndex(this),
             active: this.active,
             tab: this
         };
@@ -601,17 +638,18 @@ class CuteTab extends CuteFocusableControl {
      * Removes this tab from the tab group.
      */
     async remove() {
-        if (this._tabGroup) {
-            const index = this._tabGroup.getTabIndex(this);
+        if (this._closestTabGroup) {
+            const index = this._closestTabGroup.getTabIndex(this);
             if (index != null) {
-                return this._tabGroup.removeTab(index);
+                return this._closestTabGroup.removeTab(index);
             }
         }
         return;
     }
     _visibilityChanged(entries) {
         if (entries.length) {
-            this._intersectionRatio = entries[0].intersectionRatio;
+            //this._intersectionRatio = entries[0].intersectionRatio;
+            this._intersectionRatio = entries.at(-1).intersectionRatio;
         }
     }
     ngOnInit() {
@@ -631,36 +669,23 @@ class CuteTab extends CuteFocusableControl {
         super.ngOnDestroy();
         this._stateChanges.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteTab, isStandalone: true, selector: "cute-tab", inputs: { textLabel: ["label", "textLabel"], contentTemplate: "contentTemplate", labelContext: "labelContext", contentContext: "contentContext", closable: ["closable", "closable", booleanAttribute], preserveContent: ["preserveContent", "preserveContent", booleanAttribute] }, host: { attributes: { "role": "tabpanel" }, properties: { "class.show": "active", "class.active": "active", "attr.tabindex": "active && !disabled ? 0 : -1", "attr.aria-labelledby": "ariaLabelledby || null", "attr.id": "id || null", "@contentFade": "active ? 'in' : 'out'" }, classAttribute: "cute-tab tab-pane" }, queries: [{ propertyName: "_templateLabel", first: true, predicate: CuteTabLabel, descendants: true, read: TemplateRef, static: true }, { propertyName: "_explicitContent", first: true, predicate: CuteTabContent, descendants: true, read: TemplateRef, static: true }, { propertyName: "link", first: true, predicate: CuteNavLink, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (active || isPreserveContent()) {\r\n\r\n  <ng-content></ng-content>\r\n\r\n  @if (explicitContent) {\r\n    <ng-container [ngTemplateOutlet]=\"explicitContent\"\r\n                  [ngTemplateOutletContext]=\"getContentContext()\">\r\n    </ng-container>\r\n  }\r\n}\r\n", styles: [".cute-tab{display:block;width:100%;padding:.25rem}.cute-tab:not(.show){display:none}.cute-tab.ng-animating{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
-            trigger('contentFade', [
-                state('in', style({ opacity: 1, height: '*' })),
-                state('out', style({ opacity: 0, height: '0px' })),
-                transition('in <=> out', animate('150ms linear'))
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CuteTab, isStandalone: true, selector: "cute-tab", inputs: { textLabel: ["label", "textLabel"], contentTemplate: "contentTemplate", labelContext: "labelContext", contentContext: "contentContext", closable: ["closable", "closable", booleanAttribute], preserveContent: ["preserveContent", "preserveContent", booleanAttribute] }, host: { attributes: { "role": "tabpanel" }, properties: { "class.fade": "_animationEnabled", "class.active": "active", "attr.tabindex": "active && !disabled ? 0 : -1", "attr.aria-labelledby": "ariaLabelledby || null", "attr.id": "id || null" }, classAttribute: "cute-tab tab-pane" }, providers: [{ provide: CUTE_TAB, useExisting: CuteTab }], queries: [{ propertyName: "_templateLabel", first: true, predicate: CuteTabLabel, descendants: true, read: TemplateRef, static: true }, { propertyName: "_explicitContent", first: true, predicate: CuteTabContent, descendants: true, read: TemplateRef, static: true }, { propertyName: "link", first: true, predicate: CuteNavLink, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (active || isPreserveContent()) {\r\n\r\n  <ng-content></ng-content>\r\n\r\n  @if (explicitContent) {\r\n    <ng-container [ngTemplateOutlet]=\"explicitContent\"\r\n                  [ngTemplateOutletContext]=\"getContentContext()\">\r\n    </ng-container>\r\n  }\r\n}\r\n", styles: [".cute-tab{display:block;width:100%;padding:.25rem;opacity:1}.cute-tab:not(.show){display:none}.cute-tab.ng-animating{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTab, decorators: [{
             type: Component,
-            args: [{ selector: 'cute-tab', animations: [
-                        trigger('contentFade', [
-                            state('in', style({ opacity: 1, height: '*' })),
-                            state('out', style({ opacity: 0, height: '0px' })),
-                            transition('in <=> out', animate('150ms linear'))
-                        ])
-                    ], host: {
+            args: [{ selector: 'cute-tab', host: {
                         "class": "cute-tab tab-pane",
-                        "[class.show]": "active",
+                        "[class.fade]": "_animationEnabled",
+                        // "[class.show]": "active",
                         "[class.active]": "active",
-                        //    "[class.d-none]": "!active",
                         '[attr.tabindex]': 'active && !disabled ? 0 : -1',
                         '[attr.aria-labelledby]': 'ariaLabelledby || null',
                         '[attr.id]': 'id || null',
                         "role": "tabpanel",
-                        "[@contentFade]": "active ? 'in' : 'out'"
-                    }, imports: [
+                    }, providers: [{ provide: CUTE_TAB, useExisting: CuteTab }], imports: [
                         NgTemplateOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (active || isPreserveContent()) {\r\n\r\n  <ng-content></ng-content>\r\n\r\n  @if (explicitContent) {\r\n    <ng-container [ngTemplateOutlet]=\"explicitContent\"\r\n                  [ngTemplateOutletContext]=\"getContentContext()\">\r\n    </ng-container>\r\n  }\r\n}\r\n", styles: [".cute-tab{display:block;width:100%;padding:.25rem}.cute-tab:not(.show){display:none}.cute-tab.ng-animating{overflow:hidden}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (active || isPreserveContent()) {\r\n\r\n  <ng-content></ng-content>\r\n\r\n  @if (explicitContent) {\r\n    <ng-container [ngTemplateOutlet]=\"explicitContent\"\r\n                  [ngTemplateOutletContext]=\"getContentContext()\">\r\n    </ng-container>\r\n  }\r\n}\r\n", styles: [".cute-tab{display:block;width:100%;padding:.25rem;opacity:1}.cute-tab:not(.show){display:none}.cute-tab.ng-animating{overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { textLabel: [{
                 type: Input,
                 args: ["label"]
@@ -702,17 +727,17 @@ const TYPES = [
     CuteTabContent,
 ];
 class CuteTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteTabsModule, imports: [CommonModule, CuteTab,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: CuteTabsModule, imports: [CommonModule, CuteTab,
             CuteTabGroup,
             CuteTabLabel,
             CuteTabContent], exports: [CuteTab,
             CuteTabGroup,
             CuteTabLabel,
             CuteTabContent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabsModule, imports: [CommonModule, CuteTabGroup] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTabsModule, imports: [CommonModule, CuteTabGroup] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CuteTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ...TYPES],
@@ -725,5 +750,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CUTE_TAB, CUTE_TAB_CONTENT, CUTE_TAB_GROUP, CUTE_TAB_LABEL, CuteTab, CuteTabChangeEvent, CuteTabChangingEvent, CuteTabContent, CuteTabGroup, CuteTabLabel, CuteTabsModule, transitionAnimation };
+export { CUTE_TAB, CUTE_TAB_CONTENT, CUTE_TAB_GROUP, CUTE_TAB_LABEL, CuteTab, CuteTabChangeEvent, CuteTabChangingEvent, CuteTabContent, CuteTabGroup, CuteTabLabel, CuteTabsModule };
 //# sourceMappingURL=cute-widgets-base-tabs.mjs.map