@testgorilla/tgo-ui 4.2.4 → 5.0.0

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

@@ -0,0 +1,180 @@
+import * as i0 from '@angular/core';
+import { Input, Optional, Inject, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@testgorilla/tgo-ui/components/icon';
+import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+var BadgeColorEnum;
+(function (BadgeColorEnum) {
+    BadgeColorEnum["RED"] = "red";
+    BadgeColorEnum["GREY_MEDIUM"] = "grey-medium";
+    BadgeColorEnum["TEAL"] = "teal";
+    BadgeColorEnum["YELLOW"] = "yellow";
+    BadgeColorEnum["PETROL"] = "petrol";
+    BadgeColorEnum["TEAL_60W"] = "teal-60w";
+    BadgeColorEnum["PETROL_90W"] = "petrol-90w";
+    BadgeColorEnum["PETROL_60W"] = "petrol-60w";
+    BadgeColorEnum["GREY_DARK"] = "grey-dark";
+    BadgeColorEnum["BLUE_20"] = "blue-20";
+    BadgeColorEnum["BLUE_40"] = "blue-40";
+})(BadgeColorEnum || (BadgeColorEnum = {}));
+var RebrandBadgeColorEnum;
+(function (RebrandBadgeColorEnum) {
+    RebrandBadgeColorEnum["SUCCESS"] = "success";
+    RebrandBadgeColorEnum["WARNING"] = "warning";
+    RebrandBadgeColorEnum["NEGATIVE"] = "negative";
+    RebrandBadgeColorEnum["INFO"] = "info";
+    RebrandBadgeColorEnum["BRAND"] = "brand";
+    RebrandBadgeColorEnum["NEUTRAL"] = "neutral";
+    RebrandBadgeColorEnum["BLUE_40"] = "blue-40";
+    RebrandBadgeColorEnum["BLUE_20"] = "blue-20";
+    RebrandBadgeColorEnum["PINK_30"] = "pink-30";
+    RebrandBadgeColorEnum["BLUE_10"] = "blue-10";
+    RebrandBadgeColorEnum["GREY_30"] = "grey-30";
+    RebrandBadgeColorEnum["GREY_20"] = "grey-20";
+    RebrandBadgeColorEnum["GREY_10"] = "grey-10";
+})(RebrandBadgeColorEnum || (RebrandBadgeColorEnum = {}));
+var BadgeVariantEnum;
+(function (BadgeVariantEnum) {
+    BadgeVariantEnum["PRIMARY"] = "primary";
+    BadgeVariantEnum["PRIMARY_AI"] = "primary-ai";
+    BadgeVariantEnum["SECONDARY"] = "secondary";
+    BadgeVariantEnum["SECONDARY_AI"] = "secondary-ai";
+    BadgeVariantEnum["NOTIFICATION"] = "notification";
+})(BadgeVariantEnum || (BadgeVariantEnum = {}));
+
+class BadgeComponent {
+    constructor(defaultAppTheme) {
+        this.defaultAppTheme = defaultAppTheme;
+        /**
+         * The label to be displayed on the badge.
+         * @type {string}
+         * @memberof BadgeComponent
+         */
+        this.label = '';
+        /**
+         * The icon name to be displayed on the badge.
+         * @type {IconName}
+         * @memberof BadgeComponent
+         */
+        this.icon = '';
+        /**
+         * The color of the badge. Defaults to 'petrol'.
+         * @type {BadgeColor}
+         * @memberof BadgeComponent
+         */
+        this.color = 'petrol';
+        /**
+         * The variant of the badge. Defaults to 'primary'.
+         * @type {BadgeVariant}
+         * @memberof BadgeComponent
+         */
+        this.variant = 'primary';
+        /**
+         * The amount of notifications to be displayed on the badge.
+         * @type {number}
+         * @memberof BadgeComponent
+         */
+        this.notificationsAmount = 0;
+        /**
+         *
+         * Defines the application theme
+         *
+         * @type {ApplicationTheme}
+         * @memberof BadgeComponent
+         */
+        this.applicationTheme = 'light';
+        /**
+         * The color of the badge on new theme. Defaults to 'brand'.
+         * @type {RebrandBadgeColor}
+         * @memberof BadgeComponent
+         */
+        this.rebrandColor = 'brand';
+        this.truncateLabel = true;
+        /**
+         * Whether to enable the animation when label changes from empty to having content.
+         * @type {boolean}
+         * @memberof BadgeComponent
+         */
+        this.enableAnimation = false;
+        this.badgeVariant = BadgeVariantEnum;
+        this.darkColors = [
+            BadgeColorEnum.GREY_MEDIUM,
+            BadgeColorEnum.PETROL_90W,
+            BadgeColorEnum.TEAL_60W,
+            BadgeColorEnum.PETROL_60W,
+            RebrandBadgeColorEnum.SUCCESS,
+            RebrandBadgeColorEnum.INFO,
+            RebrandBadgeColorEnum.BRAND,
+            RebrandBadgeColorEnum.NEUTRAL,
+            RebrandBadgeColorEnum.NEGATIVE,
+            RebrandBadgeColorEnum.WARNING,
+            RebrandBadgeColorEnum.BLUE_20,
+            RebrandBadgeColorEnum.PINK_30,
+            RebrandBadgeColorEnum.BLUE_10,
+            RebrandBadgeColorEnum.GREY_20,
+        ];
+        if (defaultAppTheme) {
+            this.applicationTheme = defaultAppTheme;
+        }
+    }
+    get iconColor() {
+        return this.darkColors.includes(this.isClassicTheme ? this.color : this.rebrandColor) ? 'black' : 'white';
+    }
+    get isClassicTheme() {
+        return this.applicationTheme === 'classic';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BadgeComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: BadgeComponent, isStandalone: false, selector: "ui-badge", inputs: { label: "label", icon: "icon", color: "color", variant: "variant", notificationsAmount: "notificationsAmount", applicationTheme: "applicationTheme", rebrandColor: "rebrandColor", truncateLabel: "truncateLabel", enableAnimation: "enableAnimation" }, ngImport: i0, template: "<div\n  [class]=\"'badge badge-container-' + variant\"\n  [class.no-label]=\"!label\"\n  [attr.aria-label]=\"label\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n  [matTooltip]=\"label.length > 25 ? label : ''\"\n  [matTooltipClass]=\"applicationTheme\"\n>\n  <ng-container [ngSwitch]=\"variant\">\n    <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n      <ui-icon *ngIf=\"icon\" [class.badge-icon]=\"!!label\" [name]=\"icon\" [color]=\"iconColor\"></ui-icon>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY_AI\">\n      <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"badgeVariant.SECONDARY_AI\">\n      <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n    </ng-container>\n    <div\n      *ngSwitchCase=\"badgeVariant.SECONDARY\"\n      class=\"point\"\n      [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n    ></div>\n    <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n  </ng-container>\n  <div class=\"label\" *ngIf=\"variant !== badgeVariant.NOTIFICATION\" [class.empty]=\"!label\" [class.animated]=\"enableAnimation\">\n    {{ label.length > 25 && truncateLabel ? (label | slice: 0 : 25) + '...' : label }}\n  </div>\n</div>\n\n<ng-template #aiIconTpl>\n  <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\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{display:block}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px;transition:all .2s ease-out}:host .badge-container-primary .label,:host .badge-container-primary-ai .label,:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{font-size:12px;line-height:14px}:host .badge-container-primary .label.animated,:host .badge-container-primary-ai .label.animated,:host .badge-container-secondary .label.animated,:host .badge-container-secondary-ai .label.animated{display:inline-block;max-width:500px;opacity:1;overflow:hidden;white-space:nowrap;transition:max-width .25s ease-in-out,opacity .2s ease-in-out;will-change:max-width,opacity;contain:layout style}:host .badge-container-primary .label.empty,:host .badge-container-primary-ai .label.empty,:host .badge-container-secondary .label.empty,:host .badge-container-secondary-ai .label.empty{max-width:0;opacity:0}:host .badge-container-primary .badge-icon:not(:last-child),:host .badge-container-primary-ai .badge-icon:not(:last-child),:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:8px}:host .badge-container-primary.no-label .badge-icon,:host .badge-container-primary-ai.no-label .badge-icon,:host .badge-container-secondary.no-label .badge-icon,:host .badge-container-secondary-ai.no-label .badge-icon{margin-right:0}:host .badge-container-secondary{padding:0}:host .badge-container-primary-ai.no-label{padding:4px}:host .badge-container-secondary .point,:host .badge-container-secondary-ai .point{border-radius:50%;padding:4px;margin-right:8px}:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light],:host .badge-container-secondary-ai[theme=dark],:host .badge-container-secondary-ai[theme=light]{color:#242424}:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:4px}:host .badge-container-notification{min-width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host [color=red].badge-container-primary-ai,:host .badge-container-secondary [color=red].point,:host .badge-container-secondary-ai [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host [color=grey-medium].badge-container-primary-ai,:host .badge-container-secondary [color=grey-medium].point,:host .badge-container-secondary-ai [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host [color=teal].badge-container-primary-ai,:host .badge-container-secondary [color=teal].point,:host .badge-container-secondary-ai [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host [color=yellow].badge-container-primary-ai,:host .badge-container-secondary [color=yellow].point,:host .badge-container-secondary-ai [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host [color=petrol].badge-container-primary-ai,:host .badge-container-secondary [color=petrol].point,:host .badge-container-secondary-ai [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host [color=teal-60w].badge-container-primary-ai,:host .badge-container-secondary [color=teal-60w].point,:host .badge-container-secondary-ai [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host [color=petrol-90w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-90w].point,:host .badge-container-secondary-ai [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host [color=petrol-60w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-60w].point,:host .badge-container-secondary-ai [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host [color=grey-dark].badge-container-primary-ai,:host .badge-container-secondary [color=grey-dark].point,:host .badge-container-secondary-ai [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host [color=success].badge-container-primary-ai,:host .badge-container-secondary [color=success].point,:host .badge-container-secondary-ai [color=success].point,:host [color=success].badge-container-notification{background:#d4f2c3;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host [color=warning].badge-container-primary-ai,:host .badge-container-secondary [color=warning].point,:host .badge-container-secondary-ai [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host [color=negative].badge-container-primary-ai,:host .badge-container-secondary [color=negative].point,:host .badge-container-secondary-ai [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host [color=info].badge-container-primary-ai,:host .badge-container-secondary [color=info].point,:host .badge-container-secondary-ai [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host [color=brand].badge-container-primary-ai,:host .badge-container-secondary [color=brand].point,:host .badge-container-secondary-ai [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host [color=neutral].badge-container-primary-ai,:host .badge-container-secondary [color=neutral].point,:host .badge-container-secondary-ai [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host [color=blue-20].badge-container-primary-ai,:host .badge-container-secondary [color=blue-20].point,:host .badge-container-secondary-ai [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host [color=blue-30].badge-container-primary-ai,:host .badge-container-secondary [color=blue-30].point,:host .badge-container-secondary-ai [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host [color=blue-40].badge-container-primary-ai,:host .badge-container-secondary [color=blue-40].point,:host .badge-container-secondary-ai [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host [color=pink-30].badge-container-primary-ai,:host .badge-container-secondary [color=pink-30].point,:host .badge-container-secondary-ai [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host [color=blue-10].badge-container-primary-ai,:host .badge-container-secondary [color=blue-10].point,:host .badge-container-secondary-ai [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host [color=grey-30].badge-container-primary-ai,:host .badge-container-secondary [color=grey-30].point,:host .badge-container-secondary-ai [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-20],:host [color=grey-20].badge-container-primary,:host [color=grey-20].badge-container-primary-ai,:host .badge-container-secondary [color=grey-20].point,:host .badge-container-secondary-ai [color=grey-20].point,:host [color=grey-20].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host [color=grey-10].badge-container-primary-ai,:host .badge-container-secondary [color=grey-10].point,:host .badge-container-secondary-ai [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.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: "pipe", type: i1.SlicePipe, name: "slice" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-badge', standalone: false, template: "<div\n  [class]=\"'badge badge-container-' + variant\"\n  [class.no-label]=\"!label\"\n  [attr.aria-label]=\"label\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n  [matTooltip]=\"label.length > 25 ? label : ''\"\n  [matTooltipClass]=\"applicationTheme\"\n>\n  <ng-container [ngSwitch]=\"variant\">\n    <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n      <ui-icon *ngIf=\"icon\" [class.badge-icon]=\"!!label\" [name]=\"icon\" [color]=\"iconColor\"></ui-icon>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY_AI\">\n      <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"badgeVariant.SECONDARY_AI\">\n      <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n    </ng-container>\n    <div\n      *ngSwitchCase=\"badgeVariant.SECONDARY\"\n      class=\"point\"\n      [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n    ></div>\n    <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n  </ng-container>\n  <div class=\"label\" *ngIf=\"variant !== badgeVariant.NOTIFICATION\" [class.empty]=\"!label\" [class.animated]=\"enableAnimation\">\n    {{ label.length > 25 && truncateLabel ? (label | slice: 0 : 25) + '...' : label }}\n  </div>\n</div>\n\n<ng-template #aiIconTpl>\n  <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\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{display:block}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px;transition:all .2s ease-out}:host .badge-container-primary .label,:host .badge-container-primary-ai .label,:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{font-size:12px;line-height:14px}:host .badge-container-primary .label.animated,:host .badge-container-primary-ai .label.animated,:host .badge-container-secondary .label.animated,:host .badge-container-secondary-ai .label.animated{display:inline-block;max-width:500px;opacity:1;overflow:hidden;white-space:nowrap;transition:max-width .25s ease-in-out,opacity .2s ease-in-out;will-change:max-width,opacity;contain:layout style}:host .badge-container-primary .label.empty,:host .badge-container-primary-ai .label.empty,:host .badge-container-secondary .label.empty,:host .badge-container-secondary-ai .label.empty{max-width:0;opacity:0}:host .badge-container-primary .badge-icon:not(:last-child),:host .badge-container-primary-ai .badge-icon:not(:last-child),:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:8px}:host .badge-container-primary.no-label .badge-icon,:host .badge-container-primary-ai.no-label .badge-icon,:host .badge-container-secondary.no-label .badge-icon,:host .badge-container-secondary-ai.no-label .badge-icon{margin-right:0}:host .badge-container-secondary{padding:0}:host .badge-container-primary-ai.no-label{padding:4px}:host .badge-container-secondary .point,:host .badge-container-secondary-ai .point{border-radius:50%;padding:4px;margin-right:8px}:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light],:host .badge-container-secondary-ai[theme=dark],:host .badge-container-secondary-ai[theme=light]{color:#242424}:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:4px}:host .badge-container-notification{min-width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host [color=red].badge-container-primary-ai,:host .badge-container-secondary [color=red].point,:host .badge-container-secondary-ai [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host [color=grey-medium].badge-container-primary-ai,:host .badge-container-secondary [color=grey-medium].point,:host .badge-container-secondary-ai [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host [color=teal].badge-container-primary-ai,:host .badge-container-secondary [color=teal].point,:host .badge-container-secondary-ai [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host [color=yellow].badge-container-primary-ai,:host .badge-container-secondary [color=yellow].point,:host .badge-container-secondary-ai [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host [color=petrol].badge-container-primary-ai,:host .badge-container-secondary [color=petrol].point,:host .badge-container-secondary-ai [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host [color=teal-60w].badge-container-primary-ai,:host .badge-container-secondary [color=teal-60w].point,:host .badge-container-secondary-ai [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host [color=petrol-90w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-90w].point,:host .badge-container-secondary-ai [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host [color=petrol-60w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-60w].point,:host .badge-container-secondary-ai [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host [color=grey-dark].badge-container-primary-ai,:host .badge-container-secondary [color=grey-dark].point,:host .badge-container-secondary-ai [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host [color=success].badge-container-primary-ai,:host .badge-container-secondary [color=success].point,:host .badge-container-secondary-ai [color=success].point,:host [color=success].badge-container-notification{background:#d4f2c3;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host [color=warning].badge-container-primary-ai,:host .badge-container-secondary [color=warning].point,:host .badge-container-secondary-ai [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host [color=negative].badge-container-primary-ai,:host .badge-container-secondary [color=negative].point,:host .badge-container-secondary-ai [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host [color=info].badge-container-primary-ai,:host .badge-container-secondary [color=info].point,:host .badge-container-secondary-ai [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host [color=brand].badge-container-primary-ai,:host .badge-container-secondary [color=brand].point,:host .badge-container-secondary-ai [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host [color=neutral].badge-container-primary-ai,:host .badge-container-secondary [color=neutral].point,:host .badge-container-secondary-ai [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host [color=blue-20].badge-container-primary-ai,:host .badge-container-secondary [color=blue-20].point,:host .badge-container-secondary-ai [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host [color=blue-30].badge-container-primary-ai,:host .badge-container-secondary [color=blue-30].point,:host .badge-container-secondary-ai [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host [color=blue-40].badge-container-primary-ai,:host .badge-container-secondary [color=blue-40].point,:host .badge-container-secondary-ai [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host [color=pink-30].badge-container-primary-ai,:host .badge-container-secondary [color=pink-30].point,:host .badge-container-secondary-ai [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host [color=blue-10].badge-container-primary-ai,:host .badge-container-secondary [color=blue-10].point,:host .badge-container-secondary-ai [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host [color=grey-30].badge-container-primary-ai,:host .badge-container-secondary [color=grey-30].point,:host .badge-container-secondary-ai [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-20],:host [color=grey-20].badge-container-primary,:host [color=grey-20].badge-container-primary-ai,:host .badge-container-secondary [color=grey-20].point,:host .badge-container-secondary-ai [color=grey-20].point,:host [color=grey-20].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host [color=grey-10].badge-container-primary-ai,:host .badge-container-secondary [color=grey-10].point,:host .badge-container-secondary-ai [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], notificationsAmount: [{
+                type: Input
+            }], applicationTheme: [{
+                type: Input
+            }], rebrandColor: [{
+                type: Input
+            }], truncateLabel: [{
+                type: Input
+            }], enableAnimation: [{
+                type: Input
+            }] } });
+
+class BadgeComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BadgeComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: BadgeComponentModule, declarations: [BadgeComponent], imports: [CommonModule, IconComponentModule, MatTooltipModule], exports: [BadgeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BadgeComponentModule, imports: [CommonModule, IconComponentModule, MatTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BadgeComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BadgeComponent],
+                    imports: [CommonModule, IconComponentModule, MatTooltipModule],
+                    exports: [BadgeComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BadgeColorEnum, BadgeComponent, BadgeComponentModule, BadgeVariantEnum, RebrandBadgeColorEnum };
+//# sourceMappingURL=testgorilla-tgo-ui-components-badge.mjs.map

package/fesm2022/testgorilla-tgo-ui-components-badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"testgorilla-tgo-ui-components-badge.mjs","sources":["../../../components/badge/badge.model.ts","../../../components/badge/badge.component.ts","../../../components/badge/badge.component.html","../../../components/badge/badge.component.module.ts","../../../components/badge/testgorilla-tgo-ui-components-badge.ts"],"sourcesContent":["export type BadgeVariant = 'primary' | 'secondary' | 'notification' | 'primary-ai' | 'secondary-ai';\nexport type BadgeColor =\n  | 'red'\n  | 'grey-medium'\n  | 'teal'\n  | 'yellow'\n  | 'petrol'\n  | 'teal-60w'\n  | 'petrol-90w'\n  | 'petrol-60w'\n  | 'grey-dark'\n  | 'blue-20'\n  | 'blue-40'\n  | 'pink-30'\n  | 'blue-10';\n\nexport enum BadgeColorEnum {\n  RED = 'red',\n  GREY_MEDIUM = 'grey-medium',\n  TEAL = 'teal',\n  YELLOW = 'yellow',\n  PETROL = 'petrol',\n  TEAL_60W = 'teal-60w',\n  PETROL_90W = 'petrol-90w',\n  PETROL_60W = 'petrol-60w',\n  GREY_DARK = 'grey-dark',\n  BLUE_20 = 'blue-20',\n  BLUE_40 = 'blue-40',\n}\n\nexport type RebrandBadgeColor =\n  | 'success'\n  | 'warning'\n  | 'negative'\n  | 'info'\n  | 'brand'\n  | 'neutral'\n  | 'blue-20'\n  | 'blue-40'\n  | 'pink-30'\n  | 'blue-10'\n  | 'grey-10'\n  | 'grey-20'\n  | 'grey-30';\n\nexport enum RebrandBadgeColorEnum {\n  SUCCESS = 'success',\n  WARNING = 'warning',\n  NEGATIVE = 'negative',\n  INFO = 'info',\n  BRAND = 'brand',\n  NEUTRAL = 'neutral',\n  BLUE_40 = 'blue-40',\n  BLUE_20 = 'blue-20',\n  PINK_30 = 'pink-30',\n  BLUE_10 = 'blue-10',\n  GREY_30 = 'grey-30',\n  GREY_20 = 'grey-20',\n  GREY_10 = 'grey-10',\n}\n\nexport enum BadgeVariantEnum {\n  PRIMARY = 'primary',\n  PRIMARY_AI = 'primary-ai',\n  SECONDARY = 'secondary',\n  SECONDARY_AI = 'secondary-ai',\n  NOTIFICATION = 'notification',\n}\n","import { Component, Inject, Input, Optional } from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconColor, IconName } from '@testgorilla/tgo-ui/components/icon';\nimport {\n  BadgeColor,\n  BadgeColorEnum,\n  BadgeVariant,\n  BadgeVariantEnum,\n  RebrandBadgeColor,\n  RebrandBadgeColorEnum,\n} from './badge.model';\n\n@Component({\n    selector: 'ui-badge',\n    templateUrl: './badge.component.html',\n    styleUrls: ['./badge.component.scss'],\n    standalone: false\n})\nexport class BadgeComponent {\n  /**\n   * The label to be displayed on the badge.\n   * @type {string}\n   * @memberof BadgeComponent\n   */\n  @Input() label = '';\n\n  /**\n   * The icon name to be displayed on the badge.\n   * @type {IconName}\n   * @memberof BadgeComponent\n   */\n  @Input() icon: IconName = '';\n\n  /**\n   * The color of the badge. Defaults to 'petrol'.\n   * @type {BadgeColor}\n   * @memberof BadgeComponent\n   */\n  @Input() color: BadgeColor = 'petrol';\n\n  /**\n   * The variant of the badge. Defaults to 'primary'.\n   * @type {BadgeVariant}\n   * @memberof BadgeComponent\n   */\n  @Input() variant: BadgeVariant = 'primary';\n\n  /**\n   * The amount of notifications to be displayed on the badge.\n   * @type {number}\n   * @memberof BadgeComponent\n   */\n  @Input() notificationsAmount = 0;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof BadgeComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * The color of the badge on new theme. Defaults to 'brand'.\n   * @type {RebrandBadgeColor}\n   * @memberof BadgeComponent\n   */\n  @Input() rebrandColor: RebrandBadgeColor = 'brand';\n\n  @Input() truncateLabel = true;\n\n  /**\n   * Whether to enable the animation when label changes from empty to having content.\n   * @type {boolean}\n   * @memberof BadgeComponent\n   */\n  @Input() enableAnimation = false;\n\n  protected badgeVariant = BadgeVariantEnum;\n  private darkColors: string[] = [\n    BadgeColorEnum.GREY_MEDIUM,\n    BadgeColorEnum.PETROL_90W,\n    BadgeColorEnum.TEAL_60W,\n    BadgeColorEnum.PETROL_60W,\n    RebrandBadgeColorEnum.SUCCESS,\n    RebrandBadgeColorEnum.INFO,\n    RebrandBadgeColorEnum.BRAND,\n    RebrandBadgeColorEnum.NEUTRAL,\n    RebrandBadgeColorEnum.NEGATIVE,\n    RebrandBadgeColorEnum.WARNING,\n    RebrandBadgeColorEnum.BLUE_20,\n    RebrandBadgeColorEnum.PINK_30,\n    RebrandBadgeColorEnum.BLUE_10,\n    RebrandBadgeColorEnum.GREY_20,\n  ];\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n  }\n\n  protected get iconColor(): IconColor {\n    return this.darkColors.includes(this.isClassicTheme ? this.color : this.rebrandColor) ? 'black' : 'white';\n  }\n\n  protected get isClassicTheme(): boolean {\n    return this.applicationTheme === 'classic';\n  }\n}\n","<div\n  [class]=\"'badge badge-container-' + variant\"\n  [class.no-label]=\"!label\"\n  [attr.aria-label]=\"label\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n  [matTooltip]=\"label.length > 25 ? label : ''\"\n  [matTooltipClass]=\"applicationTheme\"\n>\n  <ng-container [ngSwitch]=\"variant\">\n    <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY\">\n      <ui-icon *ngIf=\"icon\" [class.badge-icon]=\"!!label\" [name]=\"icon\" [color]=\"iconColor\"></ui-icon>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"badgeVariant.PRIMARY_AI\">\n      <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"badgeVariant.SECONDARY_AI\">\n      <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n    </ng-container>\n    <div\n      *ngSwitchCase=\"badgeVariant.SECONDARY\"\n      class=\"point\"\n      [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n    ></div>\n    <div *ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n  </ng-container>\n  <div class=\"label\" *ngIf=\"variant !== badgeVariant.NOTIFICATION\" [class.empty]=\"!label\" [class.animated]=\"enableAnimation\">\n    {{ label.length > 25 && truncateLabel ? (label | slice: 0 : 25) + '...' : label }}\n  </div>\n</div>\n\n<ng-template #aiIconTpl>\n  <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { BadgeComponent } from './badge.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\n@NgModule({\n  declarations: [BadgeComponent],\n  imports: [CommonModule, IconComponentModule, MatTooltipModule],\n  exports: [BadgeComponent],\n})\nexport class BadgeComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;IAgBY;AAAZ,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACX,IAAA,cAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3B,IAAA,cAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,cAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,cAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzB,IAAA,cAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzB,IAAA,cAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,cAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,cAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAZW,cAAc,KAAd,cAAc,GAYzB,EAAA,CAAA,CAAA;IAiBW;AAAZ,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,qBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,qBAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,qBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAdW,qBAAqB,KAArB,qBAAqB,GAchC,EAAA,CAAA,CAAA;IAEW;AAAZ,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,gBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzB,IAAA,gBAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,gBAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAC7B,IAAA,gBAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAC/B,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,GAM3B,EAAA,CAAA,CAAA;;MCjDY,cAAc,CAAA;AA+EzB,IAAA,WAAA,CAC6E,eAAiC,EAAA;QAAjC,IAAe,CAAA,eAAA,GAAf,eAAe;AA/E5F;;;;AAIG;QACM,IAAK,CAAA,KAAA,GAAG,EAAE;AAEnB;;;;AAIG;QACM,IAAI,CAAA,IAAA,GAAa,EAAE;AAE5B;;;;AAIG;QACM,IAAK,CAAA,KAAA,GAAe,QAAQ;AAErC;;;;AAIG;QACM,IAAO,CAAA,OAAA,GAAiB,SAAS;AAE1C;;;;AAIG;QACM,IAAmB,CAAA,mBAAA,GAAG,CAAC;AAEhC;;;;;;AAMG;QACM,IAAgB,CAAA,gBAAA,GAAqB,OAAO;AAErD;;;;AAIG;QACM,IAAY,CAAA,YAAA,GAAsB,OAAO;QAEzC,IAAa,CAAA,aAAA,GAAG,IAAI;AAE7B;;;;AAIG;QACM,IAAe,CAAA,eAAA,GAAG,KAAK;QAEtB,IAAY,CAAA,YAAA,GAAG,gBAAgB;AACjC,QAAA,IAAA,CAAA,UAAU,GAAa;AAC7B,YAAA,cAAc,CAAC,WAAW;AAC1B,YAAA,cAAc,CAAC,UAAU;AACzB,YAAA,cAAc,CAAC,QAAQ;AACvB,YAAA,cAAc,CAAC,UAAU;AACzB,YAAA,qBAAqB,CAAC,OAAO;AAC7B,YAAA,qBAAqB,CAAC,IAAI;AAC1B,YAAA,qBAAqB,CAAC,KAAK;AAC3B,YAAA,qBAAqB,CAAC,OAAO;AAC7B,YAAA,qBAAqB,CAAC,QAAQ;AAC9B,YAAA,qBAAqB,CAAC,OAAO;AAC7B,YAAA,qBAAqB,CAAC,OAAO;AAC7B,YAAA,qBAAqB,CAAC,OAAO;AAC7B,YAAA,qBAAqB,CAAC,OAAO;AAC7B,YAAA,qBAAqB,CAAC,OAAO;SAC9B;QAKC,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;;;AAI3C,IAAA,IAAc,SAAS,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,OAAO,GAAG,OAAO;;AAG3G,IAAA,IAAc,cAAc,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS;;AA5FjC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,kBAgFH,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAhF/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,uUClB3B,6+CAkCA,EAAA,MAAA,EAAA,CAAA,s/YAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDhBa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,cAGR,KAAK,EAAA,QAAA,EAAA,6+CAAA,EAAA,MAAA,EAAA,CAAA,s/YAAA,CAAA,EAAA;;0BAkFhB;;0BAAY,MAAM;2BAAC,oCAAoC;yCA1EjD,KAAK,EAAA,CAAA;sBAAb;gBAOQ,IAAI,EAAA,CAAA;sBAAZ;gBAOQ,KAAK,EAAA,CAAA;sBAAb;gBAOQ,OAAO,EAAA,CAAA;sBAAf;gBAOQ,mBAAmB,EAAA,CAAA;sBAA3B;gBASQ,gBAAgB,EAAA,CAAA;sBAAxB;gBAOQ,YAAY,EAAA,CAAA;sBAApB;gBAEQ,aAAa,EAAA,CAAA;sBAArB;gBAOQ,eAAe,EAAA,CAAA;sBAAvB;;;MElEU,oBAAoB,CAAA;+GAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAApB,oBAAoB,EAAA,YAAA,EAAA,CAJhB,cAAc,CACnB,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,CAAA,EAAA,OAAA,EAAA,CACnD,cAAc,CAAA,EAAA,CAAA,CAAA;AAEb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,EAHrB,OAAA,EAAA,CAAA,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,CAAA,EAAA,CAAA,CAAA;;4FAGlD,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,cAAc,CAAC;AAC9B,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,EAAE,gBAAgB,CAAC;oBAC9D,OAAO,EAAE,CAAC,cAAc,CAAC;AAC1B,iBAAA;;;ACVD;;AAEG;;;;"}

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

@@ -0,0 +1,250 @@
+import * as i0 from '@angular/core';
+import { input, EventEmitter, computed, signal, Injector, effect, afterNextRender, ViewChild, Output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from '@testgorilla/tgo-ui/components/icon';
+import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3 from '@testgorilla/tgo-ui/components/overflow-menu';
+import { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';
+import * as i4 from '@testgorilla/tgo-ui/components/button';
+import { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
+import * as i5 from '@testgorilla/tgo-ui/components/skeleton';
+import { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i7 from '@testgorilla/tgo-ui/components/core';
+import { UiTranslatePipe, TruncatePipe } from '@testgorilla/tgo-ui/components/core';
+
+class BreadcrumbComponent {
+    constructor(parentInjector) {
+        this.parentInjector = parentInjector;
+        this.size = input('large');
+        this.items = input([]);
+        this.applicationTheme = input('light');
+        this.includeBackButton = input(false);
+        this.isLoading = input(false);
+        this.numberOfLoadingItems = input(3);
+        this.maxItemLength = input(18);
+        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;
+        this.injector = Injector.create({ providers: [] });
+        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: "19.2.18", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BreadcrumbComponent, isStandalone: false, 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 } }, 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 > maxItemLength() ? 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: 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          (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: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "component", type: i4.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: i5.SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i7.TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 > maxItemLength() ? 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: 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          (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: { selectItem: [{
+                type: Output
+            }], backButtonClickEvent: [{
+                type: Output
+            }], breadcrumbContainer: [{
+                type: ViewChild,
+                args: ['breadcrumbContainer']
+            }] } });
+
+class BreadcrumbComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BreadcrumbComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: BreadcrumbComponentModule, declarations: [BreadcrumbComponent], imports: [CommonModule,
+            IconComponentModule,
+            MatTooltipModule,
+            OverflowMenuComponentModule,
+            ButtonComponentModule,
+            SkeletonComponent,
+            UiTranslatePipe,
+            TruncatePipe], exports: [BreadcrumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BreadcrumbComponentModule, imports: [CommonModule,
+            IconComponentModule,
+            MatTooltipModule,
+            OverflowMenuComponentModule,
+            ButtonComponentModule,
+            SkeletonComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BreadcrumbComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BreadcrumbComponent],
+                    imports: [
+                        CommonModule,
+                        IconComponentModule,
+                        MatTooltipModule,
+                        OverflowMenuComponentModule,
+                        ButtonComponentModule,
+                        SkeletonComponent,
+                        UiTranslatePipe,
+                        TruncatePipe,
+                    ],
+                    exports: [BreadcrumbComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BreadcrumbComponent, BreadcrumbComponentModule };
+//# sourceMappingURL=testgorilla-tgo-ui-components-breadcrumb.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"testgorilla-tgo-ui-components-breadcrumb.mjs","sources":["../../../components/breadcrumb/breadcrumb.component.ts","../../../components/breadcrumb/breadcrumb.component.html","../../../components/breadcrumb/breadcrumb.component.module.ts","../../../components/breadcrumb/testgorilla-tgo-ui-components-breadcrumb.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  Component,\n  input,\n  signal,\n  ViewChild,\n  OnDestroy,\n  computed,\n  EventEmitter,\n  Output,\n  effect,\n  ChangeDetectionStrategy,\n  Injector,\n  afterNextRender,\n} from '@angular/core';\nimport { BreadcrumbItem, BreadcrumbSize } from './breadcrumb.model';\nimport { ElementRef } from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { OverflowMenuButtonsType } from '@testgorilla/tgo-ui/components/overflow-menu';\n\n@Component({\n  selector: 'ui-breadcrumb',\n  templateUrl: './breadcrumb.component.html',\n  styleUrls: ['./breadcrumb.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n})\nexport class BreadcrumbComponent implements AfterViewInit, OnDestroy {\n  size = input<BreadcrumbSize>('large');\n  items = input<BreadcrumbItem[]>([]);\n  applicationTheme = input<ApplicationTheme>('light');\n  includeBackButton = input<boolean>(false);\n  isLoading = input<boolean>(false);\n  numberOfLoadingItems = input<number>(3);\n  maxItemLength = input<number>(18);\n  @Output() selectItem: EventEmitter<string> = new EventEmitter<string>();\n  @Output() backButtonClickEvent: EventEmitter<Event> = new EventEmitter<Event>();\n\n  loadingItems = computed(() => Array(this.numberOfLoadingItems()));\n  isOverflowing = signal<boolean>(false);\n  visibleItems = signal<BreadcrumbItem[]>([]);\n  overflowItems = signal<BreadcrumbItem[]>([]);\n  overflowButtonItems = computed<OverflowMenuButtonsType[]>(() =>\n    this.overflowItems().map(item => ({\n      label: item.label,\n      value: item.value,\n    }))\n  );\n  shouldTruncateLastItem = signal<boolean>(false);\n\n  @ViewChild('breadcrumbContainer') breadcrumbContainer!: ElementRef<HTMLElement>;\n\n  private resizeObserver?: ResizeObserver;\n  private itemsInOverflow = 0;\n  private previousLoadingState?: boolean;\n  private injector = Injector.create({ providers: [] });\n\n  constructor(private readonly parentInjector: Injector) {\n    this.injector = parentInjector;\n    // React to items changes and recalculate overflow\n    effect(() => {\n      this.items();\n      this.itemsInOverflow = 0;\n\n      // Only proceed if not in loading state\n      if (!this.isLoading()) {\n        // Use afterNextRender to ensure DOM is updated before calculating\n        afterNextRender(\n          () => {\n            if (this.breadcrumbContainer?.nativeElement) {\n              this.calculateItemDistribution();\n            }\n          },\n          { injector: this.injector }\n        );\n      }\n    });\n\n    // React to loading state changes and setup ResizeObserver when loading changes from true to false\n    effect(() => {\n      const currentLoadingState = this.isLoading();\n\n      if (this.previousLoadingState === true && currentLoadingState === false) {\n        // Use afterNextRender to ensure DOM is ready before setting up observer\n        afterNextRender(\n          () => {\n            this.setupResizeObserver();\n          },\n          { injector: this.injector }\n        );\n      }\n\n      this.previousLoadingState = currentLoadingState;\n    });\n  }\n\n  ngAfterViewInit() {\n    this.calculateItemDistribution();\n    this.setupResizeObserver();\n  }\n\n  ngOnDestroy() {\n    this.resizeObserver?.disconnect();\n  }\n\n  private calculateItemDistribution() {\n    if (!this.breadcrumbContainer?.nativeElement || this.items().length === 0) {\n      this.resetToAllVisible();\n      return;\n    }\n\n    const element = this.breadcrumbContainer.nativeElement;\n    const hasHorizontalOverflow = element.scrollWidth > element.clientWidth;\n\n    if (hasHorizontalOverflow) {\n      this.handleOverflow();\n    } else if (this.itemsInOverflow > 0) {\n      // Check if we can bring items back from overflow\n      this.tryReduceOverflow();\n    } else {\n      this.resetToAllVisible();\n    }\n  }\n\n  private handleOverflow() {\n    this.itemsInOverflow = Math.min(this.itemsInOverflow + 1, this.items().length - 1);\n\n    this.updateItemArrays();\n    this.isOverflowing.set(true);\n\n    // Wait for DOM to render the updated template after hiding items\n    // We need to measure dimensions AFTER the DOM has been updated with the new visible items\n    setTimeout(() => {\n      if (this.breadcrumbContainer?.nativeElement) {\n        const element = this.breadcrumbContainer.nativeElement;\n        const stillOverflowing = element.scrollWidth > element.clientWidth;\n\n        if (stillOverflowing && this.itemsInOverflow < this.items().length - 1) {\n          this.handleOverflow();\n        } else if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {\n          this.shouldTruncateLastItem.set(true);\n        }\n      }\n    }, 0);\n  }\n\n  private tryReduceOverflow() {\n    const testItemsInOverflow = this.itemsInOverflow - 1;\n\n    if (testItemsInOverflow >= 0) {\n      const testVisibleItems = this.items().slice(testItemsInOverflow);\n      const testOverflowItems = testItemsInOverflow > 0 ? this.items().slice(0, testItemsInOverflow) : [];\n\n      this.visibleItems.set(testVisibleItems);\n      this.overflowItems.set(testOverflowItems);\n\n      // Always reset truncation when trying to reduce overflow\n      this.shouldTruncateLastItem.set(false);\n\n      // Wait for DOM to render with test configuration before measuring\n      setTimeout(() => {\n        if (this.breadcrumbContainer?.nativeElement) {\n          const element = this.breadcrumbContainer.nativeElement;\n          const hasOverflow = element.scrollWidth > element.clientWidth;\n\n          if (!hasOverflow) {\n            // It fits! Update the counter\n            this.itemsInOverflow = testItemsInOverflow;\n            this.isOverflowing.set(this.itemsInOverflow > 0);\n\n            // Try to reduce more if there are still items in overflow\n            if (this.itemsInOverflow > 0) {\n              // Schedule next reduction attempt after current render cycle\n              setTimeout(() => this.tryReduceOverflow(), 0);\n            }\n          } else {\n            // Doesn't fit, revert to previous state\n            this.updateItemArrays();\n\n            // Wait for DOM to render reverted state before checking truncation\n            setTimeout(() => {\n              if (this.breadcrumbContainer?.nativeElement) {\n                const containerElement = this.breadcrumbContainer.nativeElement;\n                const stillOverflowing = containerElement.scrollWidth > containerElement.clientWidth;\n\n                if (stillOverflowing && this.itemsInOverflow === this.items().length - 1) {\n                  this.shouldTruncateLastItem.set(true);\n                }\n              }\n            }, 0);\n          }\n        }\n      }, 0);\n    } else {\n      // testItemsInOverflow < 0, means we're trying to show all items\n      this.resetToAllVisible();\n\n      // Wait for DOM to render all items before measuring overflow\n      setTimeout(() => {\n        if (this.breadcrumbContainer?.nativeElement) {\n          const element = this.breadcrumbContainer.nativeElement;\n          const hasOverflow = element.scrollWidth > element.clientWidth;\n\n          if (hasOverflow) {\n            // Still overflows with all items, need to go back to overflow state\n            this.itemsInOverflow = 1; // Start with minimal overflow\n            this.handleOverflow();\n          }\n        }\n      }, 0);\n    }\n  }\n\n  private updateItemArrays() {\n    if (this.itemsInOverflow > 0) {\n      this.overflowItems.set(this.items().slice(0, this.itemsInOverflow));\n      this.visibleItems.set(this.items().slice(this.itemsInOverflow));\n    } else {\n      this.resetToAllVisible();\n    }\n  }\n\n  private resetToAllVisible() {\n    this.visibleItems.set(this.items());\n    this.overflowItems.set([]);\n    this.isOverflowing.set(false);\n    this.shouldTruncateLastItem.set(false);\n    this.itemsInOverflow = 0;\n  }\n\n  private setupResizeObserver() {\n    if (!this.breadcrumbContainer?.nativeElement) {\n      return;\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.calculateItemDistribution();\n    });\n\n    this.resizeObserver.observe(this.breadcrumbContainer.nativeElement);\n  }\n}\n","@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 > maxItemLength() ? 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: 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          (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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { BreadcrumbComponent } from './breadcrumb.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui/components/overflow-menu';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe, TruncatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\n@NgModule({\n  declarations: [BreadcrumbComponent],\n  imports: [\n    CommonModule,\n    IconComponentModule,\n    MatTooltipModule,\n    OverflowMenuComponentModule,\n    ButtonComponentModule,\n    SkeletonComponent,\n    UiTranslatePipe,\n    TruncatePipe,\n  ],\n  exports: [BreadcrumbComponent],\n})\nexport class BreadcrumbComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}