@siemens/element-ng 49.5.0 → 49.7.0

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 - 2026\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 - 2026\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 { elementBreadcrumbRoot, elementRight2 } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } 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\" class=\"py-2\" [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=\"d-block 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=\"d-block icon-sm 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=\"d-block icon-sm 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=\"d-block icon-sm 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 - 2026\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 - 2026\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":";;;;;;;;;;;AAAA;;;AAGG;MAMU,iCAAiC,CAAA;AAC5C,IAAA,OAAO,sBAAsB,CAC3B,SAA4C,EAC5C,OAAgB,EAAA;AAEhB,QAAA,OAAO,IAAI;IACb;uGANW,iCAAiC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjC,iCAAiC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAjC,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAD7C,SAAS;mBAAC,EAAE,QAAQ,EAAE,4BAA4B,EAAE;;;ACRrD;;;AAGG;AA8BH;;AAEG;AACH,MAAM,4BAA4B,GAAG,CAAC;AAEtC;;;;AAIG;AACH,MAAM,eAAe,GAAG,EAAE;AAE1B;;;AAGG;AACH,MAAM,6CAA6C,GAAG,EAAE;AAExD;;AAEG;AACH,MAAM,eAAe,GAAG,EAAE;AAE1B,IAAI,gBAAgB,GAAG,CAAC;MAeX,qBAAqB,CAAA;;AAEvB,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAoB;AACnD;;;;AAIG;IACM,cAAc,GAAG,KAAK,CAAC,KAAK,2DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACvE;;;;;;;AAOG;AACM,IAAA,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,4BAAA,CAA8B,CAAC,qDAAC;AAEpE,IAAA,uBAAuB;IACvB,cAAc,GAAG,KAAK;IACtB,aAAa,GAAG,CAAC;IAEf,UAAU,GAA+B,EAAE;IAC3C,WAAW,GAA+B,EAAE;IAC5C,mBAAmB,GAAG,KAAK;IAC3B,aAAa,GAAG,CAAC;;IAEjB,sBAAsB,GAAuB,SAAS;IACtD,iBAAiB,GAAG,KAAK;AACzB,IAAA,SAAS,GAAG,CAAA,gBAAA,EAAmB,gBAAgB,EAAE,GAAG;IAC3C,KAAK,GAAG,QAAQ,CAAC,EAAE,qBAAqB,EAAE,aAAa,EAAE,CAAC;AAE5D,IAAA,iBAAiB,GAAG,SAAS,CAAC,QAAQ,CAAa,YAAY,CAAC;AAChE,IAAA,kBAAkB,GAAG,YAAY,CAAa,gBAAgB,8DAAC;AAExE,IAAA,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC;IAC1C,SAAS,GAAG,wBAAwB,EAAE;IAE9C,WAAW,GAAA;;QAET,IAAI,CAAC,YAAY,EAAE;IACrB;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,uBAAuB,EAAE,WAAW,EAAE;IAC7C;IAEQ,YAAY,GAAA;QAClB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM;AAExC,QAAA,IAAI,CAAC,uBAAuB,EAAE,WAAW,EAAE;AAC3C,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE,EAAE,CAAC,SAAS,CAAC;AACjF,iBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;iBACzF,SAAS,CAAC,gBAAgB,IAAG;;;;AAI5B,gBAAA,IAAI,OAAO,GAAG,CAAC,CAAC;gBAChB,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,IAAG;AAC9C,oBAAA,OAAO,EAAE;oBACT,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;oBAC1C,IAAI,SAAS,GAAG,KAAK;oBACrB,IAAI,cAAc,GAAG,KAAK;;AAE1B,oBAAA,IAAI,OAAO,KAAK,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,eAAe,EAAE;wBACjF,SAAS,GAAG,IAAI;;wBAEhB,MAAM,UAAU,GAAG;AAChB,6BAAA,KAAK,CAAC,6CAA6C,EAAE,eAAe,GAAG,CAAC;6BACxE,KAAK,CAAC,kBAAkB,CAAC;wBAC5B,IAAI,UAAU,EAAE;AACd,4BAAA,cAAc,GAAG,KAAK,CAAC,KAAK,CAC1B,CAAC,EACD,6CAA6C,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CACzE;wBACH;6BAAO;4BACL,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,eAAe,GAAG,CAAC,CAAC;wBACtD;oBACF;;;AAIA,oBAAA,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC,GAAG,OAAO;oBAEnE,OAAO;AACL,wBAAA,GAAG,IAAI;wBACP,KAAK;wBACL,KAAK;AACL,wBAAA,IAAI,EAAE,KAAK;wBACX,SAAS;wBACT,cAAc;AACd,wBAAA,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC,aAAa,GAAG;qBAC5C;AACH,gBAAA,CAAC,CAAC;AACF,gBAAA,IAAI,CAAC,UAAU,GAAG,eAAe;AACjC,gBAAA,IAAI,CAAC,WAAW,GAAG,EAAE;AACrB,gBAAA,IAAI,CAAC,mBAAmB,GAAG,KAAK;AAChC,gBAAA,IAAI,CAAC,sBAAsB,GAAG,SAAS;AACvC,gBAAA,IAAI,CAAC,cAAc,GAAG,IAAI;gBAC1B,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,CAAC,CAAC;QACN;aAAO;AACL,YAAA,IAAI,CAAC,UAAU,GAAG,EAAE;AACpB,YAAA,IAAI,CAAC,WAAW,GAAG,EAAE;AACrB,YAAA,IAAI,CAAC,mBAAmB,GAAG,KAAK;AAChC,YAAA,IAAI,CAAC,sBAAsB,GAAG,SAAS;AACvC,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;YAC1B,IAAI,CAAC,eAAe,EAAE;QACxB;IACF;AAEA;;;;;AAKG;AACO,IAAA,wBAAwB,CAAC,SAAiB,EAAA;AAClD,QAAA,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS;IACjG;;AAIU,IAAA,aAAa,CAAC,aAAkB,EAAA;AACxC,QAAA,IAAI,IAAI,CAAC,sBAAsB,EAAE;AAC/B,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;;AAEnE,gBAAA,IAAI,CAAC,sBAAsB,GAAG,SAAS;YACzC;QACF;IACF;IAEU,eAAe,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM;;;AAGxC,YAAA,MAAM,YAAY,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,EAAE,EAAE;AACpF,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;AAClC,YAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;;AAE5B,gBAAA,IAAI,CAAC,mBAAmB,GAAG,KAAK;AAChC,gBAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAClE,gBAAA,IAAI,CAAC,WAAW,GAAG,EAAE;YACvB;AACA,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;;AAE9B,YAAA,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;YACnC,IAAI,CAAC,mBAAmB,EAAE;QAC5B;IACF;IAEQ,mBAAmB,GAAA;AACzB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC,aAAa,CAAC,WAAW;AACnE,QAAA,MAAM,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC;;AAE1E,QAAA,MAAM,aAAa,GAAG,sBAAsB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,aAAa,CAAC,WAAW;QAC1F,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;AAC7C,QAAA,IAAI,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,GAAG,eAAe;AAC9D,QAAA,MAAM,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAAC,4BAA4B,EAAE,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;AAC7F,QAAA,IAAI,cAAc,GAAG,IAAI,CAAC,aAAa;;QAEvC;aACG,KAAK,CAAC,IAAI,CAAC,aAAa,GAAG,sBAAsB,EAAE,IAAI,CAAC,aAAa;AACrE,aAAA,OAAO;aACP,GAAG,CAAC,IAAI,IAAG;AACV,YAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;AAC7B,gBAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW;AACvD,gBAAA,IAAI,YAAY,GAAG,gBAAgB,GAAG,QAAQ,EAAE;AAC9C,oBAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI;;AAE/B,oBAAA,IAAI,YAAY,GAAG,aAAa,GAAG,QAAQ,EAAE;AAC3C,wBAAA,cAAc,EAAE;oBAClB;gBACF;qBAAO;oBACL,YAAY,IAAI,gBAAgB;AAChC,oBAAA,cAAc,EAAE;gBAClB;YACF;AACF,QAAA,CAAC,CAAC;AAEJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,GAAG,CAAC;QAC3C,IAAI,OAAO,GAAG,KAAK;;;AAGnB,QAAA,sBAAsB,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,sBAAsB,CAAC,CAAC,GAAG,CAAC,IAAI,IAAG;AAC1F,YAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;AAC7B,gBAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW;AACvD,gBAAA,IAAI,YAAY,GAAG,gBAAgB,GAAG,QAAQ,EAAE;AAC9C,oBAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI;;;;AAI/B,oBAAA,IAAI,YAAY,GAAG,aAAa,GAAG,QAAQ,EAAE;AAC3C,wBAAA,IAAI,OAAO,GAAG,CAAC,EAAE;AACf,4BAAA,OAAO,EAAE;wBACX;6BAAO;AACL,4BAAA,cAAc,EAAE;wBAClB;oBACF;gBACF;qBAAO;oBACL,YAAY,IAAI,gBAAgB;AAChC,oBAAA,OAAO,EAAE;gBACX;YACF;AACF,QAAA,CAAC,CAAC;;AAEF,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,YAAA,IAAI,CAAC,aAAa,GAAG,OAAO;AAC5B,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,cAAc,CAAC;AAC5E,YAAA,MAAM,YAAY,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,EAAE,EAAE;AACpF,YAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,YAAY,CAAC;QAC/F;;AAEA,QAAA,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;IACrC;uGA1NW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,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,SAAA,EAAA,EAAA,gBAAA,EAAA,8BAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,YAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,SAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvElC,8jIA4GA,EAAA,MAAA,EAAA,CAAA,+iBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED/CI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,eAAe,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,qBAAA,EAAA,aAAA,EAAA,aAAA,EAAA,YAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,yBAAyB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAEzB,iCAAiC,kEADjC,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;2FAMN,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAbjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,OAAA,EAChB;wBACP,gBAAgB;wBAChB,eAAe;wBACf,eAAe;wBACf,yBAAyB;wBACzB,eAAe;wBACf;AACD,qBAAA,EAAA,QAAA,EAAA,8jIAAA,EAAA,MAAA,EAAA,CAAA,+iBAAA,CAAA,EAAA;AAqCmE,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,iBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,YAAY,+EACjB,gBAAgB,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA;sBA0F9E,YAAY;uBAAC,gBAAgB,EAAE,CAAC,eAAe,CAAC;;;AEnMnD;;;AAGG;MASU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAlB,kBAAkB,EAAA,OAAA,EAAA,CAHnB,qBAAqB,CAAA,EAAA,OAAA,EAAA,CACrB,qBAAqB,CAAA,EAAA,CAAA;AAEpB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAHnB,qBAAqB,CAAA,EAAA,CAAA;;2FAGpB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,qBAAqB;AAChC,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"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 - 2026\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 - 2026\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 { elementBreadcrumbRoot, elementRight2 } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } 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 class=\"py-2\" [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=\"d-block 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=\"d-block icon-sm 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=\"d-block icon-sm 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=\"d-block icon-sm 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 - 2026\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 - 2026\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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"}

package/fesm2022/siemens-element-ng-circle-status.mjs

@@ -108,11 +108,11 @@ class SiCircleStatusComponent {
         return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCircleStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiCircleStatusComponent, isStandalone: true, selector: "si-circle-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, eventOut: { classPropertyName: "eventOut", publicName: "eventOut", isSignal: true, isRequired: false, transformFunction: null }, eventIcon: { classPropertyName: "eventIcon", publicName: "eventIcon", isSignal: true, isRequired: false, transformFunction: null }, blink: { classPropertyName: "blink", publicName: "blink", isSignal: true, isRequired: false, transformFunction: null }, blinkPulse: { classPropertyName: "blinkPulse", publicName: "blinkPulse", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "bg", first: true, predicate: ["bg"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    [class]=\"`bg ${backgroundClass()}`\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon [class]=\"`status-icon ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n      <si-icon [class]=\"`status-icon ${iconConfig.stackedColor}`\" [icon]=\"iconConfig.stacked\" />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}:host .status-indication ::ng-deep .status-icon{font-size:1.25rem}:host .status-indication.has-icon.small ::ng-deep .status-icon,:host .status-indication.has-icon.small ::ng-deep .event-out{font-size:16px}.deprecated-dot{inline-size:10px;block-size:10px;border-radius:50%}.event-out{position:absolute;inset-block-end:-2px;inset-inline-end:-13px}.status-indication{position:relative;inline-size:40px;block-size:40px;border-radius:50%;border:1px solid transparent}.status-indication.has-icon{border-color:var(--element-ui-4);background-color:var(--element-base-1);margin-block:6px;margin-inline:0 12px}.status-indication.has-icon .deprecated-dot,.status-indication.has-icon .indicator{position:absolute}.status-indication.has-icon .deprecated-dot{inset-block-start:-2px;inset-inline-end:0}.status-indication.has-icon .indicator{inset-block-start:-7px;inset-inline-end:-11px}.status-indication.has-icon.small{inline-size:32px;block-size:32px;margin-block:4px;margin-inline:0 8px}.status-indication.has-icon.small .event-out{inset-block-end:1px;inset-inline-end:-9px}.status-indication.has-icon.small .deprecated-dot{inline-size:8px;block-size:8px;inset-block-start:-1px;inset-inline-end:-1px}.status-indication.has-icon.small .indicator{inset-block-start:-6px;inset-inline-end:-8px}.status-indication>*{pointer-events:none;line-height:0}.bg{position:absolute;inset:0;border-radius:50%;transition:opacity calc(.5s * var(--element-animations-enabled, 1));opacity:0}.pulse.deprecated-color{opacity:.5}.pulse.deprecated-color.contrast-fix{opacity:.25}.pulse:not(.deprecated-color){opacity:1}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiCircleStatusComponent, isStandalone: true, selector: "si-circle-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, eventOut: { classPropertyName: "eventOut", publicName: "eventOut", isSignal: true, isRequired: false, transformFunction: null }, eventIcon: { classPropertyName: "eventIcon", publicName: "eventIcon", isSignal: true, isRequired: false, transformFunction: null }, blink: { classPropertyName: "blink", publicName: "blink", isSignal: true, isRequired: false, transformFunction: null }, blinkPulse: { classPropertyName: "blinkPulse", publicName: "blinkPulse", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "bg", first: true, predicate: ["bg"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    [class]=\"`bg ${backgroundClass()}`\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon [class]=\"`status-icon ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n      <si-icon [class]=\"`status-icon ${iconConfig.stackedColor}`\" [icon]=\"iconConfig.stacked\" />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}:host .status-indication ::ng-deep .status-icon{font-size:1.25rem}:host .status-indication.has-icon.small ::ng-deep .status-icon,:host .status-indication.has-icon.small ::ng-deep .event-out{font-size:1rem}.deprecated-dot{inline-size:.625rem;block-size:.625rem;border-radius:50%}.event-out{position:absolute;inset-block-end:-.125rem;inset-inline-end:-.8125rem}.status-indication{position:relative;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;border:1px solid transparent}.status-indication.has-icon{border-color:var(--element-ui-4);background-color:var(--element-base-1);margin-block:.375rem;margin-inline:0 .75rem}.status-indication.has-icon .deprecated-dot,.status-indication.has-icon .indicator{position:absolute}.status-indication.has-icon .deprecated-dot{inset-block-start:-.125rem;inset-inline-end:0}.status-indication.has-icon .indicator{inset-block-start:-.4375rem;inset-inline-end:-.6875rem}.status-indication.has-icon.small{inline-size:2rem;block-size:2rem;margin-block:.25rem;margin-inline:0 .5rem}.status-indication.has-icon.small .event-out{inset-block-end:.0625rem;inset-inline-end:-.5625rem}.status-indication.has-icon.small .deprecated-dot{inline-size:.5rem;block-size:.5rem;inset-block-start:-.0625rem;inset-inline-end:-.0625rem}.status-indication.has-icon.small .indicator{inset-block-start:-.375rem;inset-inline-end:-.5rem}.status-indication>*{pointer-events:none;line-height:0}.bg{position:absolute;inset:0;border-radius:50%;transition:opacity calc(.5s * var(--element-animations-enabled, 1));opacity:0}.pulse.deprecated-color{opacity:.5}.pulse.deprecated-color.contrast-fix{opacity:.25}.pulse:not(.deprecated-color){opacity:1}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCircleStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-circle-status', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    [class]=\"`bg ${backgroundClass()}`\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon [class]=\"`status-icon ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n      <si-icon [class]=\"`status-icon ${iconConfig.stackedColor}`\" [icon]=\"iconConfig.stacked\" />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}:host .status-indication ::ng-deep .status-icon{font-size:1.25rem}:host .status-indication.has-icon.small ::ng-deep .status-icon,:host .status-indication.has-icon.small ::ng-deep .event-out{font-size:16px}.deprecated-dot{inline-size:10px;block-size:10px;border-radius:50%}.event-out{position:absolute;inset-block-end:-2px;inset-inline-end:-13px}.status-indication{position:relative;inline-size:40px;block-size:40px;border-radius:50%;border:1px solid transparent}.status-indication.has-icon{border-color:var(--element-ui-4);background-color:var(--element-base-1);margin-block:6px;margin-inline:0 12px}.status-indication.has-icon .deprecated-dot,.status-indication.has-icon .indicator{position:absolute}.status-indication.has-icon .deprecated-dot{inset-block-start:-2px;inset-inline-end:0}.status-indication.has-icon .indicator{inset-block-start:-7px;inset-inline-end:-11px}.status-indication.has-icon.small{inline-size:32px;block-size:32px;margin-block:4px;margin-inline:0 8px}.status-indication.has-icon.small .event-out{inset-block-end:1px;inset-inline-end:-9px}.status-indication.has-icon.small .deprecated-dot{inline-size:8px;block-size:8px;inset-block-start:-1px;inset-inline-end:-1px}.status-indication.has-icon.small .indicator{inset-block-start:-6px;inset-inline-end:-8px}.status-indication>*{pointer-events:none;line-height:0}.bg{position:absolute;inset:0;border-radius:50%;transition:opacity calc(.5s * var(--element-animations-enabled, 1));opacity:0}.pulse.deprecated-color{opacity:.5}.pulse.deprecated-color.contrast-fix{opacity:.25}.pulse:not(.deprecated-color){opacity:1}\n"] }]
+            args: [{ selector: 'si-circle-status', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    [class]=\"`bg ${backgroundClass()}`\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon [class]=\"`status-icon ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n      <si-icon [class]=\"`status-icon ${iconConfig.stackedColor}`\" [icon]=\"iconConfig.stacked\" />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}:host .status-indication ::ng-deep .status-icon{font-size:1.25rem}:host .status-indication.has-icon.small ::ng-deep .status-icon,:host .status-indication.has-icon.small ::ng-deep .event-out{font-size:1rem}.deprecated-dot{inline-size:.625rem;block-size:.625rem;border-radius:50%}.event-out{position:absolute;inset-block-end:-.125rem;inset-inline-end:-.8125rem}.status-indication{position:relative;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;border:1px solid transparent}.status-indication.has-icon{border-color:var(--element-ui-4);background-color:var(--element-base-1);margin-block:.375rem;margin-inline:0 .75rem}.status-indication.has-icon .deprecated-dot,.status-indication.has-icon .indicator{position:absolute}.status-indication.has-icon .deprecated-dot{inset-block-start:-.125rem;inset-inline-end:0}.status-indication.has-icon .indicator{inset-block-start:-.4375rem;inset-inline-end:-.6875rem}.status-indication.has-icon.small{inline-size:2rem;block-size:2rem;margin-block:.25rem;margin-inline:0 .5rem}.status-indication.has-icon.small .event-out{inset-block-end:.0625rem;inset-inline-end:-.5625rem}.status-indication.has-icon.small .deprecated-dot{inline-size:.5rem;block-size:.5rem;inset-block-start:-.0625rem;inset-inline-end:-.0625rem}.status-indication.has-icon.small .indicator{inset-block-start:-.375rem;inset-inline-end:-.5rem}.status-indication>*{pointer-events:none;line-height:0}.bg{position:absolute;inset:0;border-radius:50%;transition:opacity calc(.5s * var(--element-animations-enabled, 1));opacity:0}.pulse.deprecated-color{opacity:.5}.pulse.deprecated-color.contrast-fix{opacity:.25}.pulse:not(.deprecated-color){opacity:1}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], eventOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventOut", required: false }] }], eventIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventIcon", required: false }] }], blink: [{ type: i0.Input, args: [{ isSignal: true, alias: "blink", required: false }] }], blinkPulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "blinkPulse", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], bg: [{ type: i0.ViewChild, args: ['bg', { isSignal: true }] }] } });
 
 /**

package/fesm2022/siemens-element-ng-circle-status.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-circle-status.mjs","sources":["../../../../projects/element-ng/circle-status/si-circle-status.component.ts","../../../../projects/element-ng/circle-status/si-circle-status.component.html","../../../../projects/element-ng/circle-status/si-circle-status.module.ts","../../../../projects/element-ng/circle-status/index.ts","../../../../projects/element-ng/circle-status/siemens-element-ng-circle-status.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { elementRight4 } from '@siemens/element-icons';\nimport { BlinkService, EntityStatusType, StatusIcon } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n  selector: 'si-circle-status',\n  imports: [SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-circle-status.component.html',\n  styleUrl: './si-circle-status.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiCircleStatusComponent implements OnChanges, OnDestroy {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  /**\n   * The status (success, info, warning, danger) to be visualized.\n   */\n  readonly status = input<EntityStatusType>();\n\n  /* DO NOT REMOVE: Even though the input is marked as deprecated, the core-team decided not to remove the\n   input. The possibility to have custom color is often requested by projects, so we keep it.\n   however in order to discourage it's use, we keep it marked deprecated.\n   */\n  /**\n   * A custom color (e.g. `#fefefe`) for exceptional cases.\n   * @deprecated use the semantic `status` input instead.\n   */\n  readonly color = input<string>();\n\n  /**\n   * Set a domain type icon (e.g. `element-door`) for which the status shall be shown.\n   * Leave undefined for visualizing the status without an icon.\n   */\n  readonly icon = input<string>();\n\n  /**\n   * Set the size using either regular or small only works when used together with `icon`\n   *\n   * @defaultValue 'regular'\n   */\n  readonly size = input<'regular' | 'small'>('regular');\n\n  /**\n   * event direction is out\n   *\n   * @defaultValue false\n   */\n  readonly eventOut = input(false, { transform: booleanAttribute });\n\n  /**\n   * Custom icon class for event out\n   */\n  readonly eventIcon = input<string>();\n\n  /**\n   * Whether the status should appear with a pulsing circle around the badge.\n   *\n   * @defaultValue false\n   */\n  readonly blink = input(false, { transform: booleanAttribute });\n\n  /**\n   * Blink pulse generator for synchronized blinking with other components\n   */\n  readonly blinkPulse = input<Observable<boolean>>();\n\n  /**\n   * Aria label for icon and status combo. Needed for a11y\n   */\n  readonly ariaLabel = input<TranslatableString>();\n\n  protected readonly backgroundClass = computed(() => this.statusIcon()?.background ?? '');\n  protected readonly theAriaLabel = computed(() => this.ariaLabel() ?? this.autoLabel());\n  protected readonly autoLabel = computed(() => {\n    const status = this.status();\n    const statusName = status && this.statusIcons[status] ? status : 'none';\n    const direction = this.eventOut() ? ' out' : '';\n    const iconName = this.icon()?.replace(/^element-{0,1}(.+)/, '$1 ') ?? '';\n    return `${iconName.toLocaleLowerCase()}${\n      this.status() && this.icon() ? 'in ' : ''\n    }status ${statusName}${direction}`;\n  });\n  protected readonly statusIcon = computed<StatusIcon | undefined>(() => {\n    const status = this.status();\n    return status ? this.statusIcons[status] : undefined;\n  });\n  protected readonly blinkOn = signal(false);\n  protected readonly contrastFix = signal(false);\n  protected readonly icons = addIcons({ elementRight4 });\n  private blinkSubs?: Subscription;\n\n  private readonly bg = viewChild.required<ElementRef>('bg');\n\n  private blinkService = inject(BlinkService);\n\n  ngOnChanges(changes: SimpleChanges<this>): void {\n    if (this.blinkService && changes.blink) {\n      this.blinkSubs?.unsubscribe();\n\n      if (this.blink()) {\n        const pulse = this.blinkPulse() ?? this.blinkService.pulse$;\n        this.blinkSubs = pulse.subscribe(onOff => {\n          this.blinkOn.set(onOff);\n        });\n      } else {\n        this.blinkOn.set(false);\n      }\n    }\n    if (changes.color || changes.blink) {\n      queueMicrotask(() => {\n        this.contrastFix.set(!!this.color() && this.blink() && this.calculateContrastFix());\n      });\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.blinkSubs?.unsubscribe();\n  }\n\n  private calculateContrastFix(): boolean {\n    // see https://www.w3.org/TR/AERT/#color-contrast\n    const rgb = getComputedStyle(this.bg().nativeElement)\n      .backgroundColor?.match(/\\d+/g)\n      ?.map(v => +v);\n    return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;\n  }\n}\n","<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    [class]=\"`bg ${backgroundClass()}`\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon [class]=\"`status-icon ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n      <si-icon [class]=\"`status-icon ${iconConfig.stackedColor}`\" [icon]=\"iconConfig.stacked\" />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiCircleStatusComponent } from './si-circle-status.component';\n\n@NgModule({\n  imports: [SiCircleStatusComponent],\n  exports: [SiCircleStatusComponent]\n})\nexport class SiCircleStatusModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-circle-status.component';\nexport * from './si-circle-status.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-circle-status.mjs","sources":["../../../../projects/element-ng/circle-status/si-circle-status.component.ts","../../../../projects/element-ng/circle-status/si-circle-status.component.html","../../../../projects/element-ng/circle-status/si-circle-status.module.ts","../../../../projects/element-ng/circle-status/index.ts","../../../../projects/element-ng/circle-status/siemens-element-ng-circle-status.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { elementRight4 } from '@siemens/element-icons';\nimport { BlinkService, EntityStatusType, StatusIcon } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n  selector: 'si-circle-status',\n  imports: [SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-circle-status.component.html',\n  styleUrl: './si-circle-status.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiCircleStatusComponent implements OnChanges, OnDestroy {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  /**\n   * The status (success, info, warning, danger) to be visualized.\n   */\n  readonly status = input<EntityStatusType>();\n\n  /* DO NOT REMOVE: Even though the input is marked as deprecated, the core-team decided not to remove the\n   input. The possibility to have custom color is often requested by projects, so we keep it.\n   however in order to discourage it's use, we keep it marked deprecated.\n   */\n  /**\n   * A custom color (e.g. `#fefefe`) for exceptional cases.\n   * @deprecated use the semantic `status` input instead.\n   */\n  readonly color = input<string>();\n\n  /**\n   * Set a domain type icon (e.g. `element-door`) for which the status shall be shown.\n   * Leave undefined for visualizing the status without an icon.\n   */\n  readonly icon = input<string>();\n\n  /**\n   * Set the size using either regular or small only works when used together with `icon`\n   *\n   * @defaultValue 'regular'\n   */\n  readonly size = input<'regular' | 'small'>('regular');\n\n  /**\n   * event direction is out\n   *\n   * @defaultValue false\n   */\n  readonly eventOut = input(false, { transform: booleanAttribute });\n\n  /**\n   * Custom icon class for event out\n   */\n  readonly eventIcon = input<string>();\n\n  /**\n   * Whether the status should appear with a pulsing circle around the badge.\n   *\n   * @defaultValue false\n   */\n  readonly blink = input(false, { transform: booleanAttribute });\n\n  /**\n   * Blink pulse generator for synchronized blinking with other components\n   */\n  readonly blinkPulse = input<Observable<boolean>>();\n\n  /**\n   * Aria label for icon and status combo. Needed for a11y\n   */\n  readonly ariaLabel = input<TranslatableString>();\n\n  protected readonly backgroundClass = computed(() => this.statusIcon()?.background ?? '');\n  protected readonly theAriaLabel = computed(() => this.ariaLabel() ?? this.autoLabel());\n  protected readonly autoLabel = computed(() => {\n    const status = this.status();\n    const statusName = status && this.statusIcons[status] ? status : 'none';\n    const direction = this.eventOut() ? ' out' : '';\n    const iconName = this.icon()?.replace(/^element-{0,1}(.+)/, '$1 ') ?? '';\n    return `${iconName.toLocaleLowerCase()}${\n      this.status() && this.icon() ? 'in ' : ''\n    }status ${statusName}${direction}`;\n  });\n  protected readonly statusIcon = computed<StatusIcon | undefined>(() => {\n    const status = this.status();\n    return status ? this.statusIcons[status] : undefined;\n  });\n  protected readonly blinkOn = signal(false);\n  protected readonly contrastFix = signal(false);\n  protected readonly icons = addIcons({ elementRight4 });\n  private blinkSubs?: Subscription;\n\n  private readonly bg = viewChild.required<ElementRef>('bg');\n\n  private blinkService = inject(BlinkService);\n\n  ngOnChanges(changes: SimpleChanges<this>): void {\n    if (this.blinkService && changes.blink) {\n      this.blinkSubs?.unsubscribe();\n\n      if (this.blink()) {\n        const pulse = this.blinkPulse() ?? this.blinkService.pulse$;\n        this.blinkSubs = pulse.subscribe(onOff => {\n          this.blinkOn.set(onOff);\n        });\n      } else {\n        this.blinkOn.set(false);\n      }\n    }\n    if (changes.color || changes.blink) {\n      queueMicrotask(() => {\n        this.contrastFix.set(!!this.color() && this.blink() && this.calculateContrastFix());\n      });\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.blinkSubs?.unsubscribe();\n  }\n\n  private calculateContrastFix(): boolean {\n    // see https://www.w3.org/TR/AERT/#color-contrast\n    const rgb = getComputedStyle(this.bg().nativeElement)\n      .backgroundColor?.match(/\\d+/g)\n      ?.map(v => +v);\n    return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;\n  }\n}\n","<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    [class]=\"`bg ${backgroundClass()}`\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon [class]=\"`status-icon ${iconConfig.color}`\" [icon]=\"iconConfig.icon\" />\n      <si-icon [class]=\"`status-icon ${iconConfig.stackedColor}`\" [icon]=\"iconConfig.stacked\" />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiCircleStatusComponent } from './si-circle-status.component';\n\n@NgModule({\n  imports: [SiCircleStatusComponent],\n  exports: [SiCircleStatusComponent]\n})\nexport class SiCircleStatusModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-circle-status.component';\nexport * from './si-circle-status.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-color-picker.mjs

@@ -149,7 +149,7 @@ class SiColorPickerComponent {
                 useExisting: SiColorPickerComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputBox"], descendants: true, isSignal: true }, { propertyName: "swatchInputs", predicate: ["swatchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".color-box{position:relative;block-size:24px;inline-size:24px}input:focus~.color-box{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.input-color-box{cursor:pointer;position:relative;block-size:32px;inline-size:32px;padding:7px;border-radius:var(--element-radius-1);border-width:1px;border-style:solid;border-color:var(--element-ui-2);background-color:var(--element-base-1)}.input-color-box:hover{border-color:var(--element-ui-1)}.input-color-box:not(:hover){border-color:var(--element-ui-2)}.input-color-box:not(:hover).is-open{border-color:var(--element-ui-1)}.input-color-box:disabled{cursor:default;border-color:var(--element-ui-3)}.swatch{block-size:24px}.swatch-label{cursor:pointer}.swatch-label:hover{box-shadow:0 0 0 1px var(--element-button-focus-overlay-color),0 0 0 2px var(--element-ui-3)}.inside-box{block-size:16px;inline-size:16px}.colors{cursor:pointer;inline-size:136px;min-block-size:40px}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputBox"], descendants: true, isSignal: true }, { propertyName: "swatchInputs", predicate: ["swatchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"colors-row gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".colors-row{display:grid;grid-template-columns:repeat(4,1.5rem)}.color-box{position:relative;display:flex;align-items:center;justify-content:center;block-size:1.5rem;inline-size:1.5rem}input:focus~.color-box{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.input-color-box{cursor:pointer;position:relative;padding:7px;border-radius:var(--element-radius-1);border-width:1px;border-style:solid;border-color:var(--element-ui-2);background-color:var(--element-base-1)}.input-color-box:hover{border-color:var(--element-ui-1)}.input-color-box:not(:hover){border-color:var(--element-ui-2)}.input-color-box:not(:hover).is-open{border-color:var(--element-ui-1)}.input-color-box:disabled{cursor:default;border-color:var(--element-ui-3)}.swatch{block-size:1.5rem}.swatch-label{cursor:pointer}.swatch-label:hover{box-shadow:0 0 0 1px var(--element-button-focus-overlay-color),0 0 0 2px var(--element-ui-3)}.inside-box{block-size:1rem;inline-size:1rem}.colors{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColorPickerComponent, decorators: [{
             type: Component,
@@ -159,7 +159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: SiColorPickerComponent,
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".color-box{position:relative;block-size:24px;inline-size:24px}input:focus~.color-box{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.input-color-box{cursor:pointer;position:relative;block-size:32px;inline-size:32px;padding:7px;border-radius:var(--element-radius-1);border-width:1px;border-style:solid;border-color:var(--element-ui-2);background-color:var(--element-base-1)}.input-color-box:hover{border-color:var(--element-ui-1)}.input-color-box:not(:hover){border-color:var(--element-ui-2)}.input-color-box:not(:hover).is-open{border-color:var(--element-ui-1)}.input-color-box:disabled{cursor:default;border-color:var(--element-ui-3)}.swatch{block-size:24px}.swatch-label{cursor:pointer}.swatch-label:hover{box-shadow:0 0 0 1px var(--element-button-focus-overlay-color),0 0 0 2px var(--element-ui-3)}.inside-box{block-size:16px;inline-size:16px}.colors{cursor:pointer;inline-size:136px;min-block-size:40px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"colors-row gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".colors-row{display:grid;grid-template-columns:repeat(4,1.5rem)}.color-box{position:relative;display:flex;align-items:center;justify-content:center;block-size:1.5rem;inline-size:1.5rem}input:focus~.color-box{outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}.input-color-box{cursor:pointer;position:relative;padding:7px;border-radius:var(--element-radius-1);border-width:1px;border-style:solid;border-color:var(--element-ui-2);background-color:var(--element-base-1)}.input-color-box:hover{border-color:var(--element-ui-1)}.input-color-box:not(:hover){border-color:var(--element-ui-2)}.input-color-box:not(:hover).is-open{border-color:var(--element-ui-1)}.input-color-box:disabled{cursor:default;border-color:var(--element-ui-3)}.swatch{block-size:1.5rem}.swatch-label{cursor:pointer}.swatch-label:hover{box-shadow:0 0 0 1px var(--element-button-focus-overlay-color),0 0 0 2px var(--element-ui-3)}.inside-box{block-size:1rem;inline-size:1rem}.colors{cursor:pointer}\n"] }]
         }], propDecorators: { colorPalette: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPalette", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }, { type: i0.Output, args: ["colorChange"] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], colorInputRef: [{ type: i0.ViewChild, args: ['colorInputBox', { isSignal: true }] }], swatchInputs: [{ type: i0.ViewChildren, args: ['swatchInput', { isSignal: true }] }] } });
 
 /**

package/fesm2022/siemens-element-ng-color-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-color-picker.mjs","sources":["../../../../projects/element-ng/color-picker/si-color-picker.component.ts","../../../../projects/element-ng/color-picker/si-color-picker.component.html","../../../../projects/element-ng/color-picker/index.ts","../../../../projects/element-ng/color-picker/siemens-element-ng-color-picker.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  input,\n  model,\n  signal,\n  viewChild,\n  viewChildren\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { elementOk } from '@siemens/element-icons';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n/**\n * The Element data color palette is used as default.\n * Note: This array needs to be kept in sync with the design system data color tokens.\n */\nconst defaultDataColors: string[] = [\n  'element-data-1',\n  'element-data-2',\n  'element-data-3',\n  'element-data-4',\n  'element-data-5',\n  'element-data-6',\n  'element-data-7',\n  'element-data-8',\n  'element-data-9',\n  'element-data-10',\n  'element-data-11',\n  'element-data-12',\n  'element-data-13',\n  'element-data-14',\n  'element-data-15',\n  'element-data-16'\n];\n@Component({\n  selector: 'si-color-picker',\n  imports: [SiIconComponent, SiTranslatePipe, CdkConnectedOverlay, CdkOverlayOrigin],\n  templateUrl: './si-color-picker.component.html',\n  styleUrl: './si-color-picker.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: SiColorPickerComponent,\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiColorPickerComponent implements ControlValueAccessor {\n  // eslint-disable-next-line defaultValue/tsdoc-defaultValue-annotation\n  /**\n   * The color palette to choose the colors from. As colors, only valid CSS\n   * variable names omitting the `--` prefix or Element color tokens omitting\n   * the `$` prefix are supported.\n   *\n   * Note: If custom CSS variables are provided, they need to be defined for\n   * both light and dark mode.\n   *\n   * @defaultValue The first 16 colors of the Element data color palette.\n   */\n  readonly colorPalette = input<string[]>(defaultDataColors);\n\n  /**\n   * The selected color.\n   */\n  readonly color = model<string>();\n\n  /**\n   * Specifies whether the color popup should automatically close on a color selection.\n   *\n   * @defaultValue false\n   */\n  readonly autoClose = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specifies whether the color picker component is disabled.\n   *\n   * @defaultValue false\n   */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  readonly disabledInput = input(false, { alias: 'disabled' });\n\n  /**\n   * Aria label for the color input button.\n   */\n  readonly ariaLabel = input<TranslatableString>();\n\n  private onChange: (value: string) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  private readonly colorInputRef =\n    viewChild.required<ElementRef<HTMLInputElement>>('colorInputBox');\n  private readonly swatchInputs = viewChildren<ElementRef<HTMLInputElement>>('swatchInput');\n  private readonly selectedSwatchInput = computed(() =>\n    this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked)\n  );\n  private readonly disabledNgControl = signal(false);\n  private readonly numberOfColumns = 4;\n  protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n  protected readonly isOverlayOpen = signal(false);\n  protected readonly icons = addIcons({ elementOk });\n\n  protected blur(): void {\n    if (!this.autoClose()) {\n      this.onTouched();\n    }\n  }\n\n  protected arrowDown(index: number, event: Event): void {\n    const nextIndex = index + this.numberOfColumns;\n    this.focusLabel(nextIndex);\n    event.preventDefault();\n  }\n\n  protected arrowUp(index: number, event: Event): void {\n    const prevIndex = index - this.numberOfColumns;\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  protected arrowLeft(index: number, event: Event): void {\n    const prevIndex = index + (isRTL() ? 1 : -1);\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  protected arrowRight(index: number, event: Event): void {\n    const prevIndex = index + (isRTL() ? -1 : +1);\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  private focusLabel(index: number): void {\n    const labels = this.swatchInputs();\n    const totalSwatches = labels.length;\n    const normalizedIndex = (index + totalSwatches) % totalSwatches;\n    labels[normalizedIndex].nativeElement.focus();\n  }\n\n  protected openOverlay(): void {\n    this.isOverlayOpen.set(true);\n    this.focusSelectedColor();\n  }\n\n  protected overlayDetach(): void {\n    this.isOverlayOpen.set(false);\n    setTimeout(() => {\n      this.colorInputRef().nativeElement?.focus();\n    });\n  }\n\n  private focusSelectedColor(): void {\n    setTimeout(() => {\n      this.selectedSwatchInput()?.nativeElement.focus();\n    });\n  }\n\n  protected selectColor(color: string): void {\n    this.color.set(color);\n    this.onChange(color!);\n    if (this.autoClose()) {\n      this.overlayDetach();\n    }\n  }\n\n  writeValue(value: string): void {\n    this.color.set(value);\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledNgControl.set(isDisabled);\n  }\n}\n","<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-color-picker.component';\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-color-picker.mjs","sources":["../../../../projects/element-ng/color-picker/si-color-picker.component.ts","../../../../projects/element-ng/color-picker/si-color-picker.component.html","../../../../projects/element-ng/color-picker/index.ts","../../../../projects/element-ng/color-picker/siemens-element-ng-color-picker.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  input,\n  model,\n  signal,\n  viewChild,\n  viewChildren\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { elementOk } from '@siemens/element-icons';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n/**\n * The Element data color palette is used as default.\n * Note: This array needs to be kept in sync with the design system data color tokens.\n */\nconst defaultDataColors: string[] = [\n  'element-data-1',\n  'element-data-2',\n  'element-data-3',\n  'element-data-4',\n  'element-data-5',\n  'element-data-6',\n  'element-data-7',\n  'element-data-8',\n  'element-data-9',\n  'element-data-10',\n  'element-data-11',\n  'element-data-12',\n  'element-data-13',\n  'element-data-14',\n  'element-data-15',\n  'element-data-16'\n];\n@Component({\n  selector: 'si-color-picker',\n  imports: [SiIconComponent, SiTranslatePipe, CdkConnectedOverlay, CdkOverlayOrigin],\n  templateUrl: './si-color-picker.component.html',\n  styleUrl: './si-color-picker.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: SiColorPickerComponent,\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiColorPickerComponent implements ControlValueAccessor {\n  // eslint-disable-next-line defaultValue/tsdoc-defaultValue-annotation\n  /**\n   * The color palette to choose the colors from. As colors, only valid CSS\n   * variable names omitting the `--` prefix or Element color tokens omitting\n   * the `$` prefix are supported.\n   *\n   * Note: If custom CSS variables are provided, they need to be defined for\n   * both light and dark mode.\n   *\n   * @defaultValue The first 16 colors of the Element data color palette.\n   */\n  readonly colorPalette = input<string[]>(defaultDataColors);\n\n  /**\n   * The selected color.\n   */\n  readonly color = model<string>();\n\n  /**\n   * Specifies whether the color popup should automatically close on a color selection.\n   *\n   * @defaultValue false\n   */\n  readonly autoClose = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specifies whether the color picker component is disabled.\n   *\n   * @defaultValue false\n   */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  readonly disabledInput = input(false, { alias: 'disabled' });\n\n  /**\n   * Aria label for the color input button.\n   */\n  readonly ariaLabel = input<TranslatableString>();\n\n  private onChange: (value: string) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  private readonly colorInputRef =\n    viewChild.required<ElementRef<HTMLInputElement>>('colorInputBox');\n  private readonly swatchInputs = viewChildren<ElementRef<HTMLInputElement>>('swatchInput');\n  private readonly selectedSwatchInput = computed(() =>\n    this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked)\n  );\n  private readonly disabledNgControl = signal(false);\n  private readonly numberOfColumns = 4;\n  protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n  protected readonly isOverlayOpen = signal(false);\n  protected readonly icons = addIcons({ elementOk });\n\n  protected blur(): void {\n    if (!this.autoClose()) {\n      this.onTouched();\n    }\n  }\n\n  protected arrowDown(index: number, event: Event): void {\n    const nextIndex = index + this.numberOfColumns;\n    this.focusLabel(nextIndex);\n    event.preventDefault();\n  }\n\n  protected arrowUp(index: number, event: Event): void {\n    const prevIndex = index - this.numberOfColumns;\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  protected arrowLeft(index: number, event: Event): void {\n    const prevIndex = index + (isRTL() ? 1 : -1);\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  protected arrowRight(index: number, event: Event): void {\n    const prevIndex = index + (isRTL() ? -1 : +1);\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  private focusLabel(index: number): void {\n    const labels = this.swatchInputs();\n    const totalSwatches = labels.length;\n    const normalizedIndex = (index + totalSwatches) % totalSwatches;\n    labels[normalizedIndex].nativeElement.focus();\n  }\n\n  protected openOverlay(): void {\n    this.isOverlayOpen.set(true);\n    this.focusSelectedColor();\n  }\n\n  protected overlayDetach(): void {\n    this.isOverlayOpen.set(false);\n    setTimeout(() => {\n      this.colorInputRef().nativeElement?.focus();\n    });\n  }\n\n  private focusSelectedColor(): void {\n    setTimeout(() => {\n      this.selectedSwatchInput()?.nativeElement.focus();\n    });\n  }\n\n  protected selectColor(color: string): void {\n    this.color.set(color);\n    this.onChange(color!);\n    if (this.autoClose()) {\n      this.overlayDetach();\n    }\n  }\n\n  writeValue(value: string): void {\n    this.color.set(value);\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledNgControl.set(isDisabled);\n  }\n}\n","<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"colors-row gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse p-1\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-color-picker.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAAA;;;AAGG;AAoBH;;;AAGG;AACH,MAAM,iBAAiB,GAAa;IAClC,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IACjB;CACD;MAeY,sBAAsB,CAAA;;AAEjC;;;;;;;;;AASG;AACM,IAAA,YAAY,GAAG,KAAK,CAAW,iBAAiB,wDAAC;AAE1D;;AAEG;IACM,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AAEhC;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAElE;;;;AAIG;;IAEM,aAAa,GAAG,KAAK,CAAC,KAAK,0DAAI,KAAK,EAAE,UAAU,EAAA,CAAG;AAE5D;;AAEG;IACM,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;AAExC,IAAA,QAAQ,GAA4B,MAAK,EAAE,CAAC;AAC5C,IAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAEvB,IAAA,aAAa,GAC5B,SAAS,CAAC,QAAQ,CAA+B,eAAe,CAAC;AAClD,IAAA,YAAY,GAAG,YAAY,CAA+B,aAAa,wDAAC;IACxE,mBAAmB,GAAG,QAAQ,CAAC,MAC9C,IAAI,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,qBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAC3E;AACgB,IAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,6DAAC;IACjC,eAAe,GAAG,CAAC;AACjB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,oDAAC;AAC3E,IAAA,aAAa,GAAG,MAAM,CAAC,KAAK,yDAAC;AAC7B,IAAA,KAAK,GAAG,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IAExC,IAAI,GAAA;AACZ,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;YACrB,IAAI,CAAC,SAAS,EAAE;QAClB;IACF;IAEU,SAAS,CAAC,KAAa,EAAE,KAAY,EAAA;AAC7C,QAAA,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,eAAe;AAC9C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;IAEU,OAAO,CAAC,KAAa,EAAE,KAAY,EAAA;AAC3C,QAAA,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,eAAe;AAC9C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;IAEU,SAAS,CAAC,KAAa,EAAE,KAAY,EAAA;AAC7C,QAAA,MAAM,SAAS,GAAG,KAAK,IAAI,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;IAEU,UAAU,CAAC,KAAa,EAAE,KAAY,EAAA;AAC9C,QAAA,MAAM,SAAS,GAAG,KAAK,IAAI,KAAK,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7C,QAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,cAAc,EAAE;IACxB;AAEQ,IAAA,UAAU,CAAC,KAAa,EAAA;AAC9B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE;AAClC,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM;QACnC,MAAM,eAAe,GAAG,CAAC,KAAK,GAAG,aAAa,IAAI,aAAa;QAC/D,MAAM,CAAC,eAAe,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE;IAC/C;IAEU,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;QAC5B,IAAI,CAAC,kBAAkB,EAAE;IAC3B;IAEU,aAAa,GAAA;AACrB,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;QAC7B,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,aAAa,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE;AAC7C,QAAA,CAAC,CAAC;IACJ;IAEQ,kBAAkB,GAAA;QACxB,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,mBAAmB,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE;AACnD,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,WAAW,CAAC,KAAa,EAAA;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAM,CAAC;AACrB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE;QACtB;IACF;AAEA,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;AAEA,IAAA,gBAAgB,CAAC,EAA2B,EAAA;AAC1C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC;IACxC;uGAnIW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,UAAA,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,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EATtB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,sBAAsB;AACnC,gBAAA,KAAK,EAAE;AACR;SACF,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,eAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxDH,unEA6DA,olCDdY,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAmB,mBAAmB,EAAA,QAAA,EAAA,qEAAA,EAAA,MAAA,EAAA,CAAA,2BAAA,EAAA,8BAAA,EAAA,qCAAA,EAAA,4BAAA,EAAA,4BAAA,EAAA,0BAAA,EAAA,2BAAA,EAAA,6BAAA,EAAA,8BAAA,EAAA,kCAAA,EAAA,+BAAA,EAAA,mCAAA,EAAA,mCAAA,EAAA,yBAAA,EAAA,iCAAA,EAAA,sCAAA,EAAA,gCAAA,EAAA,iCAAA,EAAA,uCAAA,EAAA,kCAAA,EAAA,yBAAA,EAAA,wCAAA,EAAA,+BAAA,EAAA,+BAAA,EAAA,qBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,kIAAtD,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAY/B,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAdlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,eAAe,EAAE,eAAe,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,EAAA,SAAA,EAGvE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAA,sBAAwB;AACnC,4BAAA,KAAK,EAAE;AACR;qBACF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,unEAAA,EAAA,MAAA,EAAA,CAAA,4hCAAA,CAAA,EAAA;AA6CI,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CAAA,eAAe,yEACS,aAAa,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEvG1F;;;AAGG;;ACHH;;AAEG;;;;"}