cax-design-system 2.8.4 → 3.0.0

package/fesm2022/cax-design-system-tabview.mjs

@@ -15,7 +15,8 @@ import * as i5 from 'cax-design-system/icons/chevronleft';
 import { ChevronLeftIcon } from 'cax-design-system/icons/chevronleft';
 import * as i6 from 'cax-design-system/icons/chevronright';
 import { ChevronRightIcon } from 'cax-design-system/icons/chevronright';
-import * as i7 from 'cax-design-system/button';
+import * as i7 from 'cax-design-system/overlaypanel';
+import { OverlayPanel } from 'cax-design-system/overlaypanel';
 import { ButtonModule } from 'cax-design-system/button';
 
 /**
@@ -173,6 +174,20 @@ class TabPanel {
     _selected;
     _disabled;
     _pinned;
+    _segmentHidden = false;
+    _segmentLastVisible = false;
+    get segmentHidden() {
+        return this._segmentHidden;
+    }
+    set segmentHidden(val) {
+        this._segmentHidden = val;
+    }
+    get segmentLastVisible() {
+        return this._segmentLastVisible;
+    }
+    set segmentLastVisible(val) {
+        this._segmentLastVisible = val;
+    }
     _header;
     _icon;
     _leftIcon;
@@ -223,14 +238,14 @@ class TabPanel {
     ngOnDestroy() {
         this.view = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TabPanel, deps: [{ token: forwardRef(() => TabView) }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: TabPanel, isStandalone: false, selector: "cax-tabPanel", inputs: { closable: ["closable", "closable", booleanAttribute], headerStyle: "headerStyle", headerStyleClass: "headerStyleClass", cache: ["cache", "cache", booleanAttribute], tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", selected: "selected", disabled: "disabled", pinned: "pinned", header: "header", icon: "icon", leftIcon: "leftIcon", rightIcon: "rightIcon" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div *ngIf=\"!closed\" class=\"cax-tabview-panel\" role=\"tabpanel\" [hidden]=\"!selected\" [attr.id]=\"tabView.getTabContentId(id)\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"tabView.getTabHeaderActionId(id)\" [attr.data-pc-name]=\"'tabpanel'\">\r\n    <ng-content></ng-content>\r\n    <ng-container *ngIf=\"contentTemplate && (cache ? loaded : selected)\">\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TabPanel, deps: [{ token: forwardRef(() => TabView) }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: TabPanel, isStandalone: false, selector: "cax-tabPanel", inputs: { closable: ["closable", "closable", booleanAttribute], headerStyle: "headerStyle", headerStyleClass: "headerStyleClass", cache: ["cache", "cache", booleanAttribute], tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", selected: "selected", disabled: "disabled", pinned: "pinned", header: "header", icon: "icon", leftIcon: "leftIcon", rightIcon: "rightIcon" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div *ngIf=\"!closed\" class=\"cax-tabview-panel\" role=\"tabpanel\" [hidden]=\"!selected\" [attr.id]=\"tabView.getTabContentId(id)\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"tabView.getTabHeaderActionId(id)\" [attr.data-pc-name]=\"'tabpanel'\">\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"contentTemplate && (cache ? loaded : selected)\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TabPanel, decorators: [{
             type: Component,
             args: [{ selector: 'cax-tabPanel', host: {
                         class: 'cax-element'
-                    }, standalone: false, template: "<div *ngIf=\"!closed\" class=\"cax-tabview-panel\" role=\"tabpanel\" [hidden]=\"!selected\" [attr.id]=\"tabView.getTabContentId(id)\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"tabView.getTabHeaderActionId(id)\" [attr.data-pc-name]=\"'tabpanel'\">\r\n    <ng-content></ng-content>\r\n    <ng-container *ngIf=\"contentTemplate && (cache ? loaded : selected)\">\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </ng-container>\r\n</div>\r\n" }]
+                    }, standalone: false, template: "<div *ngIf=\"!closed\" class=\"cax-tabview-panel\" role=\"tabpanel\" [hidden]=\"!selected\" [attr.id]=\"tabView.getTabContentId(id)\" [attr.aria-hidden]=\"!selected\" [attr.aria-labelledby]=\"tabView.getTabHeaderActionId(id)\" [attr.data-pc-name]=\"'tabpanel'\">\n    <ng-content></ng-content>\n    <ng-container *ngIf=\"contentTemplate && (cache ? loaded : selected)\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n    </ng-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TabView, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => TabView)]
@@ -280,6 +295,7 @@ class TabView {
     cd;
     renderer;
     fullMode = false;
+    size = 'md';
     /**
      * Inline style of the component.
      * @group Props
@@ -348,15 +364,6 @@ class TabView {
      * @group Props
      */
     tabindex = 0;
-    actionButton;
-    actionButtonSeverity = 'primary';
-    actionButtonSize = null;
-    actionButtonOutlined = false;
-    actionButtonRounded = false;
-    actionButtonIcon;
-    actionButtonLoading = false;
-    actionButtonLink = false;
-    actionButtonDisabled = false;
     /**
      * Callback to invoke on tab change.
      * @param {TabViewChangeEvent} event - Custom tab change event
@@ -395,11 +402,17 @@ class TabView {
     tabChangesSubscription;
     nextIconTemplate;
     previousIconTemplate;
+    actionTemplate;
     resizeObserver;
     container;
     list;
-    buttonVisible;
+    buttonVisible = false;
     elementToObserve;
+    segmentOverflow = false;
+    hiddenTabsCount = 0;
+    get hiddenTabs() {
+        return this.tabs ? this.tabs.filter((t) => t.segmentHidden) : [];
+    }
     constructor(platformId, el, cd, renderer) {
         this.platformId = platformId;
         this.el = el;
@@ -421,18 +434,24 @@ class TabView {
                 case 'nexticon':
                     this.nextIconTemplate = item.template;
                     break;
+                case 'action':
+                    this.actionTemplate = item.template;
+                    break;
             }
         });
     }
     callResizeObserver() {
         if (isPlatformBrowser(this.platformId)) {
-            if (this.autoHideButtons) {
+            if (this.autoHideButtons || this.mode === 'segment') {
                 this.bindResizeObserver();
             }
         }
     }
     ngAfterViewInit() {
         this.callResizeObserver();
+        if (!this.autoHideButtons && this.scrollable) {
+            this.buttonVisible = true;
+        }
         this.checkScrollableTabs();
         if (isPlatformBrowser(this.platformId)) {
             window.addEventListener('resize', this.handleResize);
@@ -445,11 +464,17 @@ class TabView {
         this.container = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="navcontent"]');
         this.list = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="nav"]');
         this.resizeObserver = new ResizeObserver(() => {
-            if (this.list.offsetWidth >= this.container.offsetWidth) {
-                this.buttonVisible = true;
+            if (this.mode === 'segment') {
+                this.calculateSegmentTabs();
             }
             else {
-                this.buttonVisible = false;
+                // Check for overflow using scrollWidth vs clientWidth
+                if (this.container && this.container.scrollWidth > this.container.clientWidth) {
+                    this.buttonVisible = true;
+                }
+                else {
+                    this.buttonVisible = false;
+                }
             }
             this.updateButtonState();
             this.cd.detectChanges();
@@ -470,27 +495,6 @@ class TabView {
             }
         }
     }
-    // Navigate to the next tab
-    arrowRight() {
-        let nextIndex = +this.activeTabIndex + 1;
-        while (nextIndex < this.tabs.length && this.tabs[nextIndex].disabled) {
-            nextIndex++; // Skip disabled tabs
-        }
-        if (nextIndex < this.tabs.length) {
-            this.updateActiveTab(nextIndex);
-        }
-    }
-    // Navigate to the previous tab
-    arrowLeft() {
-        let prevIndex = +this.activeTabIndex - 1;
-        while (prevIndex >= 0 && this.tabs[prevIndex].disabled) {
-            prevIndex--; // Skip disabled tabs
-        }
-        // Update active tab only if prevIndex is valid
-        if (prevIndex >= 0) {
-            this.updateActiveTab(prevIndex);
-        }
-    }
     // Update active tab
     updateActiveTab(index) {
         this.tabs[this.activeTabIndex].selected = false;
@@ -531,13 +535,27 @@ class TabView {
             if (this.pinnedIndexes.includes(index)) {
                 tab.pinned = true;
                 tab.closable = false; // Ensure pinned tabs are not closable
+                // Calculate dynamic width based on size and mode
+                let tabWidth = 56; // default lg
+                if (this.mode === 'segment') {
+                    if (this.size === 'sm')
+                        tabWidth = 48;
+                    else if (this.size === 'md')
+                        tabWidth = 52;
+                }
+                else {
+                    if (this.size === 'sm')
+                        tabWidth = 48;
+                    else if (this.size === 'md')
+                        tabWidth = 52;
+                }
                 if (tab.icon && !tab.header) {
                     tab.headerStyle = { '--pinned-left': `${pinnedWidth}px` };
-                    pinnedWidth += 56;
+                    pinnedWidth += tabWidth;
                 }
                 else {
                     tab.headerStyle = { '--pinned-left': `${pinnedWidth}px` }; // Set dynamic left position
-                    pinnedWidth += 56;
+                    pinnedWidth += tabWidth;
                 }
             }
             else {
@@ -647,13 +665,34 @@ class TabView {
         const lastHeaderAction = DomHandler.getAttribute(lastEl, 'data-pc-section') === 'inkbar' ? lastEl.previousElementSibling : lastEl;
         return this.findPrevHeaderAction(lastHeaderAction, true);
     }
+    reorderTabs(tab) {
+        if (!this.tabs || tab.pinned || this.mode !== 'segment' || !tab.segmentHidden)
+            return;
+        const tabIndex = this.tabs.indexOf(tab);
+        if (tabIndex === -1)
+            return;
+        // Find the first index where pinned is false
+        let firstNonPinnedIndex = this.tabs.findIndex((t) => !t.pinned);
+        if (firstNonPinnedIndex === -1)
+            firstNonPinnedIndex = 0;
+        if (tabIndex !== firstNonPinnedIndex) {
+            this.tabs.splice(tabIndex, 1);
+            this.tabs.splice(firstNonPinnedIndex, 0, tab);
+        }
+    }
     open(event, tab) {
-        if (tab.disabled) {
+        if (tab.disabled || tab.closed) {
             if (event) {
                 event.preventDefault();
             }
             return;
         }
+        if (this.mode === 'segment' && tab.segmentHidden) {
+            this.reorderTabs(tab);
+            // After reordering, we need to let Angular update the DOM before recalculating measurements
+            this.cd.detectChanges();
+            this.calculateSegmentTabs();
+        }
         if (!tab.selected) {
             let selectedTab = this.findSelectedTab();
             if (selectedTab) {
@@ -662,9 +701,7 @@ class TabView {
             this.tabChanged = true;
             tab.selected = true;
             let selectedTabIndex = this.findTabIndex(tab);
-            if (selectedTabIndex !== this.activeTabIndex) {
-                this.updateActiveTab(selectedTabIndex);
-            }
+            this.activeTabIndex = selectedTabIndex;
             this.preventActiveIndexPropagation = true;
             this.activeIndexChange.emit(selectedTabIndex);
             this.onChange.emit({ originalEvent: event, index: selectedTabIndex });
@@ -701,13 +738,21 @@ class TabView {
             tab.selected = false;
             for (let i = 0; i < this.tabs.length; i++) {
                 let tabPanel = this.tabs[i];
-                if (!tabPanel.closed && !tab.disabled) {
+                if (!tabPanel.closed && !tabPanel.disabled) {
                     tabPanel.selected = true;
+                    this.updateActiveTab(i);
                     break;
                 }
             }
         }
         tab.closed = true;
+        this.cd.detectChanges();
+        if (this.mode === 'segment') {
+            this.calculateSegmentTabs();
+        }
+        else {
+            this.updateButtonState();
+        }
         setTimeout(() => {
             this.updateInkBar();
         });
@@ -767,35 +812,32 @@ class TabView {
     }
     updateButtonState() {
         const content = this.content.nativeElement;
-        const { scrollLeft, scrollWidth } = content;
-        const width = DomHandler.getWidth(content);
-        this.backwardIsDisabled = scrollLeft === 0;
-        this.forwardIsDisabled = Math.round(scrollLeft) === scrollWidth - width;
+        const { scrollLeft, scrollWidth, clientWidth } = content;
+        // Using a 1px tolerance and Math.round to handle sub-pixel differences
+        this.backwardIsDisabled = Math.round(scrollLeft) <= 1;
+        this.forwardIsDisabled = Math.round(scrollLeft) >= scrollWidth - clientWidth - 1;
     }
     refreshButtonState() {
         this.container = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="navcontent"]');
         this.list = DomHandler.findSingle(this.el.nativeElement, '[data-pc-section="nav"]');
-        if (this.list.offsetWidth >= this.container.offsetWidth) {
-            if (this.list.offsetWidth >= this.container.offsetWidth) {
+        if (this.mode === 'segment') {
+            this.calculateSegmentTabs();
+            this.buttonVisible = false;
+            this.cd.markForCheck();
+        }
+        else {
+            if (this.container && this.container.scrollWidth > this.container.clientWidth) {
                 this.buttonVisible = true;
+                this.updateButtonState();
+                this.cd.markForCheck();
             }
             else {
                 this.buttonVisible = false;
             }
-            this.updateButtonState();
-            this.cd.markForCheck();
         }
     }
     onScroll(event) {
         this.scrollable && this.updateButtonState();
-        const scrollLeft = event.target.scrollLeft;
-        // Adjust the margin or transform of the fixed elements
-        const offset = Math.min(scrollLeft, 50); // Limit the offset to a maximum value (e.g., 50px)
-        // Adjust the styles for fixed elements
-        const pinnedElements = document.querySelectorAll('.cax-left-arrow, .cax-right-arrow, .cax-tabview-nav-content, .cax-line, .cax-segment');
-        pinnedElements.forEach((element) => {
-            element.style.transform = `translateX(${offset}px)`;
-        });
         this.checkScrollableTabs(); // Check and update padding
         event.preventDefault();
     }
@@ -815,30 +857,79 @@ class TabView {
     }
     navBackward() {
         const content = this.content.nativeElement;
-        const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
-        const pos = content.scrollLeft - width;
+        const { scrollLeft, clientWidth } = content;
+        const stepWidth = clientWidth - this.getVisibleButtonWidths();
+        const pos = scrollLeft - stepWidth;
         content.scrollLeft = pos <= 0 ? 0 : pos;
     }
     navForward() {
         const content = this.content.nativeElement;
-        const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
-        const pos = content.scrollLeft + width;
-        const lastPos = content.scrollWidth - width;
+        const { scrollLeft, scrollWidth, clientWidth } = content;
+        const stepWidth = clientWidth - this.getVisibleButtonWidths();
+        const pos = scrollLeft + stepWidth;
+        const lastPos = scrollWidth - clientWidth;
         content.scrollLeft = pos >= lastPos ? lastPos : pos;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TabView, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: TabView, isStandalone: false, selector: "cax-tabView", inputs: { fullMode: "fullMode", style: "style", styleClass: "styleClass", controlClose: ["controlClose", "controlClose", booleanAttribute], scrollable: ["scrollable", "scrollable", booleanAttribute], activeIndex: "activeIndex", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], nextButtonAriaLabel: "nextButtonAriaLabel", prevButtonAriaLabel: "prevButtonAriaLabel", autoHideButtons: ["autoHideButtons", "autoHideButtons", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], actionButton: "actionButton", actionButtonSeverity: "actionButtonSeverity", actionButtonSize: "actionButtonSize", actionButtonOutlined: "actionButtonOutlined", actionButtonRounded: "actionButtonRounded", actionButtonIcon: "actionButtonIcon", actionButtonLoading: "actionButtonLoading", actionButtonLink: "actionButtonLink", actionButtonDisabled: "actionButtonDisabled", mode: "mode", pinnedIndexes: "pinnedIndexes" }, outputs: { onChange: "onChange", onClose: "onClose", activeIndexChange: "activeIndexChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "tabPanels", predicate: TabPanel }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true }, { propertyName: "prevBtn", first: true, predicate: ["prevBtn"], descendants: true }, { propertyName: "nextBtn", first: true, predicate: ["nextBtn"], descendants: true }, { propertyName: "inkbar", first: true, predicate: ["inkbar"], descendants: true }, { propertyName: "elementToObserve", first: true, predicate: ["elementToObserve"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'cax-tabview cax-component': true, 'cax-tabview-scrollable': scrollable }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'tabview'\">\r\n    <div #elementToObserve class=\"cax-tabview-nav-container\" *ngIf=\"mode == 'line'\" [ngClass]=\"fullMode ? 'block-mode' : 'flex-mode'\">\r\n        <button\r\n            *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n            #prevBtn\r\n            class=\"cax-tabview-nav-prev cax-tabview-nav-btn cax-link\"\r\n            (click)=\"navBackward()\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.aria-label]=\"prevButtonAriaLabel\"\r\n            type=\"button\"\r\n            caxRipple\r\n        >\r\n            <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n            <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n        </button>\r\n        <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n            <ul #navbar class=\"cax-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n                <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n                    <li role=\"presentation\" [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled }\" [attr.data-cax-disabled]=\"tab.disabled\" [ngStyle]=\"tab.headerStyle\" [class]=\"tab.headerStyleClass\"\r\n                    [class.full-mode]=\"fullMode\" [class.half-mode]=\"!fullMode\" *ngIf=\"!tab.closed\">\r\n                        <a\r\n                            role=\"tab\"\r\n                            class=\"cax-tabview-nav-link\"\r\n                            [caxTooltip]=\"tab.tooltip\"\r\n                            [tooltipPosition]=\"tab.tooltipPosition\"\r\n                            [positionStyle]=\"tab.tooltipPositionStyle\"\r\n                            [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n                            [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n                            [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n                            [attr.aria-selected]=\"tab.selected\"\r\n                            [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n                            [attr.aria-disabled]=\"tab.disabled\"\r\n                            [attr.data-pc-index]=\"i\"\r\n                            [attr.data-pc-section]=\"'headeraction'\"\r\n                            (click)=\"open($event, tab)\"\r\n                            (keydown)=\"onTabKeyDown($event, tab)\"\r\n                            caxRipple\r\n                        >\r\n                            <ng-container *ngIf=\"!tab.headerTemplate\">\r\n                                <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n                                <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n                                    <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n                                </span>\r\n                                <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n                                <span class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n                                <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n                                <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n                                    <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n                                </span>\r\n                            </ng-container>\r\n                            <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n                            <ng-container *ngIf=\"tab.closable\">\r\n                                <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n                                <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n                                <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n                            </ng-container>\r\n                        </a>\r\n                    </li>\r\n                </ng-template>\r\n                <li #inkbar class=\"cax-tabview-ink-bar\" role=\"presentation\" aria-hidden=\"true\" [attr.data-pc-section]=\"'inkbar'\"></li>\r\n            </ul>\r\n        </div>\r\n        \r\n        <!-- Configurable Buttons -->\r\n        <div class=\"cax-tabview-action-buttons\" *ngIf=\"actionButton?.length && !fullMode\">\r\n            <ng-container *ngFor=\"let button of actionButton\" >\r\n                <div class=\"cax-tabview-separator\"></div>\r\n                <button type=\"button\" caxButton \r\n                class=\"cax-tabview-extra-btn\" \r\n                [label]=\"button.label\"\r\n                [severity]=\"button.actionButtonSeverity\"\r\n                [link]=\"button.actionButtonLink\"\r\n                [icon]=\"button.actionButtonIcon\"\r\n                [disabled]=\"button.actionButtonDisabled\"\r\n                [outlined]=\"button.actionButtonOutlined\"\r\n                [rounded]=\"button.actionButtonRounded\"\r\n                [size]=\"button.actionButtonSize\"\r\n                [loading]=\"button.actionButtonLoading\"\r\n                (click)=\"button.action()\">\r\n            </button>\r\n            </ng-container>\r\n        </div>\r\n    \r\n        <button\r\n            *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n            #nextBtn\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.aria-label]=\"nextButtonAriaLabel\"\r\n            class=\"cax-tabview-nav-next cax-tabview-nav-btn cax-link\"\r\n            (click)=\"navForward()\"\r\n            type=\"button\"\r\n            caxRipple\r\n        >\r\n            <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n            <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n        </button>\r\n    </div>\r\n    <div #elementToObserve class=\"cax-tabview-nav-container cax-segment-tabview-container\" *ngIf=\"mode == 'segment'\">\r\n        <button\r\n            *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n            #prevBtn\r\n            class=\"cax-tabview-nav-prev cax-segment-tabview-nav-btn cax-link\"\r\n            (click)=\"navBackward()\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.aria-label]=\"prevButtonAriaLabel\"\r\n            type=\"button\"\r\n            caxRipple\r\n        >\r\n            <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n            <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n        </button>\r\n        <div class=\"cax-segment-tabview-header\">\r\n            <span class=\"cax-arrow-buttons\">\r\n                <button #prevBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"prevButtonAriaLabel\" class=\"cax cax-arrow-left cax-left-arrow\" (click)=\"arrowLeft()\" type=\"button\" [disabled]=\"activeTabIndex === 0\"></button>\r\n                <button #nextBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"nextButtonAriaLabel\" class=\"cax cax-arrow-right cax-right-arrow\" [disabled]=\"activeTabIndex === tabs.length - 1\" (click)=\"arrowRight()\" type=\"button\"></button>\r\n            </span>\r\n            <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n                <ul #navbar class=\"cax-segment-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n                    <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n                        <li\r\n                            role=\"presentation\"\r\n                            [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled, 'pinned': tab.pinned }\"\r\n                            [attr.data-cax-disabled]=\"tab.disabled\"\r\n                            [ngStyle]=\"tab.headerStyle\"\r\n                            [class]=\"tab.headerStyleClass\"\r\n                            *ngIf=\"!tab.closed\"\r\n                        >\r\n                            <a\r\n                                role=\"tab\"\r\n                                class=\"cax-segment-tabview-nav-link\"\r\n                                [caxTooltip]=\"tab.tooltip\"\r\n                                [tooltipPosition]=\"tab.tooltipPosition\"\r\n                                [positionStyle]=\"tab.tooltipPositionStyle\"\r\n                                [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n                                [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n                                [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n                                [attr.aria-selected]=\"tab.selected\"\r\n                                [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n                                [attr.aria-disabled]=\"tab.disabled\"\r\n                                [attr.data-pc-index]=\"i\"\r\n                                [attr.data-pc-section]=\"'headeraction'\"\r\n                                (click)=\"open($event, tab)\"\r\n                                (keydown)=\"onTabKeyDown($event, tab)\"\r\n                                caxRipple\r\n                            >\r\n                                <ng-container *ngIf=\"!tab.headerTemplate\">\r\n                                    <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n                                    <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n                                        <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n                                    </span>\r\n                                    <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n                                    <span *ngIf=\"tab.header\" class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n                                    <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n                                    <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n                                        <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n                                    </span>\r\n                                </ng-container>\r\n                                <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n                                <ng-container *ngIf=\"tab.closable\">\r\n                                    <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n                                    <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n                                    <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n                                </ng-container>\r\n                            </a>\r\n                        </li>\r\n                    </ng-template>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n        <button\r\n            *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n            #nextBtn\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.aria-label]=\"nextButtonAriaLabel\"\r\n            class=\"cax-tabview-nav-next cax-segment-tabview-nav-btn cax-link\"\r\n            (click)=\"navForward()\"\r\n            type=\"button\"\r\n            caxRipple\r\n        >\r\n            <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n            <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n        </button>\r\n    </div>\r\n    <div class=\"cax-tabview-panels\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: ["@layer cax{.cax-tabview-nav-container{position:relative}.cax-tabview-nav-container.block-mode{display:block}.cax-tabview-nav-container.flex-mode{display:flex}.cax-tabview-action-buttons{display:flex;align-items:center;margin-left:auto}.cax-tabview-separator{width:2px;height:35px;display:inline-block;vertical-align:middle;margin-right:8px}.cax-tabview-scrollable .cax-tabview-nav-container{overflow:hidden;white-space:nowrap}.cax-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.cax-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-tabview-nav li.full-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:1!important}.cax-tabview-nav li.full-mode cax-tabview .cax-tabview-nav li .cax-tabview-nav-link{border:none}.cax-tabview-nav li.half-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:none!important}.cax-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-tabview-ink-bar{display:none;z-index:1}.cax-tabview-nav-link:focus{z-index:1}.cax-tabview-title{line-height:1;white-space:nowrap}.cax-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-tabview-nav-prev{left:0}.cax-tabview-nav-next{right:0}.cax-tabview-nav-content::-webkit-scrollbar{display:none}.cax-tabview-close{z-index:1}.cax-segment-tabview-container{flex-direction:row;height:48px}.cax-segment-tabview-header{display:flex;align-items:center;height:48px}.cax-segment-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-segment-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-segment-tabview-nav-link{z-index:1}.cax-left-arrow,.cax-right-arrow{position:sticky;top:0;z-index:100;background:transparent;border:none;cursor:pointer;font-size:1.25rem}.cax-arrow-buttons{display:flex;align-items:center;gap:16px}.cax-left-arrow,.cax-right-arrow{position:sticky;left:0;z-index:100;transition:transform .2s ease}.cax-left-arrow{left:0;padding-left:var(--space-200)}.cax-right-arrow{right:0;padding-right:var(--space-200)}.cax-dynamic-icon{font-size:1.25rem;cursor:pointer}.cax-segment-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-segment-tabview-nav li.pinned{position:sticky;left:var(--pinned-left, 0);z-index:10;background-color:var(--white-100)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }, { kind: "directive", type: i3.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i4.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: i5.ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: i6.ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "directive", type: i7.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    calculateSegmentTabs() {
+        if (this.mode !== 'segment' || !this.list || !this.container)
+            return;
+        const containerWidth = this.container.clientWidth;
+        const tabsElements = Array.from(this.list.children).filter((el) => el.tagName === 'LI' && !el.classList.contains('cax-segment-more-tabs'));
+        let hiddenCount = 0;
+        // Dynamically calculate the safe width reserve for the "+ n tabs" button
+        const getDynamicReserve = (count) => {
+            const basePadding = 40; // ~16px padding each side + border + safe buffer
+            const charWidthMap = { sm: 7, md: 8, lg: 9 }; // avg px width per char
+            const charWidth = charWidthMap[this.size] || 8;
+            const textLength = `+${count} tabs`.length;
+            return basePadding + textLength * charWidth;
+        };
+        for (let i = 0; i < tabsElements.length; i++) {
+            const el = tabsElements[i];
+            const isLast = i === tabsElements.length - 1;
+            const potentialHiddenCount = tabsElements.length - i;
+            const buttonReserve = isLast && hiddenCount === 0 ? 0 : getDynamicReserve(potentialHiddenCount);
+            const availableWidth = containerWidth - buttonReserve;
+            if (el.offsetLeft + el.offsetWidth > availableWidth) {
+                hiddenCount = tabsElements.length - i;
+                break;
+            }
+        }
+        this.hiddenTabsCount = Math.max(0, hiddenCount);
+        this.segmentOverflow = this.hiddenTabsCount > 0;
+        const nonClosedTabs = this.tabs.filter((t) => !t.closed);
+        const visibleTabsCount = tabsElements.length - this.hiddenTabsCount;
+        this.tabs.forEach((tab) => {
+            if (tab.closed) {
+                tab.segmentHidden = false; // Closed tabs don't need to be hidden in the segmented sense
+                tab.segmentLastVisible = false;
+                return;
+            }
+            const visibleIndex = nonClosedTabs.indexOf(tab);
+            tab.segmentHidden = visibleIndex >= visibleTabsCount;
+            tab.segmentLastVisible = this.segmentOverflow && visibleIndex === visibleTabsCount - 1;
+        });
+        // Ensure scrollLeft is reset if we disable scroll
+        if (this.segmentOverflow && this.container) {
+            this.container.scrollLeft = 0;
+        }
+        this.cd.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TabView, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: TabView, isStandalone: false, selector: "cax-tabView", inputs: { fullMode: "fullMode", size: "size", style: "style", styleClass: "styleClass", controlClose: ["controlClose", "controlClose", booleanAttribute], scrollable: ["scrollable", "scrollable", booleanAttribute], activeIndex: "activeIndex", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], nextButtonAriaLabel: "nextButtonAriaLabel", prevButtonAriaLabel: "prevButtonAriaLabel", autoHideButtons: ["autoHideButtons", "autoHideButtons", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], mode: "mode", pinnedIndexes: "pinnedIndexes" }, outputs: { onChange: "onChange", onClose: "onClose", activeIndexChange: "activeIndexChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "tabPanels", predicate: TabPanel }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true }, { propertyName: "prevBtn", first: true, predicate: ["prevBtn"], descendants: true }, { propertyName: "nextBtn", first: true, predicate: ["nextBtn"], descendants: true }, { propertyName: "inkbar", first: true, predicate: ["inkbar"], descendants: true }, { propertyName: "elementToObserve", first: true, predicate: ["elementToObserve"], descendants: true }], ngImport: i0, template: "<div\n    [ngClass]=\"{ 'cax-tabview cax-component': true, 'cax-tabview-scrollable': scrollable, 'cax-tabview-sm': size === 'sm', 'cax-tabview-md': size === 'md', 'cax-tabview-lg': size === 'lg' }\"\n    [ngStyle]=\"style\"\n    [class]=\"styleClass\"\n    [attr.data-pc-name]=\"'tabview'\"\n>\n    <div #elementToObserve class=\"cax-tabview-nav-container\" *ngIf=\"mode == 'line'\" [ngClass]=\"fullMode ? 'block-mode' : 'flex-mode'\">\n        <button\n            *ngIf=\"scrollable && !backwardIsDisabled && buttonVisible\"\n            #prevBtn\n            class=\"cax-tabview-nav-prev cax-tabview-nav-btn cax-link\"\n            (click)=\"navBackward()\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.aria-label]=\"prevButtonAriaLabel\"\n            type=\"button\"\n            caxRipple\n        >\n            <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\n            <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\n        </button>\n        <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\n            <ul #navbar class=\"cax-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\n                <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\n                    <li\n                        role=\"presentation\"\n                        [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled }\"\n                        [attr.data-cax-disabled]=\"tab.disabled\"\n                        [ngStyle]=\"tab.headerStyle\"\n                        [class]=\"tab.headerStyleClass\"\n                        [class.full-mode]=\"fullMode\"\n                        [class.half-mode]=\"!fullMode\"\n                        *ngIf=\"!tab.closed\"\n                    >\n                        <a\n                            role=\"tab\"\n                            class=\"cax-tabview-nav-link\"\n                            [caxTooltip]=\"tab.tooltip\"\n                            [tooltipPosition]=\"tab.tooltipPosition\"\n                            [positionStyle]=\"tab.tooltipPositionStyle\"\n                            [tooltipStyleClass]=\"tab.tooltipStyleClass\"\n                            [attr.id]=\"getTabHeaderActionId(tab.id)\"\n                            [attr.aria-controls]=\"getTabContentId(tab.id)\"\n                            [attr.aria-selected]=\"tab.selected\"\n                            [attr.tabindex]=\"tab.disabled ? '-1' : tabindex\"\n                            [attr.aria-disabled]=\"tab.disabled\"\n                            [attr.data-pc-index]=\"i\"\n                            [attr.data-pc-section]=\"'headeraction'\"\n                            (click)=\"open($event, tab)\"\n                            (keydown)=\"onTabKeyDown($event, tab)\"\n                            caxRipple\n                        >\n                            <ng-container *ngIf=\"!tab.headerTemplate\">\n                                <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\n                                <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\n                                    <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\n                                </span>\n                                <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\n                                <span class=\"cax-tabview-title\" [class]=\"tab.selected ? `cax-text-action-${size}-semibold` : `cax-text-action-${size}-medium`\">{{ tab.header }}</span>\n                                <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\n                                <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\n                                    <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\n                                </span>\n                            </ng-container>\n                            <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                            <ng-container *ngIf=\"tab.closable\">\n                                <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\n                                <span class=\"cax-tabview-close\" *ngIf=\"tab.closeIconTemplate\">\n                                    <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\n                                </span>\n                            </ng-container>\n                        </a>\n                    </li>\n                </ng-template>\n                <li #inkbar class=\"cax-tabview-ink-bar\" role=\"presentation\" aria-hidden=\"true\" [attr.data-pc-section]=\"'inkbar'\"></li>\n            </ul>\n        </div>\n\n        <!-- Configurable Template -->\n        <div class=\"cax-tabview-action-buttons\" *ngIf=\"mode == 'line' && actionTemplate && !fullMode\">\n            <div class=\"cax-tabview-separator\"></div>\n            <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n        </div>\n\n        <button\n            *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\n            #nextBtn\n            [attr.tabindex]=\"tabindex\"\n            [attr.aria-label]=\"nextButtonAriaLabel\"\n            class=\"cax-tabview-nav-next cax-tabview-nav-btn cax-link\"\n            (click)=\"navForward()\"\n            type=\"button\"\n            caxRipple\n        >\n            <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\n            <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\n        </button>\n    </div>\n    <div #elementToObserve class=\"cax-tabview-nav-container cax-segment-tabview-container\" *ngIf=\"mode == 'segment'\">\n        <button\n            *ngIf=\"scrollable && !backwardIsDisabled && buttonVisible && !segmentOverflow\"\n            #prevBtnSegment\n            class=\"cax-tabview-nav-prev cax-segment-tabview-nav-btn cax-link\"\n            (click)=\"navBackward()\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.aria-label]=\"prevButtonAriaLabel\"\n            type=\"button\"\n            caxRipple\n        >\n            <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\n            <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\n        </button>\n        <div class=\"cax-segment-tabview-header\" style=\"position: relative\">\n            <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\" [style.overflow-x]=\"segmentOverflow ? 'hidden' : ''\">\n                <ul #navbar class=\"cax-segment-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\n                    <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\n                        <li\n                            role=\"presentation\"\n                            [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled, 'pinned': tab.pinned, 'cax-segment-last-visible': tab.segmentLastVisible }\"\n                            [style.visibility]=\"tab.segmentHidden ? 'hidden' : 'visible'\"\n                            [style.pointer-events]=\"tab.segmentHidden ? 'none' : 'auto'\"\n                            [attr.data-cax-disabled]=\"tab.disabled\"\n                            [ngStyle]=\"tab.headerStyle\"\n                            [class]=\"tab.headerStyleClass\"\n                            *ngIf=\"!tab.closed\"\n                        >\n                            <a\n                                role=\"tab\"\n                                class=\"cax-segment-tabview-nav-link\"\n                                [caxTooltip]=\"tab.tooltip\"\n                                [tooltipPosition]=\"tab.tooltipPosition\"\n                                [positionStyle]=\"tab.tooltipPositionStyle\"\n                                [tooltipStyleClass]=\"tab.tooltipStyleClass\"\n                                [attr.id]=\"getTabHeaderActionId(tab.id)\"\n                                [attr.aria-controls]=\"getTabContentId(tab.id)\"\n                                [attr.aria-selected]=\"tab.selected\"\n                                [attr.tabindex]=\"tab.disabled ? '-1' : tabindex\"\n                                [attr.aria-disabled]=\"tab.disabled\"\n                                [attr.data-pc-index]=\"i\"\n                                [attr.data-pc-section]=\"'headeraction'\"\n                                (click)=\"open($event, tab)\"\n                                (keydown)=\"onTabKeyDown($event, tab)\"\n                                caxRipple\n                            >\n                                <ng-container *ngIf=\"!tab.headerTemplate\">\n                                    <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\n                                    <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\n                                        <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\n                                    </span>\n                                    <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\n                                    <span *ngIf=\"tab.header\" class=\"cax-tabview-title\" [class]=\"tab.selected ? `cax-text-action-${size}-semibold` : `cax-text-action-${size}-medium`\">{{ tab.header }}</span>\n                                    <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\n                                    <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\n                                        <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\n                                    </span>\n                                </ng-container>\n                                <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                                <ng-container *ngIf=\"tab.closable\">\n                                    <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-segment-tabview-close'\" (click)=\"close($event, tab)\" />\n                                    <span class=\"cax-segment-tabview-close\" *ngIf=\"tab.closeIconTemplate\">\n                                        <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </li>\n                    </ng-template>\n                </ul>\n            </div>\n            <div *ngIf=\"segmentOverflow\" class=\"cax-segment-more-tabs\">\n                <button\n                    type=\"button\"\n                    class=\"cax-segment-more-btn\"\n                    [class.cax-segment-more-btn-active]=\"op.overlayVisible\"\n                    [class]=\"op.overlayVisible ? `cax-text-action-${size}-semibold` : `cax-text-action-${size}-medium`\"\n                    caxRipple\n                    (click)=\"op.toggle($event)\"\n                >\n                    +{{hiddenTabsCount}} tabs\n                    <span class=\"cax cax-segment-more-icon\" [ngClass]=\"op.overlayVisible ? 'cax-alt-arrow-up' : 'cax-alt-arrow-down'\"></span>\n                </button>\n\n                <!-- Overlay panel for hidden segment tabs -->\n                <cax-overlayPanel #op appendTo=\"body\" [style]=\"{padding: '0'}\" styleClass=\"cax-segment-more-overlay-panel\">\n                    <ul class=\"cax-segment-more-list\">\n                        <li *ngFor=\"let tab of hiddenTabs\" class=\"cax-segment-more-item cax-link\" (click)=\"op.hide(); open($event, tab)\" caxRipple>\n                            <span class=\"cax-segment-more-item-content\">\n                                <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\n                                <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\n                                <span class=\"cax-tabview-title cax-text-action-md-medium\">{{ tab.header }}</span>\n                                <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\n                            </span>\n                            <span *ngIf=\"tab.closable\" class=\"cax-segment-more-close\" (click)=\"close($event, tab); $event.stopPropagation()\">\n                                <TimesIcon *ngIf=\"!tab.closeIconTemplate\" />\n                                <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\n                            </span>\n                        </li>\n                    </ul>\n                </cax-overlayPanel>\n            </div>\n        </div>\n        <button\n            *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible && !segmentOverflow\"\n            #nextBtn\n            [attr.tabindex]=\"tabindex\"\n            [attr.aria-label]=\"nextButtonAriaLabel\"\n            class=\"cax-tabview-nav-next cax-segment-tabview-nav-btn cax-link\"\n            (click)=\"navForward()\"\n            type=\"button\"\n            caxRipple\n        >\n            <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\n            <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\n        </button>\n    </div>\n    <div class=\"cax-tabview-panels\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-tabview-nav-container{position:relative;overflow-y:visible}.cax-tabview-nav-container.block-mode{display:block}.cax-tabview-nav-container.flex-mode{display:flex}.cax-tabview-action-buttons{display:flex;align-items:center;margin-left:auto}.cax-tabview-separator{width:2px;height:35px;display:inline-block;vertical-align:middle;margin-right:8px}.cax-tabview-scrollable .cax-tabview-nav-container{overflow:hidden;white-space:nowrap}.cax-tabview-nav-content{overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto;flex:1 1 auto;min-width:0}.cax-tabview-nav{display:inline-flex;position:relative;min-width:100%;height:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-tabview-nav li.full-mode{display:flex;justify-content:center;align-items:center;flex:1!important}.cax-tabview-nav li.full-mode cax-tabview .cax-tabview-nav li .cax-tabview-nav-link{border:none}.cax-tabview-nav li.half-mode{display:flex;justify-content:center;align-items:center;flex:none!important}.cax-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-tabview-ink-bar{display:block;z-index:1}.cax-tabview-nav-link:focus{z-index:1}.cax-tabview-title{line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.cax-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-tabview-nav-prev{left:0}.cax-tabview-nav-next{right:0}.cax-tabview-nav-content::-webkit-scrollbar{display:none}.cax-tabview-close{z-index:1}.cax-segment-tabview-container{flex-direction:row}.cax-segment-tabview-header{display:flex;align-items:center;height:100%}.cax-segment-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-segment-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-segment-tabview-nav-link{z-index:1}.cax-left-arrow,.cax-right-arrow{position:sticky;top:0;z-index:100;background:transparent;border:none;cursor:pointer;font-size:1.25rem}.cax-arrow-buttons{display:flex;align-items:center;gap:16px}.cax-left-arrow,.cax-right-arrow{position:sticky;left:0;z-index:100;transition:transform .2s ease}.cax-left-arrow{left:0;padding-left:var(--space-200)}.cax-right-arrow{right:0;padding-right:var(--space-200)}.cax-dynamic-icon{font-size:1.25rem;cursor:pointer}.cax-segment-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-segment-tabview-nav li.pinned{position:sticky;left:var(--pinned-left, 0);z-index:10;background-color:var(--white-100)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }, { kind: "directive", type: i3.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i4.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: i5.ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: i6.ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: i7.OverlayPanel, selector: "cax-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "variant", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TabView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TabView, decorators: [{
             type: Component,
             args: [{ selector: 'cax-tabView', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
-                    }, template: "<div [ngClass]=\"{ 'cax-tabview cax-component': true, 'cax-tabview-scrollable': scrollable }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'tabview'\">\r\n    <div #elementToObserve class=\"cax-tabview-nav-container\" *ngIf=\"mode == 'line'\" [ngClass]=\"fullMode ? 'block-mode' : 'flex-mode'\">\r\n        <button\r\n            *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n            #prevBtn\r\n            class=\"cax-tabview-nav-prev cax-tabview-nav-btn cax-link\"\r\n            (click)=\"navBackward()\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.aria-label]=\"prevButtonAriaLabel\"\r\n            type=\"button\"\r\n            caxRipple\r\n        >\r\n            <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n            <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n        </button>\r\n        <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n            <ul #navbar class=\"cax-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n                <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n                    <li role=\"presentation\" [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled }\" [attr.data-cax-disabled]=\"tab.disabled\" [ngStyle]=\"tab.headerStyle\" [class]=\"tab.headerStyleClass\"\r\n                    [class.full-mode]=\"fullMode\" [class.half-mode]=\"!fullMode\" *ngIf=\"!tab.closed\">\r\n                        <a\r\n                            role=\"tab\"\r\n                            class=\"cax-tabview-nav-link\"\r\n                            [caxTooltip]=\"tab.tooltip\"\r\n                            [tooltipPosition]=\"tab.tooltipPosition\"\r\n                            [positionStyle]=\"tab.tooltipPositionStyle\"\r\n                            [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n                            [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n                            [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n                            [attr.aria-selected]=\"tab.selected\"\r\n                            [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n                            [attr.aria-disabled]=\"tab.disabled\"\r\n                            [attr.data-pc-index]=\"i\"\r\n                            [attr.data-pc-section]=\"'headeraction'\"\r\n                            (click)=\"open($event, tab)\"\r\n                            (keydown)=\"onTabKeyDown($event, tab)\"\r\n                            caxRipple\r\n                        >\r\n                            <ng-container *ngIf=\"!tab.headerTemplate\">\r\n                                <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n                                <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n                                    <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n                                </span>\r\n                                <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n                                <span class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n                                <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n                                <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n                                    <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n                                </span>\r\n                            </ng-container>\r\n                            <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n                            <ng-container *ngIf=\"tab.closable\">\r\n                                <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n                                <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n                                <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n                            </ng-container>\r\n                        </a>\r\n                    </li>\r\n                </ng-template>\r\n                <li #inkbar class=\"cax-tabview-ink-bar\" role=\"presentation\" aria-hidden=\"true\" [attr.data-pc-section]=\"'inkbar'\"></li>\r\n            </ul>\r\n        </div>\r\n        \r\n        <!-- Configurable Buttons -->\r\n        <div class=\"cax-tabview-action-buttons\" *ngIf=\"actionButton?.length && !fullMode\">\r\n            <ng-container *ngFor=\"let button of actionButton\" >\r\n                <div class=\"cax-tabview-separator\"></div>\r\n                <button type=\"button\" caxButton \r\n                class=\"cax-tabview-extra-btn\" \r\n                [label]=\"button.label\"\r\n                [severity]=\"button.actionButtonSeverity\"\r\n                [link]=\"button.actionButtonLink\"\r\n                [icon]=\"button.actionButtonIcon\"\r\n                [disabled]=\"button.actionButtonDisabled\"\r\n                [outlined]=\"button.actionButtonOutlined\"\r\n                [rounded]=\"button.actionButtonRounded\"\r\n                [size]=\"button.actionButtonSize\"\r\n                [loading]=\"button.actionButtonLoading\"\r\n                (click)=\"button.action()\">\r\n            </button>\r\n            </ng-container>\r\n        </div>\r\n    \r\n        <button\r\n            *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n            #nextBtn\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.aria-label]=\"nextButtonAriaLabel\"\r\n            class=\"cax-tabview-nav-next cax-tabview-nav-btn cax-link\"\r\n            (click)=\"navForward()\"\r\n            type=\"button\"\r\n            caxRipple\r\n        >\r\n            <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n            <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n        </button>\r\n    </div>\r\n    <div #elementToObserve class=\"cax-tabview-nav-container cax-segment-tabview-container\" *ngIf=\"mode == 'segment'\">\r\n        <button\r\n            *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n            #prevBtn\r\n            class=\"cax-tabview-nav-prev cax-segment-tabview-nav-btn cax-link\"\r\n            (click)=\"navBackward()\"\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.aria-label]=\"prevButtonAriaLabel\"\r\n            type=\"button\"\r\n            caxRipple\r\n        >\r\n            <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n            <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n        </button>\r\n        <div class=\"cax-segment-tabview-header\">\r\n            <span class=\"cax-arrow-buttons\">\r\n                <button #prevBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"prevButtonAriaLabel\" class=\"cax cax-arrow-left cax-left-arrow\" (click)=\"arrowLeft()\" type=\"button\" [disabled]=\"activeTabIndex === 0\"></button>\r\n                <button #nextBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"nextButtonAriaLabel\" class=\"cax cax-arrow-right cax-right-arrow\" [disabled]=\"activeTabIndex === tabs.length - 1\" (click)=\"arrowRight()\" type=\"button\"></button>\r\n            </span>\r\n            <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n                <ul #navbar class=\"cax-segment-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n                    <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n                        <li\r\n                            role=\"presentation\"\r\n                            [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled, 'pinned': tab.pinned }\"\r\n                            [attr.data-cax-disabled]=\"tab.disabled\"\r\n                            [ngStyle]=\"tab.headerStyle\"\r\n                            [class]=\"tab.headerStyleClass\"\r\n                            *ngIf=\"!tab.closed\"\r\n                        >\r\n                            <a\r\n                                role=\"tab\"\r\n                                class=\"cax-segment-tabview-nav-link\"\r\n                                [caxTooltip]=\"tab.tooltip\"\r\n                                [tooltipPosition]=\"tab.tooltipPosition\"\r\n                                [positionStyle]=\"tab.tooltipPositionStyle\"\r\n                                [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n                                [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n                                [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n                                [attr.aria-selected]=\"tab.selected\"\r\n                                [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n                                [attr.aria-disabled]=\"tab.disabled\"\r\n                                [attr.data-pc-index]=\"i\"\r\n                                [attr.data-pc-section]=\"'headeraction'\"\r\n                                (click)=\"open($event, tab)\"\r\n                                (keydown)=\"onTabKeyDown($event, tab)\"\r\n                                caxRipple\r\n                            >\r\n                                <ng-container *ngIf=\"!tab.headerTemplate\">\r\n                                    <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n                                    <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n                                        <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n                                    </span>\r\n                                    <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n                                    <span *ngIf=\"tab.header\" class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n                                    <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n                                    <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n                                        <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n                                    </span>\r\n                                </ng-container>\r\n                                <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n                                <ng-container *ngIf=\"tab.closable\">\r\n                                    <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n                                    <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n                                    <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n                                </ng-container>\r\n                            </a>\r\n                        </li>\r\n                    </ng-template>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n        <button\r\n            *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n            #nextBtn\r\n            [attr.tabindex]=\"tabindex\"\r\n            [attr.aria-label]=\"nextButtonAriaLabel\"\r\n            class=\"cax-tabview-nav-next cax-segment-tabview-nav-btn cax-link\"\r\n            (click)=\"navForward()\"\r\n            type=\"button\"\r\n            caxRipple\r\n        >\r\n            <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n            <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n        </button>\r\n    </div>\r\n    <div class=\"cax-tabview-panels\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: ["@layer cax{.cax-tabview-nav-container{position:relative}.cax-tabview-nav-container.block-mode{display:block}.cax-tabview-nav-container.flex-mode{display:flex}.cax-tabview-action-buttons{display:flex;align-items:center;margin-left:auto}.cax-tabview-separator{width:2px;height:35px;display:inline-block;vertical-align:middle;margin-right:8px}.cax-tabview-scrollable .cax-tabview-nav-container{overflow:hidden;white-space:nowrap}.cax-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.cax-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-tabview-nav li.full-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:1!important}.cax-tabview-nav li.full-mode cax-tabview .cax-tabview-nav li .cax-tabview-nav-link{border:none}.cax-tabview-nav li.half-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:none!important}.cax-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-tabview-ink-bar{display:none;z-index:1}.cax-tabview-nav-link:focus{z-index:1}.cax-tabview-title{line-height:1;white-space:nowrap}.cax-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-tabview-nav-prev{left:0}.cax-tabview-nav-next{right:0}.cax-tabview-nav-content::-webkit-scrollbar{display:none}.cax-tabview-close{z-index:1}.cax-segment-tabview-container{flex-direction:row;height:48px}.cax-segment-tabview-header{display:flex;align-items:center;height:48px}.cax-segment-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-segment-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-segment-tabview-nav-link{z-index:1}.cax-left-arrow,.cax-right-arrow{position:sticky;top:0;z-index:100;background:transparent;border:none;cursor:pointer;font-size:1.25rem}.cax-arrow-buttons{display:flex;align-items:center;gap:16px}.cax-left-arrow,.cax-right-arrow{position:sticky;left:0;z-index:100;transition:transform .2s ease}.cax-left-arrow{left:0;padding-left:var(--space-200)}.cax-right-arrow{right:0;padding-right:var(--space-200)}.cax-dynamic-icon{font-size:1.25rem;cursor:pointer}.cax-segment-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-segment-tabview-nav li.pinned{position:sticky;left:var(--pinned-left, 0);z-index:10;background-color:var(--white-100)}}\n"] }]
+                    }, template: "<div\n    [ngClass]=\"{ 'cax-tabview cax-component': true, 'cax-tabview-scrollable': scrollable, 'cax-tabview-sm': size === 'sm', 'cax-tabview-md': size === 'md', 'cax-tabview-lg': size === 'lg' }\"\n    [ngStyle]=\"style\"\n    [class]=\"styleClass\"\n    [attr.data-pc-name]=\"'tabview'\"\n>\n    <div #elementToObserve class=\"cax-tabview-nav-container\" *ngIf=\"mode == 'line'\" [ngClass]=\"fullMode ? 'block-mode' : 'flex-mode'\">\n        <button\n            *ngIf=\"scrollable && !backwardIsDisabled && buttonVisible\"\n            #prevBtn\n            class=\"cax-tabview-nav-prev cax-tabview-nav-btn cax-link\"\n            (click)=\"navBackward()\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.aria-label]=\"prevButtonAriaLabel\"\n            type=\"button\"\n            caxRipple\n        >\n            <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\n            <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\n        </button>\n        <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\n            <ul #navbar class=\"cax-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\n                <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\n                    <li\n                        role=\"presentation\"\n                        [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled }\"\n                        [attr.data-cax-disabled]=\"tab.disabled\"\n                        [ngStyle]=\"tab.headerStyle\"\n                        [class]=\"tab.headerStyleClass\"\n                        [class.full-mode]=\"fullMode\"\n                        [class.half-mode]=\"!fullMode\"\n                        *ngIf=\"!tab.closed\"\n                    >\n                        <a\n                            role=\"tab\"\n                            class=\"cax-tabview-nav-link\"\n                            [caxTooltip]=\"tab.tooltip\"\n                            [tooltipPosition]=\"tab.tooltipPosition\"\n                            [positionStyle]=\"tab.tooltipPositionStyle\"\n                            [tooltipStyleClass]=\"tab.tooltipStyleClass\"\n                            [attr.id]=\"getTabHeaderActionId(tab.id)\"\n                            [attr.aria-controls]=\"getTabContentId(tab.id)\"\n                            [attr.aria-selected]=\"tab.selected\"\n                            [attr.tabindex]=\"tab.disabled ? '-1' : tabindex\"\n                            [attr.aria-disabled]=\"tab.disabled\"\n                            [attr.data-pc-index]=\"i\"\n                            [attr.data-pc-section]=\"'headeraction'\"\n                            (click)=\"open($event, tab)\"\n                            (keydown)=\"onTabKeyDown($event, tab)\"\n                            caxRipple\n                        >\n                            <ng-container *ngIf=\"!tab.headerTemplate\">\n                                <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\n                                <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\n                                    <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\n                                </span>\n                                <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\n                                <span class=\"cax-tabview-title\" [class]=\"tab.selected ? `cax-text-action-${size}-semibold` : `cax-text-action-${size}-medium`\">{{ tab.header }}</span>\n                                <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\n                                <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\n                                    <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\n                                </span>\n                            </ng-container>\n                            <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                            <ng-container *ngIf=\"tab.closable\">\n                                <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\n                                <span class=\"cax-tabview-close\" *ngIf=\"tab.closeIconTemplate\">\n                                    <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\n                                </span>\n                            </ng-container>\n                        </a>\n                    </li>\n                </ng-template>\n                <li #inkbar class=\"cax-tabview-ink-bar\" role=\"presentation\" aria-hidden=\"true\" [attr.data-pc-section]=\"'inkbar'\"></li>\n            </ul>\n        </div>\n\n        <!-- Configurable Template -->\n        <div class=\"cax-tabview-action-buttons\" *ngIf=\"mode == 'line' && actionTemplate && !fullMode\">\n            <div class=\"cax-tabview-separator\"></div>\n            <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n        </div>\n\n        <button\n            *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\n            #nextBtn\n            [attr.tabindex]=\"tabindex\"\n            [attr.aria-label]=\"nextButtonAriaLabel\"\n            class=\"cax-tabview-nav-next cax-tabview-nav-btn cax-link\"\n            (click)=\"navForward()\"\n            type=\"button\"\n            caxRipple\n        >\n            <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\n            <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\n        </button>\n    </div>\n    <div #elementToObserve class=\"cax-tabview-nav-container cax-segment-tabview-container\" *ngIf=\"mode == 'segment'\">\n        <button\n            *ngIf=\"scrollable && !backwardIsDisabled && buttonVisible && !segmentOverflow\"\n            #prevBtnSegment\n            class=\"cax-tabview-nav-prev cax-segment-tabview-nav-btn cax-link\"\n            (click)=\"navBackward()\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.aria-label]=\"prevButtonAriaLabel\"\n            type=\"button\"\n            caxRipple\n        >\n            <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\n            <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\n        </button>\n        <div class=\"cax-segment-tabview-header\" style=\"position: relative\">\n            <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\" [style.overflow-x]=\"segmentOverflow ? 'hidden' : ''\">\n                <ul #navbar class=\"cax-segment-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\n                    <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\n                        <li\n                            role=\"presentation\"\n                            [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled, 'pinned': tab.pinned, 'cax-segment-last-visible': tab.segmentLastVisible }\"\n                            [style.visibility]=\"tab.segmentHidden ? 'hidden' : 'visible'\"\n                            [style.pointer-events]=\"tab.segmentHidden ? 'none' : 'auto'\"\n                            [attr.data-cax-disabled]=\"tab.disabled\"\n                            [ngStyle]=\"tab.headerStyle\"\n                            [class]=\"tab.headerStyleClass\"\n                            *ngIf=\"!tab.closed\"\n                        >\n                            <a\n                                role=\"tab\"\n                                class=\"cax-segment-tabview-nav-link\"\n                                [caxTooltip]=\"tab.tooltip\"\n                                [tooltipPosition]=\"tab.tooltipPosition\"\n                                [positionStyle]=\"tab.tooltipPositionStyle\"\n                                [tooltipStyleClass]=\"tab.tooltipStyleClass\"\n                                [attr.id]=\"getTabHeaderActionId(tab.id)\"\n                                [attr.aria-controls]=\"getTabContentId(tab.id)\"\n                                [attr.aria-selected]=\"tab.selected\"\n                                [attr.tabindex]=\"tab.disabled ? '-1' : tabindex\"\n                                [attr.aria-disabled]=\"tab.disabled\"\n                                [attr.data-pc-index]=\"i\"\n                                [attr.data-pc-section]=\"'headeraction'\"\n                                (click)=\"open($event, tab)\"\n                                (keydown)=\"onTabKeyDown($event, tab)\"\n                                caxRipple\n                            >\n                                <ng-container *ngIf=\"!tab.headerTemplate\">\n                                    <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\n                                    <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\n                                        <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\n                                    </span>\n                                    <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\n                                    <span *ngIf=\"tab.header\" class=\"cax-tabview-title\" [class]=\"tab.selected ? `cax-text-action-${size}-semibold` : `cax-text-action-${size}-medium`\">{{ tab.header }}</span>\n                                    <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\n                                    <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\n                                        <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\n                                    </span>\n                                </ng-container>\n                                <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n                                <ng-container *ngIf=\"tab.closable\">\n                                    <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-segment-tabview-close'\" (click)=\"close($event, tab)\" />\n                                    <span class=\"cax-segment-tabview-close\" *ngIf=\"tab.closeIconTemplate\">\n                                        <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </li>\n                    </ng-template>\n                </ul>\n            </div>\n            <div *ngIf=\"segmentOverflow\" class=\"cax-segment-more-tabs\">\n                <button\n                    type=\"button\"\n                    class=\"cax-segment-more-btn\"\n                    [class.cax-segment-more-btn-active]=\"op.overlayVisible\"\n                    [class]=\"op.overlayVisible ? `cax-text-action-${size}-semibold` : `cax-text-action-${size}-medium`\"\n                    caxRipple\n                    (click)=\"op.toggle($event)\"\n                >\n                    +{{hiddenTabsCount}} tabs\n                    <span class=\"cax cax-segment-more-icon\" [ngClass]=\"op.overlayVisible ? 'cax-alt-arrow-up' : 'cax-alt-arrow-down'\"></span>\n                </button>\n\n                <!-- Overlay panel for hidden segment tabs -->\n                <cax-overlayPanel #op appendTo=\"body\" [style]=\"{padding: '0'}\" styleClass=\"cax-segment-more-overlay-panel\">\n                    <ul class=\"cax-segment-more-list\">\n                        <li *ngFor=\"let tab of hiddenTabs\" class=\"cax-segment-more-item cax-link\" (click)=\"op.hide(); open($event, tab)\" caxRipple>\n                            <span class=\"cax-segment-more-item-content\">\n                                <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\n                                <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\n                                <span class=\"cax-tabview-title cax-text-action-md-medium\">{{ tab.header }}</span>\n                                <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\n                            </span>\n                            <span *ngIf=\"tab.closable\" class=\"cax-segment-more-close\" (click)=\"close($event, tab); $event.stopPropagation()\">\n                                <TimesIcon *ngIf=\"!tab.closeIconTemplate\" />\n                                <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\n                            </span>\n                        </li>\n                    </ul>\n                </cax-overlayPanel>\n            </div>\n        </div>\n        <button\n            *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible && !segmentOverflow\"\n            #nextBtn\n            [attr.tabindex]=\"tabindex\"\n            [attr.aria-label]=\"nextButtonAriaLabel\"\n            class=\"cax-tabview-nav-next cax-segment-tabview-nav-btn cax-link\"\n            (click)=\"navForward()\"\n            type=\"button\"\n            caxRipple\n        >\n            <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\n            <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\n        </button>\n    </div>\n    <div class=\"cax-tabview-panels\">\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-tabview-nav-container{position:relative;overflow-y:visible}.cax-tabview-nav-container.block-mode{display:block}.cax-tabview-nav-container.flex-mode{display:flex}.cax-tabview-action-buttons{display:flex;align-items:center;margin-left:auto}.cax-tabview-separator{width:2px;height:35px;display:inline-block;vertical-align:middle;margin-right:8px}.cax-tabview-scrollable .cax-tabview-nav-container{overflow:hidden;white-space:nowrap}.cax-tabview-nav-content{overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto;flex:1 1 auto;min-width:0}.cax-tabview-nav{display:inline-flex;position:relative;min-width:100%;height:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-tabview-nav li.full-mode{display:flex;justify-content:center;align-items:center;flex:1!important}.cax-tabview-nav li.full-mode cax-tabview .cax-tabview-nav li .cax-tabview-nav-link{border:none}.cax-tabview-nav li.half-mode{display:flex;justify-content:center;align-items:center;flex:none!important}.cax-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-tabview-ink-bar{display:block;z-index:1}.cax-tabview-nav-link:focus{z-index:1}.cax-tabview-title{line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.cax-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-tabview-nav-prev{left:0}.cax-tabview-nav-next{right:0}.cax-tabview-nav-content::-webkit-scrollbar{display:none}.cax-tabview-close{z-index:1}.cax-segment-tabview-container{flex-direction:row}.cax-segment-tabview-header{display:flex;align-items:center;height:100%}.cax-segment-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-segment-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-segment-tabview-nav-link{z-index:1}.cax-left-arrow,.cax-right-arrow{position:sticky;top:0;z-index:100;background:transparent;border:none;cursor:pointer;font-size:1.25rem}.cax-arrow-buttons{display:flex;align-items:center;gap:16px}.cax-left-arrow,.cax-right-arrow{position:sticky;left:0;z-index:100;transition:transform .2s ease}.cax-left-arrow{left:0;padding-left:var(--space-200)}.cax-right-arrow{right:0;padding-right:var(--space-200)}.cax-dynamic-icon{font-size:1.25rem;cursor:pointer}.cax-segment-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-segment-tabview-nav li.pinned{position:sticky;left:var(--pinned-left, 0);z-index:10;background-color:var(--white-100)}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
                 }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { fullMode: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], style: [{
                 type: Input
             }], styleClass: [{
@@ -864,24 +955,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }], tabindex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], actionButton: [{
-                type: Input
-            }], actionButtonSeverity: [{
-                type: Input
-            }], actionButtonSize: [{
-                type: Input
-            }], actionButtonOutlined: [{
-                type: Input
-            }], actionButtonRounded: [{
-                type: Input
-            }], actionButtonIcon: [{
-                type: Input
-            }], actionButtonLoading: [{
-                type: Input
-            }], actionButtonLink: [{
-                type: Input
-            }], actionButtonDisabled: [{
-                type: Input
             }], onChange: [{
                 type: Output
             }], onClose: [{
@@ -919,14 +992,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class TabViewModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: TabViewModule, declarations: [TabView, TabPanel], imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule], exports: [TabView, TabPanel, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TabViewModule, imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: TabViewModule, declarations: [TabView, TabPanel], imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule, OverlayPanel], exports: [TabView, TabPanel, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TabViewModule, imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule, OverlayPanel, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TabViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TabViewModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule],
+                    imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule, OverlayPanel],
                     exports: [TabView, TabPanel, SharedModule],
                     declarations: [TabView, TabPanel]
                 }]