@testgorilla/tgo-ui 11.22.3 → 12.0.1

package/fesm2022/testgorilla-tgo-ui-components-tabs.mjs

@@ -1,441 +1,850 @@
-import * as i0 from '@angular/core';
-import { input, EventEmitter, signal, effect, untracked, booleanAttribute, ViewChild, Output, Input, HostBinding, Optional, Inject, ChangeDetectionStrategy, Component, inject, TemplateRef, DestroyRef, Directive, NgModule } from '@angular/core';
-import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
-import { NgClass, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
-import { MatTabGroup, MatTab, MatTabLabel, MatTabsModule } from '@angular/material/tabs';
-import { IS_MOBILE_TOKEN, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
-import { IconComponent, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';
-import { SpinnerComponent } from '@testgorilla/tgo-ui/components/spinner';
-import * as i1 from 'rxjs';
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, EventEmitter, HostBinding, Inject, Input, NgModule, Optional, Output, TemplateRef, ViewChild, booleanAttribute, effect, inject, input, signal, untracked } from "@angular/core";
+import { ENTER, SPACE, hasModifierKey } from "@angular/cdk/keycodes";
+import { AsyncPipe, CommonModule, NgClass, NgTemplateOutlet } from "@angular/common";
+import { MatTab, MatTabGroup, MatTabLabel, MatTabsModule } from "@angular/material/tabs";
+import { IS_MOBILE_TOKEN, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import { IconComponent, IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import { SkeletonComponent } from "@testgorilla/tgo-ui/components/skeleton";
+import { SpinnerComponent } from "@testgorilla/tgo-ui/components/spinner";
+import * as i1 from "rxjs";
 const TAB_HEADER_SIZE = {
-    BIG: 'big',
-    MEDIUM: 'medium',
-    SMALL: 'small',
+	BIG: "big",
+	MEDIUM: "medium",
+	SMALL: "small"
 };
-
-class TabsComponent {
-    constructor(defaultAppTheme, isMobile$, cdr) {
-        this.defaultAppTheme = defaultAppTheme;
-        this.isMobile$ = isMobile$;
-        this.cdr = cdr;
-        /**
-         * Color of the Tabs.
-         * Defaults to Test Gorilla primary color.
-         *
-         * @type {string}
-         * @memberof TabsComponent
-         */
-        this.companyColor = '#46A997';
-        /**
-         * Type the Tabs.
-         * Defaults underlined.
-         *
-         * @type {TabsType}
-         * @memberof TabsComponent
-         */
-        this.type = 'underlined';
-        /**
-         * Animation duration when switching tabs
-         *
-         * @type {number}
-         * @memberof TabsComponent
-         */
-        this.animationDuration = 300;
-        /**
-         * Sets the padding for content and header
-         *
-         * @type {number}
-         * @memberof TabsComponent
-         */
-        this.headerContentPadding = '32px';
-        /**
-         * Sets the dynamic height of the tab
-         * @type {boolean}
-         * @memberof TabsComponent
-         */
-        this.dynamicHeight = true;
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof TabsComponent
-         */
-        this.applicationTheme = 'light';
-        this.tabHeaderSize = input(TAB_HEADER_SIZE.BIG, ...(ngDevMode ? [{ debugName: "tabHeaderSize" }] : /* istanbul ignore next */ []));
-        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-        /**
-         * Name of the tab to show. Applied as tabs register, so a tab requested before the
-         * projected `ng-template uiTab` children exist — a deep link, a query param — is still
-         * honoured on first paint, with no need to call `selectTab()` from a lifecycle hook.
-         *
-         * This is a request, not live state: it is applied when the value changes and once more as
-         * soon as the named tab registers, but a later click or a change to the tab list will not
-         * snap the selection back to it. An unknown name is a no-op — while tabs are still
-         * registering every name is unknown, so it cannot warn or throw. Bind a name the consumer
-         * has already validated.
-         *
-         * Applying it does not emit `selectedTab` / `selectedTabIndex` (the consumer supplied the
-         * value, so echoing it back would double-handle it) and does not consult the current tab's
-         * `canLeave` — declarative selection is the consumer's own decision, so it owns any
-         * guarding around the value it binds. User-driven switches still honour `canLeave`.
-         */
-        this.selectedTabName = input(null, ...(ngDevMode ? [{ debugName: "selectedTabName" }] : /* istanbul ignore next */ []));
-        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
-        this.selectedTabIndex = new EventEmitter();
-        this.selectedTab = new EventEmitter();
-        this.tabs = [];
-        this.tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-        this.tabIndexMap = {};
-        // Counter for default ordering when order is not specified
-        this.insertionCounter = 0;
-        this.tabTransitionInProgress = false;
-        this.requestedTabName = null;
-        if (defaultAppTheme) {
-            this.applicationTheme = defaultAppTheme;
-        }
-        effect(() => {
-            const requestedTabName = this.selectedTabName();
-            // Untracked because applying reads `tabIndex`: tracking it would re-run this effect on
-            // every selection change and re-arm the request, snapping the user back to the bound tab.
-            untracked(() => {
-                this.requestedTabName = requestedTabName;
-                this.applyRequestedTabName();
-            });
-        });
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            /* eslint-disable no-underscore-dangle -- overriding MatTabGroup internals (_tabHeader/_handleKeydown/_keyManager/_handleClick) to gate tab transitions */
-            const group = this.tabGroup;
-            const tabHeader = group._tabHeader;
-            tabHeader._handleKeydown = async (event) => {
-                if (hasModifierKey(event) || this.tabTransitionInProgress) {
-                    return;
-                }
-                // eslint-disable-next-line @typescript-eslint/no-deprecated -- KeyboardEvent.keyCode is deprecated in favor of .key; migrating this keyboard-nav handler is behaviour-sensitive and out of scope for this lint pass
-                switch (event.keyCode) {
-                    case ENTER:
-                    case SPACE:
-                        this.tabTransitionInProgress = true;
-                        try {
-                            const tabLabel = event.target.innerText;
-                            const currentTab = this.tabs[this.tabIndex()];
-                            const nextTab = this.tabs.find(tab => tab.tabLabel === tabLabel);
-                            if (!nextTab) {
-                                return;
-                            }
-                            const canLeave = (await currentTab.canLeave?.({ currentTab, nextTab })) ?? true;
-                            if (currentTab.tabName !== nextTab.tabName && canLeave) {
-                                const nextTabIndex = this.tabIndexMap[nextTab.tabName];
-                                this.tabIndex.set(nextTabIndex);
-                                this.selectedTabIndex.emit(nextTabIndex);
-                                this.selectedTab.emit(nextTab);
-                            }
-                        }
-                        finally {
-                            this.tabTransitionInProgress = false;
-                        }
-                        break;
-                    default:
-                        tabHeader._keyManager.onKeydown(event);
-                }
-            };
-            group._handleClick = async (tab, _tabHeader, index) => {
-                if (tab.disabled || index === this.tabIndex() || this.tabTransitionInProgress) {
-                    return;
-                }
-                this.tabTransitionInProgress = true;
-                try {
-                    const currentTab = this.tabs[this.tabIndex()];
-                    const nextTab = this.tabs[index];
-                    const canLeave = (await currentTab.canLeave?.({ currentTab, nextTab })) ?? true;
-                    if (this.tabIndex() !== index && canLeave) {
-                        this.tabIndex.set(index);
-                        this.selectedTabIndex.emit(index);
-                        this.selectedTab.emit(nextTab);
-                    }
-                }
-                finally {
-                    this.tabTransitionInProgress = false;
-                }
-            };
-            /* eslint-enable no-underscore-dangle */
-        });
-    }
-    addTab(tab) {
-        // If no explicit order is provided, use the insertion counter
-        tab.order ??= this.insertionCounter++;
-        const activeTabName = this.activeTabName;
-        // Add the tab and sort the tabs array
-        this.tabs.push(tab);
-        this.sortTabs();
-        // Tabs register from projected children; the looped array mutates outside
-        // this component's own change detection.
-        this.cdr.markForCheck();
-        // Update the index map
-        this.updateTabIndexMap();
-        this.reconcileTabIndex(activeTabName);
-        this.applyRequestedTabName();
-    }
-    sortTabs() {
-        // Sort by the order property (lowest first)
-        this.tabs.sort((a, b) => {
-            const orderA = a.order ?? Infinity;
-            const orderB = b.order ?? Infinity;
-            return orderA - orderB;
-        });
-    }
-    updateTabIndexMap() {
-        // Update the index map after sorting
-        this.tabs.forEach((tab, index) => {
-            this.tabIndexMap[tab.tabName] = index;
-        });
-    }
-    get activeTabName() {
-        return this.tabs[this.tabIndex()]?.tabName;
-    }
-    /**
-     * `tabIndex` stores a position, but the selection it stands for is a tab identity, and
-     * adding, removing or re-ordering tabs shifts positions. Without re-resolving the index
-     * from the name, `tabIndex` keeps pointing at whatever tab now sits at that position —
-     * MatTabGroup re-derives its own selection from the active tab, so the body stays correct
-     * while this component's `aria-selected` and click gating silently drift onto a different
-     * tab. Falls back to clamping when the active tab is the one that went away.
-     */
-    reconcileTabIndex(activeTabName) {
-        const resolvedIndex = activeTabName === undefined ? undefined : this.tabIndexMap[activeTabName];
-        const nextIndex = resolvedIndex ?? Math.min(this.tabIndex(), Math.max(this.tabs.length - 1, 0));
-        if (nextIndex !== this.tabIndex()) {
-            this.tabIndex.set(nextIndex);
-        }
-    }
-    /**
-     * Applies `selectedTabName` once the named tab is known, then clears the request so later
-     * clicks and tab list changes are not overridden by a stale value. Stays armed while the
-     * name is unresolved, because a requested tab can register after the input is set — either
-     * with the rest of a subtree that renders late, or later still if it is behind its own
-     * condition — so `addTab()` retries until it resolves.
-     *
-     * Silent by design — see the doc on `selectedTabName`.
-     */
-    applyRequestedTabName() {
-        if (this.requestedTabName === null) {
-            return;
-        }
-        const index = this.tabIndexMap[this.requestedTabName];
-        if (index === undefined) {
-            return;
-        }
-        this.requestedTabName = null;
-        if (index !== this.tabIndex()) {
-            this.tabIndex.set(index);
-        }
-    }
-    onTabChange(index) {
-        const selectedTab = this.tabs[index];
-        const newIndex = this.tabIndexMap[selectedTab.tabName];
-        if (this.tabIndex() === newIndex) {
-            return;
-        }
-        this.tabIndex.set(newIndex);
-        this.selectedTabIndex.emit(index);
-        this.selectedTab.emit(selectedTab);
-    }
-    selectTab(tabName) {
-        const index = this.tabIndexMap[tabName];
-        if (index !== undefined) {
-            this.tabIndex.set(index);
-            this.selectedTabIndex.emit(index);
-            this.selectedTab.emit(this.tabs[index]);
-        }
-    }
-    indexOf(tabName) {
-        return this.tabIndexMap[tabName] ?? -1;
-    }
-    trackByTabName(index, tab) {
-        return tab.tabName;
-    }
-    removeTab(tabName) {
-        const index = this.tabIndexMap[tabName];
-        if (index !== undefined) {
-            const activeTabName = this.activeTabName;
-            this.tabs.splice(index, 1);
-            delete this.tabIndexMap[tabName];
-            this.updateTabIndexMap();
-            this.reconcileTabIndex(activeTabName);
-            this.cdr.markForCheck();
-        }
-    }
-    updateTab(tabName, tab) {
-        const index = this.tabIndexMap[tabName];
-        if (index !== undefined) {
-            this.tabs[index] = { ...this.tabs[index], ...tab };
-            // Re-sort if the order changed
-            if (tab.order !== undefined) {
-                const activeTabName = this.activeTabName;
-                this.sortTabs();
-                this.updateTabIndexMap();
-                this.reconcileTabIndex(activeTabName);
-            }
-            // Driven by TabDirective effects (projected content) — outside this
-            // component's own change detection, like addTab/removeTab.
-            this.cdr.markForCheck();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TabsComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: TabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { companyColor: { classPropertyName: "companyColor", publicName: "companyColor", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: false, isRequired: false, transformFunction: null }, headerContentPadding: { classPropertyName: "headerContentPadding", publicName: "headerContentPadding", isSignal: false, isRequired: false, transformFunction: (value) => `${value}px` }, dynamicHeight: { classPropertyName: "dynamicHeight", publicName: "dynamicHeight", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, tabHeaderSize: { classPropertyName: "tabHeaderSize", publicName: "tabHeaderSize", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, selectedTabName: { classPropertyName: "selectedTabName", publicName: "selectedTabName", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTabIndex: "selectedTabIndex", selectedTab: "selectedTab" }, host: { properties: { "style.--color": "this.companyColor", "style.--header-content-padding": "this.headerContentPadding" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, static: true }], ngImport: i0, template: "<mat-tab-group\n  #tabGroup\n  headerPosition=\"above\"\n  class=\"tabs-container\"\n  [ngClass]=\"['tabs-type-' + ((isMobile$ | async) ? 'underlined' : type), 'tabs-header-size-' + tabHeaderSize()]\"\n  [class.tabs-container-loading]=\"isLoading()\"\n  [attr.theme]=\"applicationTheme\"\n  [dynamicHeight]=\"dynamicHeight\"\n  [selectedIndex]=\"tabIndex()\"\n  [animationDuration]=\"animationDuration\"\n  (selectedIndexChange)=\"onTabChange($event)\"\n  role=\"tablist\"\n  [attr.data-testid]=\"testId()\"\n>\n  @for (tab of tabs; track trackByTabName(i, tab); let i = $index) {\n    <mat-tab [disabled]=\"tab.disabled ?? false\" [attr.aria-label]=\"tab?.ariaLabel\">\n      <ng-template mat-tab-label>\n        <a\n          data-test-role=\"tab-link\"\n          [attr.data-testid]=\"tab.testId ?? tab.tabName\"\n          class=\"tab-name\"\n          [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n          (click)=\"$event.preventDefault()\"\n          [attr.aria-selected]=\"i === tabIndex()\"\n          [attr.aria-label]=\"\n            tab.tabLabel +\n            (tab.isLabelLoading ? ', ' + ('COMMON.LOADING' | uiTranslate | async) : '') +\n            (i === tabIndex() ? ', ' + ('TABS.SELECTED' | uiTranslate | async) : '')\n          \"\n          role=\"tab\"\n        >\n          @if (isLoading()) {\n            <ui-skeleton\n              [count]=\"1\"\n              [theme]=\"tab.skeletonTheme ?? {}\"\n              [isAiTheme]=\"!!tab.isSkeletonAiTheme\"\n            ></ui-skeleton>\n          } @else {\n            @if (tab?.iconLeft) {\n              <ui-icon\n                color=\"rebrand-black\"\n                [size]=\"'24'\"\n                [tabindex]=\"1\"\n                class=\"left-icon\"\n                [name]=\"tab.iconLeft!\"\n              ></ui-icon>\n            }\n            <span class=\"label\">{{ tab.tabLabel }}</span>\n            @if (tab.isLabelLoading) {\n              <span class=\"label-spinner\" aria-hidden=\"true\">\n                <ui-spinner size=\"small\" [isLoader]=\"false\" [applicationTheme]=\"applicationTheme\"></ui-spinner>\n              </span>\n            }\n            @if (tab?.iconRight) {\n              <ui-icon color=\"rebrand-black\" [size]=\"'24'\" class=\"right-icon\" [name]=\"tab.iconRight!\"></ui-icon>\n            }\n          }\n        </a>\n      </ng-template>\n      <div role=\"tabpanel\" [attr.id]=\"'tabpanel-' + i\" [attr.aria-labelledby]=\"'tab-' + i\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n      </div>\n    </mat-tab>\n  }\n</mat-tab-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .mat-mdc-tab-group,:host .mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: var(--color);--mat-tab-header-active-label-text-color: var(--color);--mat-tab-header-active-ripple-color: transparent;--mat-tab-header-inactive-ripple-color: var(--color);--mat-tab-header-active-focus-label-text-color: var(--color);--mat-tab-header-active-focus-indicator-color: var(--color)}:host ::ng-deep .tabs-type-filled mat-tab-header{border-bottom:unset!important;border-right:1px solid #d3d3d3}:host ::ng-deep mat-tab-group{width:100%;height:100%}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused{position:relative}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused:after{content:\"\";position:absolute;inset:-2px;z-index:10;border-radius:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}::ng-deep .tabs-container .mdc-tab-indicator__content{border-color:#276678!important}::ng-deep .tabs-container .tab-name{text-decoration:none!important;display:flex;justify-content:center;align-content:center;color:#242424;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name .left-icon{margin-right:8px}::ng-deep .tabs-container .tab-name .right-icon{margin-left:8px}::ng-deep .tabs-container .tab-name .label-spinner{display:flex;align-items:center;margin-left:8px}::ng-deep .tabs-container .tab-name .left-icon:focus,::ng-deep .tabs-container .tab-name .right-icon:focus{height:24px;outline:1px dashed #888888}::ng-deep .tabs-container ::ng-deep .mdc-tab{min-width:0;padding:0}::ng-deep .tabs-container ::ng-deep .mdc-tab:hover{background:#f6f6f6}::ng-deep .tabs-container.tabs-type-underlined .tab-name{padding:16px 24px}::ng-deep .tabs-container.tabs-type-underlined .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 #242424,.5px 0 #242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header{padding:0 var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header-pagination-chevron{border-color:#242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mdc-tab{flex-grow:0!important;margin-left:1px}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-big ::ng-deep .mdc-tab{height:64px!important}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-small ::ng-deep .mdc-tab{height:32px!important}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-medium ::ng-deep .mdc-tab{height:56px!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active{background-color:#e9f0f1!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-filled{--mat-tab-header-active-ripple-color: var(--color);display:flex;flex-direction:row}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:var(--header-content-padding) 0}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-label-container{padding:4px;overflow:auto!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-labels{flex-direction:column;padding-top:2px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{flex-grow:0!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__content,::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{width:100%}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{margin:-1px 1px 1px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab--active ::ng-deep .mdc-tab-indicator:after{content:\"\";position:absolute;left:0;top:8px;width:4px;height:32px;border-radius:0 8px 8px 0;background:#276678}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab-indicator__content{display:none}::ng-deep .tabs-container.tabs-type-filled .tab-name{padding:12px var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{position:relative;height:48px!important;min-height:48px!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body-wrapper{width:100%}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:var(--header-content-padding)}@media(max-width:600px){::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:24px}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header{position:relative;padding:0!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-header-pagination-disabled{visibility:hidden!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d3d3d3}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:24px 0}}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light],::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover{background:none!important;border-bottom:2px solid #242424}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover .mdc-tab-indicator,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover .mdc-tab-indicator{display:none}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled{opacity:1}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.4}::ng-deep .mat-mdc-tab-group.tabs-type-filled{--mat-tab-header-active-ripple-color: unset !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled .tab-name{color:#242424}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light],::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active{background-color:#f4f4f4!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active .mdc-tab-indicator:after,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active .mdc-tab-indicator:after{background-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab:hover{background:#fff2fc!important}\n"], dependencies: [{ kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatTabGroup,
-                        NgClass,
-                        MatTab,
-                        MatTabLabel,
-                        SkeletonComponent,
-                        SpinnerComponent,
-                        IconComponent,
-                        NgTemplateOutlet,
-                        AsyncPipe,
-                        UiTranslatePipe,
-                    ], template: "<mat-tab-group\n  #tabGroup\n  headerPosition=\"above\"\n  class=\"tabs-container\"\n  [ngClass]=\"['tabs-type-' + ((isMobile$ | async) ? 'underlined' : type), 'tabs-header-size-' + tabHeaderSize()]\"\n  [class.tabs-container-loading]=\"isLoading()\"\n  [attr.theme]=\"applicationTheme\"\n  [dynamicHeight]=\"dynamicHeight\"\n  [selectedIndex]=\"tabIndex()\"\n  [animationDuration]=\"animationDuration\"\n  (selectedIndexChange)=\"onTabChange($event)\"\n  role=\"tablist\"\n  [attr.data-testid]=\"testId()\"\n>\n  @for (tab of tabs; track trackByTabName(i, tab); let i = $index) {\n    <mat-tab [disabled]=\"tab.disabled ?? false\" [attr.aria-label]=\"tab?.ariaLabel\">\n      <ng-template mat-tab-label>\n        <a\n          data-test-role=\"tab-link\"\n          [attr.data-testid]=\"tab.testId ?? tab.tabName\"\n          class=\"tab-name\"\n          [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n          (click)=\"$event.preventDefault()\"\n          [attr.aria-selected]=\"i === tabIndex()\"\n          [attr.aria-label]=\"\n            tab.tabLabel +\n            (tab.isLabelLoading ? ', ' + ('COMMON.LOADING' | uiTranslate | async) : '') +\n            (i === tabIndex() ? ', ' + ('TABS.SELECTED' | uiTranslate | async) : '')\n          \"\n          role=\"tab\"\n        >\n          @if (isLoading()) {\n            <ui-skeleton\n              [count]=\"1\"\n              [theme]=\"tab.skeletonTheme ?? {}\"\n              [isAiTheme]=\"!!tab.isSkeletonAiTheme\"\n            ></ui-skeleton>\n          } @else {\n            @if (tab?.iconLeft) {\n              <ui-icon\n                color=\"rebrand-black\"\n                [size]=\"'24'\"\n                [tabindex]=\"1\"\n                class=\"left-icon\"\n                [name]=\"tab.iconLeft!\"\n              ></ui-icon>\n            }\n            <span class=\"label\">{{ tab.tabLabel }}</span>\n            @if (tab.isLabelLoading) {\n              <span class=\"label-spinner\" aria-hidden=\"true\">\n                <ui-spinner size=\"small\" [isLoader]=\"false\" [applicationTheme]=\"applicationTheme\"></ui-spinner>\n              </span>\n            }\n            @if (tab?.iconRight) {\n              <ui-icon color=\"rebrand-black\" [size]=\"'24'\" class=\"right-icon\" [name]=\"tab.iconRight!\"></ui-icon>\n            }\n          }\n        </a>\n      </ng-template>\n      <div role=\"tabpanel\" [attr.id]=\"'tabpanel-' + i\" [attr.aria-labelledby]=\"'tab-' + i\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n      </div>\n    </mat-tab>\n  }\n</mat-tab-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .mat-mdc-tab-group,:host .mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: var(--color);--mat-tab-header-active-label-text-color: var(--color);--mat-tab-header-active-ripple-color: transparent;--mat-tab-header-inactive-ripple-color: var(--color);--mat-tab-header-active-focus-label-text-color: var(--color);--mat-tab-header-active-focus-indicator-color: var(--color)}:host ::ng-deep .tabs-type-filled mat-tab-header{border-bottom:unset!important;border-right:1px solid #d3d3d3}:host ::ng-deep mat-tab-group{width:100%;height:100%}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused{position:relative}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused:after{content:\"\";position:absolute;inset:-2px;z-index:10;border-radius:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}::ng-deep .tabs-container .mdc-tab-indicator__content{border-color:#276678!important}::ng-deep .tabs-container .tab-name{text-decoration:none!important;display:flex;justify-content:center;align-content:center;color:#242424;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name .left-icon{margin-right:8px}::ng-deep .tabs-container .tab-name .right-icon{margin-left:8px}::ng-deep .tabs-container .tab-name .label-spinner{display:flex;align-items:center;margin-left:8px}::ng-deep .tabs-container .tab-name .left-icon:focus,::ng-deep .tabs-container .tab-name .right-icon:focus{height:24px;outline:1px dashed #888888}::ng-deep .tabs-container ::ng-deep .mdc-tab{min-width:0;padding:0}::ng-deep .tabs-container ::ng-deep .mdc-tab:hover{background:#f6f6f6}::ng-deep .tabs-container.tabs-type-underlined .tab-name{padding:16px 24px}::ng-deep .tabs-container.tabs-type-underlined .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 #242424,.5px 0 #242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header{padding:0 var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header-pagination-chevron{border-color:#242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mdc-tab{flex-grow:0!important;margin-left:1px}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-big ::ng-deep .mdc-tab{height:64px!important}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-small ::ng-deep .mdc-tab{height:32px!important}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-medium ::ng-deep .mdc-tab{height:56px!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active{background-color:#e9f0f1!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-filled{--mat-tab-header-active-ripple-color: var(--color);display:flex;flex-direction:row}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:var(--header-content-padding) 0}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-label-container{padding:4px;overflow:auto!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-labels{flex-direction:column;padding-top:2px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{flex-grow:0!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__content,::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{width:100%}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{margin:-1px 1px 1px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab--active ::ng-deep .mdc-tab-indicator:after{content:\"\";position:absolute;left:0;top:8px;width:4px;height:32px;border-radius:0 8px 8px 0;background:#276678}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab-indicator__content{display:none}::ng-deep .tabs-container.tabs-type-filled .tab-name{padding:12px var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{position:relative;height:48px!important;min-height:48px!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body-wrapper{width:100%}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:var(--header-content-padding)}@media(max-width:600px){::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:24px}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header{position:relative;padding:0!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-header-pagination-disabled{visibility:hidden!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d3d3d3}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:24px 0}}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light],::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover{background:none!important;border-bottom:2px solid #242424}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover .mdc-tab-indicator,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover .mdc-tab-indicator{display:none}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled{opacity:1}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.4}::ng-deep .mat-mdc-tab-group.tabs-type-filled{--mat-tab-header-active-ripple-color: unset !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled .tab-name{color:#242424}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light],::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active{background-color:#f4f4f4!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active .mdc-tab-indicator:after,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active .mdc-tab-indicator:after{background-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab:hover{background:#fff2fc!important}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: i1.Observable, decorators: [{
-                    type: Inject,
-                    args: [IS_MOBILE_TOKEN]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { companyColor: [{
-                type: HostBinding,
-                args: ['style.--color']
-            }, {
-                type: Input
-            }], type: [{
-                type: Input
-            }], animationDuration: [{
-                type: Input
-            }], headerContentPadding: [{
-                type: HostBinding,
-                args: ['style.--header-content-padding']
-            }, {
-                type: Input,
-                args: [{ transform: (value) => `${value}px` }]
-            }], dynamicHeight: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], applicationTheme: [{
-                type: Input
-            }], tabHeaderSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabHeaderSize", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], selectedTabName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTabName", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], selectedTabIndex: [{
-                type: Output
-            }], selectedTab: [{
-                type: Output
-            }], tabGroup: [{
-                type: ViewChild,
-                args: ['tabGroup', { static: true }]
-            }] } });
-
-class TabDirective {
-    constructor() {
-        this.tabLabel = input.required(...(ngDevMode ? [{ debugName: "tabLabel" }] : /* istanbul ignore next */ []));
-        this.tabName = input.required(...(ngDevMode ? [{ debugName: "tabName" }] : /* istanbul ignore next */ []));
-        this.iconLeft = input(...(ngDevMode ? [undefined, { debugName: "iconLeft" }] : /* istanbul ignore next */ []));
-        this.iconRight = input(...(ngDevMode ? [undefined, { debugName: "iconRight" }] : /* istanbul ignore next */ []));
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.canLeave = input(...(ngDevMode ? [undefined, { debugName: "canLeave" }] : /* istanbul ignore next */ []));
-        this.linkUrl = input(...(ngDevMode ? [undefined, { debugName: "linkUrl" }] : /* istanbul ignore next */ []));
-        this.order = input(...(ngDevMode ? [undefined, { debugName: "order" }] : /* istanbul ignore next */ []));
-        this.skeletonTheme = input(...(ngDevMode ? [undefined, { debugName: "skeletonTheme" }] : /* istanbul ignore next */ []));
-        this.isSkeletonAiTheme = input(...(ngDevMode ? [undefined, { debugName: "isSkeletonAiTheme" }] : /* istanbul ignore next */ []));
-        this.isLabelLoading = input(false, { ...(ngDevMode ? { debugName: "isLabelLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.tabsComponent = inject(TabsComponent);
-        this.template = inject(TemplateRef);
-        this.syncProps = effect(() => {
-            this.tabsComponent.updateTab(this.tabName(), {
-                tabLabel: this.tabLabel(),
-                iconLeft: this.iconLeft(),
-                iconRight: this.iconRight(),
-                disabled: this.disabled(),
-                canLeave: this.canLeave(),
-                linkUrl: this.linkUrl(),
-                order: this.order(),
-                skeletonTheme: this.skeletonTheme(),
-                isSkeletonAiTheme: this.isSkeletonAiTheme(),
-                isLabelLoading: this.isLabelLoading(),
-            });
-        }, ...(ngDevMode ? [{ debugName: "syncProps" }] : /* istanbul ignore next */ []));
-        this.cleanup = inject(DestroyRef).onDestroy(() => {
-            this.tabsComponent.removeTab(this.tabName());
-        });
-    }
-    ngOnInit() {
-        this.addTab();
-    }
-    addTab() {
-        this.tabsComponent.addTab({
-            tabLabel: this.tabLabel(),
-            tabName: this.tabName(),
-            iconLeft: this.iconLeft(),
-            iconRight: this.iconRight(),
-            disabled: this.disabled(),
-            contentTemplateRef: this.template,
-            canLeave: this.canLeave(),
-            linkUrl: this.linkUrl(),
-            order: this.order(),
-            skeletonTheme: this.skeletonTheme(),
-            isSkeletonAiTheme: this.isSkeletonAiTheme(),
-            isLabelLoading: this.isLabelLoading(),
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: TabDirective, isStandalone: true, selector: "ng-template[uiTab]", inputs: { tabLabel: { classPropertyName: "tabLabel", publicName: "tabLabel", isSignal: true, isRequired: true, transformFunction: null }, tabName: { classPropertyName: "tabName", publicName: "tabName", isSignal: true, isRequired: true, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, canLeave: { classPropertyName: "canLeave", publicName: "canLeave", isSignal: true, isRequired: false, transformFunction: null }, linkUrl: { classPropertyName: "linkUrl", publicName: "linkUrl", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null }, skeletonTheme: { classPropertyName: "skeletonTheme", publicName: "skeletonTheme", isSignal: true, isRequired: false, transformFunction: null }, isSkeletonAiTheme: { classPropertyName: "isSkeletonAiTheme", publicName: "isSkeletonAiTheme", isSignal: true, isRequired: false, transformFunction: null }, isLabelLoading: { classPropertyName: "isLabelLoading", publicName: "isLabelLoading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TabDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[uiTab]',
-                }]
-        }], propDecorators: { tabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabLabel", required: true }] }], tabName: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabName", required: true }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], canLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "canLeave", required: false }] }], linkUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkUrl", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], skeletonTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonTheme", required: false }] }], isSkeletonAiTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSkeletonAiTheme", required: false }] }], isLabelLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLabelLoading", required: false }] }] } });
-
-class TabsComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: TabsComponentModule, imports: [TabDirective,
-            CommonModule,
-            MatTabsModule,
-            IconComponentModule,
-            UiTranslatePipe,
-            SkeletonComponent,
-            TabsComponent], exports: [TabsComponent, TabDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TabsComponentModule, imports: [CommonModule,
-            MatTabsModule,
-            IconComponentModule,
-            SkeletonComponent,
-            TabsComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TabsComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        TabDirective,
-                        CommonModule,
-                        MatTabsModule,
-                        IconComponentModule,
-                        UiTranslatePipe,
-                        SkeletonComponent,
-                        TabsComponent,
-                    ],
-                    exports: [TabsComponent, TabDirective],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var TabsComponent = class TabsComponent {
+	constructor(defaultAppTheme, isMobile$, cdr) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.isMobile$ = isMobile$;
+		this.cdr = cdr;
+		this.companyColor = "#46A997";
+		this.type = "underlined";
+		this.animationDuration = 300;
+		this.headerContentPadding = "32px";
+		this.dynamicHeight = true;
+		this.applicationTheme = "light";
+		this.tabHeaderSize = input(TAB_HEADER_SIZE.BIG, ...ngDevMode ? [{ debugName: "tabHeaderSize" }] : /* istanbul ignore next */ []);
+		this.isLoading = input(false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+		this.selectedTabName = input(null, ...ngDevMode ? [{ debugName: "selectedTabName" }] : /* istanbul ignore next */ []);
+		this.testId = input(null, ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
+		this.selectedTabIndex = new EventEmitter();
+		this.selectedTab = new EventEmitter();
+		this.tabs = [];
+		this.tabIndex = signal(0, ...ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []);
+		this.tabIndexMap = {};
+		this.insertionCounter = 0;
+		this.tabTransitionInProgress = false;
+		this.requestedTabName = null;
+		if (defaultAppTheme) this.applicationTheme = defaultAppTheme;
+		effect(() => {
+			const requestedTabName = this.selectedTabName();
+			untracked(() => {
+				this.requestedTabName = requestedTabName;
+				this.applyRequestedTabName();
+			});
+		});
+	}
+	ngAfterViewInit() {
+		setTimeout(() => {
+			const group = this.tabGroup;
+			const tabHeader = group._tabHeader;
+			tabHeader._handleKeydown = async (event) => {
+				if (hasModifierKey(event) || this.tabTransitionInProgress) return;
+				switch (event.keyCode) {
+					case ENTER:
+					case SPACE:
+						this.tabTransitionInProgress = true;
+						try {
+							const tabLabel = event.target.innerText;
+							const currentTab = this.tabs[this.tabIndex()];
+							const nextTab = this.tabs.find((tab) => tab.tabLabel === tabLabel);
+							if (!nextTab) return;
+							const canLeave = await currentTab.canLeave?.({
+								currentTab,
+								nextTab
+							}) ?? true;
+							if (currentTab.tabName !== nextTab.tabName && canLeave) {
+								const nextTabIndex = this.tabIndexMap[nextTab.tabName];
+								this.tabIndex.set(nextTabIndex);
+								this.selectedTabIndex.emit(nextTabIndex);
+								this.selectedTab.emit(nextTab);
+							}
+						} finally {
+							this.tabTransitionInProgress = false;
+						}
+						break;
+					default: tabHeader._keyManager.onKeydown(event);
+				}
+			};
+			group._handleClick = async (tab, _tabHeader, index) => {
+				if (tab.disabled || index === this.tabIndex() || this.tabTransitionInProgress) return;
+				this.tabTransitionInProgress = true;
+				try {
+					const currentTab = this.tabs[this.tabIndex()];
+					const nextTab = this.tabs[index];
+					const canLeave = await currentTab.canLeave?.({
+						currentTab,
+						nextTab
+					}) ?? true;
+					if (this.tabIndex() !== index && canLeave) {
+						this.tabIndex.set(index);
+						this.selectedTabIndex.emit(index);
+						this.selectedTab.emit(nextTab);
+					}
+				} finally {
+					this.tabTransitionInProgress = false;
+				}
+			};
+		});
+	}
+	addTab(tab) {
+		tab.order ??= this.insertionCounter++;
+		const activeTabName = this.activeTabName;
+		this.tabs.push(tab);
+		this.sortTabs();
+		this.cdr.markForCheck();
+		this.updateTabIndexMap();
+		this.reconcileTabIndex(activeTabName);
+		this.applyRequestedTabName();
+	}
+	sortTabs() {
+		this.tabs.sort((a, b) => {
+			return (a.order ?? Infinity) - (b.order ?? Infinity);
+		});
+	}
+	updateTabIndexMap() {
+		this.tabs.forEach((tab, index) => {
+			this.tabIndexMap[tab.tabName] = index;
+		});
+	}
+	get activeTabName() {
+		return this.tabs[this.tabIndex()]?.tabName;
+	}
+	reconcileTabIndex(activeTabName) {
+		const nextIndex = (activeTabName === void 0 ? void 0 : this.tabIndexMap[activeTabName]) ?? Math.min(this.tabIndex(), Math.max(this.tabs.length - 1, 0));
+		if (nextIndex !== this.tabIndex()) this.tabIndex.set(nextIndex);
+	}
+	applyRequestedTabName() {
+		if (this.requestedTabName === null) return;
+		const index = this.tabIndexMap[this.requestedTabName];
+		if (index === void 0) return;
+		this.requestedTabName = null;
+		if (index !== this.tabIndex()) this.tabIndex.set(index);
+	}
+	onTabChange(index) {
+		const selectedTab = this.tabs[index];
+		const newIndex = this.tabIndexMap[selectedTab.tabName];
+		if (this.tabIndex() === newIndex) return;
+		this.tabIndex.set(newIndex);
+		this.selectedTabIndex.emit(index);
+		this.selectedTab.emit(selectedTab);
+	}
+	selectTab(tabName) {
+		const index = this.tabIndexMap[tabName];
+		if (index !== void 0) {
+			this.tabIndex.set(index);
+			this.selectedTabIndex.emit(index);
+			this.selectedTab.emit(this.tabs[index]);
+		}
+	}
+	indexOf(tabName) {
+		return this.tabIndexMap[tabName] ?? -1;
+	}
+	trackByTabName(index, tab) {
+		return tab.tabName;
+	}
+	removeTab(tabName) {
+		const index = this.tabIndexMap[tabName];
+		if (index !== void 0) {
+			const activeTabName = this.activeTabName;
+			this.tabs.splice(index, 1);
+			delete this.tabIndexMap[tabName];
+			this.updateTabIndexMap();
+			this.reconcileTabIndex(activeTabName);
+			this.cdr.markForCheck();
+		}
+	}
+	updateTab(tabName, tab) {
+		const index = this.tabIndexMap[tabName];
+		if (index !== void 0) {
+			this.tabs[index] = {
+				...this.tabs[index],
+				...tab
+			};
+			if (tab.order !== void 0) {
+				const activeTabName = this.activeTabName;
+				this.sortTabs();
+				this.updateTabIndexMap();
+				this.reconcileTabIndex(activeTabName);
+			}
+			this.cdr.markForCheck();
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TabsComponent,
+			deps: [
+				{
+					token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
+					optional: true
+				},
+				{ token: IS_MOBILE_TOKEN },
+				{ token: i0.ChangeDetectorRef }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: TabsComponent,
+			isStandalone: true,
+			selector: "ui-tabs",
+			inputs: {
+				companyColor: {
+					classPropertyName: "companyColor",
+					publicName: "companyColor",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				type: {
+					classPropertyName: "type",
+					publicName: "type",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				animationDuration: {
+					classPropertyName: "animationDuration",
+					publicName: "animationDuration",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				headerContentPadding: {
+					classPropertyName: "headerContentPadding",
+					publicName: "headerContentPadding",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: (value) => `${value}px`
+				},
+				dynamicHeight: {
+					classPropertyName: "dynamicHeight",
+					publicName: "dynamicHeight",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: booleanAttribute
+				},
+				applicationTheme: {
+					classPropertyName: "applicationTheme",
+					publicName: "applicationTheme",
+					isSignal: false,
+					isRequired: false,
+					transformFunction: null
+				},
+				tabHeaderSize: {
+					classPropertyName: "tabHeaderSize",
+					publicName: "tabHeaderSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isLoading: {
+					classPropertyName: "isLoading",
+					publicName: "isLoading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				selectedTabName: {
+					classPropertyName: "selectedTabName",
+					publicName: "selectedTabName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				selectedTabIndex: "selectedTabIndex",
+				selectedTab: "selectedTab"
+			},
+			host: { properties: {
+				"style.--color": "this.companyColor",
+				"style.--header-content-padding": "this.headerContentPadding"
+			} },
+			viewQueries: [{
+				propertyName: "tabGroup",
+				first: true,
+				predicate: ["tabGroup"],
+				descendants: true,
+				static: true
+			}],
+			ngImport: i0,
+			template: "<mat-tab-group\n  #tabGroup\n  headerPosition=\"above\"\n  class=\"tabs-container\"\n  [ngClass]=\"['tabs-type-' + ((isMobile$ | async) ? 'underlined' : type), 'tabs-header-size-' + tabHeaderSize()]\"\n  [class.tabs-container-loading]=\"isLoading()\"\n  [attr.theme]=\"applicationTheme\"\n  [dynamicHeight]=\"dynamicHeight\"\n  [selectedIndex]=\"tabIndex()\"\n  [animationDuration]=\"animationDuration\"\n  (selectedIndexChange)=\"onTabChange($event)\"\n  role=\"tablist\"\n  [attr.data-testid]=\"testId()\"\n>\n  @for (tab of tabs; track trackByTabName(i, tab); let i = $index) {\n    <mat-tab [disabled]=\"tab.disabled ?? false\" [attr.aria-label]=\"tab?.ariaLabel\">\n      <ng-template mat-tab-label>\n        <a\n          data-test-role=\"tab-link\"\n          [attr.data-testid]=\"tab.testId ?? tab.tabName\"\n          class=\"tab-name\"\n          [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n          (click)=\"$event.preventDefault()\"\n          [attr.aria-selected]=\"i === tabIndex()\"\n          [attr.aria-label]=\"\n            tab.tabLabel +\n            (tab.isLabelLoading ? ', ' + ('COMMON.LOADING' | uiTranslate | async) : '') +\n            (i === tabIndex() ? ', ' + ('TABS.SELECTED' | uiTranslate | async) : '')\n          \"\n          role=\"tab\"\n        >\n          @if (isLoading()) {\n            <ui-skeleton\n              [count]=\"1\"\n              [theme]=\"tab.skeletonTheme ?? {}\"\n              [isAiTheme]=\"!!tab.isSkeletonAiTheme\"\n            ></ui-skeleton>\n          } @else {\n            @if (tab?.iconLeft) {\n              <ui-icon\n                color=\"rebrand-black\"\n                [size]=\"'24'\"\n                [tabindex]=\"1\"\n                class=\"left-icon\"\n                [name]=\"tab.iconLeft!\"\n              ></ui-icon>\n            }\n            <span class=\"label\">{{ tab.tabLabel }}</span>\n            @if (tab.isLabelLoading) {\n              <span class=\"label-spinner\" aria-hidden=\"true\">\n                <ui-spinner size=\"small\" [isLoader]=\"false\" [applicationTheme]=\"applicationTheme\"></ui-spinner>\n              </span>\n            }\n            @if (tab?.iconRight) {\n              <ui-icon color=\"rebrand-black\" [size]=\"'24'\" class=\"right-icon\" [name]=\"tab.iconRight!\"></ui-icon>\n            }\n          }\n        </a>\n      </ng-template>\n      <div role=\"tabpanel\" [attr.id]=\"'tabpanel-' + i\" [attr.aria-labelledby]=\"'tab-' + i\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n      </div>\n    </mat-tab>\n  }\n</mat-tab-group>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .mat-mdc-tab-group,:host .mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: var(--color);--mat-tab-header-active-label-text-color: var(--color);--mat-tab-header-active-ripple-color: transparent;--mat-tab-header-inactive-ripple-color: var(--color);--mat-tab-header-active-focus-label-text-color: var(--color);--mat-tab-header-active-focus-indicator-color: var(--color)}:host ::ng-deep .tabs-type-filled mat-tab-header{border-bottom:unset!important;border-right:1px solid #d3d3d3}:host ::ng-deep mat-tab-group{width:100%;height:100%}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused{position:relative}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused:after{content:\"\";position:absolute;inset:-2px;z-index:10;border-radius:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}::ng-deep .tabs-container .mdc-tab-indicator__content{border-color:#276678!important}::ng-deep .tabs-container .tab-name{text-decoration:none!important;display:flex;justify-content:center;align-content:center;color:#242424;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name .left-icon{margin-right:8px}::ng-deep .tabs-container .tab-name .right-icon{margin-left:8px}::ng-deep .tabs-container .tab-name .label-spinner{display:flex;align-items:center;margin-left:8px}::ng-deep .tabs-container .tab-name .left-icon:focus,::ng-deep .tabs-container .tab-name .right-icon:focus{height:24px;outline:1px dashed #888888}::ng-deep .tabs-container ::ng-deep .mdc-tab{min-width:0;padding:0}::ng-deep .tabs-container ::ng-deep .mdc-tab:hover{background:#f6f6f6}::ng-deep .tabs-container.tabs-type-underlined .tab-name{padding:16px 24px}::ng-deep .tabs-container.tabs-type-underlined .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 #242424,.5px 0 #242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header{padding:0 var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header-pagination-chevron{border-color:#242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mdc-tab{flex-grow:0!important;margin-left:1px}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-big ::ng-deep .mdc-tab{height:64px!important}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-small ::ng-deep .mdc-tab{height:32px!important}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-medium ::ng-deep .mdc-tab{height:56px!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active{background-color:#e9f0f1!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-filled{--mat-tab-header-active-ripple-color: var(--color);display:flex;flex-direction:row}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:var(--header-content-padding) 0}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-label-container{padding:4px;overflow:auto!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-labels{flex-direction:column;padding-top:2px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{flex-grow:0!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__content,::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{width:100%}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{margin:-1px 1px 1px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab--active ::ng-deep .mdc-tab-indicator:after{content:\"\";position:absolute;left:0;top:8px;width:4px;height:32px;border-radius:0 8px 8px 0;background:#276678}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab-indicator__content{display:none}::ng-deep .tabs-container.tabs-type-filled .tab-name{padding:12px var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{position:relative;height:48px!important;min-height:48px!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body-wrapper{width:100%}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:var(--header-content-padding)}@media(max-width:600px){::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:24px}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header{position:relative;padding:0!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-header-pagination-disabled{visibility:hidden!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d3d3d3}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:24px 0}}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light],::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover{background:none!important;border-bottom:2px solid #242424}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover .mdc-tab-indicator,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover .mdc-tab-indicator{display:none}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled{opacity:1}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.4}::ng-deep .mat-mdc-tab-group.tabs-type-filled{--mat-tab-header-active-ripple-color: unset !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled .tab-name{color:#242424}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light],::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active{background-color:#f4f4f4!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active .mdc-tab-indicator:after,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active .mdc-tab-indicator:after{background-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab:hover{background:#fff2fc!important}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: MatTabGroup,
+					selector: "mat-tab-group",
+					inputs: [
+						"color",
+						"fitInkBarToContent",
+						"mat-stretch-tabs",
+						"mat-align-tabs",
+						"dynamicHeight",
+						"selectedIndex",
+						"headerPosition",
+						"animationDuration",
+						"contentTabIndex",
+						"disablePagination",
+						"disableRipple",
+						"preserveContent",
+						"backgroundColor",
+						"aria-label",
+						"aria-labelledby"
+					],
+					outputs: [
+						"selectedIndexChange",
+						"focusChange",
+						"animationDone",
+						"selectedTabChange"
+					],
+					exportAs: ["matTabGroup"]
+				},
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "component",
+					type: MatTab,
+					selector: "mat-tab",
+					inputs: [
+						"disabled",
+						"label",
+						"aria-label",
+						"aria-labelledby",
+						"labelClass",
+						"bodyClass",
+						"id"
+					],
+					exportAs: ["matTab"]
+				},
+				{
+					kind: "directive",
+					type: MatTabLabel,
+					selector: "[mat-tab-label], [matTabLabel]"
+				},
+				{
+					kind: "component",
+					type: SkeletonComponent,
+					selector: "ui-skeleton",
+					inputs: [
+						"count",
+						"theme",
+						"appearance",
+						"isAiTheme",
+						"applicationTheme"
+					]
+				},
+				{
+					kind: "component",
+					type: SpinnerComponent,
+					selector: "ui-spinner",
+					inputs: [
+						"size",
+						"isLoader",
+						"text",
+						"applicationTheme",
+						"iconName",
+						"iconSize"
+					]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TabsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-tabs",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				MatTabGroup,
+				NgClass,
+				MatTab,
+				MatTabLabel,
+				SkeletonComponent,
+				SpinnerComponent,
+				IconComponent,
+				NgTemplateOutlet,
+				AsyncPipe,
+				UiTranslatePipe
+			],
+			template: "<mat-tab-group\n  #tabGroup\n  headerPosition=\"above\"\n  class=\"tabs-container\"\n  [ngClass]=\"['tabs-type-' + ((isMobile$ | async) ? 'underlined' : type), 'tabs-header-size-' + tabHeaderSize()]\"\n  [class.tabs-container-loading]=\"isLoading()\"\n  [attr.theme]=\"applicationTheme\"\n  [dynamicHeight]=\"dynamicHeight\"\n  [selectedIndex]=\"tabIndex()\"\n  [animationDuration]=\"animationDuration\"\n  (selectedIndexChange)=\"onTabChange($event)\"\n  role=\"tablist\"\n  [attr.data-testid]=\"testId()\"\n>\n  @for (tab of tabs; track trackByTabName(i, tab); let i = $index) {\n    <mat-tab [disabled]=\"tab.disabled ?? false\" [attr.aria-label]=\"tab?.ariaLabel\">\n      <ng-template mat-tab-label>\n        <a\n          data-test-role=\"tab-link\"\n          [attr.data-testid]=\"tab.testId ?? tab.tabName\"\n          class=\"tab-name\"\n          [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n          (click)=\"$event.preventDefault()\"\n          [attr.aria-selected]=\"i === tabIndex()\"\n          [attr.aria-label]=\"\n            tab.tabLabel +\n            (tab.isLabelLoading ? ', ' + ('COMMON.LOADING' | uiTranslate | async) : '') +\n            (i === tabIndex() ? ', ' + ('TABS.SELECTED' | uiTranslate | async) : '')\n          \"\n          role=\"tab\"\n        >\n          @if (isLoading()) {\n            <ui-skeleton\n              [count]=\"1\"\n              [theme]=\"tab.skeletonTheme ?? {}\"\n              [isAiTheme]=\"!!tab.isSkeletonAiTheme\"\n            ></ui-skeleton>\n          } @else {\n            @if (tab?.iconLeft) {\n              <ui-icon\n                color=\"rebrand-black\"\n                [size]=\"'24'\"\n                [tabindex]=\"1\"\n                class=\"left-icon\"\n                [name]=\"tab.iconLeft!\"\n              ></ui-icon>\n            }\n            <span class=\"label\">{{ tab.tabLabel }}</span>\n            @if (tab.isLabelLoading) {\n              <span class=\"label-spinner\" aria-hidden=\"true\">\n                <ui-spinner size=\"small\" [isLoader]=\"false\" [applicationTheme]=\"applicationTheme\"></ui-spinner>\n              </span>\n            }\n            @if (tab?.iconRight) {\n              <ui-icon color=\"rebrand-black\" [size]=\"'24'\" class=\"right-icon\" [name]=\"tab.iconRight!\"></ui-icon>\n            }\n          }\n        </a>\n      </ng-template>\n      <div role=\"tabpanel\" [attr.id]=\"'tabpanel-' + i\" [attr.aria-labelledby]=\"'tab-' + i\">\n        <ng-container *ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n      </div>\n    </mat-tab>\n  }\n</mat-tab-group>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host ::ng-deep .mat-mdc-tab-group,:host .mat-mdc-tab-nav-bar{--mdc-tab-indicator-active-indicator-color: var(--color);--mat-tab-header-active-label-text-color: var(--color);--mat-tab-header-active-ripple-color: transparent;--mat-tab-header-inactive-ripple-color: var(--color);--mat-tab-header-active-focus-label-text-color: var(--color);--mat-tab-header-active-focus-indicator-color: var(--color)}:host ::ng-deep .tabs-type-filled mat-tab-header{border-bottom:unset!important;border-right:1px solid #d3d3d3}:host ::ng-deep mat-tab-group{width:100%;height:100%}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused{position:relative}:host ::ng-deep mat-tab-group .mdc-tab.cdk-keyboard-focused:after{content:\"\";position:absolute;inset:-2px;z-index:10;border-radius:4px;outline:2px solid #242424;animation:focus-ring-animation-main .4s forwards}::ng-deep .tabs-container .mdc-tab-indicator__content{border-color:#276678!important}::ng-deep .tabs-container .tab-name{text-decoration:none!important;display:flex;justify-content:center;align-content:center;color:#242424;outline:unset;font-size:16px;line-height:24px;width:100%}::ng-deep .tabs-container .tab-name .left-icon{margin-right:8px}::ng-deep .tabs-container .tab-name .right-icon{margin-left:8px}::ng-deep .tabs-container .tab-name .label-spinner{display:flex;align-items:center;margin-left:8px}::ng-deep .tabs-container .tab-name .left-icon:focus,::ng-deep .tabs-container .tab-name .right-icon:focus{height:24px;outline:1px dashed #888888}::ng-deep .tabs-container ::ng-deep .mdc-tab{min-width:0;padding:0}::ng-deep .tabs-container ::ng-deep .mdc-tab:hover{background:#f6f6f6}::ng-deep .tabs-container.tabs-type-underlined .tab-name{padding:16px 24px}::ng-deep .tabs-container.tabs-type-underlined .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 #242424,.5px 0 #242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header{padding:0 var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mat-mdc-tab-header-pagination-chevron{border-color:#242424}::ng-deep .tabs-container.tabs-type-underlined ::ng-deep .mdc-tab{flex-grow:0!important;margin-left:1px}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-big ::ng-deep .mdc-tab{height:64px!important}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-small ::ng-deep .mdc-tab{height:32px!important}::ng-deep .tabs-container.tabs-type-underlined.tabs-header-size-medium ::ng-deep .mdc-tab{height:56px!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active{background-color:#e9f0f1!important}::ng-deep .tabs-container.tabs-type-filled .mdc-tab--active .tab-name .label{text-shadow:-.5px 0 black,.5px 0 black}::ng-deep .tabs-container.tabs-type-filled{--mat-tab-header-active-ripple-color: var(--color);display:flex;flex-direction:row}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:var(--header-content-padding) 0}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-label-container{padding:4px;overflow:auto!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-labels{flex-direction:column;padding-top:2px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{flex-grow:0!important}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__content,::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{width:100%}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab__text-label{margin:-1px 1px 1px}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab--active ::ng-deep .mdc-tab-indicator:after{content:\"\";position:absolute;left:0;top:8px;width:4px;height:32px;border-radius:0 8px 8px 0;background:#276678}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab-indicator__content{display:none}::ng-deep .tabs-container.tabs-type-filled .tab-name{padding:12px var(--header-content-padding)}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mdc-tab{position:relative;height:48px!important;min-height:48px!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body-wrapper{width:100%}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:var(--header-content-padding)}@media(max-width:600px){::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-body{padding:24px}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header{position:relative;padding:0!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-header-pagination-disabled{visibility:hidden!important}::ng-deep .tabs-container ::ng-deep .mat-mdc-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#d3d3d3}::ng-deep .tabs-container.tabs-type-filled ::ng-deep .mat-mdc-tab-header{padding:24px 0}}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light],::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover{background:none!important;border-bottom:2px solid #242424}::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=light] .mdc-tab:hover .mdc-tab-indicator,::ng-deep .mat-mdc-tab-group:not(.tabs-type-filled)[theme=dark] .mdc-tab:hover .mdc-tab-indicator{display:none}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled{opacity:1}::ng-deep .tabs-container-loading .mat-mdc-tab.mat-mdc-tab-disabled.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.4}::ng-deep .mat-mdc-tab-group.tabs-type-filled{--mat-tab-header-active-ripple-color: unset !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled .tab-name{color:#242424}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light],::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark]{--mat-tab-header-inactive-ripple-color: none !important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab-indicator .mdc-tab-indicator__content.mdc-tab-indicator__content--underline{border-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active{background-color:#f4f4f4!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab--active .mdc-tab-indicator:after,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab--active .mdc-tab-indicator:after{background-color:#d410aa!important}::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=light] .mdc-tab:hover,::ng-deep .mat-mdc-tab-group.tabs-type-filled[theme=dark] .mdc-tab:hover{background:#fff2fc!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+			}]
+		},
+		{
+			type: i1.Observable,
+			decorators: [{
+				type: Inject,
+				args: [IS_MOBILE_TOKEN]
+			}]
+		},
+		{ type: i0.ChangeDetectorRef }
+	],
+	propDecorators: {
+		companyColor: [{
+			type: HostBinding,
+			args: ["style.--color"]
+		}, { type: Input }],
+		type: [{ type: Input }],
+		animationDuration: [{ type: Input }],
+		headerContentPadding: [{
+			type: HostBinding,
+			args: ["style.--header-content-padding"]
+		}, {
+			type: Input,
+			args: [{ transform: (value) => `${value}px` }]
+		}],
+		dynamicHeight: [{
+			type: Input,
+			args: [{ transform: booleanAttribute }]
+		}],
+		applicationTheme: [{ type: Input }],
+		tabHeaderSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabHeaderSize",
+				required: false
+			}]
+		}],
+		isLoading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isLoading",
+				required: false
+			}]
+		}],
+		selectedTabName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedTabName",
+				required: false
+			}]
+		}],
+		testId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testId",
+				required: false
+			}]
+		}],
+		selectedTabIndex: [{ type: Output }],
+		selectedTab: [{ type: Output }],
+		tabGroup: [{
+			type: ViewChild,
+			args: ["tabGroup", { static: true }]
+		}]
+	}
+});
+var TabDirective = class TabDirective {
+	constructor() {
+		this.tabLabel = input.required(...ngDevMode ? [{ debugName: "tabLabel" }] : /* istanbul ignore next */ []);
+		this.tabName = input.required(...ngDevMode ? [{ debugName: "tabName" }] : /* istanbul ignore next */ []);
+		this.iconLeft = input(...ngDevMode ? [void 0, { debugName: "iconLeft" }] : /* istanbul ignore next */ []);
+		this.iconRight = input(...ngDevMode ? [void 0, { debugName: "iconRight" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, {
+			...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.canLeave = input(...ngDevMode ? [void 0, { debugName: "canLeave" }] : /* istanbul ignore next */ []);
+		this.linkUrl = input(...ngDevMode ? [void 0, { debugName: "linkUrl" }] : /* istanbul ignore next */ []);
+		this.order = input(...ngDevMode ? [void 0, { debugName: "order" }] : /* istanbul ignore next */ []);
+		this.skeletonTheme = input(...ngDevMode ? [void 0, { debugName: "skeletonTheme" }] : /* istanbul ignore next */ []);
+		this.isSkeletonAiTheme = input(...ngDevMode ? [void 0, { debugName: "isSkeletonAiTheme" }] : /* istanbul ignore next */ []);
+		this.isLabelLoading = input(false, {
+			...ngDevMode ? { debugName: "isLabelLoading" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.tabsComponent = inject(TabsComponent);
+		this.template = inject(TemplateRef);
+		this.syncProps = effect(() => {
+			this.tabsComponent.updateTab(this.tabName(), {
+				tabLabel: this.tabLabel(),
+				iconLeft: this.iconLeft(),
+				iconRight: this.iconRight(),
+				disabled: this.disabled(),
+				canLeave: this.canLeave(),
+				linkUrl: this.linkUrl(),
+				order: this.order(),
+				skeletonTheme: this.skeletonTheme(),
+				isSkeletonAiTheme: this.isSkeletonAiTheme(),
+				isLabelLoading: this.isLabelLoading()
+			});
+		}, ...ngDevMode ? [{ debugName: "syncProps" }] : /* istanbul ignore next */ []);
+		this.cleanup = inject(DestroyRef).onDestroy(() => {
+			this.tabsComponent.removeTab(this.tabName());
+		});
+	}
+	ngOnInit() {
+		this.addTab();
+	}
+	addTab() {
+		this.tabsComponent.addTab({
+			tabLabel: this.tabLabel(),
+			tabName: this.tabName(),
+			iconLeft: this.iconLeft(),
+			iconRight: this.iconRight(),
+			disabled: this.disabled(),
+			contentTemplateRef: this.template,
+			canLeave: this.canLeave(),
+			linkUrl: this.linkUrl(),
+			order: this.order(),
+			skeletonTheme: this.skeletonTheme(),
+			isSkeletonAiTheme: this.isSkeletonAiTheme(),
+			isLabelLoading: this.isLabelLoading()
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TabDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.4",
+			type: TabDirective,
+			isStandalone: true,
+			selector: "ng-template[uiTab]",
+			inputs: {
+				tabLabel: {
+					classPropertyName: "tabLabel",
+					publicName: "tabLabel",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				tabName: {
+					classPropertyName: "tabName",
+					publicName: "tabName",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				iconLeft: {
+					classPropertyName: "iconLeft",
+					publicName: "iconLeft",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconRight: {
+					classPropertyName: "iconRight",
+					publicName: "iconRight",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				canLeave: {
+					classPropertyName: "canLeave",
+					publicName: "canLeave",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				linkUrl: {
+					classPropertyName: "linkUrl",
+					publicName: "linkUrl",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				order: {
+					classPropertyName: "order",
+					publicName: "order",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				skeletonTheme: {
+					classPropertyName: "skeletonTheme",
+					publicName: "skeletonTheme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isSkeletonAiTheme: {
+					classPropertyName: "isSkeletonAiTheme",
+					publicName: "isSkeletonAiTheme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isLabelLoading: {
+					classPropertyName: "isLabelLoading",
+					publicName: "isLabelLoading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TabDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			standalone: true,
+			selector: "ng-template[uiTab]"
+		}]
+	}],
+	propDecorators: {
+		tabLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabLabel",
+				required: true
+			}]
+		}],
+		tabName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabName",
+				required: true
+			}]
+		}],
+		iconLeft: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconLeft",
+				required: false
+			}]
+		}],
+		iconRight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconRight",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		canLeave: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canLeave",
+				required: false
+			}]
+		}],
+		linkUrl: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkUrl",
+				required: false
+			}]
+		}],
+		order: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "order",
+				required: false
+			}]
+		}],
+		skeletonTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "skeletonTheme",
+				required: false
+			}]
+		}],
+		isSkeletonAiTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isSkeletonAiTheme",
+				required: false
+			}]
+		}],
+		isLabelLoading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isLabelLoading",
+				required: false
+			}]
+		}]
+	}
+});
+var TabsComponentModule = class TabsComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TabsComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TabsComponentModule,
+			imports: [
+				TabDirective,
+				CommonModule,
+				MatTabsModule,
+				IconComponentModule,
+				UiTranslatePipe,
+				SkeletonComponent,
+				TabsComponent
+			],
+			exports: [TabsComponent, TabDirective]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TabsComponentModule,
+			imports: [
+				CommonModule,
+				MatTabsModule,
+				IconComponentModule,
+				SkeletonComponent,
+				TabsComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TabsComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				TabDirective,
+				CommonModule,
+				MatTabsModule,
+				IconComponentModule,
+				UiTranslatePipe,
+				SkeletonComponent,
+				TabsComponent
+			],
+			exports: [TabsComponent, TabDirective]
+		}]
+	}]
+});
 export { TAB_HEADER_SIZE, TabDirective, TabsComponent, TabsComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-tabs.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-tabs.mjs.map