cps-ui-kit 21.14.0 → 21.15.0

package/fesm2022/cps-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, input, computed, ElementRef, PLATFORM_ID, SecurityContext, Directive, Pipe, signal, Injectable, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Self, Optional, HostBinding, booleanAttribute, ChangeDetectorRef, ViewChildren, TemplateRef, ContentChildren, Host, HostListener, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf } from '@angular/core';
+import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, input, computed, ElementRef, PLATFORM_ID, SecurityContext, Directive, Pipe, signal, Injectable, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Self, Optional, HostBinding, booleanAttribute, ChangeDetectorRef, ViewChildren, TemplateRef, viewChildren, afterRenderEffect, ContentChildren, Host, HostListener, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { Validators, FormsModule, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { Subject, takeUntil, debounceTime, distinctUntilChanged, take, catchError, of, Subscription, fromEvent } from 'rxjs';
@@ -1033,6 +1033,17 @@ class CpsFocusService {
     isKeyboard() {
         return this.lastInput() === 'keyboard';
     }
+    /**
+     * Suppresses the focus-visible ring on `el` for its next focus event.
+     *
+     * Adds `suppress-focus-visible` to the element and removes it automatically
+     * on the next `blur`. Call from a `mousedown` handler to prevent the ring
+     * from appearing when the browser moves focus to the element via pointer.
+     */
+    suppressNextFocusRing(el) {
+        el.classList.add('suppress-focus-visible');
+        el.addEventListener('blur', () => el.classList.remove('suppress-focus-visible'), { once: true });
+    }
     /**
      * Focuses `el`, conditionally suppressing the focus-visible ring.
      *
@@ -1042,8 +1053,7 @@ class CpsFocusService {
      */
     focusElement(el, showFocusRing) {
         if (!showFocusRing) {
-            el.classList.add('suppress-focus-visible');
-            el.addEventListener('blur', () => el.classList.remove('suppress-focus-visible'), { once: true });
+            this.suppressNextFocusRing(el);
         }
         el.focus();
     }
@@ -2227,8 +2237,10 @@ class CpsAutocompleteComponent {
             loadChanges.previousValue) {
             this._toggleOptions(true);
         }
-        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsAutocompleteComponent: unlabeled autocomplete component must have an ariaLabel for accessibility.');
+        if (changes.label || changes.ariaLabel) {
+            if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+                console.error('CpsAutocompleteComponent: unlabeled autocomplete component must have an ariaLabel for accessibility.');
+            }
         }
     }
     ngAfterViewInit() {
@@ -3058,13 +3070,17 @@ class CpsButtonToggleComponent {
             this._setEqualWidths();
         }
     }
-    ngOnChanges() {
-        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsButtonToggleComponent: unlabeled button toggle component must have an ariaLabel for accessibility.');
+    ngOnChanges(changes) {
+        if (changes.label || changes.ariaLabel) {
+            if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+                console.error('CpsButtonToggleComponent: unlabeled button toggle component must have an ariaLabel for accessibility.');
+            }
         }
-        const hasInaccessibleOption = this.options.some((opt) => !opt.label?.trim() && !opt.ariaLabel?.trim());
-        if (hasInaccessibleOption) {
-            console.error('CpsButtonToggleComponent: each unlabeled option must have an ariaLabel for accessibility.');
+        if (changes.options) {
+            const hasInaccessibleOption = this.options.some((opt) => !opt.label?.trim() && !opt.ariaLabel?.trim());
+            if (hasInaccessibleOption) {
+                console.error('CpsButtonToggleComponent: each unlabeled option must have an ariaLabel for accessibility.');
+            }
         }
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -3285,7 +3301,7 @@ class CpsButtonComponent {
         this.classesList = [];
         this.enterActive = false;
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         this.buttonColor = getCSSColor(this.color, this.document);
         this.borderRadius = convertSize(this.borderRadius);
         this.textColor =
@@ -3295,8 +3311,10 @@ class CpsButtonComponent {
         if (this.disabled || this.loading) {
             this.enterActive = false;
         }
-        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsButtonComponent: icon-only or unlabeled button must have an ariaLabel for accessibility.');
+        if (changes.label || changes.ariaLabel) {
+            if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+                console.error('CpsButtonComponent: icon-only or unlabeled button must have an ariaLabel for accessibility.');
+            }
         }
         this.setClasses();
     }
@@ -3512,9 +3530,11 @@ class CpsCheckboxComponent {
     ngOnInit() {
         this.iconColor = getCSSColor(this.iconColor, this.document);
     }
-    ngOnChanges() {
-        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsCheckboxComponent: icon-only or unlabeled checkbox must have an ariaLabel for accessibility.');
+    ngOnChanges(changes) {
+        if (changes.label || changes.ariaLabel) {
+            if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+                console.error('CpsCheckboxComponent: icon-only or unlabeled checkbox must have an ariaLabel for accessibility.');
+            }
         }
     }
     registerOnChange(fn) {
@@ -5765,9 +5785,11 @@ class CpsRadioButtonComponent {
         this.focused = new EventEmitter();
         this.inputId = generateUniqueId('cps-radio-button-input');
     }
-    ngOnChanges() {
-        if (!this.option.label?.trim() && !this.option.ariaLabel?.trim()) {
-            console.error('CpsRadioButtonComponent: unlabeled radio button component must have an ariaLabel for accessibility.');
+    ngOnChanges(changes) {
+        if (changes.option) {
+            if (!this.option.label?.trim() && !this.option.ariaLabel?.trim()) {
+                console.error('CpsRadioButtonComponent: unlabeled radio button component must have an ariaLabel for accessibility.');
+            }
         }
     }
     updateValue(event) {
@@ -5918,9 +5940,11 @@ class CpsRadioGroupComponent {
             this._checkErrors();
         });
     }
-    ngOnChanges() {
-        if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.');
+    ngOnChanges(changes) {
+        if (changes.groupLabel || changes.ariaLabel) {
+            if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
+                console.error('CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.');
+            }
         }
     }
     ngOnDestroy() {
@@ -8256,7 +8280,7 @@ class CpsSidebarMenuComponent {
         this.isExpanded = !this.isExpanded;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsSidebarMenuComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, exactRoutes: { classPropertyName: "exactRoutes", publicName: "exactRoutes", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"cvtHeight()\"\n  [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n  <nav\n    class=\"cps-sidebar-menubar\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n    @for (item of items; track item) {\n      @if (item.url) {\n        <a\n          class=\"cps-sidebar-menu-item\"\n          tabindex=\"0\"\n          [routerLink]=\"item.disabled ? null : [item.url]\"\n          routerLinkActive=\"active\"\n          ariaCurrentWhenActive=\"page\"\n          [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n          </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n            {{ item.title }}\n          </span>\n        </a>\n      }\n      @if (!item.url) {\n        <cps-menu\n          #popupMenu\n          [items]=\"item.items || []\"\n          [header]=\"item.title\"\n          [focusOnShow]=\"false\"\n          showTransitionOptions=\"0s\"\n          hideTransitionOptions=\"0s\"\n          [withArrow]=\"false\"\n          (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n        </cps-menu>\n        <button\n          type=\"button\"\n          (mouseenter)=\"showMenu($event, popupMenu)\"\n          (mouseleave)=\"leaveMenu($event, popupMenu)\"\n          (focusin)=\"showMenu($event, popupMenu, item)\"\n          (focusout)=\"leaveMenu($event, popupMenu)\"\n          (click)=\"toggleMenu($event, popupMenu, item)\"\n          class=\"cps-sidebar-menu-item menu-trigger\"\n          [class.active]=\"isActive(item)\"\n          [class.menu-open]=\"popupMenu.isVisible()\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-expanded]=\"\n            focusedItemWithMenu === item ? popupMenu.isVisible() : null\n          \"\n          [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n          </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n            {{ item.title }}\n          </span>\n        </button>\n      }\n    }\n  </nav>\n  <button\n    type=\"button\"\n    class=\"expand-area\"\n    (click)=\"toggleSidebar()\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n    [attr.aria-expanded]=\"isExpanded\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\" aria-hidden=\"true\"> </cps-icon>\n  </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .expand-area:focus-visible{position:absolute}:host .cps-sidebar-menu .expand-area:hover,:host .cps-sidebar-menu .expand-area:focus-visible{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:5rem;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:.0625rem solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none;background:none;border-left:none;border-right:none;border-top:none;padding:0;font:inherit}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{inset:.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:.6875rem;line-height:.8125rem;width:5rem;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active):not(.disabled){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-mild)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:2.5rem}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area cps-icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, exactRoutes: { classPropertyName: "exactRoutes", publicName: "exactRoutes", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"cvtHeight()\"\n  [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n  <nav\n    class=\"cps-sidebar-menubar\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n    @for (item of items; track item) {\n      @if (item.url) {\n        <a\n          class=\"cps-sidebar-menu-item\"\n          tabindex=\"0\"\n          [routerLink]=\"item.disabled ? null : [item.url]\"\n          routerLinkActive=\"active\"\n          ariaCurrentWhenActive=\"page\"\n          [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n          </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n            {{ item.title }}\n          </span>\n        </a>\n      }\n      @if (!item.url) {\n        <cps-menu\n          #popupMenu\n          [items]=\"item.items || []\"\n          [header]=\"item.title\"\n          [focusOnShow]=\"false\"\n          showTransitionOptions=\"0s\"\n          hideTransitionOptions=\"0s\"\n          [withArrow]=\"false\"\n          (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n        </cps-menu>\n        <button\n          type=\"button\"\n          (mouseenter)=\"showMenu($event, popupMenu)\"\n          (mouseleave)=\"leaveMenu($event, popupMenu)\"\n          (focusin)=\"showMenu($event, popupMenu, item)\"\n          (focusout)=\"leaveMenu($event, popupMenu)\"\n          (click)=\"toggleMenu($event, popupMenu, item)\"\n          class=\"cps-sidebar-menu-item menu-trigger\"\n          [class.active]=\"isActive(item)\"\n          [class.menu-open]=\"popupMenu.isVisible()\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-expanded]=\"\n            focusedItemWithMenu === item ? popupMenu.isVisible() : null\n          \"\n          [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n          </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n            {{ item.title }}\n          </span>\n        </button>\n      }\n    }\n  </nav>\n  <button\n    type=\"button\"\n    class=\"expand-area\"\n    (click)=\"toggleSidebar()\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n    [attr.aria-expanded]=\"isExpanded\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\" aria-hidden=\"true\"> </cps-icon>\n  </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .expand-area:focus-visible{position:absolute}:host .cps-sidebar-menu .expand-area:hover,:host .cps-sidebar-menu .expand-area:focus-visible{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:5rem;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:.0625rem solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none;background:none;border-left:none;border-right:none;border-top:none;padding:0;font:inherit}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:.6875rem;line-height:.8125rem;width:5rem;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active):not(.disabled){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-mild)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:2.5rem}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area cps-icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
             trigger('onExpand', [
                 state('collapsed', style({
                     marginTop: '0',
@@ -8292,7 +8316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                                 animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
                             ])
                         ])
-                    ], template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"cvtHeight()\"\n  [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n  <nav\n    class=\"cps-sidebar-menubar\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n    @for (item of items; track item) {\n      @if (item.url) {\n        <a\n          class=\"cps-sidebar-menu-item\"\n          tabindex=\"0\"\n          [routerLink]=\"item.disabled ? null : [item.url]\"\n          routerLinkActive=\"active\"\n          ariaCurrentWhenActive=\"page\"\n          [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n          </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n            {{ item.title }}\n          </span>\n        </a>\n      }\n      @if (!item.url) {\n        <cps-menu\n          #popupMenu\n          [items]=\"item.items || []\"\n          [header]=\"item.title\"\n          [focusOnShow]=\"false\"\n          showTransitionOptions=\"0s\"\n          hideTransitionOptions=\"0s\"\n          [withArrow]=\"false\"\n          (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n        </cps-menu>\n        <button\n          type=\"button\"\n          (mouseenter)=\"showMenu($event, popupMenu)\"\n          (mouseleave)=\"leaveMenu($event, popupMenu)\"\n          (focusin)=\"showMenu($event, popupMenu, item)\"\n          (focusout)=\"leaveMenu($event, popupMenu)\"\n          (click)=\"toggleMenu($event, popupMenu, item)\"\n          class=\"cps-sidebar-menu-item menu-trigger\"\n          [class.active]=\"isActive(item)\"\n          [class.menu-open]=\"popupMenu.isVisible()\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-expanded]=\"\n            focusedItemWithMenu === item ? popupMenu.isVisible() : null\n          \"\n          [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n          </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n            {{ item.title }}\n          </span>\n        </button>\n      }\n    }\n  </nav>\n  <button\n    type=\"button\"\n    class=\"expand-area\"\n    (click)=\"toggleSidebar()\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n    [attr.aria-expanded]=\"isExpanded\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\" aria-hidden=\"true\"> </cps-icon>\n  </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .expand-area:focus-visible{position:absolute}:host .cps-sidebar-menu .expand-area:hover,:host .cps-sidebar-menu .expand-area:focus-visible{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:5rem;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:.0625rem solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none;background:none;border-left:none;border-right:none;border-top:none;padding:0;font:inherit}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{inset:.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:.6875rem;line-height:.8125rem;width:5rem;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active):not(.disabled){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-mild)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:2.5rem}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area cps-icon{transform:rotate(180deg)}\n"] }]
+                    ], template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"cvtHeight()\"\n  [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n  <nav\n    class=\"cps-sidebar-menubar\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n    @for (item of items; track item) {\n      @if (item.url) {\n        <a\n          class=\"cps-sidebar-menu-item\"\n          tabindex=\"0\"\n          [routerLink]=\"item.disabled ? null : [item.url]\"\n          routerLinkActive=\"active\"\n          ariaCurrentWhenActive=\"page\"\n          [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n          </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n            {{ item.title }}\n          </span>\n        </a>\n      }\n      @if (!item.url) {\n        <cps-menu\n          #popupMenu\n          [items]=\"item.items || []\"\n          [header]=\"item.title\"\n          [focusOnShow]=\"false\"\n          showTransitionOptions=\"0s\"\n          hideTransitionOptions=\"0s\"\n          [withArrow]=\"false\"\n          (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n        </cps-menu>\n        <button\n          type=\"button\"\n          (mouseenter)=\"showMenu($event, popupMenu)\"\n          (mouseleave)=\"leaveMenu($event, popupMenu)\"\n          (focusin)=\"showMenu($event, popupMenu, item)\"\n          (focusout)=\"leaveMenu($event, popupMenu)\"\n          (click)=\"toggleMenu($event, popupMenu, item)\"\n          class=\"cps-sidebar-menu-item menu-trigger\"\n          [class.active]=\"isActive(item)\"\n          [class.menu-open]=\"popupMenu.isVisible()\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-expanded]=\"\n            focusedItemWithMenu === item ? popupMenu.isVisible() : null\n          \"\n          [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\" aria-hidden=\"true\">\n          </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n            {{ item.title }}\n          </span>\n        </button>\n      }\n    }\n  </nav>\n  <button\n    type=\"button\"\n    class=\"expand-area\"\n    (click)=\"toggleSidebar()\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n    [attr.aria-expanded]=\"isExpanded\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\" aria-hidden=\"true\"> </cps-icon>\n  </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .expand-area:focus-visible{position:absolute}:host .cps-sidebar-menu .expand-area:hover,:host .cps-sidebar-menu .expand-area:focus-visible{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:5rem;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:.0625rem solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none;background:none;border-left:none;border-right:none;border-top:none;padding:0;font:inherit}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:.6875rem;line-height:.8125rem;width:5rem;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active):not(.disabled){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-mild)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:2.5rem}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area cps-icon{transform:rotate(180deg)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { items: [{
                 type: Input
             }], isExpanded: [{
@@ -8442,6 +8466,11 @@ class CpsTabComponent {
          * @group Props
          */
         this.label = '';
+        /**
+         * Aria label for the tab component, used for accessibility, it takes precedence over label.
+         * @group Props
+         */
+        this.ariaLabel = '';
         /**
          * Icon before the label.
          * @group Props
@@ -8484,14 +8513,23 @@ class CpsTabComponent {
         this.badgeTooltip = '';
         this.active = false;
     }
+    ngOnChanges(changes) {
+        if (changes.label || changes.ariaLabel) {
+            if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+                console.error('CpsTabComponent: unlabeled tab component must have an ariaLabel for accessibility.');
+            }
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", ariaLabel: "ariaLabel", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsTabComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'cps-tab', template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n" }]
+            args: [{ imports: [CommonModule], selector: 'cps-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n" }]
         }], propDecorators: { label: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], icon: [{
                 type: Input
             }], disabled: [{
@@ -8544,6 +8582,12 @@ class CpsTabGroupComponent {
          * @group Props
          */
         this.alignment = 'left';
+        /**
+         * When true, tabs activate automatically as focus moves between them via arrow keys.
+         * When false, arrow keys only move focus; press Enter or Space to activate the focused tab.
+         * @group Props
+         */
+        this.autoActivation = true;
         /**
          * Class to apply to the tab content wrapper.
          * @group Props
@@ -8589,10 +8633,18 @@ class CpsTabGroupComponent {
         this.backBtnVisible = false;
         this.forwardBtnVisible = false;
         this.animationState = 'fadeIn';
+        this.tabGroupId = generateUniqueId('cps-tab-group');
         this.windowResize$ = Subscription.EMPTY;
         this.listScroll$ = Subscription.EMPTY;
+        this._tabPanelEls = viewChildren('tabPanel', ...(ngDevMode ? [{ debugName: "_tabPanelEls" }] : /* istanbul ignore next */ []));
+        this.panelTabindex = signal(0, ...(ngDevMode ? [{ debugName: "panelTabindex" }] : /* istanbul ignore next */ []));
         this._currentTabIndex = 0;
         this._previousTabIndex = 0;
+        this._focusService = inject(CpsFocusService);
+        afterRenderEffect(() => {
+            const activeEl = this._tabPanelEls()[this._currentTabIndex]?.nativeElement;
+            this.panelTabindex.set(activeEl && this._hasFocusableIn(activeEl) ? -1 : 0);
+        });
     }
     ngOnInit() {
         this.tabsBackground = getCSSColor(this.tabsBackground, this.document);
@@ -8623,16 +8675,141 @@ class CpsTabGroupComponent {
     get selectedTab() {
         return this.tabs.find((t) => t.active);
     }
+    getTabId(index) {
+        return `${this.tabGroupId}-tab-${index}`;
+    }
+    getPanelId(index) {
+        return `${this.tabGroupId}-panel-${index}`;
+    }
+    getTabFocusOrderTabIndex(tabIndex) {
+        const _tabs = this.tabs.toArray();
+        const activeTab = _tabs[this._currentTabIndex];
+        if (!activeTab?.disabled) {
+            return tabIndex === this._currentTabIndex ? 0 : -1;
+        }
+        // Edge case: active tab is disabled - move focus to the first non-disabled tab
+        const firstEnabled = _tabs.findIndex((t) => !t.disabled);
+        return tabIndex === firstEnabled ? 0 : -1;
+    }
+    getTabAriaLabel(tab) {
+        const label = tab.ariaLabel || tab.label;
+        const badgeValue = tab.badgeValue.trim();
+        if (!badgeValue) {
+            return label || null;
+        }
+        const badgeTooltip = tab.badgeTooltip.trim();
+        return `${label}, Badge: ${badgeValue}${badgeTooltip ? `, ${badgeTooltip}` : ''}`;
+    }
     onTabClick(index) {
+        if (index === this.selectedIndex)
+            return;
         this.selectedIndex = index;
         this.selectTab();
     }
+    onMouseDown(event) {
+        this._focusService.suppressNextFocusRing(event.currentTarget);
+    }
+    onTabKeydown(event, index) {
+        const _tabs = this.tabs.toArray();
+        let targetIndex = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                targetIndex = this._nextEnabledTab(index, 1, _tabs);
+                break;
+            case 'ArrowLeft':
+                targetIndex = this._nextEnabledTab(index, -1, _tabs);
+                break;
+            case 'Home': {
+                const first = _tabs.findIndex((t) => !t.disabled);
+                targetIndex = first !== -1 ? first : null;
+                break;
+            }
+            case 'End': {
+                const last = _tabs.map((t) => !t.disabled).lastIndexOf(true);
+                targetIndex = last !== -1 ? last : null;
+                break;
+            }
+            case 'Enter':
+            case ' ':
+                if (!_tabs[index]?.disabled) {
+                    event.preventDefault();
+                    this.onTabClick(index);
+                }
+                return;
+            default:
+                return;
+        }
+        if (targetIndex == null)
+            return;
+        event.preventDefault();
+        if (this.autoActivation) {
+            this.onTabClick(targetIndex);
+        }
+        const tabEls = Array.from(this.tabsList.nativeElement.querySelectorAll('[role="tab"]'));
+        const targetEl = tabEls[targetIndex];
+        if (targetEl) {
+            this._scrollTabIntoView(targetEl);
+            targetEl.focus({ preventScroll: true });
+        }
+    }
+    _scrollTabIntoView(tabEl) {
+        const list = this.tabsList.nativeElement;
+        const backW = this.backBtn?.nativeElement?.offsetWidth ?? 0;
+        const fwdW = this.forwardBtn?.nativeElement?.offsetWidth ?? 0;
+        const tabStart = tabEl.offsetLeft;
+        const tabEnd = tabStart + tabEl.offsetWidth;
+        const viewStart = list.scrollLeft + backW;
+        const viewEnd = list.scrollLeft + list.clientWidth - fwdW;
+        if (tabStart < viewStart) {
+            list.scrollLeft = tabStart - backW;
+        }
+        else if (tabEnd > viewEnd) {
+            list.scrollLeft = tabEnd + fwdW - list.clientWidth;
+        }
+    }
+    _hasFocusableIn(container) {
+        const walker = this.document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+        while (walker.nextNode()) {
+            const el = walker.currentNode;
+            if (el.tabIndex >= 0 && !el.disabled)
+                return true;
+        }
+        return false;
+    }
+    _nextEnabledTab(from, direction, tabs) {
+        const len = tabs.length;
+        if (direction === 1) {
+            for (let i = from + 1; i < len; i++) {
+                if (!tabs[i].disabled)
+                    return i;
+            }
+            for (let i = 0; i < from; i++) {
+                if (!tabs[i].disabled)
+                    return i;
+            }
+        }
+        else {
+            for (let i = from - 1; i >= 0; i--) {
+                if (!tabs[i].disabled)
+                    return i;
+            }
+            for (let i = len - 1; i > from; i--) {
+                if (!tabs[i].disabled)
+                    return i;
+            }
+        }
+        return null;
+    }
     selectTab(silent = false) {
         const _tabs = this.tabs.toArray();
-        const currentSelectedTab = _tabs && _tabs[this._previousTabIndex];
-        currentSelectedTab && (currentSelectedTab.active = false);
-        const newSelectedTab = _tabs && _tabs[this._currentTabIndex];
-        newSelectedTab && (newSelectedTab.active = true);
+        const currentSelectedTab = _tabs[this._previousTabIndex];
+        if (currentSelectedTab) {
+            currentSelectedTab.active = false;
+        }
+        const newSelectedTab = _tabs[this._currentTabIndex];
+        if (newSelectedTab) {
+            newSelectedTab.active = true;
+        }
         if (this._currentTabIndex === this._previousTabIndex) {
             return;
         }
@@ -8710,7 +8887,7 @@ class CpsTabGroupComponent {
         return width;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", alignment: "alignment", contentWrapClass: "contentWrapClass", headerClass: "headerClass", stretched: "stretched", animationType: "animationType", navButtonsBackground: "navButtonsBackground", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-tabs\"\n  [class]=\"headerClass\"\n  [ngClass]=\"{\n    'cps-tabs-subtabs': isSubTabs,\n    'cps-tabs-center-aligned': alignment === 'center',\n    'cps-tabs-right-aligned': alignment === 'right',\n    'cps-tabs-stretched': stretched\n  }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  @if (!backBtnVisible) {\n    <div\n      class=\"nav-btn nav-btn-back\"\n      [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n      #backBtn\n      (click)=\"navBackward()\">\n      <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n    </div>\n  }\n  <ul #tabsList class=\"cps-tabs-list\">\n    @for (tab of tabs; track tab; let tabIndex = $index) {\n      @if (tab.tooltipText) {\n        <li\n          class=\"cps-tab\"\n          (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n          [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n          [cpsTooltip]=\"tab.tooltipText\"\n          tooltipOpenDelay=\"1000\"\n          tooltipCloseDelay=\"0\"\n          tooltipPosition=\"bottom\"\n          [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n          [tooltipPersistent]=\"tab.tooltipPersistent\"\n          [tooltipContentClass]=\"tab.tooltipContentClass\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              tabHeaderTemplate;\n              context: {\n                tab: tab\n              }\n            \"></ng-container>\n        </li>\n      }\n      @if (!tab.tooltipText) {\n        <li\n          class=\"cps-tab\"\n          (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n          [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              tabHeaderTemplate;\n              context: {\n                tab: tab\n              }\n            \"></ng-container>\n        </li>\n      }\n    }\n  </ul>\n  @if (!forwardBtnVisible) {\n    <div\n      class=\"nav-btn nav-btn-forward\"\n      [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n      #forwardBtn\n      (click)=\"navForward()\">\n      <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n    </div>\n  }\n</div>\n<div\n  class=\"cps-tab-content-wrap\"\n  [class]=\"contentWrapClass\"\n  [ngClass]=\"{\n    'cps-tab-content-wrap-subtabs': isSubTabs\n  }\">\n  @for (tab of tabs; track tab) {\n    @if (tab.active) {\n      <div class=\"cps-tab-content\">\n        @if (animationType === 'slide') {\n          <div [@slideInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n            <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n          </div>\n        }\n        @if (animationType === 'fade') {\n          <div [@fadeInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n            <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n  @if (tab.icon) {\n    <cps-icon class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n  }\n  <a class=\"cps-tab-link\">{{ tab.label }}</a>\n  @if (tab.badgeValue) {\n    @if (tab.badgeTooltip) {\n      <div class=\"cps-tab-badge\" [cpsTooltip]=\"tab.badgeTooltip\">\n        <span>{{ tab.badgeValue }}</span>\n      </div>\n    }\n    @if (!tab.badgeTooltip) {\n      <div class=\"cps-tab-badge\">\n        <span>{{ tab.badgeValue }}</span>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", alignment: "alignment", autoActivation: "autoActivation", contentWrapClass: "contentWrapClass", headerClass: "headerClass", stretched: "stretched", animationType: "animationType", navButtonsBackground: "navButtonsBackground", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "_tabPanelEls", predicate: ["tabPanel"], descendants: true, isSignal: true }, { propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-tabs\"\n  [class]=\"headerClass\"\n  [ngClass]=\"{\n    'cps-tabs-subtabs': isSubTabs,\n    'cps-tabs-center-aligned': alignment === 'center',\n    'cps-tabs-right-aligned': alignment === 'right',\n    'cps-tabs-stretched': stretched\n  }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  @if (!backBtnVisible) {\n    <button\n      type=\"button\"\n      class=\"nav-btn nav-btn-back\"\n      [style.background-color]=\"navButtonsBackground\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      #backBtn\n      (click)=\"navBackward()\">\n      <cps-icon\n        icon=\"chevron-down\"\n        color=\"text-dark\"\n        aria-hidden=\"true\"></cps-icon>\n    </button>\n  }\n  <ul #tabsList class=\"cps-tabs-list\" role=\"tablist\" tabindex=\"-1\">\n    @for (tab of tabs; track tab; let tabIndex = $index) {\n      @if (tab.tooltipText) {\n        <li\n          class=\"cps-tab\"\n          role=\"tab\"\n          [id]=\"getTabId(tabIndex)\"\n          [attr.aria-label]=\"getTabAriaLabel(tab)\"\n          [attr.aria-selected]=\"tab.active\"\n          [attr.aria-disabled]=\"tab.disabled ? true : null\"\n          [attr.tabindex]=\"getTabFocusOrderTabIndex(tabIndex)\"\n          [attr.aria-controls]=\"getPanelId(tabIndex)\"\n          (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n          (mousedown)=\"onMouseDown($event)\"\n          (keydown)=\"onTabKeydown($event, tabIndex)\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\"\n          [cpsTooltip]=\"tab.tooltipText\"\n          tooltipOpenDelay=\"1000\"\n          tooltipCloseDelay=\"0\"\n          tooltipPosition=\"bottom\"\n          [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n          [tooltipPersistent]=\"tab.tooltipPersistent\"\n          [tooltipContentClass]=\"tab.tooltipContentClass\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              tabHeaderTemplate;\n              context: {\n                tab: tab\n              }\n            \"></ng-container>\n        </li>\n      } @else {\n        <li\n          class=\"cps-tab\"\n          role=\"tab\"\n          [id]=\"getTabId(tabIndex)\"\n          [attr.aria-label]=\"getTabAriaLabel(tab)\"\n          [attr.aria-selected]=\"tab.active\"\n          [attr.aria-disabled]=\"tab.disabled ? true : null\"\n          [attr.tabindex]=\"getTabFocusOrderTabIndex(tabIndex)\"\n          [attr.aria-controls]=\"getPanelId(tabIndex)\"\n          (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n          (mousedown)=\"onMouseDown($event)\"\n          (keydown)=\"onTabKeydown($event, tabIndex)\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              tabHeaderTemplate;\n              context: {\n                tab: tab\n              }\n            \"></ng-container>\n        </li>\n      }\n    }\n  </ul>\n  @if (!forwardBtnVisible) {\n    <button\n      type=\"button\"\n      class=\"nav-btn nav-btn-forward\"\n      [style.background-color]=\"navButtonsBackground\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      #forwardBtn\n      (click)=\"navForward()\">\n      <cps-icon\n        icon=\"chevron-down\"\n        color=\"text-dark\"\n        aria-hidden=\"true\"></cps-icon>\n    </button>\n  }\n</div>\n<div\n  class=\"cps-tab-content-wrap\"\n  [class]=\"contentWrapClass\"\n  [ngClass]=\"{\n    'cps-tab-content-wrap-subtabs': isSubTabs\n  }\">\n  @for (tab of tabs; track tab; let panelIndex = $index) {\n    <div\n      #tabPanel\n      class=\"cps-tab-content\"\n      role=\"tabpanel\"\n      [id]=\"getPanelId(panelIndex)\"\n      [attr.aria-labelledby]=\"getTabId(panelIndex)\"\n      [attr.tabindex]=\"tab.active ? panelTabindex() : null\"\n      [hidden]=\"!tab.active\"\n      (mousedown)=\"onMouseDown($event)\">\n      @if (tab.active) {\n        @if (animationType === 'slide') {\n          <div [@slideInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n            <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n          </div>\n        }\n        @if (animationType === 'fade') {\n          <div [@fadeInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n            <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n  @if (tab.icon) {\n    <cps-icon class=\"cps-tab-icon\" [icon]=\"tab.icon\" aria-hidden=\"true\">\n    </cps-icon>\n  }\n  <span class=\"cps-tab-link\">{{ tab.label }}</span>\n  @if (tab.badgeValue) {\n    @if (tab.badgeTooltip) {\n      <div\n        class=\"cps-tab-badge\"\n        [cpsTooltip]=\"tab.badgeTooltip\"\n        aria-hidden=\"true\">\n        <span>{{ tab.badgeValue }}</span>\n      </div>\n    } @else {\n      <div class=\"cps-tab-badge\" aria-hidden=\"true\">\n        <span>{{ tab.badgeValue }}</span>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:2rem;cursor:pointer;position:absolute;height:100%;border:none;padding:0;background:transparent;z-index:1}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:.125rem 0 .125rem -.0625rem #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-.125rem 0 .125rem -.0625rem #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:9.375rem;padding:0 1.5rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:.9375rem;line-height:1.25rem;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:.1875rem solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-mild)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible{outline:none;position:relative}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:before{inset:.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible.suppress-focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:.625rem;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:1.25rem;padding:0 .1875rem;height:1.25rem;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:.75rem;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible{outline:none;position:relative}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible.suppress-focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:.0625rem solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:.1875rem solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:.1875rem solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled),:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:focus-visible:not(:active,.active,.disabled){border-bottom:.1875rem solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:.1875rem solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:2.0625rem;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled),:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:focus-visible:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:6.25rem;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content[hidden]{display:none!important}:host .cps-tab-content-wrap .cps-tab-content:focus-visible{outline:none;position:relative}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:before,:host .cps-tab-content-wrap .cps-tab-content:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:before{inset:.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tab-content-wrap .cps-tab-content:focus-visible.suppress-focus-visible:before,:host .cps-tab-content-wrap .cps-tab-content:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }], animations: [
             trigger('slideInOut', [
                 state('slideLeft', style({ transform: 'translateX(0)' })),
                 state('slideRight', style({ transform: 'translateX(0)' })),
@@ -8766,7 +8943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                             ]),
                             transition('void => *', animate(0))
                         ])
-                    ], template: "<div\n  class=\"cps-tabs\"\n  [class]=\"headerClass\"\n  [ngClass]=\"{\n    'cps-tabs-subtabs': isSubTabs,\n    'cps-tabs-center-aligned': alignment === 'center',\n    'cps-tabs-right-aligned': alignment === 'right',\n    'cps-tabs-stretched': stretched\n  }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  @if (!backBtnVisible) {\n    <div\n      class=\"nav-btn nav-btn-back\"\n      [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n      #backBtn\n      (click)=\"navBackward()\">\n      <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n    </div>\n  }\n  <ul #tabsList class=\"cps-tabs-list\">\n    @for (tab of tabs; track tab; let tabIndex = $index) {\n      @if (tab.tooltipText) {\n        <li\n          class=\"cps-tab\"\n          (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n          [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n          [cpsTooltip]=\"tab.tooltipText\"\n          tooltipOpenDelay=\"1000\"\n          tooltipCloseDelay=\"0\"\n          tooltipPosition=\"bottom\"\n          [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n          [tooltipPersistent]=\"tab.tooltipPersistent\"\n          [tooltipContentClass]=\"tab.tooltipContentClass\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              tabHeaderTemplate;\n              context: {\n                tab: tab\n              }\n            \"></ng-container>\n        </li>\n      }\n      @if (!tab.tooltipText) {\n        <li\n          class=\"cps-tab\"\n          (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n          [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              tabHeaderTemplate;\n              context: {\n                tab: tab\n              }\n            \"></ng-container>\n        </li>\n      }\n    }\n  </ul>\n  @if (!forwardBtnVisible) {\n    <div\n      class=\"nav-btn nav-btn-forward\"\n      [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n      #forwardBtn\n      (click)=\"navForward()\">\n      <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n    </div>\n  }\n</div>\n<div\n  class=\"cps-tab-content-wrap\"\n  [class]=\"contentWrapClass\"\n  [ngClass]=\"{\n    'cps-tab-content-wrap-subtabs': isSubTabs\n  }\">\n  @for (tab of tabs; track tab) {\n    @if (tab.active) {\n      <div class=\"cps-tab-content\">\n        @if (animationType === 'slide') {\n          <div [@slideInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n            <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n          </div>\n        }\n        @if (animationType === 'fade') {\n          <div [@fadeInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n            <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n          </div>\n        }\n      </div>\n    }\n  }\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n  @if (tab.icon) {\n    <cps-icon class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n  }\n  <a class=\"cps-tab-link\">{{ tab.label }}</a>\n  @if (tab.badgeValue) {\n    @if (tab.badgeTooltip) {\n      <div class=\"cps-tab-badge\" [cpsTooltip]=\"tab.badgeTooltip\">\n        <span>{{ tab.badgeValue }}</span>\n      </div>\n    }\n    @if (!tab.badgeTooltip) {\n      <div class=\"cps-tab-badge\">\n        <span>{{ tab.badgeValue }}</span>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"] }]
+                    ], template: "<div\n  class=\"cps-tabs\"\n  [class]=\"headerClass\"\n  [ngClass]=\"{\n    'cps-tabs-subtabs': isSubTabs,\n    'cps-tabs-center-aligned': alignment === 'center',\n    'cps-tabs-right-aligned': alignment === 'right',\n    'cps-tabs-stretched': stretched\n  }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  @if (!backBtnVisible) {\n    <button\n      type=\"button\"\n      class=\"nav-btn nav-btn-back\"\n      [style.background-color]=\"navButtonsBackground\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      #backBtn\n      (click)=\"navBackward()\">\n      <cps-icon\n        icon=\"chevron-down\"\n        color=\"text-dark\"\n        aria-hidden=\"true\"></cps-icon>\n    </button>\n  }\n  <ul #tabsList class=\"cps-tabs-list\" role=\"tablist\" tabindex=\"-1\">\n    @for (tab of tabs; track tab; let tabIndex = $index) {\n      @if (tab.tooltipText) {\n        <li\n          class=\"cps-tab\"\n          role=\"tab\"\n          [id]=\"getTabId(tabIndex)\"\n          [attr.aria-label]=\"getTabAriaLabel(tab)\"\n          [attr.aria-selected]=\"tab.active\"\n          [attr.aria-disabled]=\"tab.disabled ? true : null\"\n          [attr.tabindex]=\"getTabFocusOrderTabIndex(tabIndex)\"\n          [attr.aria-controls]=\"getPanelId(tabIndex)\"\n          (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n          (mousedown)=\"onMouseDown($event)\"\n          (keydown)=\"onTabKeydown($event, tabIndex)\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\"\n          [cpsTooltip]=\"tab.tooltipText\"\n          tooltipOpenDelay=\"1000\"\n          tooltipCloseDelay=\"0\"\n          tooltipPosition=\"bottom\"\n          [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n          [tooltipPersistent]=\"tab.tooltipPersistent\"\n          [tooltipContentClass]=\"tab.tooltipContentClass\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              tabHeaderTemplate;\n              context: {\n                tab: tab\n              }\n            \"></ng-container>\n        </li>\n      } @else {\n        <li\n          class=\"cps-tab\"\n          role=\"tab\"\n          [id]=\"getTabId(tabIndex)\"\n          [attr.aria-label]=\"getTabAriaLabel(tab)\"\n          [attr.aria-selected]=\"tab.active\"\n          [attr.aria-disabled]=\"tab.disabled ? true : null\"\n          [attr.tabindex]=\"getTabFocusOrderTabIndex(tabIndex)\"\n          [attr.aria-controls]=\"getPanelId(tabIndex)\"\n          (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n          (mousedown)=\"onMouseDown($event)\"\n          (keydown)=\"onTabKeydown($event, tabIndex)\"\n          [class.active]=\"tab.active\"\n          [class.disabled]=\"tab.disabled\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              tabHeaderTemplate;\n              context: {\n                tab: tab\n              }\n            \"></ng-container>\n        </li>\n      }\n    }\n  </ul>\n  @if (!forwardBtnVisible) {\n    <button\n      type=\"button\"\n      class=\"nav-btn nav-btn-forward\"\n      [style.background-color]=\"navButtonsBackground\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      #forwardBtn\n      (click)=\"navForward()\">\n      <cps-icon\n        icon=\"chevron-down\"\n        color=\"text-dark\"\n        aria-hidden=\"true\"></cps-icon>\n    </button>\n  }\n</div>\n<div\n  class=\"cps-tab-content-wrap\"\n  [class]=\"contentWrapClass\"\n  [ngClass]=\"{\n    'cps-tab-content-wrap-subtabs': isSubTabs\n  }\">\n  @for (tab of tabs; track tab; let panelIndex = $index) {\n    <div\n      #tabPanel\n      class=\"cps-tab-content\"\n      role=\"tabpanel\"\n      [id]=\"getPanelId(panelIndex)\"\n      [attr.aria-labelledby]=\"getTabId(panelIndex)\"\n      [attr.tabindex]=\"tab.active ? panelTabindex() : null\"\n      [hidden]=\"!tab.active\"\n      (mousedown)=\"onMouseDown($event)\">\n      @if (tab.active) {\n        @if (animationType === 'slide') {\n          <div [@slideInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n            <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n          </div>\n        }\n        @if (animationType === 'fade') {\n          <div [@fadeInOut]=\"animationState\" class=\"cps-tab-content-inner\">\n            <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n  @if (tab.icon) {\n    <cps-icon class=\"cps-tab-icon\" [icon]=\"tab.icon\" aria-hidden=\"true\">\n    </cps-icon>\n  }\n  <span class=\"cps-tab-link\">{{ tab.label }}</span>\n  @if (tab.badgeValue) {\n    @if (tab.badgeTooltip) {\n      <div\n        class=\"cps-tab-badge\"\n        [cpsTooltip]=\"tab.badgeTooltip\"\n        aria-hidden=\"true\">\n        <span>{{ tab.badgeValue }}</span>\n      </div>\n    } @else {\n      <div class=\"cps-tab-badge\" aria-hidden=\"true\">\n        <span>{{ tab.badgeValue }}</span>\n      </div>\n    }\n  }\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:2rem;cursor:pointer;position:absolute;height:100%;border:none;padding:0;background:transparent;z-index:1}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:.125rem 0 .125rem -.0625rem #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-.125rem 0 .125rem -.0625rem #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:9.375rem;padding:0 1.5rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:.9375rem;line-height:1.25rem;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:.1875rem solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-mild)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible{outline:none;position:relative}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:before{inset:.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible.suppress-focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:.625rem;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:1.25rem;padding:0 .1875rem;height:1.25rem;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:.75rem;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible{outline:none;position:relative}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible.suppress-focus-visible:before,:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:.0625rem solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:.1875rem solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:.1875rem solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled),:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:focus-visible:not(:active,.active,.disabled){border-bottom:.1875rem solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled,.active){border-bottom:.1875rem solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:2.0625rem;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled),:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:focus-visible:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:6.25rem;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content[hidden]{display:none!important}:host .cps-tab-content-wrap .cps-tab-content:focus-visible{outline:none;position:relative}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:before,:host .cps-tab-content-wrap .cps-tab-content:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:before{inset:.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tab-content-wrap .cps-tab-content:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tab-content-wrap .cps-tab-content:focus-visible.suppress-focus-visible:before,:host .cps-tab-content-wrap .cps-tab-content:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -8776,6 +8953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }], alignment: [{
                 type: Input
+            }], autoActivation: [{
+                type: Input
             }], contentWrapClass: [{
                 type: Input
             }], headerClass: [{
@@ -8804,7 +8983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
             }], tabs: [{
                 type: ContentChildren,
                 args: [CpsTabComponent]
-            }] } });
+            }], _tabPanelEls: [{ type: i0.ViewChildren, args: ['tabPanel', { isSignal: true }] }] } });
 
 /* eslint-disable no-unused-vars */
 /**