cax-design-system 2.7.12 → 2.8.0

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

@@ -46,13 +46,13 @@ class Tableconfiguration {
         this.fontSizeChange.emit(this.fontConfiguration);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Tableconfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Tableconfiguration, isStandalone: true, selector: "cax-tableconfiguration", outputs: { rowHeightChange: "rowHeightChange", fontSizeChange: "fontSizeChange" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div class=\"table-configuration\">\r\n    <div class=\"table-font-size\">\r\n        <div class=\"header-details\">\r\n            <span>Font Size</span>\r\n            <cax-button (click)=\"resetTableConfiguration()\" [label]=\"'Reset to default'\" [severity]=\"'danger'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\r\n        </div>\r\n        <div class=\"font-configuration\">\r\n            <div class=\"font-labels\">\r\n                <span *ngFor=\"let option of fontSizeOptions\" [class.active]=\"fontValue === option\" [style.fontSize]=\"option + 'px'\"> {{ option }}px </span>\r\n            </div>\r\n            <div class=\"slider-wrapper\">\r\n                <input type=\"range\" min=\"12\" max=\"18\" step=\"2\" [value]=\"fontValue\" (input)=\"onSliderChange($event)\" class=\"custom-slider\" />\r\n                <div class=\"range-marker\">\r\n                    <div *ngFor=\"let option of fontSizeOptions\" class=\"range\" [class.active]=\"fontValue === option\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"table-row-size\">\r\n        <div class=\"header-details\">\r\n            <span>Row Height</span>\r\n        </div>\r\n        <div class=\"row-configuration\">\r\n            <li [class.active]=\"rowConfiguration === 'sm'\" (click)=\"updateRowHeight('sm')\">Compact</li>\r\n            <li [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\r\n            <li [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\r\n            <li [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".table-configuration{display:flex;flex-direction:column;gap:24px;padding:12px}.table-configuration .table-font-size .header-details{display:flex;align-items:center;justify-content:space-between;font-weight:500}.table-configuration .table-font-size .font-configuration{border:1px solid var(--neutral-100);padding:16px 24px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:8px}.table-configuration .table-font-size .font-configuration .font-labels{display:flex;justify-content:space-between;align-items:center;font-weight:600;width:100%}.table-configuration .table-font-size .font-configuration .font-labels.active{color:var(--primary-color)}.table-configuration .table-font-size .font-configuration .slider-wrapper{position:relative;width:100%}.table-configuration .table-font-size .font-configuration .custom-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--neutral-100);border-radius:3px;outline:none;transition:background .3s}.table-configuration .table-font-size .font-configuration .custom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--white-100);border:2px solid var(--primary-color);border-radius:50%;cursor:pointer}.table-configuration .table-font-size .font-configuration .range-marker{position:absolute;top:5px;left:2px;width:100%;display:flex;z-index:-10;justify-content:space-between}.table-configuration .table-font-size .font-configuration .range{width:4px;height:16px;background:var(--neutral-100);border-radius:4px}.table-configuration .table-font-size .font-configuration .range.active{visibility:hidden}.table-configuration .table-row-size{display:flex;flex-direction:column;gap:8px}.table-configuration .table-row-size .header-details{font-weight:500}.table-configuration .table-row-size .row-configuration{display:flex;justify-content:space-between;gap:16px}.table-configuration .table-row-size .row-configuration li{list-style-type:none;width:95.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--neutral-100);font-size:14px;font-weight:500;height:53px;border-radius:6px;cursor:pointer}.table-configuration .table-row-size .row-configuration li.active{border:1px solid var(--primary-color);color:var(--primary-color);background:var(--primary-25)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Tableconfiguration, isStandalone: true, selector: "cax-tableconfiguration", outputs: { rowHeightChange: "rowHeightChange", fontSizeChange: "fontSizeChange" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div class=\"table-configuration\">\n    <div class=\"table-font-size\">\n        <div class=\"header-details\">\n            <span>Font Size</span>\n            <cax-button (click)=\"resetTableConfiguration()\" [label]=\"'Reset to default'\" [severity]=\"'danger'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\n        </div>\n        <div class=\"font-configuration\">\n            <div class=\"font-labels\">\n                <span *ngFor=\"let option of fontSizeOptions\" [class.active]=\"fontValue === option\" [style.fontSize]=\"option + 'px'\"> {{ option }}px </span>\n            </div>\n            <div class=\"slider-wrapper\">\n                <input type=\"range\" min=\"12\" max=\"18\" step=\"2\" [value]=\"fontValue\" (input)=\"onSliderChange($event)\" class=\"custom-slider\" />\n                <div class=\"range-marker\">\n                    <div *ngFor=\"let option of fontSizeOptions\" class=\"range\" [class.active]=\"fontValue === option\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"table-row-size\">\n        <div class=\"header-details\">\n            <span>Row Height</span>\n        </div>\n        <div class=\"row-configuration\">\n            <li [class.active]=\"rowConfiguration === 'sm'\" (click)=\"updateRowHeight('sm')\">Compact</li>\n            <li [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\n            <li [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\n            <li [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\n        </div>\n    </div>\n</div>\n", styles: [".table-configuration{display:flex;flex-direction:column;gap:24px;padding:12px}.table-configuration .table-font-size .header-details{display:flex;align-items:center;justify-content:space-between;font-weight:500}.table-configuration .table-font-size .font-configuration{border:1px solid var(--neutral-100);padding:16px 24px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:8px}.table-configuration .table-font-size .font-configuration .font-labels{display:flex;justify-content:space-between;align-items:center;font-weight:600;width:100%}.table-configuration .table-font-size .font-configuration .font-labels.active{color:var(--primary-color)}.table-configuration .table-font-size .font-configuration .slider-wrapper{position:relative;width:100%}.table-configuration .table-font-size .font-configuration .custom-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--neutral-100);border-radius:3px;outline:none;transition:background .3s}.table-configuration .table-font-size .font-configuration .custom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--white-100);border:2px solid var(--primary-color);border-radius:50%;cursor:pointer}.table-configuration .table-font-size .font-configuration .range-marker{position:absolute;top:5px;left:2px;width:100%;display:flex;z-index:-10;justify-content:space-between}.table-configuration .table-font-size .font-configuration .range{width:4px;height:16px;background:var(--neutral-100);border-radius:4px}.table-configuration .table-font-size .font-configuration .range.active{visibility:hidden}.table-configuration .table-row-size{display:flex;flex-direction:column;gap:8px}.table-configuration .table-row-size .header-details{font-weight:500}.table-configuration .table-row-size .row-configuration{display:flex;justify-content:space-between;gap:16px}.table-configuration .table-row-size .row-configuration li{list-style-type:none;width:95.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--neutral-100);font-size:14px;font-weight:500;height:53px;border-radius:6px;cursor:pointer}.table-configuration .table-row-size .row-configuration li.active{border:1px solid var(--primary-color);color:var(--primary-color);background:var(--primary-25)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Tableconfiguration, decorators: [{
             type: Component,
             args: [{ selector: 'cax-tableconfiguration', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ButtonModule, CommonModule], standalone: true, host: {
                         class: 'cax-element'
-                    }, template: "<div class=\"table-configuration\">\r\n    <div class=\"table-font-size\">\r\n        <div class=\"header-details\">\r\n            <span>Font Size</span>\r\n            <cax-button (click)=\"resetTableConfiguration()\" [label]=\"'Reset to default'\" [severity]=\"'danger'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\r\n        </div>\r\n        <div class=\"font-configuration\">\r\n            <div class=\"font-labels\">\r\n                <span *ngFor=\"let option of fontSizeOptions\" [class.active]=\"fontValue === option\" [style.fontSize]=\"option + 'px'\"> {{ option }}px </span>\r\n            </div>\r\n            <div class=\"slider-wrapper\">\r\n                <input type=\"range\" min=\"12\" max=\"18\" step=\"2\" [value]=\"fontValue\" (input)=\"onSliderChange($event)\" class=\"custom-slider\" />\r\n                <div class=\"range-marker\">\r\n                    <div *ngFor=\"let option of fontSizeOptions\" class=\"range\" [class.active]=\"fontValue === option\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"table-row-size\">\r\n        <div class=\"header-details\">\r\n            <span>Row Height</span>\r\n        </div>\r\n        <div class=\"row-configuration\">\r\n            <li [class.active]=\"rowConfiguration === 'sm'\" (click)=\"updateRowHeight('sm')\">Compact</li>\r\n            <li [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\r\n            <li [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\r\n            <li [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".table-configuration{display:flex;flex-direction:column;gap:24px;padding:12px}.table-configuration .table-font-size .header-details{display:flex;align-items:center;justify-content:space-between;font-weight:500}.table-configuration .table-font-size .font-configuration{border:1px solid var(--neutral-100);padding:16px 24px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:8px}.table-configuration .table-font-size .font-configuration .font-labels{display:flex;justify-content:space-between;align-items:center;font-weight:600;width:100%}.table-configuration .table-font-size .font-configuration .font-labels.active{color:var(--primary-color)}.table-configuration .table-font-size .font-configuration .slider-wrapper{position:relative;width:100%}.table-configuration .table-font-size .font-configuration .custom-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--neutral-100);border-radius:3px;outline:none;transition:background .3s}.table-configuration .table-font-size .font-configuration .custom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--white-100);border:2px solid var(--primary-color);border-radius:50%;cursor:pointer}.table-configuration .table-font-size .font-configuration .range-marker{position:absolute;top:5px;left:2px;width:100%;display:flex;z-index:-10;justify-content:space-between}.table-configuration .table-font-size .font-configuration .range{width:4px;height:16px;background:var(--neutral-100);border-radius:4px}.table-configuration .table-font-size .font-configuration .range.active{visibility:hidden}.table-configuration .table-row-size{display:flex;flex-direction:column;gap:8px}.table-configuration .table-row-size .header-details{font-weight:500}.table-configuration .table-row-size .row-configuration{display:flex;justify-content:space-between;gap:16px}.table-configuration .table-row-size .row-configuration li{list-style-type:none;width:95.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--neutral-100);font-size:14px;font-weight:500;height:53px;border-radius:6px;cursor:pointer}.table-configuration .table-row-size .row-configuration li.active{border:1px solid var(--primary-color);color:var(--primary-color);background:var(--primary-25)}\n"] }]
+                    }, template: "<div class=\"table-configuration\">\n    <div class=\"table-font-size\">\n        <div class=\"header-details\">\n            <span>Font Size</span>\n            <cax-button (click)=\"resetTableConfiguration()\" [label]=\"'Reset to default'\" [severity]=\"'danger'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\n        </div>\n        <div class=\"font-configuration\">\n            <div class=\"font-labels\">\n                <span *ngFor=\"let option of fontSizeOptions\" [class.active]=\"fontValue === option\" [style.fontSize]=\"option + 'px'\"> {{ option }}px </span>\n            </div>\n            <div class=\"slider-wrapper\">\n                <input type=\"range\" min=\"12\" max=\"18\" step=\"2\" [value]=\"fontValue\" (input)=\"onSliderChange($event)\" class=\"custom-slider\" />\n                <div class=\"range-marker\">\n                    <div *ngFor=\"let option of fontSizeOptions\" class=\"range\" [class.active]=\"fontValue === option\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"table-row-size\">\n        <div class=\"header-details\">\n            <span>Row Height</span>\n        </div>\n        <div class=\"row-configuration\">\n            <li [class.active]=\"rowConfiguration === 'sm'\" (click)=\"updateRowHeight('sm')\">Compact</li>\n            <li [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\n            <li [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\n            <li [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\n        </div>\n    </div>\n</div>\n", styles: [".table-configuration{display:flex;flex-direction:column;gap:24px;padding:12px}.table-configuration .table-font-size .header-details{display:flex;align-items:center;justify-content:space-between;font-weight:500}.table-configuration .table-font-size .font-configuration{border:1px solid var(--neutral-100);padding:16px 24px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:8px}.table-configuration .table-font-size .font-configuration .font-labels{display:flex;justify-content:space-between;align-items:center;font-weight:600;width:100%}.table-configuration .table-font-size .font-configuration .font-labels.active{color:var(--primary-color)}.table-configuration .table-font-size .font-configuration .slider-wrapper{position:relative;width:100%}.table-configuration .table-font-size .font-configuration .custom-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--neutral-100);border-radius:3px;outline:none;transition:background .3s}.table-configuration .table-font-size .font-configuration .custom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--white-100);border:2px solid var(--primary-color);border-radius:50%;cursor:pointer}.table-configuration .table-font-size .font-configuration .range-marker{position:absolute;top:5px;left:2px;width:100%;display:flex;z-index:-10;justify-content:space-between}.table-configuration .table-font-size .font-configuration .range{width:4px;height:16px;background:var(--neutral-100);border-radius:4px}.table-configuration .table-font-size .font-configuration .range.active{visibility:hidden}.table-configuration .table-row-size{display:flex;flex-direction:column;gap:8px}.table-configuration .table-row-size .header-details{font-weight:500}.table-configuration .table-row-size .row-configuration{display:flex;justify-content:space-between;gap:16px}.table-configuration .table-row-size .row-configuration li{list-style-type:none;width:95.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--neutral-100);font-size:14px;font-weight:500;height:53px;border-radius:6px;cursor:pointer}.table-configuration .table-row-size .row-configuration li.active{border:1px solid var(--primary-color);color:var(--primary-color);background:var(--primary-25)}\n"] }]
         }], propDecorators: { rowHeightChange: [{
                 type: Output
             }], fontSizeChange: [{

package/fesm2022/cax-design-system-tableconfiguration.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-tableconfiguration.mjs","sources":["../../src/app/components/tableconfiguration/tableconfiguration.ts","../../src/app/components/tableconfiguration/tableconfiguration.html","../../src/app/components/tableconfiguration/tableconfiguration.module.ts","../../src/app/components/tableconfiguration/cax-design-system-tableconfiguration.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';\nimport { ButtonModule } from 'cax-design-system/button';\n\n@Component({\n    selector: 'cax-tableconfiguration',\n    templateUrl: './tableconfiguration.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./tableconfiguration.scss'],\n    imports: [ButtonModule, CommonModule],\n    standalone: true,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Tableconfiguration {\n    fontConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    rowConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    fontSizeOptions = [12, 14, 16, 18];\n    fontValue = 14;\n\n    @Output() rowHeightChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n    @Output() fontSizeChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n\n    updateRowHeight(size: 'sm' | 'md' | 'lg' | 'xl') {\n        this.rowConfiguration = size;\n        this.rowHeightChange.emit(this.rowConfiguration);\n    }\n\n    resetTableConfiguration() {\n        this.fontValue = 14;\n        this.fontConfiguration = 'md';\n        this.rowConfiguration = 'md';\n        this.fontSizeChange.emit(this.fontConfiguration);\n        this.rowHeightChange.emit(this.rowConfiguration);\n    }\n\n    onSliderChange(event: Event) {\n        const newValue = Number((event.target as HTMLInputElement).value);\n        this.fontValue = newValue;\n        switch (this.fontValue) {\n            case 12:\n                this.fontConfiguration = 'sm';\n                break;\n            case 14:\n                this.fontConfiguration = 'md';\n                break;\n            case 16:\n                this.fontConfiguration = 'lg';\n                break;\n            case 18:\n                this.fontConfiguration = 'xl';\n                break;\n            default:\n                this.fontConfiguration = 'md';\n                break;\n        }\n        this.fontSizeChange.emit(this.fontConfiguration);\n    }\n}\n","<div class=\"table-configuration\">\r\n    <div class=\"table-font-size\">\r\n        <div class=\"header-details\">\r\n            <span>Font Size</span>\r\n            <cax-button (click)=\"resetTableConfiguration()\" [label]=\"'Reset to default'\" [severity]=\"'danger'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\r\n        </div>\r\n        <div class=\"font-configuration\">\r\n            <div class=\"font-labels\">\r\n                <span *ngFor=\"let option of fontSizeOptions\" [class.active]=\"fontValue === option\" [style.fontSize]=\"option + 'px'\"> {{ option }}px </span>\r\n            </div>\r\n            <div class=\"slider-wrapper\">\r\n                <input type=\"range\" min=\"12\" max=\"18\" step=\"2\" [value]=\"fontValue\" (input)=\"onSliderChange($event)\" class=\"custom-slider\" />\r\n                <div class=\"range-marker\">\r\n                    <div *ngFor=\"let option of fontSizeOptions\" class=\"range\" [class.active]=\"fontValue === option\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"table-row-size\">\r\n        <div class=\"header-details\">\r\n            <span>Row Height</span>\r\n        </div>\r\n        <div class=\"row-configuration\">\r\n            <li [class.active]=\"rowConfiguration === 'sm'\" (click)=\"updateRowHeight('sm')\">Compact</li>\r\n            <li [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\r\n            <li [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\r\n            <li [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\r\n        </div>\r\n    </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\nimport { Tableconfiguration } from './tableconfiguration';\n\n@NgModule({\n    imports: [Tableconfiguration],\n    exports: [Tableconfiguration]\n})\nexport class TableconfigurationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;MAgBa,kBAAkB,CAAA;IAC3B,iBAAiB,GAA8B,IAAI,CAAC;IACpD,gBAAgB,GAA8B,IAAI,CAAC;IACnD,eAAe,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACnC,SAAS,GAAG,EAAE,CAAC;AAEL,IAAA,eAAe,GAA4C,IAAI,YAAY,EAA6B,CAAC;AACzG,IAAA,cAAc,GAA4C,IAAI,YAAY,EAA6B,CAAC;AAElH,IAAA,eAAe,CAAC,IAA+B,EAAA;AAC3C,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACpD;IAED,uBAAuB,GAAA;AACnB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;AACpB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;AAC9B,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACjD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACpD;AAED,IAAA,cAAc,CAAC,KAAY,EAAA;QACvB,MAAM,QAAQ,GAAG,MAAM,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;AAClE,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;AAC1B,QAAA,QAAQ,IAAI,CAAC,SAAS;AAClB,YAAA,KAAK,EAAE;AACH,gBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;gBAC9B,MAAM;AACV,YAAA,KAAK,EAAE;AACH,gBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;gBAC9B,MAAM;AACV,YAAA,KAAK,EAAE;AACH,gBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;gBAC9B,MAAM;AACV,YAAA,KAAK,EAAE;AACH,gBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;gBAC9B,MAAM;AACV,YAAA;AACI,gBAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;gBAC9B,MAAM;SACb;QACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACpD;uGA3CQ,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EChB/B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,4tDA8BA,EDpBc,MAAA,EAAA,CAAA,wwEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,wZAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAM3B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAZ9B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wBAAwB,mBAEjB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAE5B,OAAA,EAAA,CAAC,YAAY,EAAE,YAAY,CAAC,EAAA,UAAA,EACzB,IAAI,EACV,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,aAAa;AACvB,qBAAA,EAAA,QAAA,EAAA,4tDAAA,EAAA,MAAA,EAAA,CAAA,wwEAAA,CAAA,EAAA,CAAA;8BAQS,eAAe,EAAA,CAAA;sBAAxB,MAAM;gBACG,cAAc,EAAA,CAAA;sBAAvB,MAAM;;;MEhBE,wBAAwB,CAAA;uGAAxB,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;wGAAxB,wBAAwB,EAAA,OAAA,EAAA,CAHvB,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAClB,kBAAkB,CAAA,EAAA,CAAA,CAAA;AAEnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,YAHvB,kBAAkB,CAAA,EAAA,CAAA,CAAA;;2FAGnB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAJpC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,OAAO,EAAE,CAAC,kBAAkB,CAAC;AAChC,iBAAA,CAAA;;;ACND;;AAEG;;;;"}
+{"version":3,"file":"cax-design-system-tableconfiguration.mjs","sources":["../../src/app/components/tableconfiguration/tableconfiguration.ts","../../src/app/components/tableconfiguration/tableconfiguration.html","../../src/app/components/tableconfiguration/tableconfiguration.module.ts","../../src/app/components/tableconfiguration/cax-design-system-tableconfiguration.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';\nimport { ButtonModule } from 'cax-design-system/button';\n\n@Component({\n    selector: 'cax-tableconfiguration',\n    templateUrl: './tableconfiguration.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./tableconfiguration.scss'],\n    imports: [ButtonModule, CommonModule],\n    standalone: true,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Tableconfiguration {\n    fontConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    rowConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    fontSizeOptions = [12, 14, 16, 18];\n    fontValue = 14;\n\n    @Output() rowHeightChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n    @Output() fontSizeChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n\n    updateRowHeight(size: 'sm' | 'md' | 'lg' | 'xl') {\n        this.rowConfiguration = size;\n        this.rowHeightChange.emit(this.rowConfiguration);\n    }\n\n    resetTableConfiguration() {\n        this.fontValue = 14;\n        this.fontConfiguration = 'md';\n        this.rowConfiguration = 'md';\n        this.fontSizeChange.emit(this.fontConfiguration);\n        this.rowHeightChange.emit(this.rowConfiguration);\n    }\n\n    onSliderChange(event: Event) {\n        const newValue = Number((event.target as HTMLInputElement).value);\n        this.fontValue = newValue;\n        switch (this.fontValue) {\n            case 12:\n                this.fontConfiguration = 'sm';\n                break;\n            case 14:\n                this.fontConfiguration = 'md';\n                break;\n            case 16:\n                this.fontConfiguration = 'lg';\n                break;\n            case 18:\n                this.fontConfiguration = 'xl';\n                break;\n            default:\n                this.fontConfiguration = 'md';\n                break;\n        }\n        this.fontSizeChange.emit(this.fontConfiguration);\n    }\n}\n","<div class=\"table-configuration\">\n    <div class=\"table-font-size\">\n        <div class=\"header-details\">\n            <span>Font Size</span>\n            <cax-button (click)=\"resetTableConfiguration()\" [label]=\"'Reset to default'\" [severity]=\"'danger'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\n        </div>\n        <div class=\"font-configuration\">\n            <div class=\"font-labels\">\n                <span *ngFor=\"let option of fontSizeOptions\" [class.active]=\"fontValue === option\" [style.fontSize]=\"option + 'px'\"> {{ option }}px </span>\n            </div>\n            <div class=\"slider-wrapper\">\n                <input type=\"range\" min=\"12\" max=\"18\" step=\"2\" [value]=\"fontValue\" (input)=\"onSliderChange($event)\" class=\"custom-slider\" />\n                <div class=\"range-marker\">\n                    <div *ngFor=\"let option of fontSizeOptions\" class=\"range\" [class.active]=\"fontValue === option\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"table-row-size\">\n        <div class=\"header-details\">\n            <span>Row Height</span>\n        </div>\n        <div class=\"row-configuration\">\n            <li [class.active]=\"rowConfiguration === 'sm'\" (click)=\"updateRowHeight('sm')\">Compact</li>\n            <li [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\n            <li [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\n            <li [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\n        </div>\n    </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { Tableconfiguration } from './tableconfiguration';\n\n@NgModule({\n    imports: [Tableconfiguration],\n    exports: [Tableconfiguration]\n})\nexport class TableconfigurationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -224,13 +224,13 @@ class TabPanel {
         this.view = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: TabPanel, 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: TabPanel, 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: "18.2.9", ngImport: i0, type: TabPanel, decorators: [{
             type: Component,
             args: [{ selector: 'cax-tabPanel', host: {
                         class: 'cax-element'
-                    }, 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" }]
+                    }, 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)]
@@ -827,13 +827,13 @@ class TabView {
         content.scrollLeft = pos >= lastPos ? lastPos : pos;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: TabView, 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: TabView, 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'\">\n    <div #elementToObserve class=\"cax-tabview-nav-container\" *ngIf=\"mode == 'line'\" [ngClass]=\"fullMode ? 'block-mode' : 'flex-mode'\">\n        <button\n            *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\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 role=\"presentation\" [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled }\" [attr.data-cax-disabled]=\"tab.disabled\" [ngStyle]=\"tab.headerStyle\" [class]=\"tab.headerStyleClass\"\n                    [class.full-mode]=\"fullMode\" [class.half-mode]=\"!fullMode\" *ngIf=\"!tab.closed\">\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 || !tab.selected ? '-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\">{{ 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=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\n                                <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\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 Buttons -->\n        <div class=\"cax-tabview-action-buttons\" *ngIf=\"actionButton?.length && !fullMode\">\n            <ng-container *ngFor=\"let button of actionButton\" >\n                <div class=\"cax-tabview-separator\"></div>\n                <button type=\"button\" caxButton \n                class=\"cax-tabview-extra-btn\" \n                [label]=\"button.label\"\n                [severity]=\"button.actionButtonSeverity\"\n                [link]=\"button.actionButtonLink\"\n                [icon]=\"button.actionButtonIcon\"\n                [disabled]=\"button.actionButtonDisabled\"\n                [outlined]=\"button.actionButtonOutlined\"\n                [rounded]=\"button.actionButtonRounded\"\n                [size]=\"button.actionButtonSize\"\n                [loading]=\"button.actionButtonLoading\"\n                (click)=\"button.action()\">\n            </button>\n            </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 && autoHideButtons\"\n            #prevBtn\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\">\n            <span class=\"cax-arrow-buttons\">\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>\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>\n            </span>\n            <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\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 }\"\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 || !tab.selected ? '-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\">{{ 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=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\n                                    <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\n                                </ng-container>\n                            </a>\n                        </li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\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-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>", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabView, decorators: [{
             type: Component,
             args: [{ selector: 'cax-tabView', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 [ngClass]=\"{ 'cax-tabview cax-component': true, 'cax-tabview-scrollable': scrollable }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'tabview'\">\n    <div #elementToObserve class=\"cax-tabview-nav-container\" *ngIf=\"mode == 'line'\" [ngClass]=\"fullMode ? 'block-mode' : 'flex-mode'\">\n        <button\n            *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\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 role=\"presentation\" [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled }\" [attr.data-cax-disabled]=\"tab.disabled\" [ngStyle]=\"tab.headerStyle\" [class]=\"tab.headerStyleClass\"\n                    [class.full-mode]=\"fullMode\" [class.half-mode]=\"!fullMode\" *ngIf=\"!tab.closed\">\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 || !tab.selected ? '-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\">{{ 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=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\n                                <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\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 Buttons -->\n        <div class=\"cax-tabview-action-buttons\" *ngIf=\"actionButton?.length && !fullMode\">\n            <ng-container *ngFor=\"let button of actionButton\" >\n                <div class=\"cax-tabview-separator\"></div>\n                <button type=\"button\" caxButton \n                class=\"cax-tabview-extra-btn\" \n                [label]=\"button.label\"\n                [severity]=\"button.actionButtonSeverity\"\n                [link]=\"button.actionButtonLink\"\n                [icon]=\"button.actionButtonIcon\"\n                [disabled]=\"button.actionButtonDisabled\"\n                [outlined]=\"button.actionButtonOutlined\"\n                [rounded]=\"button.actionButtonRounded\"\n                [size]=\"button.actionButtonSize\"\n                [loading]=\"button.actionButtonLoading\"\n                (click)=\"button.action()\">\n            </button>\n            </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 && autoHideButtons\"\n            #prevBtn\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\">\n            <span class=\"cax-arrow-buttons\">\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>\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>\n            </span>\n            <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\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 }\"\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 || !tab.selected ? '-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\">{{ 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=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\n                                    <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\n                                </ng-container>\n                            </a>\n                        </li>\n                    </ng-template>\n                </ul>\n            </div>\n        </div>\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-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>", 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]