@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-tabs.mjs

@@ -0,0 +1,591 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, TemplateRef, Directive, contentChild, viewChild, input, booleanAttribute, ChangeDetectionStrategy, Component, ViewContainerRef, ChangeDetectorRef, PLATFORM_ID, contentChildren, viewChildren, signal, numberAttribute, output, effect, ElementRef, computed, DestroyRef } from '@angular/core';
+import * as i2 from '@angular/cdk/portal';
+import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i1$1 from '@ngstarter-ui/components/core';
+import { Ripple } from '@ngstarter-ui/components/core';
+import { Subscription, fromEvent, debounceTime } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { RouterLink, Router, NavigationEnd } from '@angular/router';
+
+const TAB_LABEL = new InjectionToken('EmrTabLabel');
+class TabLabel {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TabLabel, isStandalone: true, selector: "[ngsTabLabel], [ngs-tab-label]", providers: [{ provide: TAB_LABEL, useExisting: TabLabel }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsTabLabel], [ngs-tab-label]',
+                    standalone: true,
+                    providers: [{ provide: TAB_LABEL, useExisting: TabLabel }],
+                }]
+        }] });
+const TAB_CONTENT = new InjectionToken('EmrTabContent');
+class TabContent {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TabContent, isStandalone: true, selector: "[ngsTabContent], [ngs-tab-content]", providers: [{ provide: TAB_CONTENT, useExisting: TabContent }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsTabContent], [ngs-tab-content]',
+                    standalone: true,
+                    providers: [{ provide: TAB_CONTENT, useExisting: TabContent }],
+                }]
+        }] });
+
+class Tab {
+    templateLabel = contentChild(TAB_LABEL, ...(ngDevMode ? [{ debugName: "templateLabel" }] : /* istanbul ignore next */ []));
+    explicitContent = contentChild(TAB_CONTENT, ...(ngDevMode ? [{ debugName: "explicitContent" }] : /* istanbul ignore next */ []));
+    implicitContent = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "implicitContent" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input('', { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _contentPortal = null;
+    _prepareContent(viewContainerRef) {
+        if (!this._contentPortal) {
+            const template = this.explicitContent()?.template || this.implicitContent();
+            if (template) {
+                this._contentPortal = new TemplatePortal(template, viewContainerRef);
+            }
+        }
+        return this._contentPortal;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Tab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: Tab, isStandalone: true, selector: "ngs-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-tab" }, queries: [{ propertyName: "templateLabel", first: true, predicate: TAB_LABEL, descendants: true, isSignal: true }, { propertyName: "explicitContent", first: true, predicate: TAB_CONTENT, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "implicitContent", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["ngsTab"], ngImport: i0, template: "<ng-template>\n  <ng-content/>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Tab, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-tab', exportAs: 'ngsTab', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-tab',
+                    }, template: "<ng-template>\n  <ng-content/>\n</ng-template>\n" }]
+        }], propDecorators: { templateLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TAB_LABEL), { isSignal: true }] }], explicitContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TAB_CONTENT), { isSignal: true }] }], implicitContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class TabGroup {
+    _viewContainerRef = inject(ViewContainerRef);
+    _cdr = inject(ChangeDetectorRef);
+    _platformId = inject(PLATFORM_ID);
+    _tabsSubscription = Subscription.EMPTY;
+    _resizeSubscription = Subscription.EMPTY;
+    _resizeObserver = null;
+    _tabs = contentChildren(Tab, ...(ngDevMode ? [{ debugName: "_tabs" }] : /* istanbul ignore next */ []));
+    _tabLabels = viewChildren('tabLabel', ...(ngDevMode ? [{ debugName: "_tabLabels" }] : /* istanbul ignore next */ []));
+    _tabListContainer = viewChild('tabListContainer', ...(ngDevMode ? [{ debugName: "_tabListContainer" }] : /* istanbul ignore next */ []));
+    _tabList = viewChild('tabList', ...(ngDevMode ? [{ debugName: "_tabList" }] : /* istanbul ignore next */ []));
+    _showPaginationControls = signal(false, ...(ngDevMode ? [{ debugName: "_showPaginationControls" }] : /* istanbul ignore next */ []));
+    _disableScrollBefore = signal(true, ...(ngDevMode ? [{ debugName: "_disableScrollBefore" }] : /* istanbul ignore next */ []));
+    _disableScrollAfter = signal(true, ...(ngDevMode ? [{ debugName: "_disableScrollAfter" }] : /* istanbul ignore next */ []));
+    selectedIndex = input(0, { ...(ngDevMode ? { debugName: "selectedIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    headerPosition = input('above', ...(ngDevMode ? [{ debugName: "headerPosition" }] : /* istanbul ignore next */ []));
+    preserveContent = input(false, { ...(ngDevMode ? { debugName: "preserveContent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    stretchTabs = input(true, { ...(ngDevMode ? { debugName: "stretchTabs" } : /* istanbul ignore next */ {}), alias: 'ngs-stretch-tabs',
+        transform: booleanAttribute });
+    alignTabs = input('start', { ...(ngDevMode ? { debugName: "alignTabs" } : /* istanbul ignore next */ {}), alias: 'ngs-align-tabs' });
+    disableRipple = input(false, { ...(ngDevMode ? { debugName: "disableRipple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    animationDuration = input('500ms', { ...(ngDevMode ? { debugName: "animationDuration" } : /* istanbul ignore next */ {}), transform: (value) => {
+            return /^\d+$/.test(value + '') ? value + 'ms' : value + '';
+        } });
+    enterAnimation = input('', { ...(ngDevMode ? { debugName: "enterAnimation" } : /* istanbul ignore next */ {}), alias: 'animate.enter' });
+    leaveAnimation = input('', { ...(ngDevMode ? { debugName: "leaveAnimation" } : /* istanbul ignore next */ {}), alias: 'animate.leave' });
+    selectedIndexChange = output();
+    selectedTabChange = output();
+    focusChange = output();
+    _isActive = {};
+    _selectedIndex = 0;
+    _prevIndex = 0;
+    _isInitialized = false;
+    constructor() {
+        this._selectedIndex = this.selectedIndex();
+        this._prevIndex = this._selectedIndex;
+        this._isActive[this._selectedIndex] = true;
+        effect((onCleanup) => {
+            const selectedIndex = this.selectedIndex();
+            if (this._selectedIndex !== selectedIndex) {
+                this._prevIndex = this._selectedIndex;
+                this._isActive[this._prevIndex] = true;
+                this._selectedIndex = selectedIndex;
+                this._isActive[this._selectedIndex] = true;
+                this._cdr.markForCheck();
+                const prevIndex = this._prevIndex;
+                const timeout = setTimeout(() => {
+                    delete this._isActive[prevIndex];
+                    this._cdr.markForCheck();
+                }, parseInt(this.animationDuration()));
+                onCleanup(() => clearTimeout(timeout));
+            }
+            setTimeout(() => {
+                if (this._isInitialized) {
+                    this._scrollToTab(this._selectedIndex);
+                }
+                this._updatePagination();
+            });
+        });
+        this._tabsSubscription = toObservable(this._tabs).subscribe(() => {
+            this._clampIndex();
+            this._cdr.markForCheck();
+            setTimeout(() => {
+                this._updatePagination();
+            });
+        });
+        effect(() => {
+            this._tabs();
+            setTimeout(() => {
+                this._updatePagination();
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this._isInitialized = true;
+        if (isPlatformBrowser(this._platformId)) {
+            this._resizeSubscription = fromEvent(window, 'resize')
+                .pipe(debounceTime(100))
+                .subscribe(() => {
+                this._updatePagination();
+            });
+            this._resizeObserver = new ResizeObserver(() => {
+                this._updatePagination();
+            });
+            this._resizeObserver.observe(this._tabListContainer()?.nativeElement);
+            this._resizeObserver.observe(this._tabList()?.nativeElement);
+        }
+        setTimeout(() => {
+            this._updatePagination();
+        });
+    }
+    ngOnDestroy() {
+        this._tabsSubscription.unsubscribe();
+        this._resizeSubscription.unsubscribe();
+        this._resizeObserver?.disconnect();
+    }
+    _clampIndex() {
+        if (this._tabs().length === 0) {
+            this._selectedIndex = 0;
+            return;
+        }
+        this._selectedIndex = Math.max(0, Math.min(this._selectedIndex, this._tabs().length - 1));
+    }
+    _updatePagination() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        const containerEl = this._tabListContainer()?.nativeElement;
+        const listEl = this._tabList()?.nativeElement;
+        if (containerEl && listEl) {
+            const showPaginationControls = listEl.scrollWidth > containerEl.clientWidth;
+            if (showPaginationControls !== this._showPaginationControls()) {
+                this._showPaginationControls.set(showPaginationControls);
+                this._cdr.detectChanges();
+            }
+            this._updateScrollButtonsState();
+        }
+    }
+    _updateScrollButtonsState() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        const containerEl = this._tabListContainer()?.nativeElement;
+        if (containerEl) {
+            const scrollLeft = containerEl.scrollLeft;
+            const disableScrollBefore = scrollLeft <= 0;
+            const disableScrollAfter = Math.ceil(scrollLeft + containerEl.clientWidth) >= containerEl.scrollWidth;
+            if (disableScrollBefore !== this._disableScrollBefore() || disableScrollAfter !== this._disableScrollAfter()) {
+                this._disableScrollBefore.set(disableScrollBefore);
+                this._disableScrollAfter.set(disableScrollAfter);
+                this._cdr.detectChanges();
+            }
+        }
+    }
+    _scrollToTab(index) {
+        if (!isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        const labels = this._tabLabels();
+        const containerEl = this._tabListContainer()?.nativeElement;
+        if (labels[index] && containerEl) {
+            const labelEl = labels[index].nativeElement;
+            const containerRect = containerEl.getBoundingClientRect();
+            const labelRect = labelEl.getBoundingClientRect();
+            if (labelRect.left < containerRect.left) {
+                containerEl.scrollBy({ left: labelRect.left - containerRect.left, behavior: 'smooth' });
+            }
+            else if (labelRect.right > containerRect.right) {
+                containerEl.scrollBy({ left: labelRect.right - containerRect.right, behavior: 'smooth' });
+            }
+        }
+    }
+    _scrollBefore() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        const containerEl = this._tabListContainer()?.nativeElement;
+        if (containerEl) {
+            containerEl.scrollBy({ left: -containerEl.clientWidth / 2, behavior: 'smooth' });
+        }
+    }
+    _scrollAfter() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        const containerEl = this._tabListContainer()?.nativeElement;
+        if (containerEl) {
+            containerEl.scrollBy({ left: containerEl.clientWidth / 2, behavior: 'smooth' });
+        }
+    }
+    _handleScroll() {
+        this._updateScrollButtonsState();
+    }
+    _onTabHeaderClick(index) {
+        const tabs = this._tabs();
+        const labels = this._tabLabels();
+        if (tabs[index].disabled() || this._selectedIndex === index) {
+            return;
+        }
+        this._prevIndex = this._selectedIndex;
+        this._selectedIndex = index;
+        this._isActive[this._prevIndex] = true;
+        this._isActive[this._selectedIndex] = true;
+        this.selectedIndexChange.emit(index);
+        this.selectedTabChange.emit({
+            index,
+            tab: tabs[index]
+        });
+        this._cdr.markForCheck();
+        const prevIndex = this._prevIndex;
+        setTimeout(() => {
+            delete this._isActive[prevIndex];
+            this._cdr.markForCheck();
+        }, parseInt(this.animationDuration()));
+        if (labels[index]) {
+            this._scrollToTab(index);
+        }
+    }
+    _getTabContent(tab) {
+        return tab._prepareContent(this._viewContainerRef);
+    }
+    _getEnterAnimation(index) {
+        let direction = '';
+        const selectedIndex = this._selectedIndex;
+        if (this._prevIndex > selectedIndex) {
+            direction = 'left';
+        }
+        else if (this._prevIndex < selectedIndex) {
+            direction = 'right';
+        }
+        if (this.enterAnimation()) {
+            return this.enterAnimation();
+        }
+        if (direction === '' || index !== selectedIndex) {
+            return '';
+        }
+        // If moving right (prev < current), the new tab should slide in from the RIGHT
+        return `ngs-tab-group-enter-${direction}`;
+    }
+    _getLeaveAnimation(index) {
+        let direction = '';
+        const selectedIndex = this._selectedIndex;
+        if (this._prevIndex > selectedIndex) {
+            direction = 'left';
+        }
+        else if (this._prevIndex < selectedIndex) {
+            direction = 'right';
+        }
+        if (this.leaveAnimation()) {
+            return this.leaveAnimation();
+        }
+        if (direction === '' || index !== this._prevIndex || index === selectedIndex) {
+            return '';
+        }
+        // If moving right (prev < current), the old tab should slide out to the LEFT
+        const leaveDirection = direction === 'right' ? 'left' : 'right';
+        return `ngs-tab-group-leave-${leaveDirection}`;
+    }
+    _onKeydown(event) {
+        const tabs = this._tabs();
+        const labels = this._tabLabels();
+        let newIndex = this._selectedIndex;
+        if (event.key === 'ArrowRight') {
+            newIndex = (this._selectedIndex + 1) % tabs.length;
+        }
+        else if (event.key === 'ArrowLeft') {
+            newIndex = (this._selectedIndex - 1 + tabs.length) % tabs.length;
+        }
+        else if (event.key === 'Home') {
+            newIndex = 0;
+        }
+        else if (event.key === 'End') {
+            newIndex = tabs.length - 1;
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        // Skip disabled tabs
+        const direction = (newIndex >= this._selectedIndex) ? 1 : -1;
+        const startIndex = newIndex;
+        while (tabs[newIndex].disabled()) {
+            newIndex = (newIndex + direction + tabs.length) % tabs.length;
+            if (newIndex === startIndex)
+                break; // All tabs disabled or looped back
+        }
+        if (newIndex !== this._selectedIndex && !tabs[newIndex].disabled()) {
+            this._prevIndex = this._selectedIndex;
+            this._selectedIndex = newIndex;
+            this._isActive[this._prevIndex] = true;
+            this._isActive[this._selectedIndex] = true;
+            this.selectedIndexChange.emit(newIndex);
+            this.selectedTabChange.emit({
+                index: newIndex,
+                tab: tabs[newIndex]
+            });
+            this._cdr.markForCheck();
+            const prevIndex = this._prevIndex;
+            setTimeout(() => {
+                delete this._isActive[prevIndex];
+                this._cdr.markForCheck();
+            }, parseInt(this.animationDuration()));
+            if (isPlatformBrowser(this._platformId)) {
+                labels[newIndex].nativeElement.focus({ preventScroll: true });
+                this._scrollToTab(newIndex);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TabGroup, isStandalone: true, selector: "ngs-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, preserveContent: { classPropertyName: "preserveContent", publicName: "preserveContent", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "ngs-stretch-tabs", isSignal: true, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "ngs-align-tabs", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, enterAnimation: { classPropertyName: "enterAnimation", publicName: "animate.enter", isSignal: true, isRequired: false, transformFunction: null }, leaveAnimation: { classPropertyName: "leaveAnimation", publicName: "animate.leave", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", focusChange: "focusChange" }, host: { properties: { "class.ngs-tab-group-inverted": "headerPosition() === \"below\"", "style.--ngs-tab-group-animation-duration": "animationDuration()" }, classAttribute: "ngs-tab-group" }, queries: [{ propertyName: "_tabs", predicate: Tab, isSignal: true }], viewQueries: [{ propertyName: "_tabLabels", predicate: ["tabLabel"], descendants: true, isSignal: true }, { propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n  @if (_showPaginationControls()) {\n    <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n            [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n            (click)=\"_scrollBefore()\"\n            type=\"button\"\n            aria-hidden=\"true\">\n      <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n    </button>\n  }\n\n  <div class=\"ngs-tab-group-header\"\n       #tabListContainer\n       role=\"tablist\"\n       (scroll)=\"_handleScroll()\"\n       (keydown)=\"_onKeydown($event)\">\n    <div class=\"ngs-tab-group-header-list\" #tabList\n         [class.ngs-tab-group-header-list-align-start]=\"alignTabs() === 'start'\"\n         [class.ngs-tab-group-header-list-align-center]=\"alignTabs() === 'center'\"\n         [class.ngs-tab-group-header-list-align-end]=\"alignTabs() === 'end'\">\n      @for (tab of _tabs(); track tab; let i = $index) {\n        <div\n          #tabLabel\n          class=\"ngs-tab-label\"\n          role=\"tab\"\n          ngsRipple\n          [ngsRippleDisabled]=\"tab.disabled() || disableRipple()\"\n          [id]=\"'ngs-tab-label-' + i\"\n          [attr.aria-controls]=\"'ngs-tab-panel-' + i\"\n          [attr.aria-selected]=\"_selectedIndex === i\"\n          [attr.aria-disabled]=\"tab.disabled()\"\n          [attr.aria-label]=\"tab.ariaLabel()\"\n          [attr.aria-labelledby]=\"tab.ariaLabelledby()\"\n          [tabIndex]=\"_selectedIndex === i ? 0 : -1\"\n          [class.ngs-tab-label-active]=\"_selectedIndex === i\"\n          [class.ngs-tab-label-disabled]=\"tab.disabled()\"\n          [class.ngs-tab-label-stretched]=\"stretchTabs()\"\n          (click)=\"_onTabHeaderClick(i)\"\n        >\n          @if (tab.templateLabel()) {\n            <ng-container [ngTemplateOutlet]=\"tab.templateLabel()!.template\" />\n          } @else {\n            {{ tab.label() }}\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (_showPaginationControls()) {\n    <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n            [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n            (click)=\"_scrollAfter()\"\n            type=\"button\"\n            aria-hidden=\"true\">\n      <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n    </button>\n  }\n</div>\n\n<div class=\"ngs-tab-group-content\">\n  <div class=\"ngs-tab-panel-container\">\n    @for (tab of _tabs(); track tab; let i = $index) {\n      @if (_selectedIndex === i || preserveContent() || _isActive[i]) {\n        <div\n          class=\"ngs-tab-panel\"\n          [class.ngs-tab-panel-active]=\"_selectedIndex === i\"\n          [class.ngs-tab-group-enter-left]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-left'\"\n          [class.ngs-tab-group-enter-right]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-right'\"\n          [class.ngs-tab-group-leave-left]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-left'\"\n          [class.ngs-tab-group-leave-right]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-right'\"\n          role=\"tabpanel\"\n          [id]=\"'ngs-tab-panel-' + i\"\n          [attr.aria-labelledby]=\"'ngs-tab-label-' + i\"\n          [animate.enter]=\"_getEnterAnimation(i)\"\n          [animate.leave]=\"_getLeaveAnimation(i)\"\n        >\n          <ng-template [cdkPortalOutlet]=\"_getTabContent(tab)\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--color-subtle);--ngs-tab-group-header-border-top: none;--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--color-on-surface-variant);--ngs-tab-label-active-color: var(--color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--color-primary);--ngs-tab-label-active-border-top: 2px solid var(--color-primary);--ngs-tab-label-disabled-color: var(--color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);display:flex;flex-direction:column}:host.ngs-tab-group-inverted{flex-direction:column-reverse;--ngs-tab-group-header-border-bottom: none;--ngs-tab-group-header-border-top: 1px solid var(--color-subtle)}:host .ngs-tab-group-header-container{display:flex;flex-direction:row;position:relative;overflow:hidden;flex:none}:host .ngs-tab-group-header-container:before,:host .ngs-tab-group-header-container:after{content:\"\";position:absolute;left:0;right:0;z-index:1;pointer-events:none}:host .ngs-tab-group-header-container:before{top:0;border-top:var(--ngs-tab-group-header-border-top)}:host .ngs-tab-group-header-container:after{bottom:0;border-bottom:var(--ngs-tab-group-header-border-bottom)}:host .ngs-tab-group-header{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 0 auto}:host .ngs-tab-group-header::-webkit-scrollbar{display:none}:host .ngs-tab-label,:host .ngs-tab-link{padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host .ngs-tab-label:focus-visible,:host .ngs-tab-link:focus-visible{background:var(--color-surface-container-high)}:host .ngs-tab-label.ngs-tab-label-stretched,:host .ngs-tab-label.ngs-tab-link-stretched,:host .ngs-tab-link.ngs-tab-label-stretched,:host .ngs-tab-link.ngs-tab-link-stretched{flex-grow:1}:host .ngs-tab-label.ngs-tab-label-active,:host .ngs-tab-label.ngs-tab-link-active,:host .ngs-tab-link.ngs-tab-label-active,:host .ngs-tab-link.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host .ngs-tab-label.ngs-tab-label-active:after,:host .ngs-tab-label.ngs-tab-link-active:after,:host .ngs-tab-link.ngs-tab-label-active:after,:host .ngs-tab-link.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-link-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-link-active:after{bottom:auto;top:0;border-bottom:none;border-top:var(--ngs-tab-label-active-border-top);z-index:2}:host .ngs-tab-label.ngs-tab-label-disabled,:host .ngs-tab-label.ngs-tab-link-disabled,:host .ngs-tab-link.ngs-tab-label-disabled,:host .ngs-tab-link.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}:host .ngs-tab-group-header-list{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;min-width:100%}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-start{justify-content:flex-start}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-center{justify-content:center}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-end{justify-content:flex-end}:host .ngs-tab-group-pagination-control{padding:0 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--ngs-tab-label-color);transition:opacity .2s cubic-bezier(.35,0,.25,1)}:host .ngs-tab-group-pagination-control.ngs-tab-group-pagination-control-disabled{opacity:.38;cursor:default;pointer-events:none}:host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--color-outline-variant)}:host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--color-outline-variant)}:host .ngs-tab-group-pagination-control-icon{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:inline-block}:host .ngs-tab-group-pagination-control-before .ngs-tab-group-pagination-control-icon{transform:rotate(-135deg);margin-left:4px}:host .ngs-tab-group-pagination-control-after .ngs-tab-group-pagination-control-icon{transform:rotate(45deg);margin-right:4px}:host{--ngs-tab-content-padding: 0;--ngs-tab-panel-transition: opacity var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1)}:host .ngs-tab-panel{width:100%;flex-shrink:0;box-sizing:border-box;animation-duration:var(--ngs-tab-group-animation-duration, .5s);animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.35,0,.25,1);position:relative;display:none}:host .ngs-tab-panel.ngs-tab-panel-active,:host .ngs-tab-panel.ngs-tab-group-leave-left,:host .ngs-tab-panel.ngs-tab-group-leave-right,:host .ngs-tab-panel.ngs-tab-group-enter-left,:host .ngs-tab-panel.ngs-tab-group-enter-right{display:block}:host .ngs-tab-panel:not(.ngs-tab-panel-active){position:absolute;top:0;left:0;z-index:1;pointer-events:none}:host .ngs-tab-panel.ngs-tab-panel-active{z-index:2}@keyframes ngs-tab-group-enter-left{0%{transform:translate3d(-100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-enter-right{0%{transform:translate3d(100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-leave-left{0%{transform:none}to{transform:translate3d(-100%,0,0)}}@keyframes ngs-tab-group-leave-right{0%{transform:none}to{transform:translate3d(100%,0,0)}}:host .ngs-tab-group-enter-left{animation-name:ngs-tab-group-enter-left}:host .ngs-tab-group-enter-right{animation-name:ngs-tab-group-enter-right}:host .ngs-tab-group-leave-left{animation-name:ngs-tab-group-leave-left}:host .ngs-tab-group-leave-right{animation-name:ngs-tab-group-leave-right}:host .ngs-tab-group-content{padding:var(--ngs-tab-content-padding);overflow:hidden;position:relative;flex-grow:1}:host .ngs-tab-panel-container{display:flex;flex-direction:row;position:relative;overflow:hidden;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-tab-group', standalone: true, imports: [CommonModule, PortalModule, Ripple], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-tab-group',
+                        '[class.ngs-tab-group-inverted]': 'headerPosition() === "below"',
+                        '[style.--ngs-tab-group-animation-duration]': 'animationDuration()',
+                    }, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n  @if (_showPaginationControls()) {\n    <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n            [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n            (click)=\"_scrollBefore()\"\n            type=\"button\"\n            aria-hidden=\"true\">\n      <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n    </button>\n  }\n\n  <div class=\"ngs-tab-group-header\"\n       #tabListContainer\n       role=\"tablist\"\n       (scroll)=\"_handleScroll()\"\n       (keydown)=\"_onKeydown($event)\">\n    <div class=\"ngs-tab-group-header-list\" #tabList\n         [class.ngs-tab-group-header-list-align-start]=\"alignTabs() === 'start'\"\n         [class.ngs-tab-group-header-list-align-center]=\"alignTabs() === 'center'\"\n         [class.ngs-tab-group-header-list-align-end]=\"alignTabs() === 'end'\">\n      @for (tab of _tabs(); track tab; let i = $index) {\n        <div\n          #tabLabel\n          class=\"ngs-tab-label\"\n          role=\"tab\"\n          ngsRipple\n          [ngsRippleDisabled]=\"tab.disabled() || disableRipple()\"\n          [id]=\"'ngs-tab-label-' + i\"\n          [attr.aria-controls]=\"'ngs-tab-panel-' + i\"\n          [attr.aria-selected]=\"_selectedIndex === i\"\n          [attr.aria-disabled]=\"tab.disabled()\"\n          [attr.aria-label]=\"tab.ariaLabel()\"\n          [attr.aria-labelledby]=\"tab.ariaLabelledby()\"\n          [tabIndex]=\"_selectedIndex === i ? 0 : -1\"\n          [class.ngs-tab-label-active]=\"_selectedIndex === i\"\n          [class.ngs-tab-label-disabled]=\"tab.disabled()\"\n          [class.ngs-tab-label-stretched]=\"stretchTabs()\"\n          (click)=\"_onTabHeaderClick(i)\"\n        >\n          @if (tab.templateLabel()) {\n            <ng-container [ngTemplateOutlet]=\"tab.templateLabel()!.template\" />\n          } @else {\n            {{ tab.label() }}\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (_showPaginationControls()) {\n    <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n            [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n            (click)=\"_scrollAfter()\"\n            type=\"button\"\n            aria-hidden=\"true\">\n      <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n    </button>\n  }\n</div>\n\n<div class=\"ngs-tab-group-content\">\n  <div class=\"ngs-tab-panel-container\">\n    @for (tab of _tabs(); track tab; let i = $index) {\n      @if (_selectedIndex === i || preserveContent() || _isActive[i]) {\n        <div\n          class=\"ngs-tab-panel\"\n          [class.ngs-tab-panel-active]=\"_selectedIndex === i\"\n          [class.ngs-tab-group-enter-left]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-left'\"\n          [class.ngs-tab-group-enter-right]=\"_getEnterAnimation(i) === 'ngs-tab-group-enter-right'\"\n          [class.ngs-tab-group-leave-left]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-left'\"\n          [class.ngs-tab-group-leave-right]=\"_getLeaveAnimation(i) === 'ngs-tab-group-leave-right'\"\n          role=\"tabpanel\"\n          [id]=\"'ngs-tab-panel-' + i\"\n          [attr.aria-labelledby]=\"'ngs-tab-label-' + i\"\n          [animate.enter]=\"_getEnterAnimation(i)\"\n          [animate.leave]=\"_getLeaveAnimation(i)\"\n        >\n          <ng-template [cdkPortalOutlet]=\"_getTabContent(tab)\" />\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--color-subtle);--ngs-tab-group-header-border-top: none;--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--color-on-surface-variant);--ngs-tab-label-active-color: var(--color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--color-primary);--ngs-tab-label-active-border-top: 2px solid var(--color-primary);--ngs-tab-label-disabled-color: var(--color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);display:flex;flex-direction:column}:host.ngs-tab-group-inverted{flex-direction:column-reverse;--ngs-tab-group-header-border-bottom: none;--ngs-tab-group-header-border-top: 1px solid var(--color-subtle)}:host .ngs-tab-group-header-container{display:flex;flex-direction:row;position:relative;overflow:hidden;flex:none}:host .ngs-tab-group-header-container:before,:host .ngs-tab-group-header-container:after{content:\"\";position:absolute;left:0;right:0;z-index:1;pointer-events:none}:host .ngs-tab-group-header-container:before{top:0;border-top:var(--ngs-tab-group-header-border-top)}:host .ngs-tab-group-header-container:after{bottom:0;border-bottom:var(--ngs-tab-group-header-border-bottom)}:host .ngs-tab-group-header{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 0 auto}:host .ngs-tab-group-header::-webkit-scrollbar{display:none}:host .ngs-tab-label,:host .ngs-tab-link{padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host .ngs-tab-label:focus-visible,:host .ngs-tab-link:focus-visible{background:var(--color-surface-container-high)}:host .ngs-tab-label.ngs-tab-label-stretched,:host .ngs-tab-label.ngs-tab-link-stretched,:host .ngs-tab-link.ngs-tab-label-stretched,:host .ngs-tab-link.ngs-tab-link-stretched{flex-grow:1}:host .ngs-tab-label.ngs-tab-label-active,:host .ngs-tab-label.ngs-tab-link-active,:host .ngs-tab-link.ngs-tab-label-active,:host .ngs-tab-link.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host .ngs-tab-label.ngs-tab-label-active:after,:host .ngs-tab-label.ngs-tab-link-active:after,:host .ngs-tab-link.ngs-tab-label-active:after,:host .ngs-tab-link.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-link-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-link-active:after{bottom:auto;top:0;border-bottom:none;border-top:var(--ngs-tab-label-active-border-top);z-index:2}:host .ngs-tab-label.ngs-tab-label-disabled,:host .ngs-tab-label.ngs-tab-link-disabled,:host .ngs-tab-link.ngs-tab-label-disabled,:host .ngs-tab-link.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}:host .ngs-tab-group-header-list{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;min-width:100%}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-start{justify-content:flex-start}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-center{justify-content:center}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-end{justify-content:flex-end}:host .ngs-tab-group-pagination-control{padding:0 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--ngs-tab-label-color);transition:opacity .2s cubic-bezier(.35,0,.25,1)}:host .ngs-tab-group-pagination-control.ngs-tab-group-pagination-control-disabled{opacity:.38;cursor:default;pointer-events:none}:host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--color-outline-variant)}:host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--color-outline-variant)}:host .ngs-tab-group-pagination-control-icon{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:inline-block}:host .ngs-tab-group-pagination-control-before .ngs-tab-group-pagination-control-icon{transform:rotate(-135deg);margin-left:4px}:host .ngs-tab-group-pagination-control-after .ngs-tab-group-pagination-control-icon{transform:rotate(45deg);margin-right:4px}:host{--ngs-tab-content-padding: 0;--ngs-tab-panel-transition: opacity var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1)}:host .ngs-tab-panel{width:100%;flex-shrink:0;box-sizing:border-box;animation-duration:var(--ngs-tab-group-animation-duration, .5s);animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.35,0,.25,1);position:relative;display:none}:host .ngs-tab-panel.ngs-tab-panel-active,:host .ngs-tab-panel.ngs-tab-group-leave-left,:host .ngs-tab-panel.ngs-tab-group-leave-right,:host .ngs-tab-panel.ngs-tab-group-enter-left,:host .ngs-tab-panel.ngs-tab-group-enter-right{display:block}:host .ngs-tab-panel:not(.ngs-tab-panel-active){position:absolute;top:0;left:0;z-index:1;pointer-events:none}:host .ngs-tab-panel.ngs-tab-panel-active{z-index:2}@keyframes ngs-tab-group-enter-left{0%{transform:translate3d(-100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-enter-right{0%{transform:translate3d(100%,0,0)}to{transform:none}}@keyframes ngs-tab-group-leave-left{0%{transform:none}to{transform:translate3d(-100%,0,0)}}@keyframes ngs-tab-group-leave-right{0%{transform:none}to{transform:translate3d(100%,0,0)}}:host .ngs-tab-group-enter-left{animation-name:ngs-tab-group-enter-left}:host .ngs-tab-group-enter-right{animation-name:ngs-tab-group-enter-right}:host .ngs-tab-group-leave-left{animation-name:ngs-tab-group-leave-left}:host .ngs-tab-group-leave-right{animation-name:ngs-tab-group-leave-right}:host .ngs-tab-group-content{padding:var(--ngs-tab-content-padding);overflow:hidden;position:relative;flex-grow:1}:host .ngs-tab-panel-container{display:flex;flex-direction:row;position:relative;overflow:hidden;height:100%}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Tab), { isSignal: true }] }], _tabLabels: [{ type: i0.ViewChildren, args: ['tabLabel', { isSignal: true }] }], _tabListContainer: [{ type: i0.ViewChild, args: ['tabListContainer', { isSignal: true }] }], _tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], preserveContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveContent", required: false }] }], stretchTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngs-stretch-tabs", required: false }] }], alignTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngs-align-tabs", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], enterAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate.enter", required: false }] }], leaveAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate.leave", required: false }] }], selectedIndexChange: [{ type: i0.Output, args: ["selectedIndexChange"] }], selectedTabChange: [{ type: i0.Output, args: ["selectedTabChange"] }], focusChange: [{ type: i0.Output, args: ["focusChange"] }] } });
+
+class TabLink {
+    _el = inject((ElementRef));
+    _parent = inject(TabNavBar, { optional: true });
+    _routerLink = inject(RouterLink, { optional: true });
+    // Whether the link is currently active
+    active = computed(() => {
+        const parent = this._parent;
+        if (!parent?.isActiveFn) {
+            return false;
+        }
+        const fn = parent.isActiveFn();
+        return fn(this);
+    }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    // Whether the link is disabled
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // Optional external control to disable ripple on this link
+    rippleDisabled = input(false, { ...(ngDevMode ? { debugName: "rippleDisabled" } : /* istanbul ignore next */ {}), alias: 'ngsRippleDisabled', transform: booleanAttribute });
+    // Combined ripple disabled state: own disabled OR parent bar disableRipple OR explicit input
+    get ngsRippleDisabled() {
+        return this.disabled() || !!this._parent?.disableRipple() || this.rippleDisabled();
+    }
+    // Link should control the provided nav panel id when active
+    _ariaControls() {
+        const panel = this._parent?.tabPanel();
+        return this.active() && panel ? panel.id : null;
+    }
+    // Prevent click when disabled, otherwise let parent handle focus/scroll
+    _onClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    focus() { this._el.nativeElement.focus(); }
+    get elementRef() { return this._el; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: TabLink, isStandalone: true, selector: "a[ngs-tab-link]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rippleDisabled: { classPropertyName: "rippleDisabled", publicName: "ngsRippleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "_onClick($event)" }, properties: { "class.ngs-tab-link-active": "active()", "class.ngs-tab-link-disabled": "disabled()", "attr.aria-selected": "active() ? \"true\" : \"false\"", "attr.aria-disabled": "disabled() ? \"true\" : \"false\"", "tabIndex": "disabled() ? -1 : 0", "attr.aria-controls": "_ariaControls()" }, classAttribute: "ngs-tab-link" }, hostDirectives: [{ directive: i1$1.Ripple, inputs: ["ngsRippleDisabled", "ngsRippleDisabled"] }], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--color-on-surface-variant);--ngs-tab-label-active-color: var(--color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--color-primary);--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);--ngs-tab-label-disabled-color: var(--color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host:focus-visible{background:var(--color-surface-container-high)}:host.ngs-tab-link-stretched{flex-grow:1}:host.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}:host.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabLink, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[ngs-tab-link]', standalone: true, host: {
+                        'role': 'tab',
+                        'class': 'ngs-tab-link',
+                        '[class.ngs-tab-link-active]': 'active()',
+                        '[class.ngs-tab-link-disabled]': 'disabled()',
+                        '[attr.aria-selected]': 'active() ? "true" : "false"',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : "false"',
+                        '[tabIndex]': 'disabled() ? -1 : 0',
+                        '[attr.aria-controls]': '_ariaControls()',
+                        '(click)': '_onClick($event)'
+                    }, hostDirectives: [
+                        { directive: Ripple, inputs: ['ngsRippleDisabled: ngsRippleDisabled'] }
+                    ], template: "<ng-content/>\n", styles: [":host{--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--color-on-surface-variant);--ngs-tab-label-active-color: var(--color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--color-primary);--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);--ngs-tab-label-disabled-color: var(--color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host:focus-visible{background:var(--color-surface-container-high)}:host.ngs-tab-link-stretched{flex-grow:1}:host.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}:host.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rippleDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsRippleDisabled", required: false }] }] } });
+
+class TabNavBar {
+    _cdr = inject(ChangeDetectorRef);
+    platformId = inject(PLATFORM_ID);
+    currentUrl = signal(isPlatformBrowser(inject(PLATFORM_ID)) ? inject(Router).url : '', ...(ngDevMode ? [{ debugName: "currentUrl" }] : /* istanbul ignore next */ []));
+    _router = inject(Router);
+    _destroyRef = inject(DestroyRef);
+    // Projected links
+    _links = contentChildren(TabLink, ...(ngDevMode ? [{ debugName: "_links" }] : /* istanbul ignore next */ []));
+    // Scrolling container references
+    _tabListContainer = viewChild('tabListContainer', ...(ngDevMode ? [{ debugName: "_tabListContainer" }] : /* istanbul ignore next */ []));
+    _tabList = viewChild('tabList', ...(ngDevMode ? [{ debugName: "_tabList" }] : /* istanbul ignore next */ []));
+    // Pagination state
+    _showPaginationControls = signal(false, ...(ngDevMode ? [{ debugName: "_showPaginationControls" }] : /* istanbul ignore next */ []));
+    _disableScrollBefore = signal(true, ...(ngDevMode ? [{ debugName: "_disableScrollBefore" }] : /* istanbul ignore next */ []));
+    _disableScrollAfter = signal(true, ...(ngDevMode ? [{ debugName: "_disableScrollAfter" }] : /* istanbul ignore next */ []));
+    // External bindings
+    tabPanel = input(null, ...(ngDevMode ? [{ debugName: "tabPanel" }] : /* istanbul ignore next */ []));
+    disableRipple = input(false, ...(ngDevMode ? [{ debugName: "disableRipple" }] : /* istanbul ignore next */ []));
+    activator = input(...(ngDevMode ? [undefined, { debugName: "activator" }] : /* istanbul ignore next */ []));
+    isActiveFn = computed(() => (link) => {
+        const activatorFn = this.activator();
+        if (activatorFn) {
+            return activatorFn(link);
+        }
+        return this.defaultIsActive(link);
+    }, ...(ngDevMode ? [{ debugName: "isActiveFn" }] : /* istanbul ignore next */ []));
+    _resizeObserver = null;
+    _resizeSubscription = Subscription.EMPTY;
+    defaultIsActive(link) {
+        const el = link.elementRef.nativeElement;
+        // @ts-ignore
+        const routerLink = link['_routerLink'];
+        let href = '';
+        if (routerLink) {
+            href = this._router.serializeUrl(routerLink.urlTree);
+        }
+        else {
+            href = el.getAttribute('href') || '';
+        }
+        if (!href || href === '#') {
+            return false;
+        }
+        try {
+            const linkPath = new URL(href, window.location.origin).pathname;
+            const currentPath = new URL(this.currentUrl(), window.location.origin).pathname;
+            return currentPath === linkPath;
+        }
+        catch {
+            return false;
+        }
+    }
+    constructor() {
+        // Update pagination when links change (signal-based)
+        effect(() => {
+            // Track the projected links array reactively
+            this._links();
+            // Trigger re-evaluation of currentUrl to ensure links react to projection
+            this.currentUrl.set(this._router.url);
+            Promise.resolve().then(() => {
+                this._updatePagination();
+                this._cdr.markForCheck();
+            });
+            // Fallback: double check after a small delay to ensure routerLink has updated its urlTree
+            setTimeout(() => {
+                this.currentUrl.set(this._router.url);
+                this._cdr.markForCheck();
+            }, 0);
+        });
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.currentUrl.set(this._router.url);
+            this._router.events.pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+                this.currentUrl.set(this._router.url);
+            });
+        }
+    }
+    ngAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            // Fallback: listen to container resize
+            const container = this._tabListContainer()?.nativeElement;
+            if (container && 'ResizeObserver' in window) {
+                this._resizeObserver = new ResizeObserver(() => this._updatePagination());
+                this._resizeObserver.observe(container);
+            }
+            else if (container) {
+                this._resizeSubscription = fromEvent(window, 'resize')
+                    .pipe(debounceTime(100))
+                    .subscribe(() => this._updatePagination());
+            }
+        }
+        this._updatePagination();
+    }
+    ngOnDestroy() {
+        this._resizeObserver?.disconnect();
+        this._resizeSubscription.unsubscribe();
+    }
+    _handleScroll() {
+        this._updateScrollButtonsState();
+    }
+    _scrollBefore() {
+        const container = this._tabListContainer()?.nativeElement;
+        if (!container)
+            return;
+        container.scrollBy({ left: -container.clientWidth, behavior: 'smooth' });
+    }
+    _scrollAfter() {
+        const container = this._tabListContainer()?.nativeElement;
+        if (!container)
+            return;
+        container.scrollBy({ left: container.clientWidth, behavior: 'smooth' });
+    }
+    _updatePagination() {
+        const container = this._tabListContainer()?.nativeElement;
+        const list = this._tabList()?.nativeElement;
+        if (!container || !list)
+            return;
+        const show = list.scrollWidth > container.clientWidth + 1;
+        this._showPaginationControls.set(show);
+        this._updateScrollButtonsState();
+    }
+    _updateScrollButtonsState() {
+        const container = this._tabListContainer()?.nativeElement;
+        if (!container)
+            return;
+        const maxScroll = container.scrollWidth - container.clientWidth;
+        this._disableScrollBefore.set(container.scrollLeft <= 0);
+        this._disableScrollAfter.set(container.scrollLeft >= maxScroll);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabNavBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TabNavBar, isStandalone: true, selector: "ngs-tab-nav-bar, [ngs-tab-nav-bar]", inputs: { tabPanel: { classPropertyName: "tabPanel", publicName: "tabPanel", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, activator: { classPropertyName: "activator", publicName: "activator", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ngs-tab-nav-bar" }, queries: [{ propertyName: "_links", predicate: TabLink, isSignal: true }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], exportAs: ["ngsTabNavBar"], ngImport: i0, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n  @if (_showPaginationControls()) {\n    <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n            [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n            (click)=\"_scrollBefore()\"\n            type=\"button\"\n            aria-hidden=\"true\">\n      <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n    </button>\n  }\n\n  <div class=\"ngs-tab-group-header\"\n       #tabListContainer\n       (scroll)=\"_handleScroll()\">\n    <div class=\"ngs-tab-group-header-list\" #tabList>\n      <ng-content select=\"a[ngs-tab-link]\"/>\n    </div>\n  </div>\n\n  @if (_showPaginationControls()) {\n    <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n            [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n            (click)=\"_scrollAfter()\"\n            type=\"button\"\n            aria-hidden=\"true\">\n      <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n    </button>\n  }\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--color-subtle);--ngs-tab-group-header-border-top: none;--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--color-on-surface-variant);--ngs-tab-label-active-color: var(--color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--color-primary);--ngs-tab-label-active-border-top: 2px solid var(--color-primary);--ngs-tab-label-disabled-color: var(--color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);display:flex;flex-direction:column}:host.ngs-tab-group-inverted{flex-direction:column-reverse;--ngs-tab-group-header-border-bottom: none;--ngs-tab-group-header-border-top: 1px solid var(--color-subtle)}:host .ngs-tab-group-header-container{display:flex;flex-direction:row;position:relative;overflow:hidden;flex:none}:host .ngs-tab-group-header-container:before,:host .ngs-tab-group-header-container:after{content:\"\";position:absolute;left:0;right:0;z-index:1;pointer-events:none}:host .ngs-tab-group-header-container:before{top:0;border-top:var(--ngs-tab-group-header-border-top)}:host .ngs-tab-group-header-container:after{bottom:0;border-bottom:var(--ngs-tab-group-header-border-bottom)}:host .ngs-tab-group-header{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 0 auto}:host .ngs-tab-group-header::-webkit-scrollbar{display:none}:host .ngs-tab-label,:host .ngs-tab-link{padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host .ngs-tab-label:focus-visible,:host .ngs-tab-link:focus-visible{background:var(--color-surface-container-high)}:host .ngs-tab-label.ngs-tab-label-stretched,:host .ngs-tab-label.ngs-tab-link-stretched,:host .ngs-tab-link.ngs-tab-label-stretched,:host .ngs-tab-link.ngs-tab-link-stretched{flex-grow:1}:host .ngs-tab-label.ngs-tab-label-active,:host .ngs-tab-label.ngs-tab-link-active,:host .ngs-tab-link.ngs-tab-label-active,:host .ngs-tab-link.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host .ngs-tab-label.ngs-tab-label-active:after,:host .ngs-tab-label.ngs-tab-link-active:after,:host .ngs-tab-link.ngs-tab-label-active:after,:host .ngs-tab-link.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-link-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-link-active:after{bottom:auto;top:0;border-bottom:none;border-top:var(--ngs-tab-label-active-border-top);z-index:2}:host .ngs-tab-label.ngs-tab-label-disabled,:host .ngs-tab-label.ngs-tab-link-disabled,:host .ngs-tab-link.ngs-tab-label-disabled,:host .ngs-tab-link.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}:host .ngs-tab-group-header-list{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;min-width:100%}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-start{justify-content:flex-start}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-center{justify-content:center}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-end{justify-content:flex-end}:host .ngs-tab-group-pagination-control{padding:0 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--ngs-tab-label-color);transition:opacity .2s cubic-bezier(.35,0,.25,1)}:host .ngs-tab-group-pagination-control.ngs-tab-group-pagination-control-disabled{opacity:.38;cursor:default;pointer-events:none}:host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--color-outline-variant)}:host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--color-outline-variant)}:host .ngs-tab-group-pagination-control-icon{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:inline-block}:host .ngs-tab-group-pagination-control-before .ngs-tab-group-pagination-control-icon{transform:rotate(-135deg);margin-left:4px}:host .ngs-tab-group-pagination-control-after .ngs-tab-group-pagination-control-icon{transform:rotate(45deg);margin-right:4px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabNavBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-tab-nav-bar, [ngs-tab-nav-bar]', exportAs: 'ngsTabNavBar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-tab-nav-bar'
+                    }, template: "<div class=\"ngs-tab-group-header-container\" [class.ngs-tab-group-header-pagination-controls-enabled]=\"_showPaginationControls()\">\n  @if (_showPaginationControls()) {\n    <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-before\"\n            [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollBefore()\"\n            (click)=\"_scrollBefore()\"\n            type=\"button\"\n            aria-hidden=\"true\">\n      <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n    </button>\n  }\n\n  <div class=\"ngs-tab-group-header\"\n       #tabListContainer\n       (scroll)=\"_handleScroll()\">\n    <div class=\"ngs-tab-group-header-list\" #tabList>\n      <ng-content select=\"a[ngs-tab-link]\"/>\n    </div>\n  </div>\n\n  @if (_showPaginationControls()) {\n    <button class=\"ngs-tab-group-pagination-control ngs-tab-group-pagination-control-after\"\n            [class.ngs-tab-group-pagination-control-disabled]=\"_disableScrollAfter()\"\n            (click)=\"_scrollAfter()\"\n            type=\"button\"\n            aria-hidden=\"true\">\n      <div class=\"ngs-tab-group-pagination-control-icon\"></div>\n    </button>\n  }\n</div>\n", styles: [":host{--ngs-tab-group-header-border-bottom: 1px solid var(--color-subtle);--ngs-tab-group-header-border-top: none;--ngs-tab-label-padding: 12px 16px;--ngs-tab-label-cursor: pointer;--ngs-tab-label-color: var(--color-on-surface-variant);--ngs-tab-label-active-color: var(--color-primary);--ngs-tab-label-active-border-bottom: 2px solid var(--color-primary);--ngs-tab-label-active-border-top: 2px solid var(--color-primary);--ngs-tab-label-disabled-color: var(--color-on-surface-variant);--ngs-tab-label-disabled-cursor: default;--ngs-tab-label-transition: color var(--ngs-tab-group-animation-duration, .2s) cubic-bezier(.35, 0, .25, 1);display:flex;flex-direction:column}:host.ngs-tab-group-inverted{flex-direction:column-reverse;--ngs-tab-group-header-border-bottom: none;--ngs-tab-group-header-border-top: 1px solid var(--color-subtle)}:host .ngs-tab-group-header-container{display:flex;flex-direction:row;position:relative;overflow:hidden;flex:none}:host .ngs-tab-group-header-container:before,:host .ngs-tab-group-header-container:after{content:\"\";position:absolute;left:0;right:0;z-index:1;pointer-events:none}:host .ngs-tab-group-header-container:before{top:0;border-top:var(--ngs-tab-group-header-border-top)}:host .ngs-tab-group-header-container:after{bottom:0;border-bottom:var(--ngs-tab-group-header-border-bottom)}:host .ngs-tab-group-header{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 0 auto}:host .ngs-tab-group-header::-webkit-scrollbar{display:none}:host .ngs-tab-label,:host .ngs-tab-link{padding:var(--ngs-tab-label-padding);cursor:var(--ngs-tab-label-cursor);color:var(--ngs-tab-label-color);position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:var(--ngs-tab-label-transition);white-space:nowrap;outline:none;flex:none;text-decoration:none}:host .ngs-tab-label:focus-visible,:host .ngs-tab-link:focus-visible{background:var(--color-surface-container-high)}:host .ngs-tab-label.ngs-tab-label-stretched,:host .ngs-tab-label.ngs-tab-link-stretched,:host .ngs-tab-link.ngs-tab-label-stretched,:host .ngs-tab-link.ngs-tab-link-stretched{flex-grow:1}:host .ngs-tab-label.ngs-tab-label-active,:host .ngs-tab-label.ngs-tab-link-active,:host .ngs-tab-link.ngs-tab-label-active,:host .ngs-tab-link.ngs-tab-link-active{color:var(--ngs-tab-label-active-color)}:host .ngs-tab-label.ngs-tab-label-active:after,:host .ngs-tab-label.ngs-tab-link-active:after,:host .ngs-tab-link.ngs-tab-label-active:after,:host .ngs-tab-link.ngs-tab-link-active:after{content:\"\";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:var(--ngs-tab-label-active-border-bottom);z-index:2}.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-label.ngs-tab-link-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-label-active:after,.ngs-tab-group-inverted :host .ngs-tab-link.ngs-tab-link-active:after{bottom:auto;top:0;border-bottom:none;border-top:var(--ngs-tab-label-active-border-top);z-index:2}:host .ngs-tab-label.ngs-tab-label-disabled,:host .ngs-tab-label.ngs-tab-link-disabled,:host .ngs-tab-link.ngs-tab-label-disabled,:host .ngs-tab-link.ngs-tab-link-disabled{color:var(--ngs-tab-label-disabled-color);cursor:var(--ngs-tab-label-disabled-cursor);pointer-events:none}:host .ngs-tab-group-header-list{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;min-width:100%}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-start{justify-content:flex-start}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-center{justify-content:center}:host .ngs-tab-group-header-list.ngs-tab-group-header-list-align-end{justify-content:flex-end}:host .ngs-tab-group-pagination-control{padding:0 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:none;border:none;outline:none;color:var(--ngs-tab-label-color);transition:opacity .2s cubic-bezier(.35,0,.25,1)}:host .ngs-tab-group-pagination-control.ngs-tab-group-pagination-control-disabled{opacity:.38;cursor:default;pointer-events:none}:host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-before{border-right:1px solid var(--color-outline-variant)}:host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--color-outline-variant)}.ngs-tab-group-inverted :host .ngs-tab-group-pagination-control-after{border-left:1px solid var(--color-outline-variant)}:host .ngs-tab-group-pagination-control-icon{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;display:inline-block}:host .ngs-tab-group-pagination-control-before .ngs-tab-group-pagination-control-icon{transform:rotate(-135deg);margin-left:4px}:host .ngs-tab-group-pagination-control-after .ngs-tab-group-pagination-control-icon{transform:rotate(45deg);margin-right:4px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _links: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabLink), { isSignal: true }] }], _tabListContainer: [{ type: i0.ViewChild, args: ['tabListContainer', { isSignal: true }] }], _tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], tabPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabPanel", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], activator: [{ type: i0.Input, args: [{ isSignal: true, alias: "activator", required: false }] }] } });
+
+let nextUniqueId = 0;
+class TabNavPanel {
+    id = `ngs-tab-nav-panel-${nextUniqueId++}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TabNavPanel, isStandalone: true, selector: "ngs-tab-nav-panel", host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "id" }, classAttribute: "ngs-tab-nav-panel" }, exportAs: ["ngsTabNavPanel"], ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabNavPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngs-tab-nav-panel',
+                    exportAs: 'ngsTabNavPanel',
+                    standalone: true,
+                    host: {
+                        'class': 'ngs-tab-nav-panel',
+                        'role': 'tabpanel',
+                        '[attr.id]': 'id'
+                    },
+                    template: '<ng-content/>'
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TAB_CONTENT, TAB_LABEL, Tab, TabContent, TabGroup, TabLabel, TabLink, TabNavBar, TabNavPanel };
+//# sourceMappingURL=ngstarter-ui-components-tabs.mjs.map