@testgorilla/tgo-ui 3.11.1 → 3.11.3

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -14516,7 +14516,7 @@ class FieldComponent {
          * @memberof FieldComponent
          */
         this.labelHtml = input(null, {
-            transform: (value) => this.domSanitizer.bypassSecurityTrustHtml(value)
+            transform: (value) => this.domSanitizer.bypassSecurityTrustHtml(value),
         });
         /**
          * Input placeholder
@@ -14774,6 +14774,12 @@ class FieldComponent {
     setSearchInput() {
         if (this.type === 'search' || this.type === 'collapsed-search') {
             this.matIconRegistry.addSvgIcon('Search', this.domSanitizer.bypassSecurityTrustResourceUrl('/icons/Search.svg'));
+            if (this.value) {
+                this.showClose = true;
+            }
+            else {
+                this.showClose = false;
+            }
         }
         else {
             this.showClose = false;
@@ -25772,6 +25778,244 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class TruncatePipe {
+    transform(input, length, suffix, preserve) {
+        if (typeof input !== 'string') {
+            return input;
+        }
+        length = length === undefined ? input.length : length;
+        if (input.length <= length) {
+            return input;
+        }
+        preserve = preserve || false;
+        suffix = suffix || '';
+        let index = length;
+        if (preserve) {
+            if (input.indexOf(' ', length) === -1) {
+                index = input.length;
+            }
+            else {
+                index = input.indexOf(' ', length);
+            }
+        }
+        return input.substring(0, index) + suffix;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TruncatePipe, name: "truncate" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TruncatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'truncate',
+                }]
+        }] });
+
+class BreadcrumbComponent {
+    constructor() {
+        this.size = input('large');
+        this.items = input([]);
+        this.applicationTheme = input('light');
+        this.includeBackButton = input(false);
+        this.isLoading = input(false);
+        this.numberOfLoadingItems = input(3);
+        this.selectItem = new EventEmitter();
+        this.backButtonClickEvent = new EventEmitter();
+        this.loadingItems = computed(() => Array(this.numberOfLoadingItems()));
+        this.isOverflowing = signal(false);
+        this.visibleItems = signal([]);
+        this.overflowItems = signal([]);
+        this.overflowButtonItems = computed(() => this.overflowItems().map(item => ({
+            label: item.label,
+            value: item.value,
+        })));
+        this.shouldTruncateLastItem = signal(false);
+        this.itemsInOverflow = 0;
+        // React to items changes and recalculate overflow
+        effect(() => {
+            this.items();
+            this.itemsInOverflow = 0;
+            if (this.breadcrumbContainer?.nativeElement) {
+                // Wait for DOM to render new items before calculating overflow
+                setTimeout(() => this.calculateItemDistribution(), 0);
+            }
+        });
+    }
+    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: "18.2.13", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: BreadcrumbComponent, 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 } }, outputs: { selectItem: "selectItem", backButtonClickEvent: "backButtonClickEvent" }, viewQueries: [{ propertyName: "breadcrumbContainer", first: true, predicate: ["breadcrumbContainer"], descendants: true }], ngImport: i0, template: "@if (!isLoading()) {\n  <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\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 > 10 ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: 12 : '...' }}\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          (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}.breadcrumb{display:flex;align-items:center;gap:4px;color:#666}.breadcrumb .breadcrumb-item{text-decoration:underline;cursor:pointer;transition:color .15s ease,transform .1s ease;white-space:nowrap}.breadcrumb .breadcrumb-item:hover{color:#919191}.breadcrumb .breadcrumb-item:active{transform:scale(.98);color:#919191}.breadcrumb .breadcrumb-item:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}.breadcrumb.breadcrumb-small{font-size:14px;line-height:22px}.breadcrumb.breadcrumb-medium{font-size:20px;line-height:26px}.breadcrumb.breadcrumb-large{font-size:32px;line-height:48px}.breadcrumb.breadcrumb-large .breadcrumb-item:focus-visible{outline-offset:8px}.breadcrumb.breadcrumb-large .breadcrumb-item-active:focus-visible{outline-offset:8px}.breadcrumb .breadcrumb-item-active{color:#242424;white-space:nowrap}.breadcrumb .breadcrumb-item-active.breadcrumb-item-active-truncated{text-overflow:ellipsis;overflow:hidden}.breadcrumb .breadcrumb-item-active:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}.breadcrumb .breadcrumb-overflow-menu ::ng-deep .overflow-menu-container .mat-mdc-menu-trigger{min-width:0}.breadcrumb-overflow{cursor:pointer;color:#666}.breadcrumb-overflow:active{transform:scale(.98);color:#919191}.breadcrumb-overflow.breadcrumb-small{font-size:14px;line-height:22px}.breadcrumb-overflow.breadcrumb-medium{font-size:20px;line-height:26px}.breadcrumb-overflow.breadcrumb-large{font-size:32px;line-height:48px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "isDynamicMenu"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "pipe", type: i1$1.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: "18.2.13", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!isLoading()) {\n  <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n    @if (includeBackButton()) {\n      <ui-button\n        [variant]=\"'icon-button'\"\n        [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n        [iconName]=\"'Arrow-chevron-left-filled'\"\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 > 10 ? item.label : ''\"\n          [matTooltipClass]=\"applicationTheme()\"\n          [attr.aria-label]=\"item.label\"\n          (click)=\"selectItem.emit(item.value)\"\n          (keydown.enter)=\"selectItem.emit(item.value)\"\n        >\n          {{ item.label | truncate: 12 : '...' }}\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          (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}.breadcrumb{display:flex;align-items:center;gap:4px;color:#666}.breadcrumb .breadcrumb-item{text-decoration:underline;cursor:pointer;transition:color .15s ease,transform .1s ease;white-space:nowrap}.breadcrumb .breadcrumb-item:hover{color:#919191}.breadcrumb .breadcrumb-item:active{transform:scale(.98);color:#919191}.breadcrumb .breadcrumb-item:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}.breadcrumb.breadcrumb-small{font-size:14px;line-height:22px}.breadcrumb.breadcrumb-medium{font-size:20px;line-height:26px}.breadcrumb.breadcrumb-large{font-size:32px;line-height:48px}.breadcrumb.breadcrumb-large .breadcrumb-item:focus-visible{outline-offset:8px}.breadcrumb.breadcrumb-large .breadcrumb-item-active:focus-visible{outline-offset:8px}.breadcrumb .breadcrumb-item-active{color:#242424;white-space:nowrap}.breadcrumb .breadcrumb-item-active.breadcrumb-item-active-truncated{text-overflow:ellipsis;overflow:hidden}.breadcrumb .breadcrumb-item-active:focus-visible{outline:2px solid #242424;outline-offset:4px;border-radius:1px}.breadcrumb .breadcrumb-overflow-menu ::ng-deep .overflow-menu-container .mat-mdc-menu-trigger{min-width:0}.breadcrumb-overflow{cursor:pointer;color:#666}.breadcrumb-overflow:active{transform:scale(.98);color:#919191}.breadcrumb-overflow.breadcrumb-small{font-size:14px;line-height:22px}.breadcrumb-overflow.breadcrumb-medium{font-size:20px;line-height:26px}.breadcrumb-overflow.breadcrumb-large{font-size:32px;line-height:48px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectItem: [{
+                type: Output
+            }], backButtonClickEvent: [{
+                type: Output
+            }], breadcrumbContainer: [{
+                type: ViewChild,
+                args: ['breadcrumbContainer']
+            }] } });
+
+class BreadcrumbComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbComponentModule, declarations: [BreadcrumbComponent, TruncatePipe], imports: [CommonModule,
+            IconComponentModule,
+            MatTooltipModule,
+            OverflowMenuComponentModule,
+            ButtonComponentModule,
+            SkeletonComponent,
+            UiTranslatePipe], exports: [BreadcrumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbComponentModule, providers: [TruncatePipe], imports: [CommonModule,
+            IconComponentModule,
+            MatTooltipModule,
+            OverflowMenuComponentModule,
+            ButtonComponentModule,
+            SkeletonComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BreadcrumbComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BreadcrumbComponent, TruncatePipe],
+                    imports: [
+                        CommonModule,
+                        IconComponentModule,
+                        MatTooltipModule,
+                        OverflowMenuComponentModule,
+                        ButtonComponentModule,
+                        SkeletonComponent,
+                        UiTranslatePipe,
+                    ],
+                    providers: [TruncatePipe],
+                    exports: [BreadcrumbComponent],
+                }]
+        }] });
+
 /* eslint-disable */
 /* Components */
 // Universal skills report
@@ -25780,5 +26024,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AMOUNT_TAG_WIDTH, AccordionComponent, AccordionComponentModule, AiFeedbackComponent, AiFeedbackModule, AlertBannerComponent, AlertBannerComponentModule, Autocomplete, AutocompleteComponent, AutocompleteComponentModule, AvatarBackgroundColor, AvatarComponent, AvatarComponentModule, AvatarSize, BadgeColorEnum, BadgeComponent, BadgeComponentModule, BadgeVariantEnum, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ChecklistComponent, Color, ColumnAlignment, ColumnAlignmentEnum, ColumnType, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DeprecatedPaginatorComponent, DeprecatedPaginatorComponentModule, DialogComponent, DialogComponentModule, DialogService, DividerComponent, DividerComponentModule, DonutChartComponent, DonutChartComponentModule, DropdownComponent, DropdownComponentModule, DropdownVariation, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, EmptyStateComponent, EmptyStateComponentModule, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, FilterButtonComponent, FilterButtonComponentModule, GaussianChartComponent, GaussianChartComponentModule, IS_MOBILE_TOKEN, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, IconsService, InlineFieldComponent, InlineFieldComponentModule, Language, LanguageService, LargeSpiderChartSize, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, MediaCardComponent, MemoizeFuncPipe, MultiInputComponent, MultiInputComponentModule, NavbarComponent, NavbarComponentModule, OverflowMenuComponent, OverflowMenuComponentModule, Padding, PageHeaderComponent, PageHeaderModule, PaginatorComponent, PaginatorComponentModule, PasswordComponent, PasswordComponentModule, PasswordStrengthComponent, PasswordStrengthComponentModule, PhoneInputComponent, PhoneInputComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadialProgressComponent, RadialProgressComponentModule, RadialProgressSizeEnum, RadialProgressSizeValue, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, RebrandBadgeColorEnum, SIDE_PANEL_CONFIG, SIDE_PANEL_DATA, ScaleComponent, ScaleComponentModule, ScaleTableComponent, SegmentedBarComponent, SegmentedBarComponentModule, SegmentedButtonComponent, SegmentedButtonComponentModule, SelectableCardComponent, SelectableCardComponentModule, SidePanelAnimationState, SidePanelComponent, SidePanelConfig, SidePanelService, SideSheetComponent, SideSheetComponentModule, SideSheetService, SkeletonComponent, SkillAreaGroupTypes, SkillAreaTypes, SliderComponent, SliderComponentModule, SmallSpiderChartSize, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpiderChartComponent, SpiderChartComponentModule, SpinnerComponent, SpinnerComponentModule, StepComponent, StepComponentModule, StepperComponent, StepperComponentModule, TabDirective, TableComponent, TableComponentModule, TabsComponent, TabsComponentModule, TagComponent, TagComponentModule, Timeout, ToggleComponent, ToggleComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, TooltipTemplateDirective, UniversalSkillsReportComponent, UniversalSkillsReportComponentModule, UniversalSkillsService, UniversalSkillsSpiderChartsComponent, UniversalSkillsSpiderChartsComponentModule, ValidationErrorComponent, ValidationErrorModule, defaultSidePanelConfig, fieldID, getAvailableLangs, iconSize, inlineFieldID };
+export { AMOUNT_TAG_WIDTH, AccordionComponent, AccordionComponentModule, AiFeedbackComponent, AiFeedbackModule, AlertBannerComponent, AlertBannerComponentModule, Autocomplete, AutocompleteComponent, AutocompleteComponentModule, AvatarBackgroundColor, AvatarComponent, AvatarComponentModule, AvatarSize, BadgeColorEnum, BadgeComponent, BadgeComponentModule, BadgeVariantEnum, BreadcrumbComponent, BreadcrumbComponentModule, ButtonComponent, ButtonComponentModule, CardComponent, CardComponentModule, CheckboxComponent, CheckboxComponentModule, ChecklistComponent, Color, ColumnAlignment, ColumnAlignmentEnum, ColumnType, ColumnTypeEnum, ConfirmDialogComponent, ConfirmDialogComponentModule, DataPropertyGetterPipe, DatepickerComponent, DatepickerComponentModule, DeprecatedPaginatorComponent, DeprecatedPaginatorComponentModule, DialogComponent, DialogComponentModule, DialogService, DividerComponent, DividerComponentModule, DonutChartComponent, DonutChartComponentModule, DropdownComponent, DropdownComponentModule, DropdownVariation, ElevationShadowComponent, ElevationShadowComponentModule, ElevationType, EmptyStateComponent, EmptyStateComponentModule, FieldComponent, FieldComponentModule, FileUploadComponent, FileUploadComponentModule, FilterButtonComponent, FilterButtonComponentModule, GaussianChartComponent, GaussianChartComponentModule, IS_MOBILE_TOKEN, IconComponent, IconComponentModule, IconLabelComponent, IconLabelComponentModule, IconsService, InlineFieldComponent, InlineFieldComponentModule, Language, LanguageService, LargeSpiderChartSize, LogoComponent, LogoComponentModule, LogoPathEnum, LogoTypeEnum, MediaCardComponent, MemoizeFuncPipe, MultiInputComponent, MultiInputComponentModule, NavbarComponent, NavbarComponentModule, OverflowMenuComponent, OverflowMenuComponentModule, Padding, PageHeaderComponent, PageHeaderModule, PaginatorComponent, PaginatorComponentModule, PasswordComponent, PasswordComponentModule, PasswordStrengthComponent, PasswordStrengthComponentModule, PhoneInputComponent, PhoneInputComponentModule, ProgressBarComponent, ProgressBarComponentModule, RadialProgressComponent, RadialProgressComponentModule, RadialProgressSizeEnum, RadialProgressSizeValue, RadioButtonComponent, RadioButtonComponentModule, RatingComponent, RatingComponentModule, RebrandBadgeColorEnum, SIDE_PANEL_CONFIG, SIDE_PANEL_DATA, ScaleComponent, ScaleComponentModule, ScaleTableComponent, SegmentedBarComponent, SegmentedBarComponentModule, SegmentedButtonComponent, SegmentedButtonComponentModule, SelectableCardComponent, SelectableCardComponentModule, SidePanelAnimationState, SidePanelComponent, SidePanelConfig, SidePanelService, SideSheetComponent, SideSheetComponentModule, SideSheetService, SkeletonComponent, SkillAreaGroupTypes, SkillAreaTypes, SliderComponent, SliderComponentModule, SmallSpiderChartSize, SnackbarComponent, SnackbarComponentModule, SnackbarService, SpiderChartComponent, SpiderChartComponentModule, SpinnerComponent, SpinnerComponentModule, StepComponent, StepComponentModule, StepperComponent, StepperComponentModule, TabDirective, TableComponent, TableComponentModule, TabsComponent, TabsComponentModule, TagComponent, TagComponentModule, Timeout, ToggleComponent, ToggleComponentModule, TooltipComponent, TooltipComponentModule, TooltipPositionType, TooltipTemplateDirective, UniversalSkillsReportComponent, UniversalSkillsReportComponentModule, UniversalSkillsService, UniversalSkillsSpiderChartsComponent, UniversalSkillsSpiderChartsComponentModule, ValidationErrorComponent, ValidationErrorModule, defaultSidePanelConfig, fieldID, getAvailableLangs, iconSize, inlineFieldID };
 //# sourceMappingURL=testgorilla-tgo-ui.mjs.map