@testgorilla/tgo-ui 11.22.2 → 12.0.0

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

@@ -1,262 +1,554 @@
-import { AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, computed, EventEmitter, signal, effect, afterNextRender, ViewChild, Output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import * as i1 from '@testgorilla/tgo-ui/components/button';
-import { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { UiTranslatePipe, TruncatePipe } from '@testgorilla/tgo-ui/components/core';
-import * as i3 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import * as i2 from '@testgorilla/tgo-ui/components/overflow-menu';
-import { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';
-import { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';
-
-class BreadcrumbComponent {
-    itemTestId(value) {
-        const testId = this.testId();
-        return testId ? `${testId}-item-${value}` : null;
-    }
-    constructor(parentInjector) {
-        this.parentInjector = parentInjector;
-        this.size = input('large', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.applicationTheme = input('light', ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
-        this.includeBackButton = input(false, ...(ngDevMode ? [{ debugName: "includeBackButton" }] : /* istanbul ignore next */ []));
-        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-        this.numberOfLoadingItems = input(3, ...(ngDevMode ? [{ debugName: "numberOfLoadingItems" }] : /* istanbul ignore next */ []));
-        this.maxItemLength = input(18, ...(ngDevMode ? [{ debugName: "maxItemLength" }] : /* istanbul ignore next */ []));
-        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
-        this.backButtonTestId = computed(() => (this.testId() ? `${this.testId()}-back` : null), ...(ngDevMode ? [{ debugName: "backButtonTestId" }] : /* istanbul ignore next */ []));
-        this.selectItem = new EventEmitter();
-        this.backButtonClickEvent = new EventEmitter();
-        this.loadingItems = computed(() => new Array(this.numberOfLoadingItems()), ...(ngDevMode ? [{ debugName: "loadingItems" }] : /* istanbul ignore next */ []));
-        this.isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "isOverflowing" }] : /* istanbul ignore next */ []));
-        this.visibleItems = signal([], ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
-        this.overflowItems = signal([], ...(ngDevMode ? [{ debugName: "overflowItems" }] : /* istanbul ignore next */ []));
-        this.overflowButtonItems = computed(() => this.overflowItems().map(item => ({
-            label: item.label,
-            value: item.value,
-        })), ...(ngDevMode ? [{ debugName: "overflowButtonItems" }] : /* istanbul ignore next */ []));
-        this.shouldTruncateLastItem = signal(false, ...(ngDevMode ? [{ debugName: "shouldTruncateLastItem" }] : /* istanbul ignore next */ []));
-        this.itemsInOverflow = 0;
-        this.injector = parentInjector;
-        // React to items changes and recalculate overflow
-        effect(() => {
-            this.items();
-            this.itemsInOverflow = 0;
-            // Only proceed if not in loading state
-            if (!this.isLoading()) {
-                // Use afterNextRender to ensure DOM is updated before calculating
-                afterNextRender(() => {
-                    if (this.breadcrumbContainer?.nativeElement) {
-                        this.calculateItemDistribution();
-                    }
-                }, { injector: this.injector });
-            }
-        });
-        // React to loading state changes and setup ResizeObserver when loading changes from true to false
-        effect(() => {
-            const currentLoadingState = this.isLoading();
-            if (this.previousLoadingState === true && currentLoadingState === false) {
-                // Use afterNextRender to ensure DOM is ready before setting up observer
-                afterNextRender(() => {
-                    this.setupResizeObserver();
-                }, { injector: this.injector });
-            }
-            this.previousLoadingState = currentLoadingState;
-        });
-    }
-    ngAfterViewInit() {
-        this.calculateItemDistribution();
-        this.setupResizeObserver();
-    }
-    ngOnDestroy() {
-        this.resizeObserver?.disconnect();
-    }
-    calculateItemDistribution() {
-        if (!this.breadcrumbContainer?.nativeElement || this.items().length === 0) {
-            this.resetToAllVisible();
-            return;
-        }
-        const element = this.breadcrumbContainer.nativeElement;
-        const hasHorizontalOverflow = element.scrollWidth > element.clientWidth;
-        if (hasHorizontalOverflow) {
-            this.handleOverflow();
-        }
-        else if (this.itemsInOverflow > 0) {
-            // Check if we can bring items back from overflow
-            this.tryReduceOverflow();
-        }
-        else {
-            this.resetToAllVisible();
-        }
-    }
-    handleOverflow() {
-        this.itemsInOverflow = Math.min(this.itemsInOverflow + 1, this.items().length - 1);
-        this.updateItemArrays();
-        this.isOverflowing.set(true);
-        // Wait for DOM to render the updated template after hiding items
-        // We need to measure dimensions AFTER the DOM has been updated with the new visible items
-        setTimeout(() => {
-            if (this.breadcrumbContainer?.nativeElement) {
-                const element = this.breadcrumbContainer.nativeElement;
-                const stillOverflowing = element.scrollWidth > element.clientWidth;
-                if (stillOverflowing && this.itemsInOverflow < this.items().length - 1) {
-                    this.handleOverflow();
-                }
-                else if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {
-                    this.shouldTruncateLastItem.set(true);
-                }
-            }
-        }, 0);
-    }
-    tryReduceOverflow() {
-        const testItemsInOverflow = this.itemsInOverflow - 1;
-        if (testItemsInOverflow >= 0) {
-            const testVisibleItems = this.items().slice(testItemsInOverflow);
-            const testOverflowItems = testItemsInOverflow > 0 ? this.items().slice(0, testItemsInOverflow) : [];
-            this.visibleItems.set(testVisibleItems);
-            this.overflowItems.set(testOverflowItems);
-            // Always reset truncation when trying to reduce overflow
-            this.shouldTruncateLastItem.set(false);
-            // Wait for DOM to render with test configuration before measuring
-            setTimeout(() => {
-                if (this.breadcrumbContainer?.nativeElement) {
-                    const element = this.breadcrumbContainer.nativeElement;
-                    const hasOverflow = element.scrollWidth > element.clientWidth;
-                    if (!hasOverflow) {
-                        // It fits! Update the counter
-                        this.itemsInOverflow = testItemsInOverflow;
-                        this.isOverflowing.set(this.itemsInOverflow > 0);
-                        // Try to reduce more if there are still items in overflow
-                        if (this.itemsInOverflow > 0) {
-                            // Schedule next reduction attempt after current render cycle
-                            setTimeout(() => this.tryReduceOverflow(), 0);
-                        }
-                    }
-                    else {
-                        // Doesn't fit, revert to previous state
-                        this.updateItemArrays();
-                        // Wait for DOM to render reverted state before checking truncation
-                        setTimeout(() => {
-                            if (this.breadcrumbContainer?.nativeElement) {
-                                const containerElement = this.breadcrumbContainer.nativeElement;
-                                const stillOverflowing = containerElement.scrollWidth > containerElement.clientWidth;
-                                if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {
-                                    this.shouldTruncateLastItem.set(true);
-                                }
-                            }
-                        }, 0);
-                    }
-                }
-            }, 0);
-        }
-        else {
-            // testItemsInOverflow < 0, means we're trying to show all items
-            this.resetToAllVisible();
-            // Wait for DOM to render all items before measuring overflow
-            setTimeout(() => {
-                if (this.breadcrumbContainer?.nativeElement) {
-                    const element = this.breadcrumbContainer.nativeElement;
-                    const hasOverflow = element.scrollWidth > element.clientWidth;
-                    if (hasOverflow) {
-                        // Still overflows with all items, need to go back to overflow state
-                        this.itemsInOverflow = 1; // Start with minimal overflow
-                        this.handleOverflow();
-                    }
-                }
-            }, 0);
-        }
-    }
-    updateItemArrays() {
-        if (this.itemsInOverflow > 0) {
-            this.overflowItems.set(this.items().slice(0, this.itemsInOverflow));
-            this.visibleItems.set(this.items().slice(this.itemsInOverflow));
-        }
-        else {
-            this.resetToAllVisible();
-        }
-    }
-    resetToAllVisible() {
-        this.visibleItems.set(this.items());
-        this.overflowItems.set([]);
-        this.isOverflowing.set(false);
-        this.shouldTruncateLastItem.set(false);
-        this.itemsInOverflow = 0;
-    }
-    setupResizeObserver() {
-        if (!this.breadcrumbContainer?.nativeElement) {
-            return;
-        }
-        this.resizeObserver = new ResizeObserver(() => {
-            this.calculateItemDistribution();
-        });
-        this.resizeObserver.observe(this.breadcrumbContainer.nativeElement);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: BreadcrumbComponent, isStandalone: true, selector: "ui-breadcrumb", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, includeBackButton: { classPropertyName: "includeBackButton", publicName: "includeBackButton", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, numberOfLoadingItems: { classPropertyName: "numberOfLoadingItems", publicName: "numberOfLoadingItems", isSignal: true, isRequired: false, transformFunction: null }, maxItemLength: { classPropertyName: "maxItemLength", publicName: "maxItemLength", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectItem: "selectItem", backButtonClickEvent: "backButtonClickEvent" }, viewQueries: [{ propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], ngImport: i0, template: "@if (!isLoading()) {\n  <div\n    class=\"breadcrumb\"\n    [attr.theme]=\"applicationTheme()\"\n    #breadcrumbContainer\n    [class]=\"'breadcrumb-' + size()\"\n    [attr.data-testid]=\"testId()\"\n  >\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\n        [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [testId]=\"backButtonTestId()\"\n        (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n      ></ui-button>\n    }\n    @if (isOverflowing()) {\n      <ui-overflow-menu\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"overflowMenu\"\n        [buttons]=\"overflowButtonItems()\"\n        [matTooltip]=\"('COMMON.OPTIONS' | uiTranslate | async)!\"\n        [matTooltipClass]=\"applicationTheme()\"\n        [isDynamicMenu]=\"true\"\n        (selectItem)=\"selectItem.emit($event)\"\n        class=\"breadcrumb-overflow-menu\"\n      ></ui-overflow-menu>\n      <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n    }\n    @for (item of visibleItems(); track item.value) {\n      @if (!$last) {\n        <span\n          class=\"breadcrumb-item\"\n          tabindex=\"0\"\n          [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.data-testid]=\"itemTestId(item.value)\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: maxItemLength() : '...' }}\n        </span>\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      } @else {\n        <strong\n          class=\"breadcrumb-item-active\"\n          tabindex=\"0\"\n          [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"'page'\"\n          [attr.data-testid]=\"itemTestId(item.value)\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label }}\n        </strong>\n      }\n    }\n  </div>\n} @else {\n  <div class=\"breadcrumb\">\n    @for (i of loadingItems(); track $index) {\n      <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n      @if ($index !== numberOfLoadingItems() - 1) {\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      }\n    }\n  </div>\n}\n<ng-template #overflowMenu>\n  <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\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{min-width:0}:host .breadcrumb{display:flex;align-items:center;gap:4px;color:#666}:host .breadcrumb .breadcrumb-item{text-decoration:underline;cursor:pointer;transition:color .15s ease,transform .1s ease;white-space:nowrap}:host .breadcrumb .breadcrumb-item:hover{color:#919191}:host .breadcrumb .breadcrumb-item:active{transform:scale(.98);color:#919191}:host .breadcrumb .breadcrumb-item:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb.breadcrumb-large{font-size:32px;line-height:48px}:host .breadcrumb.breadcrumb-large .breadcrumb-item:focus-visible{outline-offset:8px}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active{font-weight:900!important}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active:focus-visible{outline-offset:8px}:host .breadcrumb .breadcrumb-item-active{color:#242424;white-space:nowrap}:host .breadcrumb .breadcrumb-item-active.breadcrumb-item-active-truncated{text-overflow:ellipsis;overflow:hidden}:host .breadcrumb .breadcrumb-item-active:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb .breadcrumb-overflow-menu ::ng-deep .overflow-menu-container .mat-mdc-menu-trigger{min-width:0}:host .breadcrumb-overflow{cursor:pointer;color:#666}:host .breadcrumb-overflow:active{transform:scale(.98);color:#919191}:host .breadcrumb-overflow.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb-overflow.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb-overflow.breadcrumb-large{font-size:32px;line-height:48px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i1.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: OverflowMenuComponentModule }, { kind: "component", type: i2.OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "testId", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "selectionMode", "menuAnchor", "shouldMatchAnchorWidth", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: BreadcrumbComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        ButtonComponentModule,
-                        OverflowMenuComponentModule,
-                        MatTooltip,
-                        IconComponentModule,
-                        SkeletonComponent,
-                        AsyncPipe,
-                        UiTranslatePipe,
-                        TruncatePipe,
-                    ], template: "@if (!isLoading()) {\n  <div\n    class=\"breadcrumb\"\n    [attr.theme]=\"applicationTheme()\"\n    #breadcrumbContainer\n    [class]=\"'breadcrumb-' + size()\"\n    [attr.data-testid]=\"testId()\"\n  >\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\n        [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [testId]=\"backButtonTestId()\"\n        (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n      ></ui-button>\n    }\n    @if (isOverflowing()) {\n      <ui-overflow-menu\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"overflowMenu\"\n        [buttons]=\"overflowButtonItems()\"\n        [matTooltip]=\"('COMMON.OPTIONS' | uiTranslate | async)!\"\n        [matTooltipClass]=\"applicationTheme()\"\n        [isDynamicMenu]=\"true\"\n        (selectItem)=\"selectItem.emit($event)\"\n        class=\"breadcrumb-overflow-menu\"\n      ></ui-overflow-menu>\n      <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n    }\n    @for (item of visibleItems(); track item.value) {\n      @if (!$last) {\n        <span\n          class=\"breadcrumb-item\"\n          tabindex=\"0\"\n          [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.data-testid]=\"itemTestId(item.value)\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: maxItemLength() : '...' }}\n        </span>\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      } @else {\n        <strong\n          class=\"breadcrumb-item-active\"\n          tabindex=\"0\"\n          [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"'page'\"\n          [attr.data-testid]=\"itemTestId(item.value)\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label }}\n        </strong>\n      }\n    }\n  </div>\n} @else {\n  <div class=\"breadcrumb\">\n    @for (i of loadingItems(); track $index) {\n      <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n      @if ($index !== numberOfLoadingItems() - 1) {\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      }\n    }\n  </div>\n}\n<ng-template #overflowMenu>\n  <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\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{min-width:0}:host .breadcrumb{display:flex;align-items:center;gap:4px;color:#666}:host .breadcrumb .breadcrumb-item{text-decoration:underline;cursor:pointer;transition:color .15s ease,transform .1s ease;white-space:nowrap}:host .breadcrumb .breadcrumb-item:hover{color:#919191}:host .breadcrumb .breadcrumb-item:active{transform:scale(.98);color:#919191}:host .breadcrumb .breadcrumb-item:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb.breadcrumb-large{font-size:32px;line-height:48px}:host .breadcrumb.breadcrumb-large .breadcrumb-item:focus-visible{outline-offset:8px}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active{font-weight:900!important}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active:focus-visible{outline-offset:8px}:host .breadcrumb .breadcrumb-item-active{color:#242424;white-space:nowrap}:host .breadcrumb .breadcrumb-item-active.breadcrumb-item-active-truncated{text-overflow:ellipsis;overflow:hidden}:host .breadcrumb .breadcrumb-item-active:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb .breadcrumb-overflow-menu ::ng-deep .overflow-menu-container .mat-mdc-menu-trigger{min-width:0}:host .breadcrumb-overflow{cursor:pointer;color:#666}:host .breadcrumb-overflow:active{transform:scale(.98);color:#919191}:host .breadcrumb-overflow.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb-overflow.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb-overflow.breadcrumb-large{font-size:32px;line-height:48px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], includeBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeBackButton", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], numberOfLoadingItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfLoadingItems", required: false }] }], maxItemLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItemLength", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], selectItem: [{
-                type: Output
-            }], backButtonClickEvent: [{
-                type: Output
-            }], breadcrumbContainer: [{
-                type: ViewChild,
-                args: ['breadcrumbContainer']
-            }] } });
-
-class BreadcrumbComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: BreadcrumbComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: BreadcrumbComponentModule, imports: [CommonModule,
-            IconComponentModule,
-            MatTooltipModule,
-            OverflowMenuComponentModule,
-            ButtonComponentModule,
-            SkeletonComponent,
-            UiTranslatePipe,
-            TruncatePipe,
-            BreadcrumbComponent], exports: [BreadcrumbComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: BreadcrumbComponentModule, imports: [CommonModule,
-            IconComponentModule,
-            MatTooltipModule,
-            OverflowMenuComponentModule,
-            ButtonComponentModule,
-            SkeletonComponent,
-            BreadcrumbComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: BreadcrumbComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IconComponentModule,
-                        MatTooltipModule,
-                        OverflowMenuComponentModule,
-                        ButtonComponentModule,
-                        SkeletonComponent,
-                        UiTranslatePipe,
-                        TruncatePipe,
-                        BreadcrumbComponent,
-                    ],
-                    exports: [BreadcrumbComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { AsyncPipe, CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, NgModule, Output, ViewChild, afterNextRender, computed, effect, input, signal } from "@angular/core";
+import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
+import * as i1 from "@testgorilla/tgo-ui/components/button";
+import { ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { TruncatePipe, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i3 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import * as i2 from "@testgorilla/tgo-ui/components/overflow-menu";
+import { OverflowMenuComponentModule } from "@testgorilla/tgo-ui/components/overflow-menu";
+import { SkeletonComponent } from "@testgorilla/tgo-ui/components/skeleton";
+var BreadcrumbComponent = class BreadcrumbComponent {
+	itemTestId(value) {
+		const testId = this.testId();
+		return testId ? `${testId}-item-${value}` : null;
+	}
+	constructor(parentInjector) {
+		this.parentInjector = parentInjector;
+		this.size = input("large", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+		this.applicationTheme = input("light", ...ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []);
+		this.includeBackButton = input(false, ...ngDevMode ? [{ debugName: "includeBackButton" }] : /* istanbul ignore next */ []);
+		this.isLoading = input(false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+		this.numberOfLoadingItems = input(3, ...ngDevMode ? [{ debugName: "numberOfLoadingItems" }] : /* istanbul ignore next */ []);
+		this.maxItemLength = input(18, ...ngDevMode ? [{ debugName: "maxItemLength" }] : /* istanbul ignore next */ []);
+		this.testId = input(null, ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
+		this.backButtonTestId = computed(() => this.testId() ? `${this.testId()}-back` : null, ...ngDevMode ? [{ debugName: "backButtonTestId" }] : /* istanbul ignore next */ []);
+		this.selectItem = new EventEmitter();
+		this.backButtonClickEvent = new EventEmitter();
+		this.loadingItems = computed(() => new Array(this.numberOfLoadingItems()), ...ngDevMode ? [{ debugName: "loadingItems" }] : /* istanbul ignore next */ []);
+		this.isOverflowing = signal(false, ...ngDevMode ? [{ debugName: "isOverflowing" }] : /* istanbul ignore next */ []);
+		this.visibleItems = signal([], ...ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []);
+		this.overflowItems = signal([], ...ngDevMode ? [{ debugName: "overflowItems" }] : /* istanbul ignore next */ []);
+		this.overflowButtonItems = computed(() => this.overflowItems().map((item) => ({
+			label: item.label,
+			value: item.value
+		})), ...ngDevMode ? [{ debugName: "overflowButtonItems" }] : /* istanbul ignore next */ []);
+		this.shouldTruncateLastItem = signal(false, ...ngDevMode ? [{ debugName: "shouldTruncateLastItem" }] : /* istanbul ignore next */ []);
+		this.itemsInOverflow = 0;
+		this.injector = parentInjector;
+		effect(() => {
+			this.items();
+			this.itemsInOverflow = 0;
+			if (!this.isLoading()) afterNextRender(() => {
+				if (this.breadcrumbContainer?.nativeElement) this.calculateItemDistribution();
+			}, { injector: this.injector });
+		});
+		effect(() => {
+			const currentLoadingState = this.isLoading();
+			if (this.previousLoadingState === true && currentLoadingState === false) afterNextRender(() => {
+				this.setupResizeObserver();
+			}, { injector: this.injector });
+			this.previousLoadingState = currentLoadingState;
+		});
+	}
+	ngAfterViewInit() {
+		this.calculateItemDistribution();
+		this.setupResizeObserver();
+	}
+	ngOnDestroy() {
+		this.resizeObserver?.disconnect();
+	}
+	calculateItemDistribution() {
+		if (!this.breadcrumbContainer?.nativeElement || this.items().length === 0) {
+			this.resetToAllVisible();
+			return;
+		}
+		const element = this.breadcrumbContainer.nativeElement;
+		if (element.scrollWidth > element.clientWidth) this.handleOverflow();
+		else if (this.itemsInOverflow > 0) this.tryReduceOverflow();
+		else this.resetToAllVisible();
+	}
+	handleOverflow() {
+		this.itemsInOverflow = Math.min(this.itemsInOverflow + 1, this.items().length - 1);
+		this.updateItemArrays();
+		this.isOverflowing.set(true);
+		setTimeout(() => {
+			if (this.breadcrumbContainer?.nativeElement) {
+				const element = this.breadcrumbContainer.nativeElement;
+				const stillOverflowing = element.scrollWidth > element.clientWidth;
+				if (stillOverflowing && this.itemsInOverflow < this.items().length - 1) this.handleOverflow();
+				else if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) this.shouldTruncateLastItem.set(true);
+			}
+		}, 0);
+	}
+	tryReduceOverflow() {
+		const testItemsInOverflow = this.itemsInOverflow - 1;
+		if (testItemsInOverflow >= 0) {
+			const testVisibleItems = this.items().slice(testItemsInOverflow);
+			const testOverflowItems = testItemsInOverflow > 0 ? this.items().slice(0, testItemsInOverflow) : [];
+			this.visibleItems.set(testVisibleItems);
+			this.overflowItems.set(testOverflowItems);
+			this.shouldTruncateLastItem.set(false);
+			setTimeout(() => {
+				if (this.breadcrumbContainer?.nativeElement) {
+					const element = this.breadcrumbContainer.nativeElement;
+					if (!(element.scrollWidth > element.clientWidth)) {
+						this.itemsInOverflow = testItemsInOverflow;
+						this.isOverflowing.set(this.itemsInOverflow > 0);
+						if (this.itemsInOverflow > 0) setTimeout(() => this.tryReduceOverflow(), 0);
+					} else {
+						this.updateItemArrays();
+						setTimeout(() => {
+							if (this.breadcrumbContainer?.nativeElement) {
+								const containerElement = this.breadcrumbContainer.nativeElement;
+								if (containerElement.scrollWidth > containerElement.clientWidth && this.itemsInOverflow === this.items().length - 1) this.shouldTruncateLastItem.set(true);
+							}
+						}, 0);
+					}
+				}
+			}, 0);
+		} else {
+			this.resetToAllVisible();
+			setTimeout(() => {
+				if (this.breadcrumbContainer?.nativeElement) {
+					const element = this.breadcrumbContainer.nativeElement;
+					if (element.scrollWidth > element.clientWidth) {
+						this.itemsInOverflow = 1;
+						this.handleOverflow();
+					}
+				}
+			}, 0);
+		}
+	}
+	updateItemArrays() {
+		if (this.itemsInOverflow > 0) {
+			this.overflowItems.set(this.items().slice(0, this.itemsInOverflow));
+			this.visibleItems.set(this.items().slice(this.itemsInOverflow));
+		} else this.resetToAllVisible();
+	}
+	resetToAllVisible() {
+		this.visibleItems.set(this.items());
+		this.overflowItems.set([]);
+		this.isOverflowing.set(false);
+		this.shouldTruncateLastItem.set(false);
+		this.itemsInOverflow = 0;
+	}
+	setupResizeObserver() {
+		if (!this.breadcrumbContainer?.nativeElement) return;
+		this.resizeObserver = new ResizeObserver(() => {
+			this.calculateItemDistribution();
+		});
+		this.resizeObserver.observe(this.breadcrumbContainer.nativeElement);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: BreadcrumbComponent,
+			deps: [{ token: i0.Injector }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: BreadcrumbComponent,
+			isStandalone: true,
+			selector: "ui-breadcrumb",
+			inputs: {
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				items: {
+					classPropertyName: "items",
+					publicName: "items",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				applicationTheme: {
+					classPropertyName: "applicationTheme",
+					publicName: "applicationTheme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				includeBackButton: {
+					classPropertyName: "includeBackButton",
+					publicName: "includeBackButton",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isLoading: {
+					classPropertyName: "isLoading",
+					publicName: "isLoading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				numberOfLoadingItems: {
+					classPropertyName: "numberOfLoadingItems",
+					publicName: "numberOfLoadingItems",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxItemLength: {
+					classPropertyName: "maxItemLength",
+					publicName: "maxItemLength",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				selectItem: "selectItem",
+				backButtonClickEvent: "backButtonClickEvent"
+			},
+			viewQueries: [{
+				propertyName: "breadcrumbContainer",
+				first: true,
+				predicate: ["breadcrumbContainer"],
+				descendants: true
+			}],
+			ngImport: i0,
+			template: "@if (!isLoading()) {\n  <div\n    class=\"breadcrumb\"\n    [attr.theme]=\"applicationTheme()\"\n    #breadcrumbContainer\n    [class]=\"'breadcrumb-' + size()\"\n    [attr.data-testid]=\"testId()\"\n  >\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\n        [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [testId]=\"backButtonTestId()\"\n        (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n      ></ui-button>\n    }\n    @if (isOverflowing()) {\n      <ui-overflow-menu\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"overflowMenu\"\n        [buttons]=\"overflowButtonItems()\"\n        [matTooltip]=\"('COMMON.OPTIONS' | uiTranslate | async)!\"\n        [matTooltipClass]=\"applicationTheme()\"\n        [isDynamicMenu]=\"true\"\n        (selectItem)=\"selectItem.emit($event)\"\n        class=\"breadcrumb-overflow-menu\"\n      ></ui-overflow-menu>\n      <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n    }\n    @for (item of visibleItems(); track item.value) {\n      @if (!$last) {\n        <span\n          class=\"breadcrumb-item\"\n          tabindex=\"0\"\n          [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.data-testid]=\"itemTestId(item.value)\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: maxItemLength() : '...' }}\n        </span>\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      } @else {\n        <strong\n          class=\"breadcrumb-item-active\"\n          tabindex=\"0\"\n          [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"'page'\"\n          [attr.data-testid]=\"itemTestId(item.value)\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label }}\n        </strong>\n      }\n    }\n  </div>\n} @else {\n  <div class=\"breadcrumb\">\n    @for (i of loadingItems(); track $index) {\n      <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n      @if ($index !== numberOfLoadingItems() - 1) {\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      }\n    }\n  </div>\n}\n<ng-template #overflowMenu>\n  <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\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{min-width:0}:host .breadcrumb{display:flex;align-items:center;gap:4px;color:#666}:host .breadcrumb .breadcrumb-item{text-decoration:underline;cursor:pointer;transition:color .15s ease,transform .1s ease;white-space:nowrap}:host .breadcrumb .breadcrumb-item:hover{color:#919191}:host .breadcrumb .breadcrumb-item:active{transform:scale(.98);color:#919191}:host .breadcrumb .breadcrumb-item:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb.breadcrumb-large{font-size:32px;line-height:48px}:host .breadcrumb.breadcrumb-large .breadcrumb-item:focus-visible{outline-offset:8px}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active{font-weight:900!important}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active:focus-visible{outline-offset:8px}:host .breadcrumb .breadcrumb-item-active{color:#242424;white-space:nowrap}:host .breadcrumb .breadcrumb-item-active.breadcrumb-item-active-truncated{text-overflow:ellipsis;overflow:hidden}:host .breadcrumb .breadcrumb-item-active:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb .breadcrumb-overflow-menu ::ng-deep .overflow-menu-container .mat-mdc-menu-trigger{min-width:0}:host .breadcrumb-overflow{cursor:pointer;color:#666}:host .breadcrumb-overflow:active{transform:scale(.98);color:#919191}:host .breadcrumb-overflow.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb-overflow.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb-overflow.breadcrumb-large{font-size:32px;line-height:48px}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: ButtonComponentModule
+				},
+				{
+					kind: "component",
+					type: i1.ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "ngmodule",
+					type: OverflowMenuComponentModule
+				},
+				{
+					kind: "component",
+					type: i2.OverflowMenuComponent,
+					selector: "ui-overflow-menu",
+					inputs: [
+						"buttons",
+						"iconTrigger",
+						"menuLabel",
+						"applicationTheme",
+						"ariaLabel",
+						"testId",
+						"ariaRequired",
+						"describedby",
+						"contentTemplateRef",
+						"buttonVariant",
+						"buttonSize",
+						"menuConfig",
+						"selectionMode",
+						"menuAnchor",
+						"shouldMatchAnchorWidth",
+						"isDynamicMenu",
+						"withRemovableOption"
+					],
+					outputs: [
+						"selectItem",
+						"menuOpened",
+						"menuClosed"
+					]
+				},
+				{
+					kind: "directive",
+					type: MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i3.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "component",
+					type: SkeletonComponent,
+					selector: "ui-skeleton",
+					inputs: [
+						"count",
+						"theme",
+						"appearance",
+						"isAiTheme",
+						"applicationTheme"
+					]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				},
+				{
+					kind: "pipe",
+					type: TruncatePipe,
+					name: "truncate"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: BreadcrumbComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-breadcrumb",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				ButtonComponentModule,
+				OverflowMenuComponentModule,
+				MatTooltip,
+				IconComponentModule,
+				SkeletonComponent,
+				AsyncPipe,
+				UiTranslatePipe,
+				TruncatePipe
+			],
+			template: "@if (!isLoading()) {\n  <div\n    class=\"breadcrumb\"\n    [attr.theme]=\"applicationTheme()\"\n    #breadcrumbContainer\n    [class]=\"'breadcrumb-' + size()\"\n    [attr.data-testid]=\"testId()\"\n  >\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\n        [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [testId]=\"backButtonTestId()\"\n        (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n      ></ui-button>\n    }\n    @if (isOverflowing()) {\n      <ui-overflow-menu\n        [applicationTheme]=\"applicationTheme()\"\n        [contentTemplateRef]=\"overflowMenu\"\n        [buttons]=\"overflowButtonItems()\"\n        [matTooltip]=\"('COMMON.OPTIONS' | uiTranslate | async)!\"\n        [matTooltipClass]=\"applicationTheme()\"\n        [isDynamicMenu]=\"true\"\n        (selectItem)=\"selectItem.emit($event)\"\n        class=\"breadcrumb-overflow-menu\"\n      ></ui-overflow-menu>\n      <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n    }\n    @for (item of visibleItems(); track item.value) {\n      @if (!$last) {\n        <span\n          class=\"breadcrumb-item\"\n          tabindex=\"0\"\n          [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.data-testid]=\"itemTestId(item.value)\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: maxItemLength() : '...' }}\n        </span>\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      } @else {\n        <strong\n          class=\"breadcrumb-item-active\"\n          tabindex=\"0\"\n          [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n          [attr.aria-label]=\"item.label\"\n          [attr.aria-current]=\"'page'\"\n          [attr.data-testid]=\"itemTestId(item.value)\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label }}\n        </strong>\n      }\n    }\n  </div>\n} @else {\n  <div class=\"breadcrumb\">\n    @for (i of loadingItems(); track $index) {\n      <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n      @if ($index !== numberOfLoadingItems() - 1) {\n        <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n      }\n    }\n  </div>\n}\n<ng-template #overflowMenu>\n  <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\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{min-width:0}:host .breadcrumb{display:flex;align-items:center;gap:4px;color:#666}:host .breadcrumb .breadcrumb-item{text-decoration:underline;cursor:pointer;transition:color .15s ease,transform .1s ease;white-space:nowrap}:host .breadcrumb .breadcrumb-item:hover{color:#919191}:host .breadcrumb .breadcrumb-item:active{transform:scale(.98);color:#919191}:host .breadcrumb .breadcrumb-item:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb.breadcrumb-large{font-size:32px;line-height:48px}:host .breadcrumb.breadcrumb-large .breadcrumb-item:focus-visible{outline-offset:8px}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active{font-weight:900!important}:host .breadcrumb.breadcrumb-large .breadcrumb-item-active:focus-visible{outline-offset:8px}:host .breadcrumb .breadcrumb-item-active{color:#242424;white-space:nowrap}:host .breadcrumb .breadcrumb-item-active.breadcrumb-item-active-truncated{text-overflow:ellipsis;overflow:hidden}:host .breadcrumb .breadcrumb-item-active:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}:host .breadcrumb .breadcrumb-overflow-menu ::ng-deep .overflow-menu-container .mat-mdc-menu-trigger{min-width:0}:host .breadcrumb-overflow{cursor:pointer;color:#666}:host .breadcrumb-overflow:active{transform:scale(.98);color:#919191}:host .breadcrumb-overflow.breadcrumb-small{font-size:14px;line-height:22px}:host .breadcrumb-overflow.breadcrumb-medium{font-size:20px;line-height:26px}:host .breadcrumb-overflow.breadcrumb-large{font-size:32px;line-height:48px}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.Injector }],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		applicationTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "applicationTheme",
+				required: false
+			}]
+		}],
+		includeBackButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "includeBackButton",
+				required: false
+			}]
+		}],
+		isLoading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isLoading",
+				required: false
+			}]
+		}],
+		numberOfLoadingItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numberOfLoadingItems",
+				required: false
+			}]
+		}],
+		maxItemLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxItemLength",
+				required: false
+			}]
+		}],
+		testId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testId",
+				required: false
+			}]
+		}],
+		selectItem: [{ type: Output }],
+		backButtonClickEvent: [{ type: Output }],
+		breadcrumbContainer: [{
+			type: ViewChild,
+			args: ["breadcrumbContainer"]
+		}]
+	}
+});
+var BreadcrumbComponentModule = class BreadcrumbComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: BreadcrumbComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: BreadcrumbComponentModule,
+			imports: [
+				CommonModule,
+				IconComponentModule,
+				MatTooltipModule,
+				OverflowMenuComponentModule,
+				ButtonComponentModule,
+				SkeletonComponent,
+				UiTranslatePipe,
+				TruncatePipe,
+				BreadcrumbComponent
+			],
+			exports: [BreadcrumbComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: BreadcrumbComponentModule,
+			imports: [
+				CommonModule,
+				IconComponentModule,
+				MatTooltipModule,
+				OverflowMenuComponentModule,
+				ButtonComponentModule,
+				SkeletonComponent,
+				BreadcrumbComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: BreadcrumbComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				IconComponentModule,
+				MatTooltipModule,
+				OverflowMenuComponentModule,
+				ButtonComponentModule,
+				SkeletonComponent,
+				UiTranslatePipe,
+				TruncatePipe,
+				BreadcrumbComponent
+			],
+			exports: [BreadcrumbComponent]
+		}]
+	}]
+});
 export { BreadcrumbComponent, BreadcrumbComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-breadcrumb.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-breadcrumb.mjs.map