@cute-widgets/base 20.0.1

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

@@ -0,0 +1,729 @@
+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 { NgTemplateOutlet, CommonModule } from '@angular/common';
+import { CuteLayoutControl, CuteFocusableControl } from '@cute-widgets/base/abstract';
+import { fromEvent, debounceTime, Subject } from 'rxjs';
+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 { CuteObserveVisibility } from '@cute-widgets/base/core/observers';
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Injection token that can be used to reference instances of `CuteTabLabel`. It serves as
+ * alternative token to the actual `CuteTabLabel` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CUTE_TAB_LABEL = new InjectionToken('CuteTabLabel');
+/** Used to flag tab labels for use with the portal directive */
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cute-tab-label], ng-template[cuteTabLabel]',
+                    exportAs: 'cuteTabLabel',
+                    providers: [{ provide: CUTE_TAB_LABEL, useExisting: CuteTabLabel }],
+                }]
+        }] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Injection token that can be used to reference instances of `CuteTabContent`. It serves as
+ * alternative token to the actual `CuteTabContent` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CUTE_TAB_CONTENT = new InjectionToken('CuteTabContent');
+/** Decorates the `ng-template` tags and reads out the template from it. */
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cute-tab-content], ng-template[cuteTabContent]',
+                    providers: [{ provide: CUTE_TAB_CONTENT, useExisting: CuteTabContent }],
+                }]
+        }] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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.
+ */
+const CUTE_TAB_GROUP = new InjectionToken('CUTE_TAB_GROUP');
+/** Cancelable event emitted when the `cute-tab` selection is about to change. */
+class CuteTabChangingEvent extends Event {
+    constructor(
+    /** Index of the currently-selected tab. */
+    index, 
+    /** Reference to the currently-selected tab. */
+    tab, 
+    /** Index of the previously-selected tab. */
+    fromIndex, 
+    /** Reference to the previously-selected tab. */
+    fromTab, 
+    /** How the tab was focused. */
+    origin) {
+        super("tabChanging", { cancelable: true });
+        this.index = index;
+        this.tab = tab;
+        this.fromIndex = fromIndex;
+        this.fromTab = fromTab;
+        this.origin = origin;
+    }
+}
+/** A simple change event emitted on focus or selection changes. */
+class CuteTabChangeEvent extends Event {
+    constructor(
+    /** Index of the currently-selected tab. */
+    index, 
+    /** Reference to the currently-selected tab. */
+    tab, 
+    /** Index of the previously-selected tab. */
+    fromIndex, 
+    /** Reference to the previously-selected tab. */
+    fromTab, 
+    /** How the tab was focused. */
+    origin) {
+        super("tabChange");
+        this.index = index;
+        this.tab = tab;
+        this.fromIndex = fromIndex;
+        this.fromTab = fromTab;
+        this.origin = origin;
+    }
+}
+/**
+ * A flexible, feature-rich tab component for Angular applications with Bootstrap integration.
+ */
+class CuteTabGroup extends CuteLayoutControl {
+    /** The index of the active tab. */
+    get selectedIndex() { return this._selectedIndex; }
+    set selectedIndex(value) {
+        if (value !== this._selectedIndex) {
+            this._indexToChange = value;
+            Promise.resolve().then(() => this.selectTab(value));
+        }
+    }
+    /**
+     * The style a `cute-tab`’s content extends the full available width, proportionately (**fill**) or equal-width (**justified**).
+     * The width is determined by the longest `cute-tab-label`'s content. By default, stretching of items is not used (**none**).
+     */
+    get stretchTabs() { return this._stretchTabs; }
+    set stretchTabs(value) {
+        if (value) {
+            if (typeof value === "boolean" || value === "true" || value === "false") {
+                this._stretchTabs = Boolean(value) ? "justified" : "none";
+            }
+            else {
+                this._stretchTabs = value;
+            }
+        }
+        else {
+            this._stretchTabs = "none";
+        }
+    }
+    constructor() {
+        super();
+        this._indexToChange = null;
+        this.showScrollButtons = false;
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        /** Number of pixels to scroll left or right */
+        this.scrollAmount = 200;
+        this.dynamicTabs = [];
+        this.destroyRef = inject(DestroyRef);
+        /**
+         *  Alignment for tabs.
+         *  @default start
+         */
+        this.alignTabs = "start";
+        this._stretchTabs = "none";
+        /** 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';
+        /** Use `underline` style for horizontal tabs. */
+        this.underlineTabs = false;
+        /**
+         * Whether tabs can be draggable.
+         * @default false
+         */
+        this.dragEnabled = false;
+        /**
+         * Defines the horizontal alignment when scrolling the tabs.
+         * @default center
+         */
+        this.tabScrollingAlignment = "center";
+        /** Output to enable support for two-way binding on `[(selectedIndex)]` */
+        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. */
+        this.selectedTabChange = new EventEmitter();
+        /** Event emitted when focus has changed within a tab group. */
+        this.focusChange = new EventEmitter();
+        /** Event emitted after the new tab was added. */
+        this.tabAdded = new EventEmitter();
+        /** Event emitted after the closable tab was removed. */
+        this.tabRemoved = new EventEmitter();
+    }
+    /** Whether the tab group currently has a horizontal layout */
+    get isHorizontal() {
+        return this.headerPosition === 'top' || this.headerPosition === 'bottom';
+    }
+    /** The active tab. */
+    get selectedTab() {
+        return this.tabs?.get(this.selectedIndex ?? NaN);
+    }
+    /** The number of tabs in the tab group. */
+    get tabCount() {
+        return this.tabs?.length || 0;
+    }
+    /**
+     * Returns the first element in the array of tabs that satisfies the provided testing function.
+     * Otherwise, _undefined_ is returned.
+     * @param predicate Testing function
+     * @returns `CuteTab` object or _undefined_ if there are no tabs with the specified condition.
+     */
+    findTab(predicate) {
+        return this.tabs?.find(predicate);
+    }
+    generateId() {
+        return `cute-tab-group-${nextId$1++}`;
+    }
+    checkScrollButtons() {
+        const el = this.headerScroll.nativeElement;
+        this.showScrollButtons = el.scrollWidth > el.clientWidth;
+        this.canScrollLeft = el.scrollLeft > 0;
+        this.canScrollRight = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
+        //this._changeDetectorRef.detectChanges();
+        this.markForCheck();
+    }
+    setupScrollListener() {
+        fromEvent(this.headerScroll.nativeElement, 'scroll')
+            .pipe(debounceTime(100), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.checkScrollButtons());
+        this._resizeObserver = new ResizeObserver(() => {
+            this.checkScrollButtons();
+            //setTimeout(()=>this.scrollToTab( this.selectedIndex ));
+        });
+        this._resizeObserver.observe(this.headerContainer.nativeElement);
+    }
+    scrollHeader(direction) {
+        const el = this.headerScroll.nativeElement;
+        clearTimeout(this._scrollDebounce);
+        el.scrollBy({
+            left: direction * this.scrollAmount,
+            behavior: 'smooth'
+        });
+        this._scrollDebounce = setTimeout(() => {
+            this.checkScrollButtons();
+        }, 300);
+    }
+    /**
+     * Activates tab with specified index.
+     * @param index Tab index
+     * @param origin (optional) Focus origin
+     */
+    selectTab(index, origin = "program") {
+        if (!this.tabs)
+            return;
+        if (index < 0 || index >= this.tabs.length)
+            return;
+        if (index === this.selectedIndex)
+            return;
+        const tabsArray = this.tabs.toArray();
+        if (tabsArray[index].disabled)
+            return;
+        this._indexToChange = null;
+        this._selectedIndex = index;
+        this.tabs.forEach((tab, i) => {
+            tab.active = (i === index);
+        });
+        setTimeout(() => {
+            if (tabsArray[index].scrollNeeded) {
+                this.scrollToTab(index);
+            }
+        }, 100);
+        this.selectedIndexChange.emit(index);
+        this.markForCheck();
+    }
+    _createChangeEvent(event) {
+        const tabsArray = this.tabs?.toArray() ?? [];
+        return new CuteTabChangeEvent(event.index, tabsArray[event.index], event.fromIndex, event.fromIndex ? tabsArray[event.fromIndex] : null, event.origin);
+    }
+    _createChangingEvent(event) {
+        const tabsArray = this.tabs?.toArray() ?? [];
+        return new CuteTabChangeEvent(event.index, tabsArray[event.index], event.fromIndex, event.fromIndex ? tabsArray[event.fromIndex] : null, event.origin);
+    }
+    onNavFocusChange(event) {
+        this.focusChange.emit(this._createChangeEvent(event));
+    }
+    onNavLinkChange(event) {
+        this.selectedTabChange.emit(this._createChangeEvent(event));
+    }
+    onNavLinkChanging(event) {
+        const ev = this._createChangingEvent(event);
+        this.selectedTabChanging.emit(ev);
+        if (ev.defaultPrevented) {
+            event.preventDefault();
+        }
+    }
+    getLabelContext(tab, index) {
+        return { ...tab.getContentContext(), index };
+    }
+    /** Gets the current index of the specified tab object. */
+    getTabIndex(tab) {
+        return this.tabs?.toArray().indexOf(tab);
+    }
+    scrollToTab(index) {
+        if (index != null) {
+            const tabElement = this.tabLinks?.toArray()[index]?.element.nativeElement;
+            if (tabElement) {
+                tabElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                    inline: this.tabScrollingAlignment
+                });
+            }
+        }
+    }
+    /** Drop event */
+    onDrop(event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        if (!this.tabs)
+            return;
+        const tabsArray = this.tabs.toArray();
+        moveItemInArray(tabsArray, event.previousIndex, event.currentIndex);
+        // Refresh QueryList
+        this.tabs.reset(tabsArray);
+        this._adjustActiveIndex(event.previousIndex, event.currentIndex);
+        this.tabs.notifyOnChanges();
+    }
+    /** Sets a new active index after the dragging tabs */
+    _adjustActiveIndex(prevIndex, newIndex) {
+        if (this.selectedIndex === prevIndex) {
+            this.selectedIndex = newIndex;
+        }
+        else if (this.selectedIndex !== undefined) {
+            const min = Math.min(prevIndex, newIndex);
+            const max = Math.max(prevIndex, newIndex);
+            if (this.selectedIndex >= min && this.selectedIndex <= max) {
+                this.selectedIndex += (prevIndex < newIndex ? -1 : 1);
+            }
+        }
+    }
+    /**
+     * Adds a new tab to the end of `tab-group` dynamically.
+     *
+     * @param label Tab label
+     * @param content Tab template reference
+     * @param context (optional) Template context object
+     * @param closable (optional) Whether the tab is closable. Default is _true_.
+     * @returns `ComponentRef` object of the new Tab.
+     */
+    async addTab(label, content, context, closable) {
+        const componentRef = this.dynamicTabsContainer.createComponent(CuteTab);
+        const newTab = componentRef.instance;
+        newTab.textLabel = label || `Tab ${(this.tabs?.length ?? 0) + 1}`;
+        newTab.contentTemplate = content;
+        newTab.contentContext = context;
+        newTab.active = true; // !this.tabs || this.tabs.length === 0;
+        newTab.isDynamic = true;
+        //componentRef.setInput("closable", true);
+        newTab.closable = closable ?? true;
+        componentRef.changeDetectorRef.detectChanges();
+        this.dynamicTabs.push(componentRef);
+        const tabsArray = this.tabs?.toArray() || [];
+        tabsArray.push(newTab);
+        this.tabs?.reset(tabsArray);
+        this.tabAdded.emit();
+        if (newTab.active) {
+            this.selectTab(tabsArray.length - 1);
+        }
+        return componentRef;
+    }
+    /**
+     * Removes the tab with specified index.
+     * @param index Tab index
+     */
+    async removeTab(index) {
+        if (!this.tabs)
+            return;
+        if (index < 0 || index >= this.tabs.length)
+            return;
+        const tab = this.tabs.get(index);
+        const wasActive = tab.active;
+        const dynIndex = this.dynamicTabs.findIndex(cref => cref.instance == tab);
+        if (dynIndex >= 0) {
+            this.dynamicTabsContainer?.remove(dynIndex);
+            this.dynamicTabs.splice(dynIndex, 1);
+        }
+        const tabsArray = this.tabs.filter((_, i) => i !== index);
+        this.tabs.reset(tabsArray);
+        this.tabs.notifyOnChanges();
+        this.tabRemoved.emit(index);
+        if (wasActive && this.tabs.length > 0) {
+            const newIndex = Math.min(index, this.tabs.length - 1);
+            if (newIndex == index) {
+                // To bypass verification
+                this._selectedIndex = undefined;
+            }
+            this.selectedIndex = newIndex;
+            this.tabs.get(newIndex)?.link?.focus();
+        }
+        //this.markForCheck();
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.checkScrollButtons();
+        this.setupScrollListener();
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        if (this.tabs) {
+            const tabsArray = this.tabs.toArray();
+            if (this._indexToChange == null) {
+                this.selectedIndex = Math.max(tabsArray.findIndex(t => !t.disabled), 0);
+            }
+        }
+    }
+    ngOnDestroy() {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-tab-group', exportAs: "cuteTabGroup", host: {
+                        "class": "cute-tab-group",
+                        "[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'",
+                    }, imports: [
+                        CdkDropList,
+                        CdkDrag,
+                        NgTemplateOutlet,
+                        CuteNavModule,
+                        CuteButton,
+                        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"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{
+                type: ContentChildren,
+                args: [CuteTab]
+            }], tabLinks: [{
+                type: ViewChildren,
+                args: ['tabLink', { read: CuteNavLink }]
+            }], dynamicTabsContainer: [{
+                type: ViewChild,
+                args: ['dynamicTabs', { read: ViewContainerRef, static: true }]
+            }], headerContainer: [{
+                type: ViewChild,
+                args: ['headerContainer', { static: true }]
+            }], headerScroll: [{
+                type: ViewChild,
+                args: ['headerScroll', { static: true }]
+            }], selectedIndex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], alignTabs: [{
+                type: Input,
+                args: [{ alias: 'cute-align-tabs' }]
+            }], stretchTabs: [{
+                type: Input,
+                args: [{ alias: 'cute-stretch-tabs' }]
+            }], preserveContent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], dynamicHeight: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], headerPosition: [{
+                type: Input
+            }], underlineTabs: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], dragEnabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], tabScrollingAlignment: [{
+                type: Input
+            }], selectedIndexChange: [{
+                type: Output
+            }], selectedTabChanging: [{
+                type: Output
+            }], selectedTabChange: [{
+                type: Output
+            }], focusChange: [{
+                type: Output
+            }], tabAdded: [{
+                type: Output
+            }], tabRemoved: [{
+                type: Output
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * Used to provide a tab label to a tab without causing a circular dependency.
+ * @docs-private
+ */
+const CUTE_TAB = new InjectionToken('CUTE_TAB');
+let nextId = 0;
+class CuteTab extends CuteFocusableControl {
+    /** Whether the tab is currently active. */
+    get active() { return this._active; }
+    set active(value) {
+        if (value !== this._active) {
+            this._active = value;
+            this._stateChanges.next();
+        }
+    }
+    /** Whether the tab is intersected the containing box and needs to scroll to display its full size */
+    get scrollNeeded() {
+        return this._intersectionRatio < 1;
+    }
+    isPreserveContent() {
+        return this.preserveContent ?? this._tabGroup?.preserveContent ?? false;
+    }
+    /** Tab content defined by <ng-template cute-tab-content> or directly referenced where the latter has more priority. */
+    get explicitContent() {
+        return this.contentTemplate || this._explicitContent;
+    }
+    /** Template inside the CuteTab view that contains an `<ng-content>`. */
+    // @ViewChild(TemplateRef, {static: true}) _implicitContent: TemplateRef<any> | undefined;
+    constructor() {
+        super();
+        this._tabGroup = inject(CUTE_TAB_GROUP, { optional: true });
+        this._intersectionRatio = NaN;
+        /** Plain text label for the tab, used when there is no template label. */
+        this.textLabel = "";
+        /** Lazy loading label's outlet context */
+        this.labelContext = {};
+        /** 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;
+        /** Emits whenever the internal state of the tab changes. */
+        this._stateChanges = new Subject();
+        /** Whether the tab content was loaded */
+        this.loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : []));
+        this._stateChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.markForCheck();
+        });
+    }
+    generateId() {
+        return `cute-tab-${nextId++}`;
+    }
+    /** Gets the content template's context object */
+    getContentContext() {
+        return { ...this.contentContext,
+            $implicit: this,
+            index: this._tabGroup?.getTabIndex(this),
+            active: this.active,
+            tab: this
+        };
+    }
+    /**
+     * Removes this tab from the tab group.
+     */
+    async remove() {
+        if (this._tabGroup) {
+            const index = this._tabGroup.getTabIndex(this);
+            if (index != null) {
+                return this._tabGroup.removeTab(index);
+            }
+        }
+        return;
+    }
+    _visibilityChanged(entries) {
+        if (entries.length) {
+            this._intersectionRatio = entries[0].intersectionRatio;
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.ariaLabelledby = this.id + "-link";
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        if (changes['textLabel'] || changes['disabled'] || changes['closable']) {
+            this._stateChanges.next();
+        }
+        if (changes["active"] && changes["active"].currentValue) {
+            this.loaded.set(true);
+        }
+    }
+    ngOnDestroy() {
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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: {
+                        "class": "cute-tab tab-pane",
+                        "[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: [
+                        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"] }]
+        }], ctorParameters: () => [], propDecorators: { textLabel: [{
+                type: Input,
+                args: ["label"]
+            }], contentTemplate: [{
+                type: Input
+            }], labelContext: [{
+                type: Input
+            }], contentContext: [{
+                type: Input
+            }], closable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], preserveContent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], _templateLabel: [{
+                type: ContentChild,
+                args: [CuteTabLabel, { read: TemplateRef, static: true }]
+            }], _explicitContent: [{
+                type: ContentChild,
+                args: [CuteTabContent, { read: TemplateRef, static: true }]
+            }], link: [{
+                type: ContentChild,
+                args: [CuteNavLink, { descendants: true }]
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+const TYPES = [
+    CuteTab,
+    CuteTabGroup,
+    CuteTabLabel,
+    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,
+            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] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ...TYPES],
+                    exports: TYPES,
+                    declarations: [],
+                }]
+        }] });
+
+/**
+ * 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 };
+//# sourceMappingURL=cute-widgets-base-tabs.mjs.map