@siemens/element-ng 48.0.3 → 48.2.0-rc.1

package/fesm2022/siemens-element-ng-avatar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, numberAttribute, booleanAttribute, signal, Directive, inject, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, numberAttribute, booleanAttribute, signal, Directive, inject, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgClass } from '@angular/common';
 import { STATUS_ICON_CONFIG, SiIconComponent } from '@siemens/element-ng/icon';
 
@@ -117,46 +117,42 @@ class SiAvatarComponent {
         const status = this.status();
         return status ? this.statusIcons[status] : undefined;
     });
-    displayInitials;
-    autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);
-    ngOnChanges(changes) {
-        if (changes.initials || changes.altText) {
-            this.setInitials();
-            this.autoBackgroundColorDirective.calculateColorFromInitials(this.displayInitials);
-        }
-    }
-    setInitials() {
+    displayInitials = computed(() => {
         const initials = this.initials();
         if (initials) {
-            this.displayInitials = initials;
+            return initials;
+        }
+        const name = this.altText()
+            .replaceAll(/\([^)]*\)/g, '')
+            .trim();
+        const byComma = name.split(/,\s*/);
+        let first;
+        let last;
+        if (byComma.length > 1) {
+            last = byComma[0];
+            first = byComma[1];
         }
         else {
-            const name = this.altText()
-                .replaceAll(/\([^)]*\)/g, '')
-                .trim();
-            const byComma = name.split(/,\s*/);
-            let first;
-            let last;
-            if (byComma.length > 1) {
-                last = byComma[0];
-                first = byComma[1];
-            }
-            else {
-                const parts = name.split(' ');
-                first = parts.shift() ?? '';
-                last = parts.pop() ?? '';
-            }
-            if (first) {
-                first = first[0].toLocaleUpperCase();
-            }
-            if (last) {
-                last = last[0].toLocaleUpperCase();
-            }
-            this.displayInitials = first + last;
+            const parts = name.split(' ');
+            first = parts.shift() ?? '';
+            last = parts.pop() ?? '';
         }
+        if (first) {
+            first = first[0].toLocaleUpperCase();
+        }
+        if (last) {
+            last = last[0].toLocaleUpperCase();
+        }
+        return first + last;
+    });
+    autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);
+    constructor() {
+        effect(() => {
+            this.autoBackgroundColorDirective.calculateColorFromInitials(this.displayInitials());
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiAvatarComponent, isStandalone: true, selector: "si-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, altText: { classPropertyName: "altText", publicName: "altText", isSignal: true, isRequired: true, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusAriaLabel: { classPropertyName: "statusAriaLabel", publicName: "statusAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "size()" } }, usesOnChanges: true, hostDirectives: [{ directive: SiAvatarBackgroundColorDirective, inputs: ["color", "color", "autoColor", "autoColor"] }], ngImport: i0, template: "@if (imageUrl()) {\n  <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n  <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n  <div\n    class=\"initials\"\n    [class.text-body]=\"color() === 0\"\n    [title]=\"altText()\"\n    [attr.aria-label]=\"altText()\"\n    >{{ displayInitials }}</div\n  >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n  <span class=\"indicator-size indicator icon-stack\">\n    <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n    <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n  </span>\n}\n", styles: [":host{--avatar-size: 40px;--indicator-size: 24px;--background: var(--element-base-0);--indicator-offset-x: -12px;--indicator-offset-y: -8px;flex:0 0 auto;display:inline-flex;vertical-align:middle;color:var(--element-text-inverse);position:relative;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%;background:var(--background)}:host.tiny,:host.xsmall,:host.small{--initials-size: .875rem;--indicator-size: 16px;--indicator-offset-x: -8px;--indicator-offset-y: -4px}:host.tiny{--avatar-size: 24px}:host.xsmall{--avatar-size: 28px}:host.small{--avatar-size: 32px}:host.large{--avatar-size: 56px}:host.xlarge{--avatar-size: 80px}.initials{font-weight:600;font-size:var(--initials-size, 1.125rem);line-height:1}img{inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%}.indicator{position:absolute;inset-block-start:var(--indicator-offset-y);inset-inline-end:var(--indicator-offset-x);font-size:var(--indicator-size)}.indicator .drop-shadow ::ng-deep svg{filter:drop-shadow(1px 0 0 var(--element-base-1)) drop-shadow(-1px 0 0 var(--element-base-1)) drop-shadow(0 1px 0 var(--element-base-1)) drop-shadow(0 -1px 0 var(--element-base-1))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiAvatarComponent, isStandalone: true, selector: "si-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, altText: { classPropertyName: "altText", publicName: "altText", isSignal: true, isRequired: true, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusAriaLabel: { classPropertyName: "statusAriaLabel", publicName: "statusAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "size()" } }, hostDirectives: [{ directive: SiAvatarBackgroundColorDirective, inputs: ["color", "color", "autoColor", "autoColor"] }], ngImport: i0, template: "@if (imageUrl()) {\n  <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n  <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n  <div\n    class=\"initials\"\n    [class.text-body]=\"color() === 0\"\n    [title]=\"altText()\"\n    [attr.aria-label]=\"altText()\"\n    >{{ displayInitials() }}</div\n  >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n  <span class=\"indicator-size indicator icon-stack\">\n    <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n    <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n  </span>\n}\n", styles: [":host{--avatar-size: 40px;--indicator-size: 24px;--background: var(--element-base-0);--indicator-offset-x: -12px;--indicator-offset-y: -8px;flex:0 0 auto;display:inline-flex;vertical-align:middle;color:var(--element-text-inverse);position:relative;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%;background:var(--background)}:host.tiny,:host.xsmall,:host.small{--initials-size: .875rem;--indicator-size: 16px;--indicator-offset-x: -8px;--indicator-offset-y: -4px}:host.tiny{--avatar-size: 24px}:host.xsmall{--avatar-size: 28px}:host.small{--avatar-size: 32px}:host.large{--avatar-size: 56px}:host.xlarge{--avatar-size: 80px}.initials{font-weight:600;font-size:var(--initials-size, 1.125rem);line-height:1}img{inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%}.indicator{position:absolute;inset-block-start:var(--indicator-offset-y);inset-inline-end:var(--indicator-offset-x);font-size:var(--indicator-size)}.indicator .drop-shadow ::ng-deep svg{filter:drop-shadow(1px 0 0 var(--element-base-1)) drop-shadow(-1px 0 0 var(--element-base-1)) drop-shadow(0 1px 0 var(--element-base-1)) drop-shadow(0 -1px 0 var(--element-base-1))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiAvatarComponent, decorators: [{
             type: Component,
@@ -167,8 +163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             directive: SiAvatarBackgroundColorDirective,
                             inputs: ['color', 'autoColor']
                         }
-                    ], template: "@if (imageUrl()) {\n  <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n  <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n  <div\n    class=\"initials\"\n    [class.text-body]=\"color() === 0\"\n    [title]=\"altText()\"\n    [attr.aria-label]=\"altText()\"\n    >{{ displayInitials }}</div\n  >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n  <span class=\"indicator-size indicator icon-stack\">\n    <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n    <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n  </span>\n}\n", styles: [":host{--avatar-size: 40px;--indicator-size: 24px;--background: var(--element-base-0);--indicator-offset-x: -12px;--indicator-offset-y: -8px;flex:0 0 auto;display:inline-flex;vertical-align:middle;color:var(--element-text-inverse);position:relative;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%;background:var(--background)}:host.tiny,:host.xsmall,:host.small{--initials-size: .875rem;--indicator-size: 16px;--indicator-offset-x: -8px;--indicator-offset-y: -4px}:host.tiny{--avatar-size: 24px}:host.xsmall{--avatar-size: 28px}:host.small{--avatar-size: 32px}:host.large{--avatar-size: 56px}:host.xlarge{--avatar-size: 80px}.initials{font-weight:600;font-size:var(--initials-size, 1.125rem);line-height:1}img{inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%}.indicator{position:absolute;inset-block-start:var(--indicator-offset-y);inset-inline-end:var(--indicator-offset-x);font-size:var(--indicator-size)}.indicator .drop-shadow ::ng-deep svg{filter:drop-shadow(1px 0 0 var(--element-base-1)) drop-shadow(-1px 0 0 var(--element-base-1)) drop-shadow(0 1px 0 var(--element-base-1)) drop-shadow(0 -1px 0 var(--element-base-1))}\n"] }]
-        }] });
+                    ], template: "@if (imageUrl()) {\n  <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n  <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n  <div\n    class=\"initials\"\n    [class.text-body]=\"color() === 0\"\n    [title]=\"altText()\"\n    [attr.aria-label]=\"altText()\"\n    >{{ displayInitials() }}</div\n  >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n  <span class=\"indicator-size indicator icon-stack\">\n    <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n    <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n  </span>\n}\n", styles: [":host{--avatar-size: 40px;--indicator-size: 24px;--background: var(--element-base-0);--indicator-offset-x: -12px;--indicator-offset-y: -8px;flex:0 0 auto;display:inline-flex;vertical-align:middle;color:var(--element-text-inverse);position:relative;align-items:center;justify-content:center;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%;background:var(--background)}:host.tiny,:host.xsmall,:host.small{--initials-size: .875rem;--indicator-size: 16px;--indicator-offset-x: -8px;--indicator-offset-y: -4px}:host.tiny{--avatar-size: 24px}:host.xsmall{--avatar-size: 28px}:host.small{--avatar-size: 32px}:host.large{--avatar-size: 56px}:host.xlarge{--avatar-size: 80px}.initials{font-weight:600;font-size:var(--initials-size, 1.125rem);line-height:1}img{inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:50%}.indicator{position:absolute;inset-block-start:var(--indicator-offset-y);inset-inline-end:var(--indicator-offset-x);font-size:var(--indicator-size)}.indicator .drop-shadow ::ng-deep svg{filter:drop-shadow(1px 0 0 var(--element-base-1)) drop-shadow(-1px 0 0 var(--element-base-1)) drop-shadow(0 1px 0 var(--element-base-1)) drop-shadow(0 -1px 0 var(--element-base-1))}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Copyright (c) Siemens 2016 - 2025

package/fesm2022/siemens-element-ng-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-avatar.mjs","sources":["../../../../projects/element-ng/avatar/si-avatar-background-color.directive.ts","../../../../projects/element-ng/avatar/si-avatar.component.ts","../../../../projects/element-ng/avatar/si-avatar.component.html","../../../../projects/element-ng/avatar/index.ts","../../../../projects/element-ng/avatar/siemens-element-ng-avatar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  Directive,\n  input,\n  numberAttribute,\n  OnChanges,\n  signal,\n  SimpleChanges\n} from '@angular/core';\n\nconst DATA_COLORS_MAX = 17;\nconst DATA_COLOR_NEUTRAL = 17;\nconst ASCII_CODE_INDEX_A = 64;\n\n/**\n * The directive provide a CSS variable --background with a color based on the initials or alt text.\n */\n@Directive({\n  selector: '[siAvatarBackgroundColor]',\n  host: {\n    '[style.--background]': 'backgroundStyle()'\n  }\n})\nexport class SiAvatarBackgroundColorDirective implements OnChanges {\n  /**\n   * The desired color index from $element-data-* color tokens. This can be set to any kind of\n   * positive integer that is then mapped to a color index.\n   * A better way to set a pseudo-random color is to set {@link autoColor} to `true`.\n   *\n   * @defaultValue undefined\n   */\n  readonly color = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n\n  /**\n   * Automatically calculates the background color.\n   * If set, {@link color} will be ignored.\n   *\n   * @defaultValue false\n   */\n  readonly autoColor = input(false, { transform: booleanAttribute });\n\n  protected readonly backgroundStyle = signal<string | undefined>('var(--element-data-17)');\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.color) {\n      this.setColor(this.color());\n    }\n  }\n\n  /**\n   * Update background color variable based on the initials or placeholder text.\n   */\n  public calculateColorFromInitials(displayInitials?: string): void {\n    if (!this.autoColor() || !displayInitials) {\n      return;\n    }\n\n    let color = 0;\n    for (let i = 0; i < displayInitials.length; i++) {\n      color *= 17; // this prevents 'JD' to have the same color as 'DJ'\n      color += displayInitials.charCodeAt(i) - ASCII_CODE_INDEX_A;\n    }\n    this.setColor(color);\n  }\n\n  private setColor(color?: number): void {\n    if (this.color() === 0) {\n      this.backgroundStyle.set(undefined);\n    } else {\n      const actualColor = color ?? DATA_COLOR_NEUTRAL;\n      const colorIndex = ((actualColor - 1) % DATA_COLORS_MAX) + 1;\n      this.backgroundStyle.set(`var(--element-data-${colorIndex})`);\n    }\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  numberAttribute,\n  OnChanges,\n  SimpleChanges\n} from '@angular/core';\nimport { EntityStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiAvatarBackgroundColorDirective } from './si-avatar-background-color.directive';\n\nexport type AvatarSize = 'tiny' | 'xsmall' | 'small' | 'regular' | 'large' | 'xlarge';\n\n@Component({\n  selector: 'si-avatar',\n  imports: [NgClass, SiIconComponent],\n  templateUrl: './si-avatar.component.html',\n  styleUrl: './si-avatar.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'size()'\n  },\n  hostDirectives: [\n    {\n      directive: SiAvatarBackgroundColorDirective,\n      inputs: ['color', 'autoColor']\n    }\n  ]\n})\nexport class SiAvatarComponent implements OnChanges {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  /**\n   * Size of the component.\n   *\n   * @defaultValue 'regular'\n   */\n  readonly size = input<AvatarSize>('regular');\n  /** Image src URL when using an image. */\n  readonly imageUrl = input<string>();\n  /** Icon name when using an icon. */\n  readonly icon = input<string>();\n  /**\n   * Initials to be displayed as default avatar if no `icon` or `imageUrl` are provided.\n   * If also no initials are provided, they will be automatically calculated from the `altText`.\n   * The value will be used to calculate the background color when `autoColor` is true.\n   */\n  readonly initials = input<string>();\n  /**\n   * The desired color index from $element-data-* color tokens. This can be set to any kind of\n   * positive integer that is then mapped to a color index.\n   * A better way to set a pseudo-random color is to set * {@link autoColor} to `true`.\n   *\n   * @defaultValue undefined\n   */\n  readonly color = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n  /** The `alt` text for image, `title` for other modes. */\n  readonly altText = input.required<string>();\n  /**\n   * The status (success, info, warning, caution, danger, critical, pending, progress) to be\n   * visualized.\n   */\n  readonly status = input<EntityStatusType>();\n  /**\n   * aria-label for status\n   */\n  readonly statusAriaLabel = input<TranslatableString>();\n\n  protected readonly statusIcon = computed(() => {\n    const status = this.status();\n    return status ? this.statusIcons[status] : undefined;\n  });\n  protected displayInitials?: string;\n  private readonly autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.initials || changes.altText) {\n      this.setInitials();\n      this.autoBackgroundColorDirective.calculateColorFromInitials(this.displayInitials);\n    }\n  }\n\n  private setInitials(): void {\n    const initials = this.initials();\n    if (initials) {\n      this.displayInitials = initials;\n    } else {\n      const name = this.altText()\n        .replaceAll(/\\([^)]*\\)/g, '')\n        .trim();\n      const byComma = name.split(/,\\s*/);\n      let first: string;\n      let last: string;\n      if (byComma.length > 1) {\n        last = byComma[0];\n        first = byComma[1];\n      } else {\n        const parts = name.split(' ');\n        first = parts.shift() ?? '';\n        last = parts.pop() ?? '';\n      }\n      if (first) {\n        first = first[0].toLocaleUpperCase();\n      }\n      if (last) {\n        last = last[0].toLocaleUpperCase();\n      }\n      this.displayInitials = first + last;\n    }\n  }\n}\n","@if (imageUrl()) {\n  <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n  <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n  <div\n    class=\"initials\"\n    [class.text-body]=\"color() === 0\"\n    [title]=\"altText()\"\n    [attr.aria-label]=\"altText()\"\n    >{{ displayInitials }}</div\n  >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n  <span class=\"indicator-size indicator icon-stack\">\n    <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n    <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n  </span>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-avatar-background-color.directive';\nexport * from './si-avatar.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SiAvatarBackgroundColorDirective"],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-avatar.mjs","sources":["../../../../projects/element-ng/avatar/si-avatar-background-color.directive.ts","../../../../projects/element-ng/avatar/si-avatar.component.ts","../../../../projects/element-ng/avatar/si-avatar.component.html","../../../../projects/element-ng/avatar/index.ts","../../../../projects/element-ng/avatar/siemens-element-ng-avatar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  Directive,\n  input,\n  numberAttribute,\n  OnChanges,\n  signal,\n  SimpleChanges\n} from '@angular/core';\n\nconst DATA_COLORS_MAX = 17;\nconst DATA_COLOR_NEUTRAL = 17;\nconst ASCII_CODE_INDEX_A = 64;\n\n/**\n * The directive provide a CSS variable --background with a color based on the initials or alt text.\n */\n@Directive({\n  selector: '[siAvatarBackgroundColor]',\n  host: {\n    '[style.--background]': 'backgroundStyle()'\n  }\n})\nexport class SiAvatarBackgroundColorDirective implements OnChanges {\n  /**\n   * The desired color index from $element-data-* color tokens. This can be set to any kind of\n   * positive integer that is then mapped to a color index.\n   * A better way to set a pseudo-random color is to set {@link autoColor} to `true`.\n   *\n   * @defaultValue undefined\n   */\n  readonly color = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n\n  /**\n   * Automatically calculates the background color.\n   * If set, {@link color} will be ignored.\n   *\n   * @defaultValue false\n   */\n  readonly autoColor = input(false, { transform: booleanAttribute });\n\n  protected readonly backgroundStyle = signal<string | undefined>('var(--element-data-17)');\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.color) {\n      this.setColor(this.color());\n    }\n  }\n\n  /**\n   * Update background color variable based on the initials or placeholder text.\n   */\n  public calculateColorFromInitials(displayInitials?: string): void {\n    if (!this.autoColor() || !displayInitials) {\n      return;\n    }\n\n    let color = 0;\n    for (let i = 0; i < displayInitials.length; i++) {\n      color *= 17; // this prevents 'JD' to have the same color as 'DJ'\n      color += displayInitials.charCodeAt(i) - ASCII_CODE_INDEX_A;\n    }\n    this.setColor(color);\n  }\n\n  private setColor(color?: number): void {\n    if (this.color() === 0) {\n      this.backgroundStyle.set(undefined);\n    } else {\n      const actualColor = color ?? DATA_COLOR_NEUTRAL;\n      const colorIndex = ((actualColor - 1) % DATA_COLORS_MAX) + 1;\n      this.backgroundStyle.set(`var(--element-data-${colorIndex})`);\n    }\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  inject,\n  input,\n  numberAttribute\n} from '@angular/core';\nimport { EntityStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SiAvatarBackgroundColorDirective } from './si-avatar-background-color.directive';\n\nexport type AvatarSize = 'tiny' | 'xsmall' | 'small' | 'regular' | 'large' | 'xlarge';\n\n@Component({\n  selector: 'si-avatar',\n  imports: [NgClass, SiIconComponent],\n  templateUrl: './si-avatar.component.html',\n  styleUrl: './si-avatar.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'size()'\n  },\n  hostDirectives: [\n    {\n      directive: SiAvatarBackgroundColorDirective,\n      inputs: ['color', 'autoColor']\n    }\n  ]\n})\nexport class SiAvatarComponent {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  /**\n   * Size of the component.\n   *\n   * @defaultValue 'regular'\n   */\n  readonly size = input<AvatarSize>('regular');\n  /** Image src URL when using an image. */\n  readonly imageUrl = input<string>();\n  /** Icon name when using an icon. */\n  readonly icon = input<string>();\n  /**\n   * Initials to be displayed as default avatar if no `icon` or `imageUrl` are provided.\n   * If also no initials are provided, they will be automatically calculated from the `altText`.\n   * The value will be used to calculate the background color when `autoColor` is true.\n   */\n  readonly initials = input<string>();\n  /**\n   * The desired color index from $element-data-* color tokens. This can be set to any kind of\n   * positive integer that is then mapped to a color index.\n   * A better way to set a pseudo-random color is to set * {@link autoColor} to `true`.\n   *\n   * @defaultValue undefined\n   */\n  readonly color = input<number | undefined, unknown>(undefined, { transform: numberAttribute });\n  /** The `alt` text for image, `title` for other modes. */\n  readonly altText = input.required<string>();\n  /**\n   * The status (success, info, warning, caution, danger, critical, pending, progress) to be\n   * visualized.\n   */\n  readonly status = input<EntityStatusType>();\n  /**\n   * aria-label for status\n   */\n  readonly statusAriaLabel = input<TranslatableString>();\n\n  protected readonly statusIcon = computed(() => {\n    const status = this.status();\n    return status ? this.statusIcons[status] : undefined;\n  });\n\n  protected readonly displayInitials = computed(() => {\n    const initials = this.initials();\n    if (initials) {\n      return initials;\n    }\n\n    const name = this.altText()\n      .replaceAll(/\\([^)]*\\)/g, '')\n      .trim();\n    const byComma = name.split(/,\\s*/);\n    let first: string;\n    let last: string;\n    if (byComma.length > 1) {\n      last = byComma[0];\n      first = byComma[1];\n    } else {\n      const parts = name.split(' ');\n      first = parts.shift() ?? '';\n      last = parts.pop() ?? '';\n    }\n    if (first) {\n      first = first[0].toLocaleUpperCase();\n    }\n    if (last) {\n      last = last[0].toLocaleUpperCase();\n    }\n    return first + last;\n  });\n\n  private readonly autoBackgroundColorDirective = inject(SiAvatarBackgroundColorDirective);\n\n  constructor() {\n    effect(() => {\n      this.autoBackgroundColorDirective.calculateColorFromInitials(this.displayInitials());\n    });\n  }\n}\n","@if (imageUrl()) {\n  <img [src]=\"imageUrl()\" [alt]=\"altText()\" />\n} @else if (icon()) {\n  <i class=\"icon\" [title]=\"altText()\" [ngClass]=\"icon()\"></i>\n} @else {\n  <div\n    class=\"initials\"\n    [class.text-body]=\"color() === 0\"\n    [title]=\"altText()\"\n    [attr.aria-label]=\"altText()\"\n    >{{ displayInitials() }}</div\n  >\n}\n@let iconConfig = statusIcon();\n@if (iconConfig) {\n  <span class=\"indicator-size indicator icon-stack\">\n    <si-icon class=\"drop-shadow\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n    <si-icon [ngClass]=\"iconConfig.stackedColor\" [icon]=\"iconConfig.stacked\" />\n  </span>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-avatar-background-color.directive';\nexport * from './si-avatar.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.SiAvatarBackgroundColorDirective"],"mappings":";;;;;AAAA;;;AAGG;AAWH,MAAM,eAAe,GAAG,EAAE;AAC1B,MAAM,kBAAkB,GAAG,EAAE;AAC7B,MAAM,kBAAkB,GAAG,EAAE;AAE7B;;AAEG;MAOU,gCAAgC,CAAA;AAC3C;;;;;;AAMG;IACM,KAAK,GAAG,KAAK,CAA8B,SAAS,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;AAE9F;;;;;AAKG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE/C,IAAA,eAAe,GAAG,MAAM,CAAqB,wBAAwB,CAAC;AAEzF,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,KAAK,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;;;AAI/B;;AAEG;AACI,IAAA,0BAA0B,CAAC,eAAwB,EAAA;QACxD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE;YACzC;;QAGF,IAAI,KAAK,GAAG,CAAC;AACb,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC/C,YAAA,KAAK,IAAI,EAAE,CAAC;YACZ,KAAK,IAAI,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,kBAAkB;;AAE7D,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;;AAGd,IAAA,QAAQ,CAAC,KAAc,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE;AACtB,YAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC;;aAC9B;AACL,YAAA,MAAM,WAAW,GAAG,KAAK,IAAI,kBAAkB;AAC/C,YAAA,MAAM,UAAU,GAAG,CAAC,CAAC,WAAW,GAAG,CAAC,IAAI,eAAe,IAAI,CAAC;YAC5D,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA,mBAAA,EAAsB,UAAU,CAAA,CAAA,CAAG,CAAC;;;uGAhDtD,gCAAgC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAhC,gCAAgC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAhC,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAN5C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,2BAA2B;AACrC,oBAAA,IAAI,EAAE;AACJ,wBAAA,sBAAsB,EAAE;AACzB;AACF,iBAAA;;;AC1BD;;;AAGG;MAmCU,iBAAiB,CAAA;AACX,IAAA,WAAW,GAAG,MAAM,CAAC,kBAAkB,CAAC;AACzD;;;;AAIG;AACM,IAAA,IAAI,GAAG,KAAK,CAAa,SAAS,CAAC;;IAEnC,QAAQ,GAAG,KAAK,EAAU;;IAE1B,IAAI,GAAG,KAAK,EAAU;AAC/B;;;;AAIG;IACM,QAAQ,GAAG,KAAK,EAAU;AACnC;;;;;;AAMG;IACM,KAAK,GAAG,KAAK,CAA8B,SAAS,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;;AAErF,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAU;AAC3C;;;AAGG;IACM,MAAM,GAAG,KAAK,EAAoB;AAC3C;;AAEG;IACM,eAAe,GAAG,KAAK,EAAsB;AAEnC,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS;AACtD,KAAC,CAAC;AAEiB,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAK;AACjD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE;QAChC,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,QAAQ;;AAGjB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO;AACtB,aAAA,UAAU,CAAC,YAAY,EAAE,EAAE;AAC3B,aAAA,IAAI,EAAE;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAClC,QAAA,IAAI,KAAa;AACjB,QAAA,IAAI,IAAY;AAChB,QAAA,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AACtB,YAAA,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC;AACjB,YAAA,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;;aACb;YACL,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AAC7B,YAAA,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE;AAC3B,YAAA,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,IAAI,EAAE;;QAE1B,IAAI,KAAK,EAAE;YACT,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE;;QAEtC,IAAI,IAAI,EAAE;YACR,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,iBAAiB,EAAE;;QAEpC,OAAO,KAAK,GAAG,IAAI;AACrB,KAAC,CAAC;AAEe,IAAA,4BAA4B,GAAG,MAAM,CAAC,gCAAgC,CAAC;AAExF,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,4BAA4B,CAAC,0BAA0B,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;AACtF,SAAC,CAAC;;uGA7EO,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,QAAA,EAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAAA,gCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtC9B,spBAoBA,EAAA,MAAA,EAAA,CAAA,gtCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDIY,OAAO,oFAAE,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAcvB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAhB7B,SAAS;+BACE,WAAW,EAAA,OAAA,EACZ,CAAC,OAAO,EAAE,eAAe,CAAC,EAAA,eAAA,EAGlB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,SAAS,EAAE;qBACZ,EAAA,cAAA,EACe;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,gCAAgC;AAC3C,4BAAA,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW;AAC9B;AACF,qBAAA,EAAA,QAAA,EAAA,spBAAA,EAAA,MAAA,EAAA,CAAA,gtCAAA,CAAA,EAAA;;;AEpCH;;;AAGG;;ACHH;;AAEG;;;;"}

package/fesm2022/siemens-element-ng-breadcrumb.mjs

@@ -254,7 +254,7 @@ class SiBreadcrumbComponent {
         this.changeDetector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiBreadcrumbComponent, isStandalone: true, selector: "si-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, showRootAsText: { classPropertyName: "showRootAsText", publicName: "showRootAsText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "documentClick($event.target)" } }, viewQueries: [{ propertyName: "breadcrumbElement", first: true, predicate: ["breadcrumb"], descendants: true, isSignal: true }, { propertyName: "breadcrumbElements", predicate: ["breadcrumbItem"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel() | translate\">\n  <ol #breadcrumb class=\"breadcrumb\" (siResizeObserver)=\"resetBreadcrumb()\">\n    @for (item of itemsShown; track $index; let isFirst = $first) {\n      @if (!breadcrumbShortened || item.level !== ellipsesLevel) {\n        @if (item.shortened) {\n          <li #breadcrumbItem class=\"item text-nowrap shortened\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <div class=\"breadcrumb-dropdown-wrapper\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  toggleTemplate;\n                  context: { item: item, title: item.shortenedTitle }\n                \"\n              />\n              @if (addExpandDropdown) {\n                <div\n                  class=\"dropdown-menu\"\n                  role=\"menu\"\n                  [id]=\"controlId + item.level\"\n                  [class.show]=\"breadcrumbDropdownOpen === item.level\"\n                >\n                  <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n                </div>\n              }\n            </div>\n          </li>\n        }\n        @if (!item.shortened) {\n          <li #breadcrumbItem class=\"item\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\" />\n          </li>\n        }\n      }\n      @if (breadcrumbShortened && item.level === ellipsesLevel) {\n        <li class=\"item breadcrumb-ellipses-item\">\n          @if (!isFirst) {\n            <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n          }\n          <div class=\"breadcrumb-dropdown-wrapper\">\n            <ng-container *ngTemplateOutlet=\"toggleTemplate; context: { item: item, title: '' }\" />\n            <div\n              class=\"dropdown-menu\"\n              role=\"menu\"\n              [id]=\"controlId + item.level\"\n              [class.show]=\"breadcrumbDropdownOpen === item.level\"\n            >\n              @for (item of itemsHidden; track $index) {\n                <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n              }\n            </div>\n          </div>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #itemTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"breadcrumb-link text-nowrap\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [class.text-secondary]=\"item.lastItem\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-label]=\"item.title\"\n    [attr.aria-disabled]=\"!item.link && !item.href && !item.action\"\n  >\n    @if (item.level === 0) {\n      <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementBreadcrumbRoot\" />\n    }\n    @if (item.level !== 0) {\n      <span>{{ item.title }}</span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #toggleTemplate let-item=\"item\" let-title=\"title\" siBreadcrumbItemTemplate>\n  <div\n    class=\"breadcrumb-dropdown-toggle link\"\n    role=\"button\"\n    aria-haspopup=\"true\"\n    tabindex=\"0\"\n    [attr.aria-controls]=\"controlId + item.level\"\n    [attr.aria-expanded]=\"breadcrumbDropdownOpen === item.level\"\n    (keydown.enter)=\"toggleBreadcrumbDropdown(item.level)\"\n    (click)=\"toggleBreadcrumbDropdown(item.level)\"\n    >{{ title }}...</div\n  >\n</ng-template>\n\n<ng-template #dropdownTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"dropdown-item breadcrumb-link focus-inside\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    role=\"menuitem\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-disabled]=\"!item.link && !item.action && !item.href\"\n    >{{ item.title }}</a\n  >\n</ng-template>\n", styles: [".breadcrumb{flex-wrap:nowrap}.dropdown-menu.show>.dropdown-item{background-color:var(--element-base-1)}.item{display:flex;align-items:center}.separator{font-size:1.5rem;color:var(--element-ui-2);margin-block:-.25rem;margin-inline:0}.breadcrumb-dropdown-toggle{cursor:pointer}.dropdown-item.active,.dropdown-item:active{background-color:var(--element-base-1)}.dropdown-item:hover,.dropdown-item:focus{background-color:var(--element-base-0)!important;text-decoration:underline}.disable-router-link,.disable-router-link:hover{pointer-events:none;color:var(--element-text-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "directive", type: SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiBreadcrumbItemTemplateDirective, selector: "[siBreadcrumbItemTemplate]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiBreadcrumbComponent, isStandalone: true, selector: "si-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, showRootAsText: { classPropertyName: "showRootAsText", publicName: "showRootAsText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "documentClick($event.target)" } }, viewQueries: [{ propertyName: "breadcrumbElement", first: true, predicate: ["breadcrumb"], descendants: true, isSignal: true }, { propertyName: "breadcrumbElements", predicate: ["breadcrumbItem"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel() | translate\">\n  <ol #breadcrumb class=\"breadcrumb\" (siResizeObserver)=\"resetBreadcrumb()\">\n    @for (item of itemsShown; track $index; let isFirst = $first) {\n      @if (!breadcrumbShortened || item.level !== ellipsesLevel) {\n        @if (item.shortened) {\n          <li #breadcrumbItem class=\"item text-nowrap shortened\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <div class=\"breadcrumb-dropdown-wrapper\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  toggleTemplate;\n                  context: { item: item, title: item.shortenedTitle }\n                \"\n              />\n              @if (addExpandDropdown) {\n                <div\n                  class=\"dropdown-menu\"\n                  role=\"menu\"\n                  [id]=\"controlId + item.level\"\n                  [class.show]=\"breadcrumbDropdownOpen === item.level\"\n                >\n                  <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n                </div>\n              }\n            </div>\n          </li>\n        } @else {\n          <li #breadcrumbItem class=\"item\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\" />\n          </li>\n        }\n      }\n      @if (breadcrumbShortened && item.level === ellipsesLevel) {\n        <li class=\"item breadcrumb-ellipses-item\">\n          @if (!isFirst) {\n            <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n          }\n          <div class=\"breadcrumb-dropdown-wrapper\">\n            <ng-container *ngTemplateOutlet=\"toggleTemplate; context: { item: item, title: '' }\" />\n            <div\n              class=\"dropdown-menu\"\n              role=\"menu\"\n              [id]=\"controlId + item.level\"\n              [class.show]=\"breadcrumbDropdownOpen === item.level\"\n            >\n              @for (item of itemsHidden; track $index) {\n                <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n              }\n            </div>\n          </div>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #itemTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"breadcrumb-link text-nowrap\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [class.text-secondary]=\"item.lastItem\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-label]=\"item.title\"\n    [attr.aria-disabled]=\"!item.link && !item.href && !item.action\"\n  >\n    @if (item.level === 0) {\n      <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementBreadcrumbRoot\" />\n    } @else {\n      <span>{{ item.title }}</span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #toggleTemplate let-item=\"item\" let-title=\"title\" siBreadcrumbItemTemplate>\n  <div\n    class=\"breadcrumb-dropdown-toggle link\"\n    role=\"button\"\n    aria-haspopup=\"true\"\n    tabindex=\"0\"\n    [attr.aria-controls]=\"controlId + item.level\"\n    [attr.aria-expanded]=\"breadcrumbDropdownOpen === item.level\"\n    (keydown.enter)=\"toggleBreadcrumbDropdown(item.level)\"\n    (click)=\"toggleBreadcrumbDropdown(item.level)\"\n    >{{ title }}...</div\n  >\n</ng-template>\n\n<ng-template #dropdownTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"dropdown-item breadcrumb-link focus-inside\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    role=\"menuitem\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-disabled]=\"!item.link && !item.action && !item.href\"\n    >{{ item.title }}</a\n  >\n</ng-template>\n", styles: [".breadcrumb{flex-wrap:nowrap}.dropdown-menu.show>.dropdown-item{background-color:var(--element-base-1)}.item{display:flex;align-items:center}.separator{font-size:1.5rem;color:var(--element-ui-2);margin-block:-.25rem;margin-inline:0}.breadcrumb-dropdown-toggle{cursor:pointer}.dropdown-item.active,.dropdown-item:active{background-color:var(--element-base-1)}.dropdown-item:hover,.dropdown-item:focus{background-color:var(--element-base-0)!important;text-decoration:underline}.disable-router-link,.disable-router-link:hover{pointer-events:none;color:var(--element-text-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "directive", type: SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiBreadcrumbItemTemplateDirective, selector: "[siBreadcrumbItemTemplate]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiBreadcrumbComponent, decorators: [{
             type: Component,
@@ -265,7 +265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         SiResizeObserverDirective,
                         SiTranslatePipe,
                         SiBreadcrumbItemTemplateDirective
-                    ], template: "<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel() | translate\">\n  <ol #breadcrumb class=\"breadcrumb\" (siResizeObserver)=\"resetBreadcrumb()\">\n    @for (item of itemsShown; track $index; let isFirst = $first) {\n      @if (!breadcrumbShortened || item.level !== ellipsesLevel) {\n        @if (item.shortened) {\n          <li #breadcrumbItem class=\"item text-nowrap shortened\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <div class=\"breadcrumb-dropdown-wrapper\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  toggleTemplate;\n                  context: { item: item, title: item.shortenedTitle }\n                \"\n              />\n              @if (addExpandDropdown) {\n                <div\n                  class=\"dropdown-menu\"\n                  role=\"menu\"\n                  [id]=\"controlId + item.level\"\n                  [class.show]=\"breadcrumbDropdownOpen === item.level\"\n                >\n                  <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n                </div>\n              }\n            </div>\n          </li>\n        }\n        @if (!item.shortened) {\n          <li #breadcrumbItem class=\"item\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\" />\n          </li>\n        }\n      }\n      @if (breadcrumbShortened && item.level === ellipsesLevel) {\n        <li class=\"item breadcrumb-ellipses-item\">\n          @if (!isFirst) {\n            <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n          }\n          <div class=\"breadcrumb-dropdown-wrapper\">\n            <ng-container *ngTemplateOutlet=\"toggleTemplate; context: { item: item, title: '' }\" />\n            <div\n              class=\"dropdown-menu\"\n              role=\"menu\"\n              [id]=\"controlId + item.level\"\n              [class.show]=\"breadcrumbDropdownOpen === item.level\"\n            >\n              @for (item of itemsHidden; track $index) {\n                <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n              }\n            </div>\n          </div>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #itemTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"breadcrumb-link text-nowrap\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [class.text-secondary]=\"item.lastItem\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-label]=\"item.title\"\n    [attr.aria-disabled]=\"!item.link && !item.href && !item.action\"\n  >\n    @if (item.level === 0) {\n      <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementBreadcrumbRoot\" />\n    }\n    @if (item.level !== 0) {\n      <span>{{ item.title }}</span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #toggleTemplate let-item=\"item\" let-title=\"title\" siBreadcrumbItemTemplate>\n  <div\n    class=\"breadcrumb-dropdown-toggle link\"\n    role=\"button\"\n    aria-haspopup=\"true\"\n    tabindex=\"0\"\n    [attr.aria-controls]=\"controlId + item.level\"\n    [attr.aria-expanded]=\"breadcrumbDropdownOpen === item.level\"\n    (keydown.enter)=\"toggleBreadcrumbDropdown(item.level)\"\n    (click)=\"toggleBreadcrumbDropdown(item.level)\"\n    >{{ title }}...</div\n  >\n</ng-template>\n\n<ng-template #dropdownTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"dropdown-item breadcrumb-link focus-inside\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    role=\"menuitem\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-disabled]=\"!item.link && !item.action && !item.href\"\n    >{{ item.title }}</a\n  >\n</ng-template>\n", styles: [".breadcrumb{flex-wrap:nowrap}.dropdown-menu.show>.dropdown-item{background-color:var(--element-base-1)}.item{display:flex;align-items:center}.separator{font-size:1.5rem;color:var(--element-ui-2);margin-block:-.25rem;margin-inline:0}.breadcrumb-dropdown-toggle{cursor:pointer}.dropdown-item.active,.dropdown-item:active{background-color:var(--element-base-1)}.dropdown-item:hover,.dropdown-item:focus{background-color:var(--element-base-0)!important;text-decoration:underline}.disable-router-link,.disable-router-link:hover{pointer-events:none;color:var(--element-text-disabled)}\n"] }]
+                    ], template: "<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel() | translate\">\n  <ol #breadcrumb class=\"breadcrumb\" (siResizeObserver)=\"resetBreadcrumb()\">\n    @for (item of itemsShown; track $index; let isFirst = $first) {\n      @if (!breadcrumbShortened || item.level !== ellipsesLevel) {\n        @if (item.shortened) {\n          <li #breadcrumbItem class=\"item text-nowrap shortened\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <div class=\"breadcrumb-dropdown-wrapper\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  toggleTemplate;\n                  context: { item: item, title: item.shortenedTitle }\n                \"\n              />\n              @if (addExpandDropdown) {\n                <div\n                  class=\"dropdown-menu\"\n                  role=\"menu\"\n                  [id]=\"controlId + item.level\"\n                  [class.show]=\"breadcrumbDropdownOpen === item.level\"\n                >\n                  <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n                </div>\n              }\n            </div>\n          </li>\n        } @else {\n          <li #breadcrumbItem class=\"item\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\" />\n          </li>\n        }\n      }\n      @if (breadcrumbShortened && item.level === ellipsesLevel) {\n        <li class=\"item breadcrumb-ellipses-item\">\n          @if (!isFirst) {\n            <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n          }\n          <div class=\"breadcrumb-dropdown-wrapper\">\n            <ng-container *ngTemplateOutlet=\"toggleTemplate; context: { item: item, title: '' }\" />\n            <div\n              class=\"dropdown-menu\"\n              role=\"menu\"\n              [id]=\"controlId + item.level\"\n              [class.show]=\"breadcrumbDropdownOpen === item.level\"\n            >\n              @for (item of itemsHidden; track $index) {\n                <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n              }\n            </div>\n          </div>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #itemTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"breadcrumb-link text-nowrap\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [class.text-secondary]=\"item.lastItem\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-label]=\"item.title\"\n    [attr.aria-disabled]=\"!item.link && !item.href && !item.action\"\n  >\n    @if (item.level === 0) {\n      <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementBreadcrumbRoot\" />\n    } @else {\n      <span>{{ item.title }}</span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #toggleTemplate let-item=\"item\" let-title=\"title\" siBreadcrumbItemTemplate>\n  <div\n    class=\"breadcrumb-dropdown-toggle link\"\n    role=\"button\"\n    aria-haspopup=\"true\"\n    tabindex=\"0\"\n    [attr.aria-controls]=\"controlId + item.level\"\n    [attr.aria-expanded]=\"breadcrumbDropdownOpen === item.level\"\n    (keydown.enter)=\"toggleBreadcrumbDropdown(item.level)\"\n    (click)=\"toggleBreadcrumbDropdown(item.level)\"\n    >{{ title }}...</div\n  >\n</ng-template>\n\n<ng-template #dropdownTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"dropdown-item breadcrumb-link focus-inside\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    role=\"menuitem\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-disabled]=\"!item.link && !item.action && !item.href\"\n    >{{ item.title }}</a\n  >\n</ng-template>\n", styles: [".breadcrumb{flex-wrap:nowrap}.dropdown-menu.show>.dropdown-item{background-color:var(--element-base-1)}.item{display:flex;align-items:center}.separator{font-size:1.5rem;color:var(--element-ui-2);margin-block:-.25rem;margin-inline:0}.breadcrumb-dropdown-toggle{cursor:pointer}.dropdown-item.active,.dropdown-item:active{background-color:var(--element-base-1)}.dropdown-item:hover,.dropdown-item:focus{background-color:var(--element-base-0)!important;text-decoration:underline}.disable-router-link,.disable-router-link:hover{pointer-events:none;color:var(--element-text-disabled)}\n"] }]
         }], propDecorators: { documentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]

package/fesm2022/siemens-element-ng-breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-breadcrumb.mjs","sources":["../../../../projects/element-ng/breadcrumb/si-breadcrumb-item-template.directive.ts","../../../../projects/element-ng/breadcrumb/si-breadcrumb.component.ts","../../../../projects/element-ng/breadcrumb/si-breadcrumb.component.html","../../../../projects/element-ng/breadcrumb/si-breadcrumb.module.ts","../../../../projects/element-ng/breadcrumb/index.ts","../../../../projects/element-ng/breadcrumb/siemens-element-ng-breadcrumb.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Directive } from '@angular/core';\n\nimport { EnumeratedBreadcrumbItem } from './breadcrumb-item.model';\n\n@Directive({ selector: '[siBreadcrumbItemTemplate]' })\nexport class SiBreadcrumbItemTemplateDirective {\n  static ngTemplateContextGuard(\n    directive: SiBreadcrumbItemTemplateDirective,\n    context: unknown\n  ): context is { item: EnumeratedBreadcrumbItem; title?: string } {\n    return true;\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  viewChild,\n  viewChildren\n} from '@angular/core';\nimport {\n  addIcons,\n  elementBreadcrumbRoot,\n  elementRight2,\n  SiIconComponent\n} from '@siemens/element-ng/icon';\nimport { SiLinkDirective } from '@siemens/element-ng/link';\nimport { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer';\nimport {\n  injectSiTranslateService,\n  SiTranslatePipe,\n  t\n} from '@siemens/element-translate-ng/translate';\nimport { merge, of, Subscription } from 'rxjs';\nimport { switchMap } from 'rxjs/operators';\n\nimport { BreadcrumbItem, EnumeratedBreadcrumbItem } from './breadcrumb-item.model';\nimport { SiBreadcrumbItemTemplateDirective } from './si-breadcrumb-item-template.directive';\n\n/**\n * Defines how many items should be displayed at the end of the breadcrumb if possible.\n */\nconst NUMBER_OF_SHOWN_ITEMS_AT_END = 2;\n\n/**\n * Defines how long a display item can be without it being shortened.\n * Cannot be lower than 4.\n * If this is 0, titles will not be shortened\n */\nconst ITEM_MAX_LENGTH = 30;\n\n/**\n * Defines how many characters of an item are always displayed in the beginning.\n * Must be at least 2 less than ITEM_MAX_LENGTH\n */\nconst ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING = 10;\n\n/**\n * Defines the width of the root icon in pixels.\n */\nconst ROOT_ICON_WIDTH = 24;\n\nlet controlIdCounter = 1;\n\n@Component({\n  selector: 'si-breadcrumb',\n  imports: [\n    NgTemplateOutlet,\n    SiIconComponent,\n    SiLinkDirective,\n    SiResizeObserverDirective,\n    SiTranslatePipe,\n    SiBreadcrumbItemTemplateDirective\n  ],\n  templateUrl: './si-breadcrumb.component.html',\n  styleUrl: './si-breadcrumb.component.scss'\n})\nexport class SiBreadcrumbComponent implements OnChanges, OnDestroy {\n  /** Array of breadcrumb items. */\n  readonly items = input.required<BreadcrumbItem[]>();\n  /**\n   * Shows the \"root\" route as the provided title string instead of an icon.\n   *\n   * @defaultValue false\n   */\n  readonly showRootAsText = input(false, { transform: booleanAttribute });\n  /**\n   * Aria label for the main breadcrumb navigation. Needed for a11y.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_BREADCRUMB:Breadcrumbs`)\n   * ```\n   */\n  readonly ariaLabel = input(t(() => $localize`:@@SI_BREADCRUMB:Breadcrumbs`));\n\n  private translationSubscription?: Subscription;\n  private itemsProcessed = false;\n  private numberOfItems = 0;\n\n  protected itemsShown: EnumeratedBreadcrumbItem[] = [];\n  protected itemsHidden: EnumeratedBreadcrumbItem[] = [];\n  protected breadcrumbShortened = false;\n  protected ellipsesLevel = 0;\n  // Record to allow for -1 (root).\n  protected breadcrumbDropdownOpen: number | undefined = undefined;\n  protected addExpandDropdown = false;\n  protected controlId = `__si-breadcrumb-${controlIdCounter++}-`;\n  protected readonly icons = addIcons({ elementBreadcrumbRoot, elementRight2 });\n\n  private readonly breadcrumbElement = viewChild.required<ElementRef>('breadcrumb');\n  private readonly breadcrumbElements = viewChildren<ElementRef>('breadcrumbItem');\n\n  private changeDetector = inject(ChangeDetectorRef);\n  private translate = injectSiTranslateService();\n\n  ngOnChanges(): void {\n    // Reprocess items on every change and on init\n    this.processItems();\n  }\n\n  ngOnDestroy(): void {\n    this.translationSubscription?.unsubscribe();\n  }\n\n  private processItems(): void {\n    this.numberOfItems = this.items().length;\n\n    this.translationSubscription?.unsubscribe();\n    if (this.numberOfItems) {\n      this.translationSubscription = merge(this.translate.translationChange, of(undefined))\n        .pipe(switchMap(() => this.translate.translateAsync(this.items().map(item => item.title))))\n        .subscribe(translatedTitles => {\n          // Add the level to the items and check if they need to be shortened.\n          // If they need to be shortened, shorten them at a convenient place.\n          // Set the lastItem tag to true for the last item\n          let counter = -1;\n          const enumeratedItems = this.items().map(item => {\n            counter++;\n            const title = translatedTitles[item.title];\n            let shortened = false;\n            let shortenedTitle = title;\n            // If this is not the last item and the title too long, shorten the title\n            if (counter !== this.numberOfItems - 1 && title && title.length > ITEM_MAX_LENGTH) {\n              shortened = true;\n              // This regex gets the last space, dash or underscore.\n              const regexMatch = title\n                .slice(ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING, ITEM_MAX_LENGTH - 2)\n                .match(/^.*[- _](?=.*?$)/);\n              if (regexMatch) {\n                shortenedTitle = title.slice(\n                  0,\n                  ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING + regexMatch[0].length - 1\n                );\n              } else {\n                shortenedTitle = title.slice(0, ITEM_MAX_LENGTH - 3);\n              }\n            }\n\n            // If the root element should be displayed as text, set level not to 0.\n            // This is used to distinguish in the template between icon and text.\n            const level = counter === 0 && this.showRootAsText() ? -1 : counter;\n\n            return {\n              ...item,\n              title,\n              level,\n              hide: false,\n              shortened,\n              shortenedTitle,\n              lastItem: counter === this.numberOfItems - 1\n            };\n          });\n          this.itemsShown = enumeratedItems;\n          this.itemsHidden = [];\n          this.breadcrumbShortened = false;\n          this.breadcrumbDropdownOpen = undefined;\n          this.itemsProcessed = true;\n          this.resetBreadcrumb();\n        });\n    } else {\n      this.itemsShown = [];\n      this.itemsHidden = [];\n      this.breadcrumbShortened = false;\n      this.breadcrumbDropdownOpen = undefined;\n      this.itemsProcessed = true;\n      this.resetBreadcrumb();\n    }\n  }\n\n  /*\n   * Toggle dropdown (on click of ellipses), either for\n   * the general dropdown list if itemLevel is at ellipsesLevel\n   * or otherwise the name expansion at the specified item level.\n   * Close any open dropdown before opening a new one.\n   */\n  protected toggleBreadcrumbDropdown(itemLevel: number): void {\n    this.breadcrumbDropdownOpen = this.breadcrumbDropdownOpen === itemLevel ? undefined : itemLevel;\n  }\n\n  // Close dropdown on click anywhere else\n  @HostListener('document:click', ['$event.target'])\n  protected documentClick(targetElement: any): void {\n    if (this.breadcrumbDropdownOpen) {\n      if (!this.breadcrumbElement().nativeElement.contains(targetElement)) {\n        // Close all dropdowns.\n        this.breadcrumbDropdownOpen = undefined;\n      }\n    }\n  }\n\n  protected resetBreadcrumb(): void {\n    if (this.itemsProcessed) {\n      this.numberOfItems = this.items().length;\n      // Add an additional the ellipses item to the end of the shownItems (breadcrumb items).\n      // Disable addExpandDropdown for now, to make every item a proper SiBreadcrumbItemComponent.\n      const ellipsesItem = { title: '...', level: this.numberOfItems, shortenedTitle: '' };\n      this.itemsShown.push(ellipsesItem);\n      if (this.breadcrumbShortened) {\n        // If the breadcrumb was shortened before, remove the ellipses and add back itemsHidden (breadcrumb dropdown items).\n        this.breadcrumbShortened = false;\n        this.itemsShown.splice(this.ellipsesLevel, 1, ...this.itemsHidden);\n        this.itemsHidden = [];\n      }\n      this.addExpandDropdown = false;\n      // Wait for the next change detection cycle to measure the updated item length.\n      this.changeDetector.detectChanges();\n      this.calculateBreadcrumb();\n    }\n  }\n\n  private calculateBreadcrumb(): void {\n    this.addExpandDropdown = true;\n    const maxWidth = this.breadcrumbElement().nativeElement.clientWidth;\n    const breadcrumbElementsList = this.breadcrumbElements().map(item => item);\n    // Measure the length of the last additional ellipses item, then remove it from itemsShown (breadcrumb items).\n    const ellipsesWidth = breadcrumbElementsList[this.numberOfItems].nativeElement.offsetWidth;\n    this.itemsShown.splice(this.numberOfItems, 1);\n    let currentWidth = this.showRootAsText() ? 0 : ROOT_ICON_WIDTH;\n    const numberOfItemsKeptAtEnd = Math.min(NUMBER_OF_SHOWN_ITEMS_AT_END, this.numberOfItems - 1);\n    let reverseCounter = this.numberOfItems;\n    // Test for numberOfItemsKeptAtEnd items from the end if they still fit, if not, set breadcrumbShortened to true.\n    breadcrumbElementsList\n      .slice(this.numberOfItems - numberOfItemsKeptAtEnd, this.numberOfItems)\n      .reverse()\n      .map(item => {\n        if (!this.breadcrumbShortened) {\n          const currentItemWidth = item.nativeElement.offsetWidth;\n          if (currentWidth + currentItemWidth > maxWidth) {\n            this.breadcrumbShortened = true;\n            // Test if the ellipses item still fits, if not remove last (actually next in original order) item as well.\n            if (currentWidth + ellipsesWidth > maxWidth) {\n              reverseCounter++;\n            }\n          } else {\n            currentWidth += currentItemWidth;\n            reverseCounter--;\n          }\n        }\n      });\n\n    const start = this.showRootAsText() ? 0 : 1;\n    let counter = start;\n    // If breadcrumbShortened is not true yet, test for the rest of the items from the start\n    // Whether they still fit, if not, set breadcrumbShortened to true.\n    breadcrumbElementsList.slice(start, this.numberOfItems - numberOfItemsKeptAtEnd).map(item => {\n      if (!this.breadcrumbShortened) {\n        const currentItemWidth = item.nativeElement.offsetWidth;\n        if (currentWidth + currentItemWidth > maxWidth) {\n          this.breadcrumbShortened = true;\n          // Test if the ellipses item still fits, if not remove last item as well.\n          // If the counter is still on 1, instead remove last (actually next in original order) from\n          // the previous reverse calculation\n          if (currentWidth + ellipsesWidth > maxWidth) {\n            if (counter > 1) {\n              counter--;\n            } else {\n              reverseCounter++;\n            }\n          }\n        } else {\n          currentWidth += currentItemWidth;\n          counter++;\n        }\n      }\n    });\n    // If breadcrumbShortened is true, move the items that do not fit to itemsHidden (breadcrumb dropdown items) and add ellipses item.\n    if (this.breadcrumbShortened) {\n      this.ellipsesLevel = counter;\n      this.itemsHidden = this.itemsShown.slice(this.ellipsesLevel, reverseCounter);\n      const ellipsesItem = { title: '...', level: this.ellipsesLevel, shortenedTitle: '' };\n      this.itemsShown.splice(this.ellipsesLevel, reverseCounter - this.ellipsesLevel, ellipsesItem);\n    }\n    // Manually detect changes to prevent them from not being detected on language change\n    this.changeDetector.detectChanges();\n  }\n}\n","<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel() | translate\">\n  <ol #breadcrumb class=\"breadcrumb\" (siResizeObserver)=\"resetBreadcrumb()\">\n    @for (item of itemsShown; track $index; let isFirst = $first) {\n      @if (!breadcrumbShortened || item.level !== ellipsesLevel) {\n        @if (item.shortened) {\n          <li #breadcrumbItem class=\"item text-nowrap shortened\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <div class=\"breadcrumb-dropdown-wrapper\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  toggleTemplate;\n                  context: { item: item, title: item.shortenedTitle }\n                \"\n              />\n              @if (addExpandDropdown) {\n                <div\n                  class=\"dropdown-menu\"\n                  role=\"menu\"\n                  [id]=\"controlId + item.level\"\n                  [class.show]=\"breadcrumbDropdownOpen === item.level\"\n                >\n                  <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n                </div>\n              }\n            </div>\n          </li>\n        }\n        @if (!item.shortened) {\n          <li #breadcrumbItem class=\"item\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\" />\n          </li>\n        }\n      }\n      @if (breadcrumbShortened && item.level === ellipsesLevel) {\n        <li class=\"item breadcrumb-ellipses-item\">\n          @if (!isFirst) {\n            <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n          }\n          <div class=\"breadcrumb-dropdown-wrapper\">\n            <ng-container *ngTemplateOutlet=\"toggleTemplate; context: { item: item, title: '' }\" />\n            <div\n              class=\"dropdown-menu\"\n              role=\"menu\"\n              [id]=\"controlId + item.level\"\n              [class.show]=\"breadcrumbDropdownOpen === item.level\"\n            >\n              @for (item of itemsHidden; track $index) {\n                <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n              }\n            </div>\n          </div>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #itemTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"breadcrumb-link text-nowrap\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [class.text-secondary]=\"item.lastItem\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-label]=\"item.title\"\n    [attr.aria-disabled]=\"!item.link && !item.href && !item.action\"\n  >\n    @if (item.level === 0) {\n      <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementBreadcrumbRoot\" />\n    }\n    @if (item.level !== 0) {\n      <span>{{ item.title }}</span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #toggleTemplate let-item=\"item\" let-title=\"title\" siBreadcrumbItemTemplate>\n  <div\n    class=\"breadcrumb-dropdown-toggle link\"\n    role=\"button\"\n    aria-haspopup=\"true\"\n    tabindex=\"0\"\n    [attr.aria-controls]=\"controlId + item.level\"\n    [attr.aria-expanded]=\"breadcrumbDropdownOpen === item.level\"\n    (keydown.enter)=\"toggleBreadcrumbDropdown(item.level)\"\n    (click)=\"toggleBreadcrumbDropdown(item.level)\"\n    >{{ title }}...</div\n  >\n</ng-template>\n\n<ng-template #dropdownTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"dropdown-item breadcrumb-link focus-inside\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    role=\"menuitem\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-disabled]=\"!item.link && !item.action && !item.href\"\n    >{{ item.title }}</a\n  >\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiBreadcrumbComponent } from './si-breadcrumb.component';\n\n@NgModule({\n  imports: [SiBreadcrumbComponent],\n  exports: [SiBreadcrumbComponent]\n})\nexport class SiBreadcrumbModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './breadcrumb-item.model';\nexport * from './si-breadcrumb.component';\nexport * from './si-breadcrumb.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-breadcrumb.mjs","sources":["../../../../projects/element-ng/breadcrumb/si-breadcrumb-item-template.directive.ts","../../../../projects/element-ng/breadcrumb/si-breadcrumb.component.ts","../../../../projects/element-ng/breadcrumb/si-breadcrumb.component.html","../../../../projects/element-ng/breadcrumb/si-breadcrumb.module.ts","../../../../projects/element-ng/breadcrumb/index.ts","../../../../projects/element-ng/breadcrumb/siemens-element-ng-breadcrumb.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Directive } from '@angular/core';\n\nimport { EnumeratedBreadcrumbItem } from './breadcrumb-item.model';\n\n@Directive({ selector: '[siBreadcrumbItemTemplate]' })\nexport class SiBreadcrumbItemTemplateDirective {\n  static ngTemplateContextGuard(\n    directive: SiBreadcrumbItemTemplateDirective,\n    context: unknown\n  ): context is { item: EnumeratedBreadcrumbItem; title?: string } {\n    return true;\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  viewChild,\n  viewChildren\n} from '@angular/core';\nimport {\n  addIcons,\n  elementBreadcrumbRoot,\n  elementRight2,\n  SiIconComponent\n} from '@siemens/element-ng/icon';\nimport { SiLinkDirective } from '@siemens/element-ng/link';\nimport { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer';\nimport {\n  injectSiTranslateService,\n  SiTranslatePipe,\n  t\n} from '@siemens/element-translate-ng/translate';\nimport { merge, of, Subscription } from 'rxjs';\nimport { switchMap } from 'rxjs/operators';\n\nimport { BreadcrumbItem, EnumeratedBreadcrumbItem } from './breadcrumb-item.model';\nimport { SiBreadcrumbItemTemplateDirective } from './si-breadcrumb-item-template.directive';\n\n/**\n * Defines how many items should be displayed at the end of the breadcrumb if possible.\n */\nconst NUMBER_OF_SHOWN_ITEMS_AT_END = 2;\n\n/**\n * Defines how long a display item can be without it being shortened.\n * Cannot be lower than 4.\n * If this is 0, titles will not be shortened\n */\nconst ITEM_MAX_LENGTH = 30;\n\n/**\n * Defines how many characters of an item are always displayed in the beginning.\n * Must be at least 2 less than ITEM_MAX_LENGTH\n */\nconst ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING = 10;\n\n/**\n * Defines the width of the root icon in pixels.\n */\nconst ROOT_ICON_WIDTH = 24;\n\nlet controlIdCounter = 1;\n\n@Component({\n  selector: 'si-breadcrumb',\n  imports: [\n    NgTemplateOutlet,\n    SiIconComponent,\n    SiLinkDirective,\n    SiResizeObserverDirective,\n    SiTranslatePipe,\n    SiBreadcrumbItemTemplateDirective\n  ],\n  templateUrl: './si-breadcrumb.component.html',\n  styleUrl: './si-breadcrumb.component.scss'\n})\nexport class SiBreadcrumbComponent implements OnChanges, OnDestroy {\n  /** Array of breadcrumb items. */\n  readonly items = input.required<BreadcrumbItem[]>();\n  /**\n   * Shows the \"root\" route as the provided title string instead of an icon.\n   *\n   * @defaultValue false\n   */\n  readonly showRootAsText = input(false, { transform: booleanAttribute });\n  /**\n   * Aria label for the main breadcrumb navigation. Needed for a11y.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_BREADCRUMB:Breadcrumbs`)\n   * ```\n   */\n  readonly ariaLabel = input(t(() => $localize`:@@SI_BREADCRUMB:Breadcrumbs`));\n\n  private translationSubscription?: Subscription;\n  private itemsProcessed = false;\n  private numberOfItems = 0;\n\n  protected itemsShown: EnumeratedBreadcrumbItem[] = [];\n  protected itemsHidden: EnumeratedBreadcrumbItem[] = [];\n  protected breadcrumbShortened = false;\n  protected ellipsesLevel = 0;\n  // Record to allow for -1 (root).\n  protected breadcrumbDropdownOpen: number | undefined = undefined;\n  protected addExpandDropdown = false;\n  protected controlId = `__si-breadcrumb-${controlIdCounter++}-`;\n  protected readonly icons = addIcons({ elementBreadcrumbRoot, elementRight2 });\n\n  private readonly breadcrumbElement = viewChild.required<ElementRef>('breadcrumb');\n  private readonly breadcrumbElements = viewChildren<ElementRef>('breadcrumbItem');\n\n  private changeDetector = inject(ChangeDetectorRef);\n  private translate = injectSiTranslateService();\n\n  ngOnChanges(): void {\n    // Reprocess items on every change and on init\n    this.processItems();\n  }\n\n  ngOnDestroy(): void {\n    this.translationSubscription?.unsubscribe();\n  }\n\n  private processItems(): void {\n    this.numberOfItems = this.items().length;\n\n    this.translationSubscription?.unsubscribe();\n    if (this.numberOfItems) {\n      this.translationSubscription = merge(this.translate.translationChange, of(undefined))\n        .pipe(switchMap(() => this.translate.translateAsync(this.items().map(item => item.title))))\n        .subscribe(translatedTitles => {\n          // Add the level to the items and check if they need to be shortened.\n          // If they need to be shortened, shorten them at a convenient place.\n          // Set the lastItem tag to true for the last item\n          let counter = -1;\n          const enumeratedItems = this.items().map(item => {\n            counter++;\n            const title = translatedTitles[item.title];\n            let shortened = false;\n            let shortenedTitle = title;\n            // If this is not the last item and the title too long, shorten the title\n            if (counter !== this.numberOfItems - 1 && title && title.length > ITEM_MAX_LENGTH) {\n              shortened = true;\n              // This regex gets the last space, dash or underscore.\n              const regexMatch = title\n                .slice(ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING, ITEM_MAX_LENGTH - 2)\n                .match(/^.*[- _](?=.*?$)/);\n              if (regexMatch) {\n                shortenedTitle = title.slice(\n                  0,\n                  ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING + regexMatch[0].length - 1\n                );\n              } else {\n                shortenedTitle = title.slice(0, ITEM_MAX_LENGTH - 3);\n              }\n            }\n\n            // If the root element should be displayed as text, set level not to 0.\n            // This is used to distinguish in the template between icon and text.\n            const level = counter === 0 && this.showRootAsText() ? -1 : counter;\n\n            return {\n              ...item,\n              title,\n              level,\n              hide: false,\n              shortened,\n              shortenedTitle,\n              lastItem: counter === this.numberOfItems - 1\n            };\n          });\n          this.itemsShown = enumeratedItems;\n          this.itemsHidden = [];\n          this.breadcrumbShortened = false;\n          this.breadcrumbDropdownOpen = undefined;\n          this.itemsProcessed = true;\n          this.resetBreadcrumb();\n        });\n    } else {\n      this.itemsShown = [];\n      this.itemsHidden = [];\n      this.breadcrumbShortened = false;\n      this.breadcrumbDropdownOpen = undefined;\n      this.itemsProcessed = true;\n      this.resetBreadcrumb();\n    }\n  }\n\n  /*\n   * Toggle dropdown (on click of ellipses), either for\n   * the general dropdown list if itemLevel is at ellipsesLevel\n   * or otherwise the name expansion at the specified item level.\n   * Close any open dropdown before opening a new one.\n   */\n  protected toggleBreadcrumbDropdown(itemLevel: number): void {\n    this.breadcrumbDropdownOpen = this.breadcrumbDropdownOpen === itemLevel ? undefined : itemLevel;\n  }\n\n  // Close dropdown on click anywhere else\n  @HostListener('document:click', ['$event.target'])\n  protected documentClick(targetElement: any): void {\n    if (this.breadcrumbDropdownOpen) {\n      if (!this.breadcrumbElement().nativeElement.contains(targetElement)) {\n        // Close all dropdowns.\n        this.breadcrumbDropdownOpen = undefined;\n      }\n    }\n  }\n\n  protected resetBreadcrumb(): void {\n    if (this.itemsProcessed) {\n      this.numberOfItems = this.items().length;\n      // Add an additional the ellipses item to the end of the shownItems (breadcrumb items).\n      // Disable addExpandDropdown for now, to make every item a proper SiBreadcrumbItemComponent.\n      const ellipsesItem = { title: '...', level: this.numberOfItems, shortenedTitle: '' };\n      this.itemsShown.push(ellipsesItem);\n      if (this.breadcrumbShortened) {\n        // If the breadcrumb was shortened before, remove the ellipses and add back itemsHidden (breadcrumb dropdown items).\n        this.breadcrumbShortened = false;\n        this.itemsShown.splice(this.ellipsesLevel, 1, ...this.itemsHidden);\n        this.itemsHidden = [];\n      }\n      this.addExpandDropdown = false;\n      // Wait for the next change detection cycle to measure the updated item length.\n      this.changeDetector.detectChanges();\n      this.calculateBreadcrumb();\n    }\n  }\n\n  private calculateBreadcrumb(): void {\n    this.addExpandDropdown = true;\n    const maxWidth = this.breadcrumbElement().nativeElement.clientWidth;\n    const breadcrumbElementsList = this.breadcrumbElements().map(item => item);\n    // Measure the length of the last additional ellipses item, then remove it from itemsShown (breadcrumb items).\n    const ellipsesWidth = breadcrumbElementsList[this.numberOfItems].nativeElement.offsetWidth;\n    this.itemsShown.splice(this.numberOfItems, 1);\n    let currentWidth = this.showRootAsText() ? 0 : ROOT_ICON_WIDTH;\n    const numberOfItemsKeptAtEnd = Math.min(NUMBER_OF_SHOWN_ITEMS_AT_END, this.numberOfItems - 1);\n    let reverseCounter = this.numberOfItems;\n    // Test for numberOfItemsKeptAtEnd items from the end if they still fit, if not, set breadcrumbShortened to true.\n    breadcrumbElementsList\n      .slice(this.numberOfItems - numberOfItemsKeptAtEnd, this.numberOfItems)\n      .reverse()\n      .map(item => {\n        if (!this.breadcrumbShortened) {\n          const currentItemWidth = item.nativeElement.offsetWidth;\n          if (currentWidth + currentItemWidth > maxWidth) {\n            this.breadcrumbShortened = true;\n            // Test if the ellipses item still fits, if not remove last (actually next in original order) item as well.\n            if (currentWidth + ellipsesWidth > maxWidth) {\n              reverseCounter++;\n            }\n          } else {\n            currentWidth += currentItemWidth;\n            reverseCounter--;\n          }\n        }\n      });\n\n    const start = this.showRootAsText() ? 0 : 1;\n    let counter = start;\n    // If breadcrumbShortened is not true yet, test for the rest of the items from the start\n    // Whether they still fit, if not, set breadcrumbShortened to true.\n    breadcrumbElementsList.slice(start, this.numberOfItems - numberOfItemsKeptAtEnd).map(item => {\n      if (!this.breadcrumbShortened) {\n        const currentItemWidth = item.nativeElement.offsetWidth;\n        if (currentWidth + currentItemWidth > maxWidth) {\n          this.breadcrumbShortened = true;\n          // Test if the ellipses item still fits, if not remove last item as well.\n          // If the counter is still on 1, instead remove last (actually next in original order) from\n          // the previous reverse calculation\n          if (currentWidth + ellipsesWidth > maxWidth) {\n            if (counter > 1) {\n              counter--;\n            } else {\n              reverseCounter++;\n            }\n          }\n        } else {\n          currentWidth += currentItemWidth;\n          counter++;\n        }\n      }\n    });\n    // If breadcrumbShortened is true, move the items that do not fit to itemsHidden (breadcrumb dropdown items) and add ellipses item.\n    if (this.breadcrumbShortened) {\n      this.ellipsesLevel = counter;\n      this.itemsHidden = this.itemsShown.slice(this.ellipsesLevel, reverseCounter);\n      const ellipsesItem = { title: '...', level: this.ellipsesLevel, shortenedTitle: '' };\n      this.itemsShown.splice(this.ellipsesLevel, reverseCounter - this.ellipsesLevel, ellipsesItem);\n    }\n    // Manually detect changes to prevent them from not being detected on language change\n    this.changeDetector.detectChanges();\n  }\n}\n","<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel() | translate\">\n  <ol #breadcrumb class=\"breadcrumb\" (siResizeObserver)=\"resetBreadcrumb()\">\n    @for (item of itemsShown; track $index; let isFirst = $first) {\n      @if (!breadcrumbShortened || item.level !== ellipsesLevel) {\n        @if (item.shortened) {\n          <li #breadcrumbItem class=\"item text-nowrap shortened\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <div class=\"breadcrumb-dropdown-wrapper\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  toggleTemplate;\n                  context: { item: item, title: item.shortenedTitle }\n                \"\n              />\n              @if (addExpandDropdown) {\n                <div\n                  class=\"dropdown-menu\"\n                  role=\"menu\"\n                  [id]=\"controlId + item.level\"\n                  [class.show]=\"breadcrumbDropdownOpen === item.level\"\n                >\n                  <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n                </div>\n              }\n            </div>\n          </li>\n        } @else {\n          <li #breadcrumbItem class=\"item\">\n            @if (!isFirst) {\n              <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\" />\n          </li>\n        }\n      }\n      @if (breadcrumbShortened && item.level === ellipsesLevel) {\n        <li class=\"item breadcrumb-ellipses-item\">\n          @if (!isFirst) {\n            <si-icon class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n          }\n          <div class=\"breadcrumb-dropdown-wrapper\">\n            <ng-container *ngTemplateOutlet=\"toggleTemplate; context: { item: item, title: '' }\" />\n            <div\n              class=\"dropdown-menu\"\n              role=\"menu\"\n              [id]=\"controlId + item.level\"\n              [class.show]=\"breadcrumbDropdownOpen === item.level\"\n            >\n              @for (item of itemsHidden; track $index) {\n                <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n              }\n            </div>\n          </div>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #itemTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"breadcrumb-link text-nowrap\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [class.text-secondary]=\"item.lastItem\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-label]=\"item.title\"\n    [attr.aria-disabled]=\"!item.link && !item.href && !item.action\"\n  >\n    @if (item.level === 0) {\n      <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementBreadcrumbRoot\" />\n    } @else {\n      <span>{{ item.title }}</span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #toggleTemplate let-item=\"item\" let-title=\"title\" siBreadcrumbItemTemplate>\n  <div\n    class=\"breadcrumb-dropdown-toggle link\"\n    role=\"button\"\n    aria-haspopup=\"true\"\n    tabindex=\"0\"\n    [attr.aria-controls]=\"controlId + item.level\"\n    [attr.aria-expanded]=\"breadcrumbDropdownOpen === item.level\"\n    (keydown.enter)=\"toggleBreadcrumbDropdown(item.level)\"\n    (click)=\"toggleBreadcrumbDropdown(item.level)\"\n    >{{ title }}...</div\n  >\n</ng-template>\n\n<ng-template #dropdownTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"dropdown-item breadcrumb-link focus-inside\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    role=\"menuitem\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-disabled]=\"!item.link && !item.action && !item.href\"\n    >{{ item.title }}</a\n  >\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiBreadcrumbComponent } from './si-breadcrumb.component';\n\n@NgModule({\n  imports: [SiBreadcrumbComponent],\n  exports: [SiBreadcrumbComponent]\n})\nexport class SiBreadcrumbModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './breadcrumb-item.model';\nexport * from './si-breadcrumb.component';\nexport * from './si-breadcrumb.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}