@siemens/element-ng 48.0.0-next.2 → 48.0.0-next.3

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

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-status-toggle.mjs","sources":["../../../../projects/element-ng/status-toggle/si-status-toggle.component.ts","../../../../projects/element-ng/status-toggle/si-status-toggle.component.html","../../../../projects/element-ng/status-toggle/index.ts","../../../../projects/element-ng/status-toggle/siemens-element-ng-status-toggle.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  forwardRef,\n  input,\n  model,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  output,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { isRTL, listenGlobal } from '@siemens/element-ng/common';\nimport { SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { StatusToggleItem } from './status-toggle.model';\n\n@Component({\n  selector: 'si-status-toggle',\n  imports: [NgClass, SiIconNextComponent, SiTranslatePipe],\n  templateUrl: './si-status-toggle.component.html',\n  styleUrl: './si-status-toggle.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => SiStatusToggleComponent),\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiStatusToggleComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges {\n  /** List of status items. */\n  readonly items = input.required<StatusToggleItem[]>();\n  /**\n   * Disabled state for the whole component.\n   * @defaultValue false\n   **/\n  readonly disabled = input(false);\n  /** Value of currently selected status item. */\n  readonly value = model<string | number>();\n\n  /** Emitted when an item is clicked. */\n  readonly itemClick = output<string | number>();\n\n  private readonly containerElement = viewChild.required<ElementRef>('container');\n  private readonly draggableElement = viewChild.required<ElementRef>('draggable');\n\n  private boundingX = 0;\n  private x0 = 0;\n  private offset0 = 0;\n  private onChange?: (value: string | number) => void;\n  private onTouched?: () => void;\n  private unlistenDragEvents: (() => void)[] = [];\n  private readonly internalDisabled = signal(false);\n\n  protected readonly selectedIndex = signal<number | undefined>(undefined);\n  protected readonly draggablePosition = signal('');\n  protected readonly animated = signal(false);\n  protected readonly isDisabled = computed(() => this.disabled() || this.internalDisabled());\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.value || changes.values) {\n      this.setValue(this.value(), true, false);\n    }\n  }\n\n  ngOnInit(): void {\n    const selectedIndex = this.items().findIndex(v => v.value === this.value());\n    if (selectedIndex >= 0) {\n      this.selectItem(selectedIndex, false, false);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.handleDragEnd();\n  }\n\n  /** @internal */\n  writeValue(value: string | number): void {\n    this.setValue(value, true, false);\n  }\n\n  /** @internal */\n  registerOnChange(fn: (value: string | number) => void): void {\n    this.onChange = fn;\n  }\n\n  /** @internal */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /** @internal */\n  setDisabledState(isDisabled: boolean): void {\n    this.internalDisabled.set(isDisabled);\n  }\n\n  protected handleMouseDown(event: MouseEvent): void {\n    if (this.isDisabled() || event.buttons !== 1) {\n      return;\n    }\n    if (this.handleDragStart(event)) {\n      this.unlistenDragEvents.push(listenGlobal('mousemove', e => this.handleDragMove(e)));\n      this.unlistenDragEvents.push(listenGlobal('mouseup', e => this.handleDragEnd(e)));\n    }\n  }\n\n  protected handleTouchStart(event: TouchEvent): void {\n    if (event.touches.length !== 1 || this.disabled()) {\n      return;\n    }\n    if (this.handleDragStart(event)) {\n      this.unlistenDragEvents.push(listenGlobal('touchmove', e => this.handleDragMove(e), true));\n      this.unlistenDragEvents.push(listenGlobal('touchend', e => this.handleDragEnd(e)));\n    }\n  }\n\n  private handleDragStart(event: Event): boolean {\n    const rect = this.containerElement().nativeElement.getBoundingClientRect();\n    this.boundingX = rect.x;\n    const draggable = this.draggableElement().nativeElement;\n\n    this.offset0 = draggable.offsetLeft;\n    this.x0 = this.getX(event);\n\n    // adjust for click outside current selection\n    const clickIndex = this.getUnderlyingIndex(this.x0, true);\n    const currentIndex = this.getUnderlyingIndex(this.offset0);\n    const factor = isRTL() ? -1 : 1;\n    this.offset0 += (clickIndex - currentIndex) * draggable.offsetWidth * factor;\n\n    this.handleDragMove(event);\n    return true;\n  }\n\n  private handleDragEnd(event?: Event): void {\n    this.arrangeToUnderlyingItem(event);\n    this.unlistenDragEvents.forEach(handler => handler());\n    this.unlistenDragEvents.length = 0;\n  }\n\n  private getOffset(event: Event, isStart = false): number {\n    const containerWidth = this.containerElement().nativeElement.clientWidth;\n    const draggableWidth = this.draggableElement().nativeElement.clientWidth;\n\n    const dX = this.getX(event) - this.x0;\n    const left = Math.min(Math.max(0, this.offset0 + dX), containerWidth - draggableWidth);\n    return isStart && isRTL() ? containerWidth - draggableWidth - left : left;\n  }\n\n  private getUnderlyingIndex(offsetLeft: number, floor = false): number {\n    const pos = offsetLeft / this.draggableElement().nativeElement.clientWidth;\n    const element = floor ? Math.floor(pos) : Math.round(pos);\n    const len = this.items().length;\n    const index = isRTL() ? len - element - 1 : element;\n    return Math.max(0, Math.min(len - 1, index));\n  }\n\n  private arrangeToUnderlyingItem(event?: Event): void {\n    if (event && !this.isDisabled()) {\n      const index = this.getUnderlyingIndex(this.getOffset(event));\n      this.selectItem(this.items()[index].disabled ? this.selectedIndex() : index);\n      this.onTouched?.();\n    }\n  }\n\n  private handleDragMove(event: Event): void {\n    if (event.cancelable) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n    this.draggablePosition.set(`${this.getOffset(event, true)}px`);\n    this.animated.set(false);\n  }\n\n  private getX(event: Event): number {\n    const clientX =\n      (event as MouseEvent).clientX ?? (event as TouchEvent).changedTouches[0]?.clientX ?? '';\n    return clientX - this.boundingX;\n  }\n\n  private setValue(val?: string | number, animated = true, emit = false): void {\n    this.selectItem(\n      this.items().findIndex(v => v.value === val),\n      animated,\n      emit\n    );\n  }\n\n  protected selectItem(index: number | undefined, animated = true, emit = true): void {\n    if (index === undefined || index === -1 || this.isDisabled()) {\n      return;\n    }\n\n    const values = this.items();\n    const value = values[index];\n    if (!value.disabled) {\n      const prevIndex = this.selectedIndex();\n\n      this.value.set(value.value);\n      this.animated.set(animated);\n      this.selectedIndex.set(index);\n      this.draggablePosition.set(`${(100 / values.length) * index}%`);\n\n      if (emit && index !== prevIndex) {\n        if (this.onChange) {\n          this.onChange(this.value()!);\n        }\n      }\n\n      if (emit) {\n        this.itemClick.emit(this.value()!);\n      }\n    }\n  }\n}\n","<div\n  #container\n  role=\"radiogroup\"\n  class=\"status-toggle-container\"\n  [class.disabled]=\"isDisabled()\"\n  (mousedown)=\"handleMouseDown($event)\"\n  (touchstart)=\"handleTouchStart($event)\"\n>\n  @let itemsValue = items();\n  <div\n    #draggable\n    class=\"toggle-draggable\"\n    [class.animated]=\"animated()\"\n    [class.disabled]=\"isDisabled()\"\n    [style.inset-inline-start]=\"draggablePosition()\"\n    [style.width.%]=\"100 / itemsValue.length\"\n  >\n    <div class=\"visible-toggle-draggable\"></div>\n  </div>\n\n  @let selIndexValue = selectedIndex();\n  @for (item of itemsValue; track $index) {\n    <div\n      #items\n      class=\"status-toggle-item focus-inside px-4\"\n      role=\"radio\"\n      [attr.aria-checked]=\"$index === selIndexValue\"\n      [attr.tabindex]=\"isDisabled() || item.disabled ? '' : '0'\"\n      [attr.aria-disabled]=\"isDisabled() || item.disabled\"\n      [class.active]=\"$index === selIndexValue\"\n      [class.disabled]=\"item.disabled || isDisabled()\"\n      [style.width.%]=\"100 / $count\"\n      (keydown.enter)=\"selectItem($index)\"\n    >\n      <span class=\"icon icon-stack\">\n        <si-icon-next\n          [ngClass]=\"$index === selIndexValue ? (item.activeIconClass ?? 'active') : ''\"\n          [icon]=\"$index === selIndexValue ? (item.activeIcon ?? item.icon) : item.icon\"\n        />\n        @if ($index === selIndexValue && item.activeIconStacked) {\n          <si-icon-next\n            [ngClass]=\"item.activeIconStackedClass ?? item.activeIconClass + '-contrast'\"\n            [icon]=\"item.activeIconStacked\"\n          />\n        }\n      </span>\n      <span\n        class=\"text-truncate\"\n        [ngClass]=\"$index === selIndexValue ? (item.activeTextClass ?? 'active') : ''\"\n      >\n        {{ item.text | translate }}\n      </span>\n    </div>\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-toggle.component';\nexport * from './status-toggle.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAAA;;;AAGG;MAwCU,uBAAuB,CAAA;;AAEzB,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAsB;AACrD;;;AAGI;AACK,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;;IAEvB,KAAK,GAAG,KAAK,EAAmB;;IAGhC,SAAS,GAAG,MAAM,EAAmB;AAE7B,IAAA,gBAAgB,GAAG,SAAS,CAAC,QAAQ,CAAa,WAAW,CAAC;AAC9D,IAAA,gBAAgB,GAAG,SAAS,CAAC,QAAQ,CAAa,WAAW,CAAC;IAEvE,SAAS,GAAG,CAAC;IACb,EAAE,GAAG,CAAC;IACN,OAAO,GAAG,CAAC;AACX,IAAA,QAAQ;AACR,IAAA,SAAS;IACT,kBAAkB,GAAmB,EAAE;AAC9B,IAAA,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC;AAE9B,IAAA,aAAa,GAAG,MAAM,CAAqB,SAAS,CAAC;AACrD,IAAA,iBAAiB,GAAG,MAAM,CAAC,EAAE,CAAC;AAC9B,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC;AACxB,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAE1F,IAAA,WAAW,CAAC,OAAsB,EAAA;QAChC,IAAI,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,MAAM,EAAE;AACnC,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC;;;IAI5C,QAAQ,GAAA;QACN,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;AAC3E,QAAA,IAAI,aAAa,IAAI,CAAC,EAAE;YACtB,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,CAAC;;;IAIhD,WAAW,GAAA;QACT,IAAI,CAAC,aAAa,EAAE;;;AAItB,IAAA,UAAU,CAAC,KAAsB,EAAA;QAC/B,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC;;;AAInC,IAAA,gBAAgB,CAAC,EAAoC,EAAA;AACnD,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;;AAIpB,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;;AAIrB,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,UAAU,CAAC;;AAG7B,IAAA,eAAe,CAAC,KAAiB,EAAA;QACzC,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC,EAAE;YAC5C;;AAEF,QAAA,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;YAC/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;YACpF,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;;;AAI3E,IAAA,gBAAgB,CAAC,KAAiB,EAAA;AAC1C,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACjD;;AAEF,QAAA,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;YAC/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;YAC1F,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;;;AAI9E,IAAA,eAAe,CAAC,KAAY,EAAA;QAClC,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE;AAC1E,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,aAAa;AAEvD,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,UAAU;QACnC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;AAG1B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC;QACzD,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC;AAC1D,QAAA,MAAM,MAAM,GAAG,KAAK,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC;AAC/B,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,GAAG,YAAY,IAAI,SAAS,CAAC,WAAW,GAAG,MAAM;AAE5E,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;AAC1B,QAAA,OAAO,IAAI;;AAGL,IAAA,aAAa,CAAC,KAAa,EAAA;AACjC,QAAA,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC;AACnC,QAAA,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,OAAO,IAAI,OAAO,EAAE,CAAC;AACrD,QAAA,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC;;AAG5B,IAAA,SAAS,CAAC,KAAY,EAAE,OAAO,GAAG,KAAK,EAAA;QAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,aAAa,CAAC,WAAW;QACxE,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,aAAa,CAAC,WAAW;AAExE,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,EAAE;QACrC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,cAAc,GAAG,cAAc,CAAC;AACtF,QAAA,OAAO,OAAO,IAAI,KAAK,EAAE,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,GAAG,IAAI;;AAGnE,IAAA,kBAAkB,CAAC,UAAkB,EAAE,KAAK,GAAG,KAAK,EAAA;AAC1D,QAAA,MAAM,GAAG,GAAG,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,aAAa,CAAC,WAAW;QAC1E,MAAM,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QACzD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM;AAC/B,QAAA,MAAM,KAAK,GAAG,KAAK,EAAE,GAAG,GAAG,GAAG,OAAO,GAAG,CAAC,GAAG,OAAO;AACnD,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;;AAGtC,IAAA,uBAAuB,CAAC,KAAa,EAAA;QAC3C,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;AAC/B,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YAC5D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,KAAK,CAAC;AAC5E,YAAA,IAAI,CAAC,SAAS,IAAI;;;AAId,IAAA,cAAc,CAAC,KAAY,EAAA;AACjC,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;;AAEzB,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA,EAAA,CAAI,CAAC;AAC9D,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;;AAGlB,IAAA,IAAI,CAAC,KAAY,EAAA;AACvB,QAAA,MAAM,OAAO,GACV,KAAoB,CAAC,OAAO,IAAK,KAAoB,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,IAAI,EAAE;AACzF,QAAA,OAAO,OAAO,GAAG,IAAI,CAAC,SAAS;;IAGzB,QAAQ,CAAC,GAAqB,EAAE,QAAQ,GAAG,IAAI,EAAE,IAAI,GAAG,KAAK,EAAA;QACnE,IAAI,CAAC,UAAU,CACb,IAAI,CAAC,KAAK,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,GAAG,CAAC,EAC5C,QAAQ,EACR,IAAI,CACL;;IAGO,UAAU,CAAC,KAAyB,EAAE,QAAQ,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAC1E,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;YAC5D;;AAGF,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE;AAC3B,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;AAC3B,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACnB,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE;YAEtC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC;AAC3B,YAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;AAC3B,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;AAC7B,YAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,IAAI,KAAK,CAAA,CAAA,CAAG,CAAC;AAE/D,YAAA,IAAI,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE;AAC/B,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAG,CAAC;;;YAIhC,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAG,CAAC;;;;uGArL7B,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,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,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,SAAA,EAVvB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;;AAE1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,uBAAuB,CAAC;AACtD,gBAAA,KAAK,EAAE;AACR;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxCH,k1DAuDA,EAAA,MAAA,EAAA,CAAA,grCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDzBY,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,mBAAmB,sEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAa5C,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAfnC,SAAS;+BACE,kBAAkB,EAAA,OAAA,EACnB,CAAC,OAAO,EAAE,mBAAmB,EAAE,eAAe,CAAC,EAAA,SAAA,EAG7C;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;;AAE1B,4BAAA,WAAW,EAAE,UAAU,CAAC,6BAA6B,CAAC;AACtD,4BAAA,KAAK,EAAE;AACR;qBACF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,k1DAAA,EAAA,MAAA,EAAA,CAAA,grCAAA,CAAA,EAAA;;;AEzCjD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"version":3,"file":"siemens-element-ng-status-toggle.mjs","sources":["../../../../projects/element-ng/status-toggle/si-status-toggle.component.ts","../../../../projects/element-ng/status-toggle/si-status-toggle.component.html","../../../../projects/element-ng/status-toggle/index.ts","../../../../projects/element-ng/status-toggle/siemens-element-ng-status-toggle.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  forwardRef,\n  input,\n  model,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  output,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { isRTL, listenGlobal } from '@siemens/element-ng/common';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { StatusToggleItem } from './status-toggle.model';\n\n@Component({\n  selector: 'si-status-toggle',\n  imports: [NgClass, SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-status-toggle.component.html',\n  styleUrl: './si-status-toggle.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => SiStatusToggleComponent),\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiStatusToggleComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges {\n  /** List of status items. */\n  readonly items = input.required<StatusToggleItem[]>();\n  /**\n   * Disabled state for the whole component.\n   * @defaultValue false\n   **/\n  readonly disabled = input(false);\n  /** Value of currently selected status item. */\n  readonly value = model<string | number>();\n\n  /** Emitted when an item is clicked. */\n  readonly itemClick = output<string | number>();\n\n  private readonly containerElement = viewChild.required<ElementRef>('container');\n  private readonly draggableElement = viewChild.required<ElementRef>('draggable');\n\n  private boundingX = 0;\n  private x0 = 0;\n  private offset0 = 0;\n  private onChange?: (value: string | number) => void;\n  private onTouched?: () => void;\n  private unlistenDragEvents: (() => void)[] = [];\n  private readonly internalDisabled = signal(false);\n\n  protected readonly selectedIndex = signal<number | undefined>(undefined);\n  protected readonly draggablePosition = signal('');\n  protected readonly animated = signal(false);\n  protected readonly isDisabled = computed(() => this.disabled() || this.internalDisabled());\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.value || changes.values) {\n      this.setValue(this.value(), true, false);\n    }\n  }\n\n  ngOnInit(): void {\n    const selectedIndex = this.items().findIndex(v => v.value === this.value());\n    if (selectedIndex >= 0) {\n      this.selectItem(selectedIndex, false, false);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.handleDragEnd();\n  }\n\n  /** @internal */\n  writeValue(value: string | number): void {\n    this.setValue(value, true, false);\n  }\n\n  /** @internal */\n  registerOnChange(fn: (value: string | number) => void): void {\n    this.onChange = fn;\n  }\n\n  /** @internal */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /** @internal */\n  setDisabledState(isDisabled: boolean): void {\n    this.internalDisabled.set(isDisabled);\n  }\n\n  protected handleMouseDown(event: MouseEvent): void {\n    if (this.isDisabled() || event.buttons !== 1) {\n      return;\n    }\n    if (this.handleDragStart(event)) {\n      this.unlistenDragEvents.push(listenGlobal('mousemove', e => this.handleDragMove(e)));\n      this.unlistenDragEvents.push(listenGlobal('mouseup', e => this.handleDragEnd(e)));\n    }\n  }\n\n  protected handleTouchStart(event: TouchEvent): void {\n    if (event.touches.length !== 1 || this.disabled()) {\n      return;\n    }\n    if (this.handleDragStart(event)) {\n      this.unlistenDragEvents.push(listenGlobal('touchmove', e => this.handleDragMove(e), true));\n      this.unlistenDragEvents.push(listenGlobal('touchend', e => this.handleDragEnd(e)));\n    }\n  }\n\n  private handleDragStart(event: Event): boolean {\n    const rect = this.containerElement().nativeElement.getBoundingClientRect();\n    this.boundingX = rect.x;\n    const draggable = this.draggableElement().nativeElement;\n\n    this.offset0 = draggable.offsetLeft;\n    this.x0 = this.getX(event);\n\n    // adjust for click outside current selection\n    const clickIndex = this.getUnderlyingIndex(this.x0, true);\n    const currentIndex = this.getUnderlyingIndex(this.offset0);\n    const factor = isRTL() ? -1 : 1;\n    this.offset0 += (clickIndex - currentIndex) * draggable.offsetWidth * factor;\n\n    this.handleDragMove(event);\n    return true;\n  }\n\n  private handleDragEnd(event?: Event): void {\n    this.arrangeToUnderlyingItem(event);\n    this.unlistenDragEvents.forEach(handler => handler());\n    this.unlistenDragEvents.length = 0;\n  }\n\n  private getOffset(event: Event, isStart = false): number {\n    const containerWidth = this.containerElement().nativeElement.clientWidth;\n    const draggableWidth = this.draggableElement().nativeElement.clientWidth;\n\n    const dX = this.getX(event) - this.x0;\n    const left = Math.min(Math.max(0, this.offset0 + dX), containerWidth - draggableWidth);\n    return isStart && isRTL() ? containerWidth - draggableWidth - left : left;\n  }\n\n  private getUnderlyingIndex(offsetLeft: number, floor = false): number {\n    const pos = offsetLeft / this.draggableElement().nativeElement.clientWidth;\n    const element = floor ? Math.floor(pos) : Math.round(pos);\n    const len = this.items().length;\n    const index = isRTL() ? len - element - 1 : element;\n    return Math.max(0, Math.min(len - 1, index));\n  }\n\n  private arrangeToUnderlyingItem(event?: Event): void {\n    if (event && !this.isDisabled()) {\n      const index = this.getUnderlyingIndex(this.getOffset(event));\n      this.selectItem(this.items()[index].disabled ? this.selectedIndex() : index);\n      this.onTouched?.();\n    }\n  }\n\n  private handleDragMove(event: Event): void {\n    if (event.cancelable) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n    this.draggablePosition.set(`${this.getOffset(event, true)}px`);\n    this.animated.set(false);\n  }\n\n  private getX(event: Event): number {\n    const clientX =\n      (event as MouseEvent).clientX ?? (event as TouchEvent).changedTouches[0]?.clientX ?? '';\n    return clientX - this.boundingX;\n  }\n\n  private setValue(val?: string | number, animated = true, emit = false): void {\n    this.selectItem(\n      this.items().findIndex(v => v.value === val),\n      animated,\n      emit\n    );\n  }\n\n  protected selectItem(index: number | undefined, animated = true, emit = true): void {\n    if (index === undefined || index === -1 || this.isDisabled()) {\n      return;\n    }\n\n    const values = this.items();\n    const value = values[index];\n    if (!value.disabled) {\n      const prevIndex = this.selectedIndex();\n\n      this.value.set(value.value);\n      this.animated.set(animated);\n      this.selectedIndex.set(index);\n      this.draggablePosition.set(`${(100 / values.length) * index}%`);\n\n      if (emit && index !== prevIndex) {\n        if (this.onChange) {\n          this.onChange(this.value()!);\n        }\n      }\n\n      if (emit) {\n        this.itemClick.emit(this.value()!);\n      }\n    }\n  }\n}\n","<div\n  #container\n  role=\"radiogroup\"\n  class=\"status-toggle-container\"\n  [class.disabled]=\"isDisabled()\"\n  (mousedown)=\"handleMouseDown($event)\"\n  (touchstart)=\"handleTouchStart($event)\"\n>\n  @let itemsValue = items();\n  <div\n    #draggable\n    class=\"toggle-draggable\"\n    [class.animated]=\"animated()\"\n    [class.disabled]=\"isDisabled()\"\n    [style.inset-inline-start]=\"draggablePosition()\"\n    [style.width.%]=\"100 / itemsValue.length\"\n  >\n    <div class=\"visible-toggle-draggable\"></div>\n  </div>\n\n  @let selIndexValue = selectedIndex();\n  @for (item of itemsValue; track $index) {\n    <div\n      #items\n      class=\"status-toggle-item focus-inside px-4\"\n      role=\"radio\"\n      [attr.aria-checked]=\"$index === selIndexValue\"\n      [attr.tabindex]=\"isDisabled() || item.disabled ? '' : '0'\"\n      [attr.aria-disabled]=\"isDisabled() || item.disabled\"\n      [class.active]=\"$index === selIndexValue\"\n      [class.disabled]=\"item.disabled || isDisabled()\"\n      [style.width.%]=\"100 / $count\"\n      (keydown.enter)=\"selectItem($index)\"\n    >\n      <span class=\"icon icon-stack\">\n        <si-icon\n          [ngClass]=\"$index === selIndexValue ? (item.activeIconClass ?? 'active') : ''\"\n          [icon]=\"$index === selIndexValue ? (item.activeIcon ?? item.icon) : item.icon\"\n        />\n        @if ($index === selIndexValue && item.activeIconStacked) {\n          <si-icon\n            [ngClass]=\"item.activeIconStackedClass ?? item.activeIconClass + '-contrast'\"\n            [icon]=\"item.activeIconStacked\"\n          />\n        }\n      </span>\n      <span\n        class=\"text-truncate\"\n        [ngClass]=\"$index === selIndexValue ? (item.activeTextClass ?? 'active') : ''\"\n      >\n        {{ item.text | translate }}\n      </span>\n    </div>\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-status-toggle.component';\nexport * from './status-toggle.model';\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-summary-chip.mjs

@@ -1,7 +1,7 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, input, model, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { STATUS_ICON_CONFIG, SiIconNextComponent } from '@siemens/element-ng/icon';
+import { STATUS_ICON_CONFIG, SiIconComponent } from '@siemens/element-ng/icon';
 import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 
 /**
@@ -56,11 +56,11 @@ class SiSummaryChipComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSummaryChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSummaryChipComponent, isStandalone: true, selector: "si-summary-chip", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div\n  class=\"chip\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"disabled() ? '' : '0'\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack my-n2 ms-n2\">\n      <si-icon-next [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon-next [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"si-body-2\" [class.visually-hidden]=\"hideLabel()\">\n    {{ label() | translate }}\n  </div>\n  <div class=\"si-title-2\">{{ value() | translate }}</div>\n</div>\n", styles: [".chip{display:inline-flex;align-items:center;border:1px solid var(--element-ui-3);border-radius:16px;padding-block:7px;padding-inline:8px;gap:4px}.chip:not(.disabled){cursor:pointer}.chip:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSummaryChipComponent, isStandalone: true, selector: "si-summary-chip", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div\n  class=\"chip\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"disabled() ? '' : '0'\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack my-n2 ms-n2\">\n      <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"si-body-2\" [class.visually-hidden]=\"hideLabel()\">\n    {{ label() | translate }}\n  </div>\n  <div class=\"si-title-2\">{{ value() | translate }}</div>\n</div>\n", styles: [".chip{display:inline-flex;align-items:center;border:1px solid var(--element-ui-3);border-radius:16px;padding-block:7px;padding-inline:8px;gap:4px}.chip:not(.disabled){cursor:pointer}.chip:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "20.0.6", ngImport: i0, type: SiSummaryChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-summary-chip', imports: [NgClass, SiIconNextComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"chip\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"disabled() ? '' : '0'\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack my-n2 ms-n2\">\n      <si-icon-next [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon-next [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"si-body-2\" [class.visually-hidden]=\"hideLabel()\">\n    {{ label() | translate }}\n  </div>\n  <div class=\"si-title-2\">{{ value() | translate }}</div>\n</div>\n", styles: [".chip{display:inline-flex;align-items:center;border:1px solid var(--element-ui-3);border-radius:16px;padding-block:7px;padding-inline:8px;gap:4px}.chip:not(.disabled){cursor:pointer}.chip:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"] }]
+            args: [{ selector: 'si-summary-chip', imports: [NgClass, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"chip\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"disabled() ? '' : '0'\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack my-n2 ms-n2\">\n      <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"si-body-2\" [class.visually-hidden]=\"hideLabel()\">\n    {{ label() | translate }}\n  </div>\n  <div class=\"si-title-2\">{{ value() | translate }}</div>\n</div>\n", styles: [".chip{display:inline-flex;align-items:center;border:1px solid var(--element-ui-3);border-radius:16px;padding-block:7px;padding-inline:8px;gap:4px}.chip:not(.disabled){cursor:pointer}.chip:not(.disabled):not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"] }]
         }] });
 
 /**

package/fesm2022/siemens-element-ng-summary-chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-summary-chip.mjs","sources":["../../../../projects/element-ng/summary-chip/si-summary-chip.component.ts","../../../../projects/element-ng/summary-chip/si-summary-chip.component.html","../../../../projects/element-ng/summary-chip/index.ts","../../../../projects/element-ng/summary-chip/siemens-element-ng-summary-chip.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  model\n} from '@angular/core';\nimport { ExtendedStatusType } from '@siemens/element-ng/common';\nimport { SiIconNextComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-summary-chip',\n  imports: [NgClass, SiIconNextComponent, SiTranslatePipe],\n  templateUrl: './si-summary-chip.component.html',\n  styleUrl: './si-summary-chip.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiSummaryChipComponent {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  /** Status. Alternatively, use {@link icon} and {@link color}. */\n  readonly status = input<ExtendedStatusType>();\n  /** Icon token, see {@link https://element.siemens.io/icons/element}. */\n  readonly icon = input<string>();\n  /** Color class, see {@link https://element.siemens.io/typography/#color-variants-classes}. */\n  readonly color = input<string>();\n  /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/}. */\n  readonly stackedIcon = input<string>();\n  /** Color class, see {@link https://element.siemens.io/fundamentals/icons/}. */\n  readonly stackedColor = input<string>();\n  /** The label. */\n  readonly label = input.required<TranslatableString>();\n  /** Value to display. */\n  readonly value = input.required<TranslatableString>();\n  /**\n   * Selected state, will change when clicked.\n   * @defaultValue false\n   */\n  readonly selected = model(false);\n  /**\n   * Disabled state.\n   * @defaultValue false\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /**\n   * Whether to hide the label. The label will still be used for screen-readers.\n   * @defaultValue false\n   */\n  readonly hideLabel = input(false, { transform: booleanAttribute });\n\n  protected readonly statusIcon = computed(() => {\n    const status = this.status();\n    return status\n      ? this.statusIcons[status]\n      : {\n          icon: this.icon(),\n          color: this.color(),\n          stacked: this.stackedIcon(),\n          stackedColor: this.stackedColor()\n        };\n  });\n\n  protected toggleSelected(): void {\n    if (!this.disabled()) {\n      this.selected.set(!this.selected());\n    }\n  }\n}\n","<div\n  class=\"chip\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"disabled() ? '' : '0'\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack my-n2 ms-n2\">\n      <si-icon-next [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon-next [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"si-body-2\" [class.visually-hidden]=\"hideLabel()\">\n    {{ label() | translate }}\n  </div>\n  <div class=\"si-title-2\">{{ value() | translate }}</div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-summary-chip.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;;;AAGG;MAsBU,sBAAsB,CAAA;AAChB,IAAA,WAAW,GAAG,MAAM,CAAC,kBAAkB,CAAC;;IAEhD,MAAM,GAAG,KAAK,EAAsB;;IAEpC,IAAI,GAAG,KAAK,EAAU;;IAEtB,KAAK,GAAG,KAAK,EAAU;;IAEvB,WAAW,GAAG,KAAK,EAAU;;IAE7B,YAAY,GAAG,KAAK,EAAU;;AAE9B,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAsB;;AAE5C,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAsB;AACrD;;;AAGG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;AAChC;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACjE;;;AAGG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE/C,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO;AACL,cAAE,IAAI,CAAC,WAAW,CAAC,MAAM;AACzB,cAAE;AACE,gBAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACnB,gBAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;AAC3B,gBAAA,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC;AACP,KAAC,CAAC;IAEQ,cAAc,GAAA;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;;;uGA9C5B,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,m3CCzBnC,00BAyBA,EAAA,MAAA,EAAA,CAAA,wXAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDLY,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,mBAAmB,sEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAK5C,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,OAAO,EAAE,mBAAmB,EAAE,eAAe,CAAC,EAAA,eAAA,EAGvC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,00BAAA,EAAA,MAAA,EAAA,CAAA,wXAAA,CAAA,EAAA;;;AEvBjD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"version":3,"file":"siemens-element-ng-summary-chip.mjs","sources":["../../../../projects/element-ng/summary-chip/si-summary-chip.component.ts","../../../../projects/element-ng/summary-chip/si-summary-chip.component.html","../../../../projects/element-ng/summary-chip/index.ts","../../../../projects/element-ng/summary-chip/siemens-element-ng-summary-chip.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  model\n} from '@angular/core';\nimport { ExtendedStatusType } from '@siemens/element-ng/common';\nimport { SiIconComponent, STATUS_ICON_CONFIG } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-summary-chip',\n  imports: [NgClass, SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-summary-chip.component.html',\n  styleUrl: './si-summary-chip.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiSummaryChipComponent {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  /** Status. Alternatively, use {@link icon} and {@link color}. */\n  readonly status = input<ExtendedStatusType>();\n  /** Icon token, see {@link https://element.siemens.io/icons/element}. */\n  readonly icon = input<string>();\n  /** Color class, see {@link https://element.siemens.io/typography/#color-variants-classes}. */\n  readonly color = input<string>();\n  /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/}. */\n  readonly stackedIcon = input<string>();\n  /** Color class, see {@link https://element.siemens.io/fundamentals/icons/}. */\n  readonly stackedColor = input<string>();\n  /** The label. */\n  readonly label = input.required<TranslatableString>();\n  /** Value to display. */\n  readonly value = input.required<TranslatableString>();\n  /**\n   * Selected state, will change when clicked.\n   * @defaultValue false\n   */\n  readonly selected = model(false);\n  /**\n   * Disabled state.\n   * @defaultValue false\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /**\n   * Whether to hide the label. The label will still be used for screen-readers.\n   * @defaultValue false\n   */\n  readonly hideLabel = input(false, { transform: booleanAttribute });\n\n  protected readonly statusIcon = computed(() => {\n    const status = this.status();\n    return status\n      ? this.statusIcons[status]\n      : {\n          icon: this.icon(),\n          color: this.color(),\n          stacked: this.stackedIcon(),\n          stackedColor: this.stackedColor()\n        };\n  });\n\n  protected toggleSelected(): void {\n    if (!this.disabled()) {\n      this.selected.set(!this.selected());\n    }\n  }\n}\n","<div\n  class=\"chip\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"disabled() ? '' : '0'\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack my-n2 ms-n2\">\n      <si-icon [ngClass]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon [ngClass]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"si-body-2\" [class.visually-hidden]=\"hideLabel()\">\n    {{ label() | translate }}\n  </div>\n  <div class=\"si-title-2\">{{ value() | translate }}</div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-summary-chip.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;;;AAGG;MAsBU,sBAAsB,CAAA;AAChB,IAAA,WAAW,GAAG,MAAM,CAAC,kBAAkB,CAAC;;IAEhD,MAAM,GAAG,KAAK,EAAsB;;IAEpC,IAAI,GAAG,KAAK,EAAU;;IAEtB,KAAK,GAAG,KAAK,EAAU;;IAEvB,WAAW,GAAG,KAAK,EAAU;;IAE7B,YAAY,GAAG,KAAK,EAAU;;AAE9B,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAsB;;AAE5C,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAsB;AACrD;;;AAGG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;AAChC;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACjE;;;AAGG;IACM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE/C,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO;AACL,cAAE,IAAI,CAAC,WAAW,CAAC,MAAM;AACzB,cAAE;AACE,gBAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACnB,gBAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;AAC3B,gBAAA,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC;AACP,KAAC,CAAC;IAEQ,cAAc,GAAA;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;;;uGA9C5B,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,m3CCzBnC,g0BAyBA,EAAA,MAAA,EAAA,CAAA,wXAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDLY,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,iEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKxC,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,OAAO,EAAE,eAAe,EAAE,eAAe,CAAC,EAAA,eAAA,EAGnC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,g0BAAA,EAAA,MAAA,EAAA,CAAA,wXAAA,CAAA,EAAA;;;AEvBjD;;;AAGG;;ACHH;;AAEG;;;;"}

package/fesm2022/siemens-element-ng-summary-widget.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, model, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { STATUS_ICON } from '@siemens/element-ng/common';
-import { SiIconNextComponent } from '@siemens/element-ng/icon';
+import { SiIconComponent } from '@siemens/element-ng/icon';
 import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 
 /**
@@ -56,11 +56,11 @@ class SiSummaryWidgetComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSummaryWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSummaryWidgetComponent, isStandalone: true, selector: "si-summary-widget", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div\n  class=\"widget ps-2 pe-4 gap-2\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"interactive() ? '0' : ''\"\n  [attr.aria-disabled]=\"!interactive()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  [class.interactive]=\"interactive()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack\">\n      <si-icon-next [class]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon-next [class]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"d-flex flex-column py-2\" [class.ps-2]=\"!actualIcon.icon\">\n    <div class=\"si-title-2\">{{ value() | translate }}</div>\n    <div class=\"si-body-2 text-secondary\">{{ label() | translate }}</div>\n  </div>\n</div>\n", styles: [".widget{display:inline-flex;align-items:start;block-size:100%;border-radius:var(--element-radius-1)}.widget.interactive{cursor:pointer}.widget.interactive:not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSummaryWidgetComponent, isStandalone: true, selector: "si-summary-widget", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, ngImport: i0, template: "<div\n  class=\"widget ps-2 pe-4 gap-2\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"interactive() ? '0' : ''\"\n  [attr.aria-disabled]=\"!interactive()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  [class.interactive]=\"interactive()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack\">\n      <si-icon [class]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon [class]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"d-flex flex-column py-2\" [class.ps-2]=\"!actualIcon.icon\">\n    <div class=\"si-title-2\">{{ value() | translate }}</div>\n    <div class=\"si-body-2 text-secondary\">{{ label() | translate }}</div>\n  </div>\n</div>\n", styles: [".widget{display:inline-flex;align-items:start;block-size:100%;border-radius:var(--element-radius-1)}.widget.interactive{cursor:pointer}.widget.interactive:not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\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: "20.0.6", ngImport: i0, type: SiSummaryWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-summary-widget', imports: [SiIconNextComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"widget ps-2 pe-4 gap-2\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"interactive() ? '0' : ''\"\n  [attr.aria-disabled]=\"!interactive()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  [class.interactive]=\"interactive()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack\">\n      <si-icon-next [class]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon-next [class]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"d-flex flex-column py-2\" [class.ps-2]=\"!actualIcon.icon\">\n    <div class=\"si-title-2\">{{ value() | translate }}</div>\n    <div class=\"si-body-2 text-secondary\">{{ label() | translate }}</div>\n  </div>\n</div>\n", styles: [".widget{display:inline-flex;align-items:start;block-size:100%;border-radius:var(--element-radius-1)}.widget.interactive{cursor:pointer}.widget.interactive:not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"] }]
+            args: [{ selector: 'si-summary-widget', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"widget ps-2 pe-4 gap-2\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"interactive() ? '0' : ''\"\n  [attr.aria-disabled]=\"!interactive()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  [class.interactive]=\"interactive()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack\">\n      <si-icon [class]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon [class]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"d-flex flex-column py-2\" [class.ps-2]=\"!actualIcon.icon\">\n    <div class=\"si-title-2\">{{ value() | translate }}</div>\n    <div class=\"si-body-2 text-secondary\">{{ label() | translate }}</div>\n  </div>\n</div>\n", styles: [".widget{display:inline-flex;align-items:start;block-size:100%;border-radius:var(--element-radius-1)}.widget.interactive{cursor:pointer}.widget.interactive:not(.selected):hover{background:var(--element-base-1-hover)}.selected{background:var(--element-base-1-selected)}.disabled{opacity:var(--element-action-disabled-opacity)}\n"] }]
         }] });
 
 /**

package/fesm2022/siemens-element-ng-summary-widget.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-summary-widget.mjs","sources":["../../../../projects/element-ng/summary-widget/si-summary-widget.component.ts","../../../../projects/element-ng/summary-widget/si-summary-widget.component.html","../../../../projects/element-ng/summary-widget/index.ts","../../../../projects/element-ng/summary-widget/siemens-element-ng-summary-widget.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model\n} from '@angular/core';\nimport { ExtendedStatusType, STATUS_ICON } from '@siemens/element-ng/common';\nimport { SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-summary-widget',\n  imports: [SiIconNextComponent, SiTranslatePipe],\n  templateUrl: './si-summary-widget.component.html',\n  styleUrl: './si-summary-widget.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiSummaryWidgetComponent {\n  /** Status. Alternatively, use {@link icon} and {@link color}. */\n  readonly status = input<ExtendedStatusType>();\n  /** Icon token, see {@link https://element.siemens.io/icons/element}. */\n  readonly icon = input<string>();\n  /** Color class, see {@link https://element.siemens.io/fundamentals/typography/#color-variants-classes}. */\n  readonly color = input<string>();\n  /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/}. */\n  readonly stackedIcon = input<string>();\n  /** Color class, see {@link https://element.siemens.io/fundamentals/icons/}. */\n  readonly stackedColor = input<string>();\n  /** The label. */\n  readonly label = input.required<TranslatableString>();\n  /** Value to display. */\n  readonly value = input.required<TranslatableString>();\n  /**\n   * Selected state, will change when clicked.\n   * @defaultValue false\n   */\n  readonly selected = model(false);\n  /**\n   * Readonly state.\n   * @defaultValue false\n   */\n  readonly readonly = input(false, { transform: booleanAttribute });\n  /**\n   * Disabled state.\n   * @defaultValue false\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  protected readonly interactive = computed(() => !this.disabled() && !this.readonly());\n\n  protected readonly statusIcon = computed(() => {\n    const status = this.status();\n    return status\n      ? STATUS_ICON[status]\n      : {\n          icon: this.icon(),\n          color: this.color(),\n          stacked: this.stackedIcon(),\n          stackedColor: this.stackedColor()\n        };\n  });\n\n  protected toggleSelected(): void {\n    if (this.interactive()) {\n      this.selected.set(!this.selected());\n    }\n  }\n}\n","<div\n  class=\"widget ps-2 pe-4 gap-2\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"interactive() ? '0' : ''\"\n  [attr.aria-disabled]=\"!interactive()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  [class.interactive]=\"interactive()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack\">\n      <si-icon-next [class]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon-next [class]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"d-flex flex-column py-2\" [class.ps-2]=\"!actualIcon.icon\">\n    <div class=\"si-title-2\">{{ value() | translate }}</div>\n    <div class=\"si-body-2 text-secondary\">{{ label() | translate }}</div>\n  </div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-summary-widget.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;;;AAGG;MAoBU,wBAAwB,CAAA;;IAE1B,MAAM,GAAG,KAAK,EAAsB;;IAEpC,IAAI,GAAG,KAAK,EAAU;;IAEtB,KAAK,GAAG,KAAK,EAAU;;IAEvB,WAAW,GAAG,KAAK,EAAU;;IAE7B,YAAY,GAAG,KAAK,EAAU;;AAE9B,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAsB;;AAE5C,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAsB;AACrD;;;AAGG;AACM,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;AAChC;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACjE;;;AAGG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAE9C,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAElE,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO;AACL,cAAE,WAAW,CAAC,MAAM;AACpB,cAAE;AACE,gBAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACnB,gBAAA,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;AAC3B,gBAAA,YAAY,EAAE,IAAI,CAAC,YAAY;aAChC;AACP,KAAC,CAAC;IAEQ,cAAc,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;YACtB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;;;uGA/C5B,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAxB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,IAAA,EAAA,iBAAA,EAAA,IAAA,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,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvBrC,o7BA0BA,EAAA,MAAA,EAAA,CAAA,wUAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDRY,mBAAmB,sEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKnC,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;+BACE,mBAAmB,EAAA,OAAA,EACpB,CAAC,mBAAmB,EAAE,eAAe,CAAC,EAAA,eAAA,EAG9B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,o7BAAA,EAAA,MAAA,EAAA,CAAA,wUAAA,CAAA,EAAA;;;AErBjD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"version":3,"file":"siemens-element-ng-summary-widget.mjs","sources":["../../../../projects/element-ng/summary-widget/si-summary-widget.component.ts","../../../../projects/element-ng/summary-widget/si-summary-widget.component.html","../../../../projects/element-ng/summary-widget/index.ts","../../../../projects/element-ng/summary-widget/siemens-element-ng-summary-widget.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model\n} from '@angular/core';\nimport { ExtendedStatusType, STATUS_ICON } from '@siemens/element-ng/common';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-summary-widget',\n  imports: [SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-summary-widget.component.html',\n  styleUrl: './si-summary-widget.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiSummaryWidgetComponent {\n  /** Status. Alternatively, use {@link icon} and {@link color}. */\n  readonly status = input<ExtendedStatusType>();\n  /** Icon token, see {@link https://element.siemens.io/icons/element}. */\n  readonly icon = input<string>();\n  /** Color class, see {@link https://element.siemens.io/fundamentals/typography/#color-variants-classes}. */\n  readonly color = input<string>();\n  /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/}. */\n  readonly stackedIcon = input<string>();\n  /** Color class, see {@link https://element.siemens.io/fundamentals/icons/}. */\n  readonly stackedColor = input<string>();\n  /** The label. */\n  readonly label = input.required<TranslatableString>();\n  /** Value to display. */\n  readonly value = input.required<TranslatableString>();\n  /**\n   * Selected state, will change when clicked.\n   * @defaultValue false\n   */\n  readonly selected = model(false);\n  /**\n   * Readonly state.\n   * @defaultValue false\n   */\n  readonly readonly = input(false, { transform: booleanAttribute });\n  /**\n   * Disabled state.\n   * @defaultValue false\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  protected readonly interactive = computed(() => !this.disabled() && !this.readonly());\n\n  protected readonly statusIcon = computed(() => {\n    const status = this.status();\n    return status\n      ? STATUS_ICON[status]\n      : {\n          icon: this.icon(),\n          color: this.color(),\n          stacked: this.stackedIcon(),\n          stackedColor: this.stackedColor()\n        };\n  });\n\n  protected toggleSelected(): void {\n    if (this.interactive()) {\n      this.selected.set(!this.selected());\n    }\n  }\n}\n","<div\n  class=\"widget ps-2 pe-4 gap-2\"\n  role=\"checkbox\"\n  [attr.tabindex]=\"interactive() ? '0' : ''\"\n  [attr.aria-disabled]=\"!interactive()\"\n  [attr.aria-checked]=\"selected()\"\n  [class.selected]=\"selected()\"\n  [class.disabled]=\"disabled()\"\n  [class.interactive]=\"interactive()\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"toggleSelected()\"\n>\n  @let actualIcon = statusIcon();\n  @if (actualIcon.icon) {\n    <span class=\"icon icon-stack\">\n      <si-icon [class]=\"actualIcon.color\" [icon]=\"actualIcon.icon\" />\n      @if (actualIcon.stacked) {\n        <si-icon [class]=\"actualIcon.stackedColor\" [icon]=\"actualIcon.stacked\" />\n      }\n    </span>\n  }\n  <div class=\"d-flex flex-column py-2\" [class.ps-2]=\"!actualIcon.icon\">\n    <div class=\"si-title-2\">{{ value() | translate }}</div>\n    <div class=\"si-body-2 text-secondary\">{{ label() | translate }}</div>\n  </div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-summary-widget.component';\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-tabs-next.mjs

@@ -10,7 +10,7 @@ import { SiMenuDirective, SiMenuItemComponent } from '@siemens/element-ng/menu';
 import * as i1$1 from '@siemens/element-ng/resize-observer';
 import { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';
 import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
-import { addIcons, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';
+import { addIcons, elementCancel, SiIconComponent } from '@siemens/element-ng/icon';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { startWith } from 'rxjs/operators';
 
@@ -190,15 +190,15 @@ class SiTabNextLinkComponent extends SiTabNextBaseDirective {
         super.selectTab(retainFocus);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabNextLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTabNextLinkComponent, isStandalone: true, selector: "a[si-tab-next][routerLink]", providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextLinkComponent }], usesInheritance: true, hostDirectives: [{ directive: i1.RouterLinkActive }], ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTabNextLinkComponent, isStandalone: true, selector: "a[si-tab-next][routerLink]", providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextLinkComponent }], usesInheritance: true, hostDirectives: [{ directive: i1.RouterLinkActive }], ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabNextLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'a[si-tab-next][routerLink]', imports: [SiIconNextComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextLinkComponent }], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+            args: [{ selector: 'a[si-tab-next][routerLink]', imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextLinkComponent }], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: RouterLinkActive
                         }
-                    ], template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"] }]
+                    ], template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"] }]
         }] });
 
 /**
@@ -303,14 +303,14 @@ class SiTabNextComponent extends SiTabNextBaseDirective {
         this.active.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabNextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTabNextComponent, isStandalone: true, selector: "si-tab-next", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "click": "selectTabByUser()", "keydown.enter": "selectTabByUser()" } }, providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextComponent }], usesInheritance: true, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTabNextComponent, isStandalone: true, selector: "si-tab-next", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, host: { listeners: { "click": "selectTabByUser()", "keydown.enter": "selectTabByUser()" } }, providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextComponent }], usesInheritance: true, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiTabBadgeComponent, selector: "si-tab-badge", inputs: ["badgeContent", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabNextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-tab-next', imports: [SiIconNextComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-tab-next', imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent], providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(click)': 'selectTabByUser()',
                         '(keydown.enter)': 'selectTabByUser()'
-                    }, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"] }]
+                    }, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n", styles: [":host.nav-link{flex-shrink:0;transform:translate(0);color:var(--element-text-primary)}:host.nav-link.icon-only{min-inline-size:auto}.tab-icon{font-size:24px}\n"] }]
         }] });
 
 /**

package/fesm2022/siemens-element-ng-tabs-next.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-tabs-next.mjs","sources":["../../../../projects/element-ng/tabs-next/si-tab-badge.component.ts","../../../../projects/element-ng/tabs-next/si-tab-badge.component.html","../../../../projects/element-ng/tabs-next/si-tabs-tokens.ts","../../../../projects/element-ng/tabs-next/si-tab-next-base.directive.ts","../../../../projects/element-ng/tabs-next/si-tab-next-link.component.ts","../../../../projects/element-ng/tabs-next/si-tab-next.component.html","../../../../projects/element-ng/tabs-next/si-tabset-next.component.ts","../../../../projects/element-ng/tabs-next/si-tabset-next.component.html","../../../../projects/element-ng/tabs-next/si-tab-next.component.ts","../../../../projects/element-ng/tabs-next/index.ts","../../../../projects/element-ng/tabs-next/siemens-element-ng-tabs-next.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-tab-badge',\n  imports: [SiTranslatePipe, NgClass],\n  templateUrl: './si-tab-badge.component.html',\n  styleUrl: './si-tab-badge.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'd-contents'\n  }\n})\nexport class SiTabBadgeComponent {\n  readonly badgeContent = input<TranslatableString | boolean>();\n  readonly badgeColor = input<string>();\n}\n","@let badgeContent = this.badgeContent();\n@if (badgeContent === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    {{ badgeContent ?? '' | translate }}\n  </span>\n} @else if (badgeContent && !badgeColor()) {\n  <span class=\"badge-text\"> {{ badgeContent ?? '' | translate }}</span>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { InjectionToken } from '@angular/core';\n\nimport { SiTabsetNextComponent } from './si-tabset-next.component';\n\nexport const SI_TABSET_NEXT = new InjectionToken<SiTabsetNextComponent>('SiTabsetNextComponent');\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { FocusableOption } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  computed,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  Signal,\n  TemplateRef,\n  untracked,\n  viewChild\n} from '@angular/core';\nimport { addIcons, elementCancel } from '@siemens/element-ng/icon';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SI_TABSET_NEXT } from './si-tabs-tokens';\n\n@Directive({\n  selector: '[siTabNextBase]',\n  host: {\n    class: 'nav-link focus-inside px-5 si-title-1',\n    role: 'tab',\n    '[class.disabled]': 'disabledTab()',\n    '[class.icon-only]': '!!icon()',\n    '[class.pe-3]': 'closable()',\n    '[class.active]': 'active()',\n    '[attr.id]': \"'tab-' + tabId\",\n    '[attr.aria-selected]': 'active()',\n    '[attr.aria-disabled]': 'disabledTab()',\n    '[attr.tabindex]': 'tabset.focusKeyManager.activeItem === this && !disabledTab() ? 0 : -1',\n    '[attr.aria-controls]': \"'content-' + tabId\",\n    '(keydown.delete)': 'closeTab($event)'\n  }\n})\nexport abstract class SiTabNextBaseDirective implements OnDestroy, FocusableOption {\n  abstract readonly active: Signal<boolean | undefined>;\n  /** Title of the tab item. */\n  readonly heading = input.required<TranslatableString>();\n  /**\n   * Icon of the tab item.\n   * If provided, heading text will be ignored and only icon will be displayed.\n   */\n  readonly icon = input<string>();\n  /**\n   * Additional badge content. A value of\n   * - `true` will render a red dot\n   * - any string without a `badgeColor` will render a red dot with text\n   * - any string with a `badgeColor` will render a normal badge\n   */\n  readonly badgeContent = input<TranslatableString | boolean>();\n  /**\n   * Background color of the badge.\n   * If no color is provided a red dot badge will be rendered.\n   */\n  readonly badgeColor = input<string>();\n  /**\n   * Disables the tab.\n   *\n   * @defaultValue false\n   */\n  readonly disabledTab = input(false, {\n    transform: booleanAttribute,\n    // eslint-disable-next-line @angular-eslint/no-input-rename\n    alias: 'disabled'\n  });\n  /**\n   * Close the current tab.\n   *\n   * @defaultValue false\n   */\n  readonly closable = input(false, {\n    transform: booleanAttribute\n  });\n  /** Event emitter to notify when a tab is closed. */\n  readonly closeTriggered = output();\n\n  protected readonly tabButton = inject<ElementRef<HTMLElement>>(ElementRef);\n  /** @internal */\n  readonly tabContent = viewChild('tabContent', { read: TemplateRef });\n\n  private static tabCounter = 0;\n  private indexBeforeClose = -1;\n\n  /** @internal */\n  tabId = `${SiTabNextBaseDirective.tabCounter++}`;\n  protected readonly icons = addIcons({ elementCancel });\n  protected tabset = inject(SI_TABSET_NEXT);\n  private readonly index = computed(() => this.tabset.tabPanels().indexOf(this));\n\n  constructor() {\n    // Update the focusKeyManager if a tab is added that is active or if the tab is set active by the app.\n    // This effect should not run, if active was already applied to the focusKeyManager.\n    effect(() => {\n      const active = this.active(); // We only want to subscribe to the active signal.\n      untracked(() => {\n        // !!! focusKeyManger.activeItem has signal reads internally. Do not move this outside of untracked.\n        if (active && this.tabset.focusKeyManager.activeItem !== this) {\n          this.tabset.focusKeyManager.updateActiveItem(this.index());\n        }\n      });\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.indexBeforeClose >= 0) {\n      this.tabset.removedTabByUser(this.indexBeforeClose, this.active());\n    }\n  }\n\n  protected closeTab(event: Event): void {\n    if (this.closable() && !this.disabledTab()) {\n      event.stopPropagation();\n      const index = this.index();\n      this.closeTriggered.emit();\n      this.indexBeforeClose = index;\n    }\n  }\n\n  /** @internal */\n  focus(): void {\n    this.tabButton.nativeElement.focus({ preventScroll: true });\n    // The element is not fully scrolled into view when focused. So we prevent and scroll it manually.\n    this.tabButton.nativeElement.scrollIntoView({\n      inline: 'nearest',\n      block: 'nearest',\n      behavior: 'instant'\n    });\n  }\n\n  /** @internal */\n  get disabled(): boolean {\n    return this.disabledTab();\n  }\n\n  /**\n   * Programmatically selects the current tab.\n   */\n  selectTab(retainFocus?: boolean): void {\n    this.tabset.focusKeyManager.updateActiveItem(this.index());\n    if (retainFocus) {\n      // We need the timeout to wait for cdkMenu to restore the focus before we move it again.\n      setTimeout(() => this.focus());\n    }\n  }\n\n  /** @internal */\n  deSelectTab(): void {\n    // Empty be default, can be overridden in derived classes.\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { Router, RouterLink, RouterLinkActive } from '@angular/router';\nimport { SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\nimport { startWith } from 'rxjs/operators';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabNextBaseDirective } from './si-tab-next-base.directive';\n\n/** @experimental */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'a[si-tab-next][routerLink]',\n  imports: [SiIconNextComponent, SiTranslatePipe, SiTabBadgeComponent],\n  templateUrl: './si-tab-next.component.html',\n  styleUrl: './si-tab-next.component.scss',\n  providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextLinkComponent }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: RouterLinkActive\n    }\n  ]\n})\nexport class SiTabNextLinkComponent extends SiTabNextBaseDirective {\n  private router = inject(Router);\n  /** @internal */\n  routerLink = inject(RouterLink, { self: true });\n  protected routerLinkActive = inject(RouterLinkActive, { self: true });\n  /** @defaultValue false */\n  override readonly active = toSignal(\n    this.routerLinkActive.isActiveChange.pipe(startWith(this.routerLinkActive.isActive))\n  );\n  /** {@inheritDoc} */\n  override selectTab(retainFocus?: boolean): void {\n    if (this.routerLink.urlTree) {\n      this.router.navigateByUrl(this.routerLink.urlTree, {\n        skipLocationChange: this.routerLink.skipLocationChange,\n        replaceUrl: this.routerLink.replaceUrl,\n        info: this.routerLink.info,\n        state: this.routerLink.state\n      });\n    }\n    super.selectTab(retainFocus);\n  }\n}\n","@let icon = this.icon();\n@if (icon) {\n  <si-icon-next class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon-next\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  inject,\n  INJECTOR,\n  signal\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { SiMenuDirective, SiMenuItemComponent } from '@siemens/element-ng/menu';\nimport { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabNextBaseDirective } from './si-tab-next-base.directive';\nimport { SiTabNextLinkComponent } from './si-tab-next-link.component';\nimport { SI_TABSET_NEXT } from './si-tabs-tokens';\n\n/** @experimental */\n@Component({\n  selector: 'si-tabset-next',\n  imports: [\n    SiMenuDirective,\n    SiMenuItemComponent,\n    CdkMenuTrigger,\n    NgTemplateOutlet,\n    SiResizeObserverModule,\n    RouterLink,\n    SiTabBadgeComponent\n  ],\n  templateUrl: './si-tabset-next.component.html',\n  styleUrl: './si-tabset-next.component.scss',\n  providers: [\n    {\n      provide: SI_TABSET_NEXT,\n      useExisting: SiTabsetNextComponent\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiTabsetNextComponent {\n  /** @internal */\n  readonly activeTab = computed(() => this.tabPanels().find(tab => tab.active()));\n\n  /** @internal */\n  readonly tabPanels = contentChildren(SiTabNextBaseDirective);\n\n  /** @internal */\n  focusKeyManager = new FocusKeyManager(this.tabPanels, inject(INJECTOR))\n    .withHorizontalOrientation(isRTL() ? 'rtl' : 'ltr')\n    .withWrap(true);\n\n  /** @internal */\n  protected readonly showMenuButton = signal(false);\n\n  protected tabIsLink(tab: unknown): tab is SiTabNextLinkComponent {\n    return tab instanceof SiTabNextLinkComponent;\n  }\n\n  /** @internal */\n  removedTabByUser(index: number, active?: boolean): void {\n    // The tab was already removed from the tabPanels list when this function is called.\n    // We need to:\n    // - focus another tab if the closed one was focused\n    // - activate another tab if the closed one was active\n    // If the closed tab was not focussed, there is no need to restore the focus as it could only be closed by mouse.\n    for (let i = 0; i < this.tabPanels().length; i++) {\n      // Get the actual index using modulo to wrap around\n      const checkIndex = (index + i) % this.tabPanels().length;\n      const checkTab = this.tabPanels()[checkIndex];\n      if (!checkTab.disabledTab()) {\n        if (this.focusKeyManager.activeItemIndex === index) {\n          this.focusKeyManager.setActiveItem(checkIndex);\n        }\n        if (active) {\n          checkTab.selectTab(true);\n        }\n        return;\n      }\n    }\n  }\n\n  protected resizeContainer(width: number, scrollWidth: number): void {\n    // 48px is the width of the menu button.\n    this.showMenuButton.set(scrollWidth > width + (this.showMenuButton() ? 48 : 0));\n  }\n\n  protected keydown(event: KeyboardEvent): void {\n    this.focusKeyManager.onKeydown(event);\n  }\n}\n","<div class=\"tabs-container\">\n  <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n    <div\n      #tabScrollContainer\n      role=\"tablist\"\n      tabindex=\"-1\"\n      class=\"d-flex tabs-wrapper\"\n      (siResizeObserver)=\"\n        resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n      \"\n      (keydown)=\"keydown($event)\"\n    >\n      <ng-content />\n    </div>\n\n    @if (showMenuButton()) {\n      <button\n        type=\"button\"\n        class=\"dropdown btn btn-tertiary focus-inside\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [cdkMenuTriggerFor]=\"tabsMenu\"\n      >\n        <i class=\"icon element-options m-0\"></i>\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  @if (activeTab) {\n    <div\n      class=\"tab-content\"\n      role=\"tabpanel\"\n      [id]=\"'content-' + activeTab.tabId\"\n      [attr.aria-labelledby]=\"'tab-' + activeTab.tabId\"\n    >\n      @if (tabContent) {\n        <ng-container [ngTemplateOutlet]=\"tabContent\" />\n      }\n\n      <ng-content select=\"router-outlet\" />\n    </div>\n  }\n</div>\n\n<ng-template #tabsMenu>\n  <si-menu>\n    @for (tab of tabPanels(); track tab) {\n      @if (tabIsLink(tab)) {\n        <a\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tab.routerLink?.urlTree\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </button>\n      }\n    }\n  </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n  <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n    {{ tab.heading() }}\n    <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, model, OnDestroy } from '@angular/core';\nimport { SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabNextBaseDirective } from './si-tab-next-base.directive';\n\n/** @experimental */\n@Component({\n  selector: 'si-tab-next',\n  imports: [SiIconNextComponent, SiTranslatePipe, SiTabBadgeComponent],\n  templateUrl: './si-tab-next.component.html',\n  styleUrl: './si-tab-next.component.scss',\n  providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextComponent }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '(click)': 'selectTabByUser()',\n    '(keydown.enter)': 'selectTabByUser()'\n  }\n})\nexport class SiTabNextComponent extends SiTabNextBaseDirective implements OnDestroy {\n  /**\n   * Whether the tab is active or not.\n   * If set to `true`, the tab will be selected and its content will be displayed.\n   * @defaultValue false\n   * */\n  override readonly active = model(false);\n\n  protected selectTabByUser(): void {\n    if (!this.active()) {\n      this.selectTab();\n    }\n  }\n\n  /** {@inheritDoc} */\n  override selectTab(retainFocus?: boolean): void {\n    this.tabset.activeTab()?.deSelectTab();\n    this.active.set(true);\n    super.selectTab(retainFocus);\n  }\n\n  /** @internal */\n  override deSelectTab(): void {\n    this.active.set(false);\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tabset-next.component';\nexport * from './si-tab-next.component';\nexport * from './si-tab-next-link.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-tabs-next.mjs","sources":["../../../../projects/element-ng/tabs-next/si-tab-badge.component.ts","../../../../projects/element-ng/tabs-next/si-tab-badge.component.html","../../../../projects/element-ng/tabs-next/si-tabs-tokens.ts","../../../../projects/element-ng/tabs-next/si-tab-next-base.directive.ts","../../../../projects/element-ng/tabs-next/si-tab-next-link.component.ts","../../../../projects/element-ng/tabs-next/si-tab-next.component.html","../../../../projects/element-ng/tabs-next/si-tabset-next.component.ts","../../../../projects/element-ng/tabs-next/si-tabset-next.component.html","../../../../projects/element-ng/tabs-next/si-tab-next.component.ts","../../../../projects/element-ng/tabs-next/index.ts","../../../../projects/element-ng/tabs-next/siemens-element-ng-tabs-next.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-tab-badge',\n  imports: [SiTranslatePipe, NgClass],\n  templateUrl: './si-tab-badge.component.html',\n  styleUrl: './si-tab-badge.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'd-contents'\n  }\n})\nexport class SiTabBadgeComponent {\n  readonly badgeContent = input<TranslatableString | boolean>();\n  readonly badgeColor = input<string>();\n}\n","@let badgeContent = this.badgeContent();\n@if (badgeContent === true) {\n  <span class=\"badge-dot\"></span>\n} @else if (badgeContent && badgeColor()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + badgeColor()\">\n    {{ badgeContent ?? '' | translate }}\n  </span>\n} @else if (badgeContent && !badgeColor()) {\n  <span class=\"badge-text\"> {{ badgeContent ?? '' | translate }}</span>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { InjectionToken } from '@angular/core';\n\nimport { SiTabsetNextComponent } from './si-tabset-next.component';\n\nexport const SI_TABSET_NEXT = new InjectionToken<SiTabsetNextComponent>('SiTabsetNextComponent');\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { FocusableOption } from '@angular/cdk/a11y';\nimport {\n  booleanAttribute,\n  computed,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  Signal,\n  TemplateRef,\n  untracked,\n  viewChild\n} from '@angular/core';\nimport { addIcons, elementCancel } from '@siemens/element-ng/icon';\nimport { TranslatableString } from '@siemens/element-translate-ng/translate';\n\nimport { SI_TABSET_NEXT } from './si-tabs-tokens';\n\n@Directive({\n  selector: '[siTabNextBase]',\n  host: {\n    class: 'nav-link focus-inside px-5 si-title-1',\n    role: 'tab',\n    '[class.disabled]': 'disabledTab()',\n    '[class.icon-only]': '!!icon()',\n    '[class.pe-3]': 'closable()',\n    '[class.active]': 'active()',\n    '[attr.id]': \"'tab-' + tabId\",\n    '[attr.aria-selected]': 'active()',\n    '[attr.aria-disabled]': 'disabledTab()',\n    '[attr.tabindex]': 'tabset.focusKeyManager.activeItem === this && !disabledTab() ? 0 : -1',\n    '[attr.aria-controls]': \"'content-' + tabId\",\n    '(keydown.delete)': 'closeTab($event)'\n  }\n})\nexport abstract class SiTabNextBaseDirective implements OnDestroy, FocusableOption {\n  abstract readonly active: Signal<boolean | undefined>;\n  /** Title of the tab item. */\n  readonly heading = input.required<TranslatableString>();\n  /**\n   * Icon of the tab item.\n   * If provided, heading text will be ignored and only icon will be displayed.\n   */\n  readonly icon = input<string>();\n  /**\n   * Additional badge content. A value of\n   * - `true` will render a red dot\n   * - any string without a `badgeColor` will render a red dot with text\n   * - any string with a `badgeColor` will render a normal badge\n   */\n  readonly badgeContent = input<TranslatableString | boolean>();\n  /**\n   * Background color of the badge.\n   * If no color is provided a red dot badge will be rendered.\n   */\n  readonly badgeColor = input<string>();\n  /**\n   * Disables the tab.\n   *\n   * @defaultValue false\n   */\n  readonly disabledTab = input(false, {\n    transform: booleanAttribute,\n    // eslint-disable-next-line @angular-eslint/no-input-rename\n    alias: 'disabled'\n  });\n  /**\n   * Close the current tab.\n   *\n   * @defaultValue false\n   */\n  readonly closable = input(false, {\n    transform: booleanAttribute\n  });\n  /** Event emitter to notify when a tab is closed. */\n  readonly closeTriggered = output();\n\n  protected readonly tabButton = inject<ElementRef<HTMLElement>>(ElementRef);\n  /** @internal */\n  readonly tabContent = viewChild('tabContent', { read: TemplateRef });\n\n  private static tabCounter = 0;\n  private indexBeforeClose = -1;\n\n  /** @internal */\n  tabId = `${SiTabNextBaseDirective.tabCounter++}`;\n  protected readonly icons = addIcons({ elementCancel });\n  protected tabset = inject(SI_TABSET_NEXT);\n  private readonly index = computed(() => this.tabset.tabPanels().indexOf(this));\n\n  constructor() {\n    // Update the focusKeyManager if a tab is added that is active or if the tab is set active by the app.\n    // This effect should not run, if active was already applied to the focusKeyManager.\n    effect(() => {\n      const active = this.active(); // We only want to subscribe to the active signal.\n      untracked(() => {\n        // !!! focusKeyManger.activeItem has signal reads internally. Do not move this outside of untracked.\n        if (active && this.tabset.focusKeyManager.activeItem !== this) {\n          this.tabset.focusKeyManager.updateActiveItem(this.index());\n        }\n      });\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.indexBeforeClose >= 0) {\n      this.tabset.removedTabByUser(this.indexBeforeClose, this.active());\n    }\n  }\n\n  protected closeTab(event: Event): void {\n    if (this.closable() && !this.disabledTab()) {\n      event.stopPropagation();\n      const index = this.index();\n      this.closeTriggered.emit();\n      this.indexBeforeClose = index;\n    }\n  }\n\n  /** @internal */\n  focus(): void {\n    this.tabButton.nativeElement.focus({ preventScroll: true });\n    // The element is not fully scrolled into view when focused. So we prevent and scroll it manually.\n    this.tabButton.nativeElement.scrollIntoView({\n      inline: 'nearest',\n      block: 'nearest',\n      behavior: 'instant'\n    });\n  }\n\n  /** @internal */\n  get disabled(): boolean {\n    return this.disabledTab();\n  }\n\n  /**\n   * Programmatically selects the current tab.\n   */\n  selectTab(retainFocus?: boolean): void {\n    this.tabset.focusKeyManager.updateActiveItem(this.index());\n    if (retainFocus) {\n      // We need the timeout to wait for cdkMenu to restore the focus before we move it again.\n      setTimeout(() => this.focus());\n    }\n  }\n\n  /** @internal */\n  deSelectTab(): void {\n    // Empty be default, can be overridden in derived classes.\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { Router, RouterLink, RouterLinkActive } from '@angular/router';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\nimport { startWith } from 'rxjs/operators';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabNextBaseDirective } from './si-tab-next-base.directive';\n\n/** @experimental */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'a[si-tab-next][routerLink]',\n  imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent],\n  templateUrl: './si-tab-next.component.html',\n  styleUrl: './si-tab-next.component.scss',\n  providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextLinkComponent }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: RouterLinkActive\n    }\n  ]\n})\nexport class SiTabNextLinkComponent extends SiTabNextBaseDirective {\n  private router = inject(Router);\n  /** @internal */\n  routerLink = inject(RouterLink, { self: true });\n  protected routerLinkActive = inject(RouterLinkActive, { self: true });\n  /** @defaultValue false */\n  override readonly active = toSignal(\n    this.routerLinkActive.isActiveChange.pipe(startWith(this.routerLinkActive.isActive))\n  );\n  /** {@inheritDoc} */\n  override selectTab(retainFocus?: boolean): void {\n    if (this.routerLink.urlTree) {\n      this.router.navigateByUrl(this.routerLink.urlTree, {\n        skipLocationChange: this.routerLink.skipLocationChange,\n        replaceUrl: this.routerLink.replaceUrl,\n        info: this.routerLink.info,\n        state: this.routerLink.state\n      });\n    }\n    super.selectTab(retainFocus);\n  }\n}\n","@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"tab-icon\" [icon]=\"icon\" [attr.title]=\"heading() | translate\" />\n} @else {\n  <span class=\"text-truncate\">{{ heading() | translate }}</span>\n}\n<si-tab-badge [badgeColor]=\"badgeColor()\" [badgeContent]=\"badgeContent()\" />\n@if (closable() && !disabledTab()) {\n  <si-icon\n    class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n    [icon]=\"icons.elementCancel\"\n    (click)=\"closeTab($event)\"\n  />\n}\n\n<ng-template #tabContent>\n  <ng-content />\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { FocusKeyManager } from '@angular/cdk/a11y';\nimport { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  inject,\n  INJECTOR,\n  signal\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { SiMenuDirective, SiMenuItemComponent } from '@siemens/element-ng/menu';\nimport { SiResizeObserverModule } from '@siemens/element-ng/resize-observer';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabNextBaseDirective } from './si-tab-next-base.directive';\nimport { SiTabNextLinkComponent } from './si-tab-next-link.component';\nimport { SI_TABSET_NEXT } from './si-tabs-tokens';\n\n/** @experimental */\n@Component({\n  selector: 'si-tabset-next',\n  imports: [\n    SiMenuDirective,\n    SiMenuItemComponent,\n    CdkMenuTrigger,\n    NgTemplateOutlet,\n    SiResizeObserverModule,\n    RouterLink,\n    SiTabBadgeComponent\n  ],\n  templateUrl: './si-tabset-next.component.html',\n  styleUrl: './si-tabset-next.component.scss',\n  providers: [\n    {\n      provide: SI_TABSET_NEXT,\n      useExisting: SiTabsetNextComponent\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiTabsetNextComponent {\n  /** @internal */\n  readonly activeTab = computed(() => this.tabPanels().find(tab => tab.active()));\n\n  /** @internal */\n  readonly tabPanels = contentChildren(SiTabNextBaseDirective);\n\n  /** @internal */\n  focusKeyManager = new FocusKeyManager(this.tabPanels, inject(INJECTOR))\n    .withHorizontalOrientation(isRTL() ? 'rtl' : 'ltr')\n    .withWrap(true);\n\n  /** @internal */\n  protected readonly showMenuButton = signal(false);\n\n  protected tabIsLink(tab: unknown): tab is SiTabNextLinkComponent {\n    return tab instanceof SiTabNextLinkComponent;\n  }\n\n  /** @internal */\n  removedTabByUser(index: number, active?: boolean): void {\n    // The tab was already removed from the tabPanels list when this function is called.\n    // We need to:\n    // - focus another tab if the closed one was focused\n    // - activate another tab if the closed one was active\n    // If the closed tab was not focussed, there is no need to restore the focus as it could only be closed by mouse.\n    for (let i = 0; i < this.tabPanels().length; i++) {\n      // Get the actual index using modulo to wrap around\n      const checkIndex = (index + i) % this.tabPanels().length;\n      const checkTab = this.tabPanels()[checkIndex];\n      if (!checkTab.disabledTab()) {\n        if (this.focusKeyManager.activeItemIndex === index) {\n          this.focusKeyManager.setActiveItem(checkIndex);\n        }\n        if (active) {\n          checkTab.selectTab(true);\n        }\n        return;\n      }\n    }\n  }\n\n  protected resizeContainer(width: number, scrollWidth: number): void {\n    // 48px is the width of the menu button.\n    this.showMenuButton.set(scrollWidth > width + (this.showMenuButton() ? 48 : 0));\n  }\n\n  protected keydown(event: KeyboardEvent): void {\n    this.focusKeyManager.onKeydown(event);\n  }\n}\n","<div class=\"tabs-container\">\n  <div class=\"tab-container-buttonbar-list nav nav-tabs\">\n    <div\n      #tabScrollContainer\n      role=\"tablist\"\n      tabindex=\"-1\"\n      class=\"d-flex tabs-wrapper\"\n      (siResizeObserver)=\"\n        resizeContainer(tabScrollContainer.clientWidth, tabScrollContainer.scrollWidth)\n      \"\n      (keydown)=\"keydown($event)\"\n    >\n      <ng-content />\n    </div>\n\n    @if (showMenuButton()) {\n      <button\n        type=\"button\"\n        class=\"dropdown btn btn-tertiary focus-inside\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [cdkMenuTriggerFor]=\"tabsMenu\"\n      >\n        <i class=\"icon element-options m-0\"></i>\n      </button>\n    }\n  </div>\n  @let tabContent = this.activeTab()?.tabContent();\n  @let activeTab = this.activeTab();\n\n  @if (activeTab) {\n    <div\n      class=\"tab-content\"\n      role=\"tabpanel\"\n      [id]=\"'content-' + activeTab.tabId\"\n      [attr.aria-labelledby]=\"'tab-' + activeTab.tabId\"\n    >\n      @if (tabContent) {\n        <ng-container [ngTemplateOutlet]=\"tabContent\" />\n      }\n\n      <ng-content select=\"router-outlet\" />\n    </div>\n  }\n</div>\n\n<ng-template #tabsMenu>\n  <si-menu>\n    @for (tab of tabPanels(); track tab) {\n      @if (tabIsLink(tab)) {\n        <a\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          [routerLink]=\"tab.routerLink?.urlTree\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          si-menu-item\n          [disabled]=\"tab.disabledTab()\"\n          [icon]=\"tab.icon()\"\n          (triggered)=\"tab.selectTab(true)\"\n        >\n          <ng-container [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ tab }\" />\n        </button>\n      }\n    }\n  </si-menu>\n</ng-template>\n\n<ng-template #badgeTemplate let-tab=\"tab\">\n  <div class=\"d-flex align-items-center space-between flex-no-wrap justify-content-between\">\n    {{ tab.heading() }}\n    <si-tab-badge [badgeContent]=\"tab.badgeContent()\" [badgeColor]=\"tab.badgeColor()\" />\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, model, OnDestroy } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { SiTabBadgeComponent } from './si-tab-badge.component';\nimport { SiTabNextBaseDirective } from './si-tab-next-base.directive';\n\n/** @experimental */\n@Component({\n  selector: 'si-tab-next',\n  imports: [SiIconComponent, SiTranslatePipe, SiTabBadgeComponent],\n  templateUrl: './si-tab-next.component.html',\n  styleUrl: './si-tab-next.component.scss',\n  providers: [{ provide: SiTabNextBaseDirective, useExisting: SiTabNextComponent }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '(click)': 'selectTabByUser()',\n    '(keydown.enter)': 'selectTabByUser()'\n  }\n})\nexport class SiTabNextComponent extends SiTabNextBaseDirective implements OnDestroy {\n  /**\n   * Whether the tab is active or not.\n   * If set to `true`, the tab will be selected and its content will be displayed.\n   * @defaultValue false\n   * */\n  override readonly active = model(false);\n\n  protected selectTabByUser(): void {\n    if (!this.active()) {\n      this.selectTab();\n    }\n  }\n\n  /** {@inheritDoc} */\n  override selectTab(retainFocus?: boolean): void {\n    this.tabset.activeTab()?.deSelectTab();\n    this.active.set(true);\n    super.selectTab(retainFocus);\n  }\n\n  /** @internal */\n  override deSelectTab(): void {\n    this.active.set(false);\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-tabset-next.component';\nexport * from './si-tab-next.component';\nexport * from './si-tab-next-link.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, signal, booleanAttribute, HostBinding, Output, Input, ChangeDetectionStrategy, Component, viewChild, viewChildren, inject, ChangeDetectorRef, ContentChildren, NgModule } from '@angular/core';
 import { isRTL, WebComponentContentChildren } from '@siemens/element-ng/common';
-import { addIcons, elementRight3, elementLeft3, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';
+import { addIcons, elementRight3, elementLeft3, elementCancel, SiIconComponent } from '@siemens/element-ng/icon';
 import { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer';
 import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { asyncScheduler } from 'rxjs';
@@ -324,14 +324,14 @@ class SiTabsetComponent {
         this.focusedTabIndex = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTabsetComponent, isStandalone: true, selector: "si-tabset", inputs: { selectDefaultTab: ["selectDefaultTab", "selectDefaultTab", booleanAttribute], selectedTabIndex: "selectedTabIndex", tabButtonMaxWidth: "tabButtonMaxWidth" }, outputs: { selectedTabIndexChange: "selectedTabIndexChange", deselect: "deselect" }, queries: [{ propertyName: "tabPanels", predicate: SiTabComponent }], viewQueries: [{ propertyName: "tabContainer", first: true, predicate: ["tabContainer"], descendants: true, isSignal: true }, { propertyName: "innerTabContainer", first: true, predicate: ["innerTabContainer"], descendants: true, isSignal: true }, { propertyName: "tabs", predicate: ["tabElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"nav nav-tabs tab-container-header focus-inside\"\n  role=\"tablist\"\n  [class.is-scrollable]=\"scrollable\"\n  (siResizeObserver)=\"resize()\"\n>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"!xPos\"\n      (keydown.enter)=\"scrollStart()\"\n      (mousedown)=\"scrollStart()\"\n    >\n      <si-icon-next class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n    </button>\n  }\n\n  <div #tabContainer class=\"tab-container-buttonbar\" (wheel)=\"mouseScroll($event)\">\n    <div #innerTabContainer class=\"tab-container-buttonbar-list focus-inside\">\n      @for (tab of tabPanels; track $index) {\n        <button\n          #tabElement\n          type=\"button\"\n          role=\"tab\"\n          class=\"nav-link focus-inside px-5\"\n          [class.pe-3]=\"tab.closable\"\n          [attr.aria-controls]=\"tab.id\"\n          [id]=\"tab.tabId\"\n          [style.max-width.px]=\"tabButtonMaxWidth\"\n          [tabindex]=\"!tab.disabled && tab.active() && focusedTabIndex === undefined ? 0 : -1\"\n          [class.active]=\"tab.active()\"\n          [attr.aria-selected]=\"tab.active()\"\n          [class.disabled]=\"tab.disabled\"\n          (click)=\"selectTab(tab)\"\n          (keydown.arrowLeft)=\"focusPrevious()\"\n          (keydown.arrowRight)=\"focusNext()\"\n          (keydown.delete)=\"tab.closeTriggered.emit(tab)\"\n          (blur)=\"blur()\"\n          (focus)=\"focus($index)\"\n        >\n          <span class=\"text-truncate\">{{ tab.heading | translate }}</span>\n          @if (tab.icon) {\n            <si-icon-next\n              class=\"icon\"\n              [attr.role]=\"tab.iconAltText ? 'img' : 'presentation'\"\n              [icon]=\"tab.icon\"\n              [attr.aria-label]=\"(tab.iconAltText | translate) ?? undefined\"\n            />\n          }\n          @if (tab.badgeContent === true) {\n            <span class=\"badge-dot\"></span>\n          } @else if (tab.badgeContent && tab.badgeColor) {\n            <span class=\"badge\" [ngClass]=\"'bg-' + tab.badgeColor\">\n              {{ tab.badgeContent | translate }}\n            </span>\n          } @else if (tab.badgeContent && !tab.badgeColor) {\n            <span class=\"badge-text\"> {{ tab.badgeContent | translate }}</span>\n          }\n          @if (tab.closable && !tab.disabled) {\n            <si-icon-next\n              class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n              [icon]=\"icons.elementCancel\"\n              (click)=\"closeTab($event, tab)\"\n            />\n          }\n        </button>\n      }\n    </div>\n  </div>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control is-end focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"endArrowDisabled\"\n      (keydown.enter)=\"scrollEnd()\"\n      (mousedown)=\"scrollEnd()\"\n    >\n      <si-icon-next class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n    </button>\n  }\n</div>\n\n<ng-content />\n", styles: [":host{display:block;flex-direction:column}.tab-container-header{overflow:hidden;display:flex}.tab-container-buttonbar{flex:1;overflow:hidden}.tab-container-buttonbar-list{display:flex;margin:0;padding:0;list-style-type:none;transition:calc(.25s * var(--element-animations-enabled, 1))}.tab-container-buttonbar-list-item{flex:none}.tab-container-control{background:transparent;border:0;-webkit-user-select:none;user-select:none;padding-inline:0 7px;padding-block:6px 10px}.tab-container-control .is-end{padding-inline:7px 0}.tab-container-control:hover{color:var(--element-text-active)}.tab-container-control:disabled{color:var(--element-text-disabled);cursor:default}.nav-link{flex-shrink:0}.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTabsetComponent, isStandalone: true, selector: "si-tabset", inputs: { selectDefaultTab: ["selectDefaultTab", "selectDefaultTab", booleanAttribute], selectedTabIndex: "selectedTabIndex", tabButtonMaxWidth: "tabButtonMaxWidth" }, outputs: { selectedTabIndexChange: "selectedTabIndexChange", deselect: "deselect" }, queries: [{ propertyName: "tabPanels", predicate: SiTabComponent }], viewQueries: [{ propertyName: "tabContainer", first: true, predicate: ["tabContainer"], descendants: true, isSignal: true }, { propertyName: "innerTabContainer", first: true, predicate: ["innerTabContainer"], descendants: true, isSignal: true }, { propertyName: "tabs", predicate: ["tabElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"nav nav-tabs tab-container-header focus-inside\"\n  role=\"tablist\"\n  [class.is-scrollable]=\"scrollable\"\n  (siResizeObserver)=\"resize()\"\n>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"!xPos\"\n      (keydown.enter)=\"scrollStart()\"\n      (mousedown)=\"scrollStart()\"\n    >\n      <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n    </button>\n  }\n\n  <div #tabContainer class=\"tab-container-buttonbar\" (wheel)=\"mouseScroll($event)\">\n    <div #innerTabContainer class=\"tab-container-buttonbar-list focus-inside\">\n      @for (tab of tabPanels; track $index) {\n        <button\n          #tabElement\n          type=\"button\"\n          role=\"tab\"\n          class=\"nav-link focus-inside px-5\"\n          [class.pe-3]=\"tab.closable\"\n          [attr.aria-controls]=\"tab.id\"\n          [id]=\"tab.tabId\"\n          [style.max-width.px]=\"tabButtonMaxWidth\"\n          [tabindex]=\"!tab.disabled && tab.active() && focusedTabIndex === undefined ? 0 : -1\"\n          [class.active]=\"tab.active()\"\n          [attr.aria-selected]=\"tab.active()\"\n          [class.disabled]=\"tab.disabled\"\n          (click)=\"selectTab(tab)\"\n          (keydown.arrowLeft)=\"focusPrevious()\"\n          (keydown.arrowRight)=\"focusNext()\"\n          (keydown.delete)=\"tab.closeTriggered.emit(tab)\"\n          (blur)=\"blur()\"\n          (focus)=\"focus($index)\"\n        >\n          <span class=\"text-truncate\">{{ tab.heading | translate }}</span>\n          @if (tab.icon) {\n            <si-icon\n              class=\"icon\"\n              [attr.role]=\"tab.iconAltText ? 'img' : 'presentation'\"\n              [icon]=\"tab.icon\"\n              [attr.aria-label]=\"(tab.iconAltText | translate) ?? undefined\"\n            />\n          }\n          @if (tab.badgeContent === true) {\n            <span class=\"badge-dot\"></span>\n          } @else if (tab.badgeContent && tab.badgeColor) {\n            <span class=\"badge\" [ngClass]=\"'bg-' + tab.badgeColor\">\n              {{ tab.badgeContent | translate }}\n            </span>\n          } @else if (tab.badgeContent && !tab.badgeColor) {\n            <span class=\"badge-text\"> {{ tab.badgeContent | translate }}</span>\n          }\n          @if (tab.closable && !tab.disabled) {\n            <si-icon\n              class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n              [icon]=\"icons.elementCancel\"\n              (click)=\"closeTab($event, tab)\"\n            />\n          }\n        </button>\n      }\n    </div>\n  </div>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control is-end focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"endArrowDisabled\"\n      (keydown.enter)=\"scrollEnd()\"\n      (mousedown)=\"scrollEnd()\"\n    >\n      <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n    </button>\n  }\n</div>\n\n<ng-content />\n", styles: [":host{display:block;flex-direction:column}.tab-container-header{overflow:hidden;display:flex}.tab-container-buttonbar{flex:1;overflow:hidden}.tab-container-buttonbar-list{display:flex;margin:0;padding:0;list-style-type:none;transition:calc(.25s * var(--element-animations-enabled, 1))}.tab-container-buttonbar-list-item{flex:none}.tab-container-control{background:transparent;border:0;-webkit-user-select:none;user-select:none;padding-inline:0 7px;padding-block:6px 10px}.tab-container-control .is-end{padding-inline:7px 0}.tab-container-control:hover{color:var(--element-text-active)}.tab-container-control:disabled{color:var(--element-text-disabled);cursor:default}.nav-link{flex-shrink:0}.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiResizeObserverDirective, selector: "[siResizeObserver]", inputs: ["resizeThrottle", "emitInitial"], outputs: ["siResizeObserver"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 __decorate([
     WebComponentContentChildren(SiTabComponent)
 ], SiTabsetComponent.prototype, "tabPanels", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTabsetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-tabset', imports: [NgClass, SiIconNextComponent, SiResizeObserverDirective, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"nav nav-tabs tab-container-header focus-inside\"\n  role=\"tablist\"\n  [class.is-scrollable]=\"scrollable\"\n  (siResizeObserver)=\"resize()\"\n>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"!xPos\"\n      (keydown.enter)=\"scrollStart()\"\n      (mousedown)=\"scrollStart()\"\n    >\n      <si-icon-next class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n    </button>\n  }\n\n  <div #tabContainer class=\"tab-container-buttonbar\" (wheel)=\"mouseScroll($event)\">\n    <div #innerTabContainer class=\"tab-container-buttonbar-list focus-inside\">\n      @for (tab of tabPanels; track $index) {\n        <button\n          #tabElement\n          type=\"button\"\n          role=\"tab\"\n          class=\"nav-link focus-inside px-5\"\n          [class.pe-3]=\"tab.closable\"\n          [attr.aria-controls]=\"tab.id\"\n          [id]=\"tab.tabId\"\n          [style.max-width.px]=\"tabButtonMaxWidth\"\n          [tabindex]=\"!tab.disabled && tab.active() && focusedTabIndex === undefined ? 0 : -1\"\n          [class.active]=\"tab.active()\"\n          [attr.aria-selected]=\"tab.active()\"\n          [class.disabled]=\"tab.disabled\"\n          (click)=\"selectTab(tab)\"\n          (keydown.arrowLeft)=\"focusPrevious()\"\n          (keydown.arrowRight)=\"focusNext()\"\n          (keydown.delete)=\"tab.closeTriggered.emit(tab)\"\n          (blur)=\"blur()\"\n          (focus)=\"focus($index)\"\n        >\n          <span class=\"text-truncate\">{{ tab.heading | translate }}</span>\n          @if (tab.icon) {\n            <si-icon-next\n              class=\"icon\"\n              [attr.role]=\"tab.iconAltText ? 'img' : 'presentation'\"\n              [icon]=\"tab.icon\"\n              [attr.aria-label]=\"(tab.iconAltText | translate) ?? undefined\"\n            />\n          }\n          @if (tab.badgeContent === true) {\n            <span class=\"badge-dot\"></span>\n          } @else if (tab.badgeContent && tab.badgeColor) {\n            <span class=\"badge\" [ngClass]=\"'bg-' + tab.badgeColor\">\n              {{ tab.badgeContent | translate }}\n            </span>\n          } @else if (tab.badgeContent && !tab.badgeColor) {\n            <span class=\"badge-text\"> {{ tab.badgeContent | translate }}</span>\n          }\n          @if (tab.closable && !tab.disabled) {\n            <si-icon-next\n              class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n              [icon]=\"icons.elementCancel\"\n              (click)=\"closeTab($event, tab)\"\n            />\n          }\n        </button>\n      }\n    </div>\n  </div>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control is-end focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"endArrowDisabled\"\n      (keydown.enter)=\"scrollEnd()\"\n      (mousedown)=\"scrollEnd()\"\n    >\n      <si-icon-next class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n    </button>\n  }\n</div>\n\n<ng-content />\n", styles: [":host{display:block;flex-direction:column}.tab-container-header{overflow:hidden;display:flex}.tab-container-buttonbar{flex:1;overflow:hidden}.tab-container-buttonbar-list{display:flex;margin:0;padding:0;list-style-type:none;transition:calc(.25s * var(--element-animations-enabled, 1))}.tab-container-buttonbar-list-item{flex:none}.tab-container-control{background:transparent;border:0;-webkit-user-select:none;user-select:none;padding-inline:0 7px;padding-block:6px 10px}.tab-container-control .is-end{padding-inline:7px 0}.tab-container-control:hover{color:var(--element-text-active)}.tab-container-control:disabled{color:var(--element-text-disabled);cursor:default}.nav-link{flex-shrink:0}.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}\n"] }]
+            args: [{ selector: 'si-tabset', imports: [NgClass, SiIconComponent, SiResizeObserverDirective, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"nav nav-tabs tab-container-header focus-inside\"\n  role=\"tablist\"\n  [class.is-scrollable]=\"scrollable\"\n  (siResizeObserver)=\"resize()\"\n>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"!xPos\"\n      (keydown.enter)=\"scrollStart()\"\n      (mousedown)=\"scrollStart()\"\n    >\n      <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementLeft3\" />\n    </button>\n  }\n\n  <div #tabContainer class=\"tab-container-buttonbar\" (wheel)=\"mouseScroll($event)\">\n    <div #innerTabContainer class=\"tab-container-buttonbar-list focus-inside\">\n      @for (tab of tabPanels; track $index) {\n        <button\n          #tabElement\n          type=\"button\"\n          role=\"tab\"\n          class=\"nav-link focus-inside px-5\"\n          [class.pe-3]=\"tab.closable\"\n          [attr.aria-controls]=\"tab.id\"\n          [id]=\"tab.tabId\"\n          [style.max-width.px]=\"tabButtonMaxWidth\"\n          [tabindex]=\"!tab.disabled && tab.active() && focusedTabIndex === undefined ? 0 : -1\"\n          [class.active]=\"tab.active()\"\n          [attr.aria-selected]=\"tab.active()\"\n          [class.disabled]=\"tab.disabled\"\n          (click)=\"selectTab(tab)\"\n          (keydown.arrowLeft)=\"focusPrevious()\"\n          (keydown.arrowRight)=\"focusNext()\"\n          (keydown.delete)=\"tab.closeTriggered.emit(tab)\"\n          (blur)=\"blur()\"\n          (focus)=\"focus($index)\"\n        >\n          <span class=\"text-truncate\">{{ tab.heading | translate }}</span>\n          @if (tab.icon) {\n            <si-icon\n              class=\"icon\"\n              [attr.role]=\"tab.iconAltText ? 'img' : 'presentation'\"\n              [icon]=\"tab.icon\"\n              [attr.aria-label]=\"(tab.iconAltText | translate) ?? undefined\"\n            />\n          }\n          @if (tab.badgeContent === true) {\n            <span class=\"badge-dot\"></span>\n          } @else if (tab.badgeContent && tab.badgeColor) {\n            <span class=\"badge\" [ngClass]=\"'bg-' + tab.badgeColor\">\n              {{ tab.badgeContent | translate }}\n            </span>\n          } @else if (tab.badgeContent && !tab.badgeColor) {\n            <span class=\"badge-text\"> {{ tab.badgeContent | translate }}</span>\n          }\n          @if (tab.closable && !tab.disabled) {\n            <si-icon\n              class=\"ms-2 btn btn-circle btn-xs btn-ghost close\"\n              [icon]=\"icons.elementCancel\"\n              (click)=\"closeTab($event, tab)\"\n            />\n          }\n        </button>\n      }\n    </div>\n  </div>\n  @if (scrollable) {\n    <button\n      type=\"button\"\n      class=\"tab-container-control is-end focus-inside\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      [hidden]=\"endArrowDisabled\"\n      (keydown.enter)=\"scrollEnd()\"\n      (mousedown)=\"scrollEnd()\"\n    >\n      <si-icon class=\"icon flip-rtl\" [icon]=\"icons.elementRight3\" />\n    </button>\n  }\n</div>\n\n<ng-content />\n", styles: [":host{display:block;flex-direction:column}.tab-container-header{overflow:hidden;display:flex}.tab-container-buttonbar{flex:1;overflow:hidden}.tab-container-buttonbar-list{display:flex;margin:0;padding:0;list-style-type:none;transition:calc(.25s * var(--element-animations-enabled, 1))}.tab-container-buttonbar-list-item{flex:none}.tab-container-control{background:transparent;border:0;-webkit-user-select:none;user-select:none;padding-inline:0 7px;padding-block:6px 10px}.tab-container-control .is-end{padding-inline:7px 0}.tab-container-control:hover{color:var(--element-text-active)}.tab-container-control:disabled{color:var(--element-text-disabled);cursor:default}.nav-link{flex-shrink:0}.nav-link span.badge-dot{inset-block-end:100%;inset-inline-start:12px;margin-inline-end:12px}.nav-link span.badge-text{inset-block-end:calc(100% - 7px);inset-inline-start:2px}\n"] }]
         }], propDecorators: { tabPanels: [{
                 type: ContentChildren,
                 args: [SiTabComponent]