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

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

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-color-picker.mjs","sources":["../../../../projects/element-ng/color-picker/si-color-picker.component.ts","../../../../projects/element-ng/color-picker/si-color-picker.component.html","../../../../projects/element-ng/color-picker/index.ts","../../../../projects/element-ng/color-picker/siemens-element-ng-color-picker.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  input,\n  model,\n  signal,\n  viewChild,\n  viewChildren\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, elementOk, SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n/**\n * The Element data color palette is used as default.\n * Note: This array needs to be kept in sync with the design system data color tokens.\n */\nconst defaultDataColors: string[] = [\n  'element-data-1',\n  'element-data-2',\n  'element-data-3',\n  'element-data-4',\n  'element-data-5',\n  'element-data-6',\n  'element-data-7',\n  'element-data-8',\n  'element-data-9',\n  'element-data-10',\n  'element-data-11',\n  'element-data-12',\n  'element-data-13',\n  'element-data-14',\n  'element-data-15',\n  'element-data-16'\n];\n@Component({\n  selector: 'si-color-picker',\n  imports: [SiIconNextComponent, SiTranslatePipe, CdkConnectedOverlay, CdkOverlayOrigin],\n  templateUrl: './si-color-picker.component.html',\n  styleUrl: './si-color-picker.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: SiColorPickerComponent,\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiColorPickerComponent implements ControlValueAccessor {\n  // eslint-disable-next-line defaultValue/tsdoc-defaultValue-annotation\n  /**\n   * The color palette to choose the colors from. As colors, only valid CSS\n   * variable names omitting the `--` prefix or Element color tokens omitting\n   * the `$` prefix are supported.\n   *\n   * Note: If custom CSS variables are provided, they need to be defined for\n   * both light and dark mode.\n   *\n   * @defaultValue The first 16 colors of the Element data color palette.\n   */\n  readonly colorPalette = input<string[]>(defaultDataColors);\n\n  /**\n   * The selected color.\n   */\n  readonly color = model<string>();\n\n  /**\n   * Specifies whether the color popup should automatically close on a color selection.\n   *\n   * @defaultValue false\n   */\n  readonly autoClose = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specifies whether the color picker component is disabled.\n   *\n   * @defaultValue false\n   */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  readonly disabledInput = input(false, { alias: 'disabled' });\n\n  /**\n   * Aria label for the color input button.\n   */\n  readonly ariaLabel = input<TranslatableString>();\n\n  private onChange: (value: string) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  private readonly colorInputRef =\n    viewChild.required<ElementRef<HTMLInputElement>>('colorInputBox');\n  private readonly swatchInputs = viewChildren<ElementRef<HTMLInputElement>>('swatchInput');\n  private readonly selectedSwatchInput = computed(() =>\n    this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked)\n  );\n  private readonly disabledNgControl = signal(false);\n  private readonly numberOfColumns = 4;\n  protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n  protected readonly isOverlayOpen = signal(false);\n  protected readonly icons = addIcons({ elementOk });\n\n  protected blur(): void {\n    if (!this.autoClose()) {\n      this.onTouched();\n    }\n  }\n\n  protected arrowDown(index: number, event: Event): void {\n    const nextIndex = index + this.numberOfColumns;\n    this.focusLabel(nextIndex);\n    event.preventDefault();\n  }\n\n  protected arrowUp(index: number, event: Event): void {\n    const prevIndex = index - this.numberOfColumns;\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  protected arrowLeft(index: number, event: Event): void {\n    const prevIndex = index + (isRTL() ? 1 : -1);\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  protected arrowRight(index: number, event: Event): void {\n    const prevIndex = index + (isRTL() ? -1 : +1);\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  private focusLabel(index: number): void {\n    const labels = this.swatchInputs();\n    const totalSwatches = labels.length;\n    const normalizedIndex = (index + totalSwatches) % totalSwatches;\n    labels[normalizedIndex].nativeElement.focus();\n  }\n\n  protected openOverlay(): void {\n    this.isOverlayOpen.set(true);\n    this.focusSelectedColor();\n  }\n\n  protected overlayDetach(): void {\n    this.isOverlayOpen.set(false);\n    setTimeout(() => {\n      this.colorInputRef().nativeElement?.focus();\n    });\n  }\n\n  private focusSelectedColor(): void {\n    setTimeout(() => {\n      this.selectedSwatchInput()?.nativeElement.focus();\n    });\n  }\n\n  protected selectColor(color: string): void {\n    this.color.set(color);\n    this.onChange(color!);\n    if (this.autoClose()) {\n      this.overlayDetach();\n    }\n  }\n\n  writeValue(value: string): void {\n    this.color.set(value);\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledNgControl.set(isDisabled);\n  }\n}\n","<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon-next class=\"icon text-inverse\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-color-picker.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-color-picker.mjs","sources":["../../../../projects/element-ng/color-picker/si-color-picker.component.ts","../../../../projects/element-ng/color-picker/si-color-picker.component.html","../../../../projects/element-ng/color-picker/index.ts","../../../../projects/element-ng/color-picker/siemens-element-ng-color-picker.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  input,\n  model,\n  signal,\n  viewChild,\n  viewChildren\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { isRTL } from '@siemens/element-ng/common';\nimport { addIcons, elementOk, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n/**\n * The Element data color palette is used as default.\n * Note: This array needs to be kept in sync with the design system data color tokens.\n */\nconst defaultDataColors: string[] = [\n  'element-data-1',\n  'element-data-2',\n  'element-data-3',\n  'element-data-4',\n  'element-data-5',\n  'element-data-6',\n  'element-data-7',\n  'element-data-8',\n  'element-data-9',\n  'element-data-10',\n  'element-data-11',\n  'element-data-12',\n  'element-data-13',\n  'element-data-14',\n  'element-data-15',\n  'element-data-16'\n];\n@Component({\n  selector: 'si-color-picker',\n  imports: [SiIconComponent, SiTranslatePipe, CdkConnectedOverlay, CdkOverlayOrigin],\n  templateUrl: './si-color-picker.component.html',\n  styleUrl: './si-color-picker.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: SiColorPickerComponent,\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiColorPickerComponent implements ControlValueAccessor {\n  // eslint-disable-next-line defaultValue/tsdoc-defaultValue-annotation\n  /**\n   * The color palette to choose the colors from. As colors, only valid CSS\n   * variable names omitting the `--` prefix or Element color tokens omitting\n   * the `$` prefix are supported.\n   *\n   * Note: If custom CSS variables are provided, they need to be defined for\n   * both light and dark mode.\n   *\n   * @defaultValue The first 16 colors of the Element data color palette.\n   */\n  readonly colorPalette = input<string[]>(defaultDataColors);\n\n  /**\n   * The selected color.\n   */\n  readonly color = model<string>();\n\n  /**\n   * Specifies whether the color popup should automatically close on a color selection.\n   *\n   * @defaultValue false\n   */\n  readonly autoClose = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specifies whether the color picker component is disabled.\n   *\n   * @defaultValue false\n   */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  readonly disabledInput = input(false, { alias: 'disabled' });\n\n  /**\n   * Aria label for the color input button.\n   */\n  readonly ariaLabel = input<TranslatableString>();\n\n  private onChange: (value: string) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  private readonly colorInputRef =\n    viewChild.required<ElementRef<HTMLInputElement>>('colorInputBox');\n  private readonly swatchInputs = viewChildren<ElementRef<HTMLInputElement>>('swatchInput');\n  private readonly selectedSwatchInput = computed(() =>\n    this.swatchInputs().find(swatchInput => swatchInput.nativeElement.checked)\n  );\n  private readonly disabledNgControl = signal(false);\n  private readonly numberOfColumns = 4;\n  protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n  protected readonly isOverlayOpen = signal(false);\n  protected readonly icons = addIcons({ elementOk });\n\n  protected blur(): void {\n    if (!this.autoClose()) {\n      this.onTouched();\n    }\n  }\n\n  protected arrowDown(index: number, event: Event): void {\n    const nextIndex = index + this.numberOfColumns;\n    this.focusLabel(nextIndex);\n    event.preventDefault();\n  }\n\n  protected arrowUp(index: number, event: Event): void {\n    const prevIndex = index - this.numberOfColumns;\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  protected arrowLeft(index: number, event: Event): void {\n    const prevIndex = index + (isRTL() ? 1 : -1);\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  protected arrowRight(index: number, event: Event): void {\n    const prevIndex = index + (isRTL() ? -1 : +1);\n    this.focusLabel(prevIndex);\n    event.preventDefault();\n  }\n\n  private focusLabel(index: number): void {\n    const labels = this.swatchInputs();\n    const totalSwatches = labels.length;\n    const normalizedIndex = (index + totalSwatches) % totalSwatches;\n    labels[normalizedIndex].nativeElement.focus();\n  }\n\n  protected openOverlay(): void {\n    this.isOverlayOpen.set(true);\n    this.focusSelectedColor();\n  }\n\n  protected overlayDetach(): void {\n    this.isOverlayOpen.set(false);\n    setTimeout(() => {\n      this.colorInputRef().nativeElement?.focus();\n    });\n  }\n\n  private focusSelectedColor(): void {\n    setTimeout(() => {\n      this.selectedSwatchInput()?.nativeElement.focus();\n    });\n  }\n\n  protected selectColor(color: string): void {\n    this.color.set(color);\n    this.onChange(color!);\n    if (this.autoClose()) {\n      this.overlayDetach();\n    }\n  }\n\n  writeValue(value: string): void {\n    this.color.set(value);\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledNgControl.set(isDisabled);\n  }\n}\n","<button\n  #colorInputBox\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  class=\"input-color-box\"\n  type=\"button\"\n  [class.is-open]=\"isOverlayOpen()\"\n  [attr.aria-label]=\"(ariaLabel() | translate) + ' ' + color()\"\n  [disabled]=\"disabled()\"\n  (keydown.arrowDown)=\"openOverlay()\"\n  (blur)=\"blur()\"\n  (click)=\"openOverlay()\"\n>\n  <div class=\"inside-box\" [style.background-color]=\"'var(--' + color() + ')'\"></div>\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOverlayOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (backdropClick)=\"overlayDetach()\"\n  (detach)=\"overlayDetach()\"\n>\n  <div #colorPaletteRef role=\"grid\" class=\"colors elevation-1 rounded-2 bg-base-1 p-4 mt-1\">\n    <div role=\"row\" class=\"d-flex flex-wrap gap-4\">\n      @for (paint of colorPalette(); track $index) {\n        <div role=\"gridcell\" class=\"swatch\">\n          <input\n            #swatchInput\n            type=\"radio\"\n            name=\"color\"\n            class=\"btn-check\"\n            [id]=\"paint\"\n            [attr.aria-label]=\"paint\"\n            [value]=\"paint\"\n            [checked]=\"color() === paint\"\n            (change)=\"selectColor(paint)\"\n            (keydown.enter)=\"selectColor(paint)\"\n            (keydown.arrowUp)=\"arrowUp($index, $event)\"\n            (keydown.arrowDown)=\"arrowDown($index, $event)\"\n            (keydown.arrowLeft)=\"arrowLeft($index, $event)\"\n            (keydown.arrowRight)=\"arrowRight($index, $event)\"\n            (keydown.tab)=\"overlayDetach()\"\n          />\n          <label\n            class=\"color-box swatch-label\"\n            [attr.for]=\"paint\"\n            [style.background]=\"'var(--' + paint + ')'\"\n          >\n            @if (color() === paint) {\n              <si-icon class=\"icon text-inverse\" [icon]=\"icons.elementOk\" />\n            }\n          </label>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-color-picker.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-column-selection-dialog.mjs

@@ -7,7 +7,7 @@ import { CdkDragHandle, moveItemInArray, CdkDrag, CdkDropList, CDK_DRAG_CONFIG }
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 import * as i1 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { addIcons, elementShow, elementLock, elementMenu, elementHide, SiIconNextComponent, elementCancel } from '@siemens/element-ng/icon';
+import { addIcons, elementShow, elementLock, elementMenu, elementHide, SiIconComponent, elementCancel } from '@siemens/element-ng/icon';
 import { t, injectSiTranslateService, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { first } from 'rxjs/operators';
 
@@ -58,13 +58,13 @@ class SiColumnSelectionEditorComponent {
         this.visibilityChange.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiColumnSelectionEditorComponent, isStandalone: true, selector: "si-column-selection-editor", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null }, renameInputLabel: { classPropertyName: "renameInputLabel", publicName: "renameInputLabel", isSignal: true, isRequired: true, transformFunction: null }, columnVisibilityConfigurable: { classPropertyName: "columnVisibilityConfigurable", publicName: "columnVisibilityConfigurable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { titleChange: "titleChange", visibilityChange: "visibilityChange" }, host: { listeners: { "keydown.enter": "tryEdit($event)" }, classAttribute: "d-block my-4 mx-1 rounded-2 elevation-1" }, viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n  <div class=\"d-flex w-100\" [attr.aria-label]=\"column().title\">\n    @if (editing) {\n      <input\n        #title\n        type=\"text\"\n        class=\"form-control w-100\"\n        [attr.aria-label]=\"renameInputLabel()\"\n        [value]=\"column().title\"\n        (input)=\"updateTitle(title.value)\"\n        (keydown.enter)=\"stopEdit()\"\n        (blur)=\"stopEdit()\"\n      />\n    } @else {\n      <span\n        class=\"form-control text-truncate w-100\"\n        [class.border-0]=\"!column().editable\"\n        [class.px-0]=\"!column().editable\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"startEdit()\"\n        >{{ column().title }}</span\n      >\n    }\n  </div>\n\n  <div class=\"d-flex align-items-center\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n        [class.text-primary]=\"!column().disabled\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"toggleVisibility()\"\n      >\n        <si-icon-next [icon]=\"selected() ? icons.elementShow : icons.elementHide\" />\n      </span>\n    }\n    <span\n      cdkDragHandle\n      class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n      [class.disabled]=\"column().disabled\"\n      [class.pe-none]=\"!column().draggable\"\n    >\n      <si-icon-next\n        [class.pe-none]=\"!column().draggable\"\n        [icon]=\"column().draggable ? icons.elementMenu : icons.elementLock\"\n      />\n    </span>\n  </div>\n</div>\n", styles: [".form-control{cursor:text}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiColumnSelectionEditorComponent, isStandalone: true, selector: "si-column-selection-editor", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null }, renameInputLabel: { classPropertyName: "renameInputLabel", publicName: "renameInputLabel", isSignal: true, isRequired: true, transformFunction: null }, columnVisibilityConfigurable: { classPropertyName: "columnVisibilityConfigurable", publicName: "columnVisibilityConfigurable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { titleChange: "titleChange", visibilityChange: "visibilityChange" }, host: { listeners: { "keydown.enter": "tryEdit($event)" }, classAttribute: "d-block my-4 mx-1 rounded-2 elevation-1" }, viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n  <div class=\"d-flex w-100\" [attr.aria-label]=\"column().title\">\n    @if (editing) {\n      <input\n        #title\n        type=\"text\"\n        class=\"form-control w-100\"\n        [attr.aria-label]=\"renameInputLabel()\"\n        [value]=\"column().title\"\n        (input)=\"updateTitle(title.value)\"\n        (keydown.enter)=\"stopEdit()\"\n        (blur)=\"stopEdit()\"\n      />\n    } @else {\n      <span\n        class=\"form-control text-truncate w-100\"\n        [class.border-0]=\"!column().editable\"\n        [class.px-0]=\"!column().editable\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"startEdit()\"\n        >{{ column().title }}</span\n      >\n    }\n  </div>\n\n  <div class=\"d-flex align-items-center\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n        [class.text-primary]=\"!column().disabled\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"toggleVisibility()\"\n      >\n        <si-icon [icon]=\"selected() ? icons.elementShow : icons.elementHide\" />\n      </span>\n    }\n    <span\n      cdkDragHandle\n      class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n      [class.disabled]=\"column().disabled\"\n      [class.pe-none]=\"!column().draggable\"\n    >\n      <si-icon\n        [class.pe-none]=\"!column().draggable\"\n        [icon]=\"column().draggable ? icons.elementMenu : icons.elementLock\"\n      />\n    </span>\n  </div>\n</div>\n", styles: [".form-control{cursor:text}\n"], dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-column-selection-editor', imports: [CdkDragHandle, SiIconNextComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-column-selection-editor', imports: [CdkDragHandle, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block my-4 mx-1 rounded-2 elevation-1'
-                    }, template: "<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n  <div class=\"d-flex w-100\" [attr.aria-label]=\"column().title\">\n    @if (editing) {\n      <input\n        #title\n        type=\"text\"\n        class=\"form-control w-100\"\n        [attr.aria-label]=\"renameInputLabel()\"\n        [value]=\"column().title\"\n        (input)=\"updateTitle(title.value)\"\n        (keydown.enter)=\"stopEdit()\"\n        (blur)=\"stopEdit()\"\n      />\n    } @else {\n      <span\n        class=\"form-control text-truncate w-100\"\n        [class.border-0]=\"!column().editable\"\n        [class.px-0]=\"!column().editable\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"startEdit()\"\n        >{{ column().title }}</span\n      >\n    }\n  </div>\n\n  <div class=\"d-flex align-items-center\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n        [class.text-primary]=\"!column().disabled\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"toggleVisibility()\"\n      >\n        <si-icon-next [icon]=\"selected() ? icons.elementShow : icons.elementHide\" />\n      </span>\n    }\n    <span\n      cdkDragHandle\n      class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n      [class.disabled]=\"column().disabled\"\n      [class.pe-none]=\"!column().draggable\"\n    >\n      <si-icon-next\n        [class.pe-none]=\"!column().draggable\"\n        [icon]=\"column().draggable ? icons.elementMenu : icons.elementLock\"\n      />\n    </span>\n  </div>\n</div>\n", styles: [".form-control{cursor:text}\n"] }]
+                    }, template: "<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n  <div class=\"d-flex w-100\" [attr.aria-label]=\"column().title\">\n    @if (editing) {\n      <input\n        #title\n        type=\"text\"\n        class=\"form-control w-100\"\n        [attr.aria-label]=\"renameInputLabel()\"\n        [value]=\"column().title\"\n        (input)=\"updateTitle(title.value)\"\n        (keydown.enter)=\"stopEdit()\"\n        (blur)=\"stopEdit()\"\n      />\n    } @else {\n      <span\n        class=\"form-control text-truncate w-100\"\n        [class.border-0]=\"!column().editable\"\n        [class.px-0]=\"!column().editable\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"startEdit()\"\n        >{{ column().title }}</span\n      >\n    }\n  </div>\n\n  <div class=\"d-flex align-items-center\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n        [class.text-primary]=\"!column().disabled\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"toggleVisibility()\"\n      >\n        <si-icon [icon]=\"selected() ? icons.elementShow : icons.elementHide\" />\n      </span>\n    }\n    <span\n      cdkDragHandle\n      class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n      [class.disabled]=\"column().disabled\"\n      [class.pe-none]=\"!column().draggable\"\n    >\n      <si-icon\n        [class.pe-none]=\"!column().draggable\"\n        [icon]=\"column().draggable ? icons.elementMenu : icons.elementLock\"\n      />\n    </span>\n  </div>\n</div>\n", styles: [".form-control{cursor:text}\n"] }]
         }], propDecorators: { tryEdit: [{
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
@@ -288,7 +288,7 @@ class SiColumnSelectionDialogComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiColumnSelectionDialogComponent, isStandalone: true, selector: "si-column-selection-dialog", inputs: { titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, bodyTitle: { classPropertyName: "bodyTitle", publicName: "bodyTitle", isSignal: true, isRequired: false, transformFunction: null }, submitBtnName: { classPropertyName: "submitBtnName", publicName: "submitBtnName", isSignal: true, isRequired: false, transformFunction: null }, cancelBtnName: { classPropertyName: "cancelBtnName", publicName: "cancelBtnName", isSignal: true, isRequired: false, transformFunction: null }, restoreToDefaultBtnName: { classPropertyName: "restoreToDefaultBtnName", publicName: "restoreToDefaultBtnName", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hiddenText", isSignal: true, isRequired: false, transformFunction: null }, visibleText: { classPropertyName: "visibleText", publicName: "visibleText", isSignal: true, isRequired: false, transformFunction: null }, restoreEnabled: { classPropertyName: "restoreEnabled", publicName: "restoreEnabled", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, translationParams: { classPropertyName: "translationParams", publicName: "translationParams", isSignal: true, isRequired: false, transformFunction: null }, listAriaLabel: { classPropertyName: "listAriaLabel", publicName: "listAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, renameInputAriaLabel: { classPropertyName: "renameInputAriaLabel", publicName: "renameInputAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, a11yItemMovedMessage: { classPropertyName: "a11yItemMovedMessage", publicName: "a11yItemMovedMessage", isSignal: true, isRequired: false, transformFunction: null }, a11yItemNotMovedMessage: { classPropertyName: "a11yItemNotMovedMessage", publicName: "a11yItemNotMovedMessage", isSignal: true, isRequired: false, transformFunction: null }, columnVisibilityConfigurable: { classPropertyName: "columnVisibilityConfigurable", publicName: "columnVisibilityConfigurable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }], viewQueries: [{ propertyName: "listOptions", predicate: CdkOption, descendants: true, isSignal: true }, { propertyName: "modalBodyElement", first: true, predicate: ["modalBody"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header\">\n  <span class=\"modal-title\" [id]=\"titleId()\">{{ heading() | translate: translationParams() }}</span>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-sm btn-ghost\"\n    [attr.aria-label]=\"cancelBtnName() | translate\"\n    (click)=\"cancelColumnSelection()\"\n  >\n    <si-icon-next [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n<p class=\"text-secondary px-8 pb-5 mb-0\">{{ bodyTitle() | translate: translationParams() }}</p>\n<div #modalBody class=\"modal-body\" tabindex=\"-1\" cdkScrollable>\n  <div\n    cdkListbox\n    cdkListboxMultiple\n    cdkDropList\n    [cdkListboxValue]=\"visibleIds\"\n    [attr.aria-label]=\"listAriaLabel() | translate: translationParams\"\n    (cdkListboxValueChange)=\"updateVisibility()\"\n    (cdkDropListDropped)=\"drop($event)\"\n  >\n    @for (column of columns(); track column) {\n      <si-column-selection-editor\n        #cdkOption=\"cdkOption\"\n        cdkDrag\n        class=\"focus-inside\"\n        [cdkDragDisabled]=\"!column.draggable\"\n        [cdkOption]=\"column.id\"\n        [cdkOptionDisabled]=\"column.disabled\"\n        [column]=\"column\"\n        [selected]=\"cdkOption.isSelected()\"\n        [renameInputLabel]=\"renameInputAriaLabel() | translate: translationParams\"\n        [columnVisibilityConfigurable]=\"columnVisibilityConfigurable()\"\n        (titleChange)=\"emitChange()\"\n        (visibilityChange)=\"updateVisibility()\"\n        (keydown.alt.arrowUp)=\"moveUp($index, $event)\"\n        (keydown.alt.arrowDown)=\"moveDown($index, $event)\"\n      />\n    }\n  </div>\n</div>\n<div class=\"modal-footer\">\n  @if (restoreEnabled()) {\n    <button type=\"button\" class=\"btn btn-tertiary me-auto\" (click)=\"restoreToDefault()\">\n      {{ restoreToDefaultBtnName() | translate }}\n    </button>\n  }\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancelColumnSelection()\">\n    {{ cancelBtnName() | translate }}\n  </button>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitColumnSelection()\">\n    {{ submitBtnName() | translate }}\n  </button>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none;max-block-size:100%;overflow:hidden;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiColumnSelectionEditorComponent, selector: "si-column-selection-editor", inputs: ["column", "selected", "renameInputLabel", "columnVisibilityConfigurable"], outputs: ["titleChange", "visibilityChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiColumnSelectionDialogComponent, isStandalone: true, selector: "si-column-selection-dialog", inputs: { titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, bodyTitle: { classPropertyName: "bodyTitle", publicName: "bodyTitle", isSignal: true, isRequired: false, transformFunction: null }, submitBtnName: { classPropertyName: "submitBtnName", publicName: "submitBtnName", isSignal: true, isRequired: false, transformFunction: null }, cancelBtnName: { classPropertyName: "cancelBtnName", publicName: "cancelBtnName", isSignal: true, isRequired: false, transformFunction: null }, restoreToDefaultBtnName: { classPropertyName: "restoreToDefaultBtnName", publicName: "restoreToDefaultBtnName", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hiddenText", isSignal: true, isRequired: false, transformFunction: null }, visibleText: { classPropertyName: "visibleText", publicName: "visibleText", isSignal: true, isRequired: false, transformFunction: null }, restoreEnabled: { classPropertyName: "restoreEnabled", publicName: "restoreEnabled", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, translationParams: { classPropertyName: "translationParams", publicName: "translationParams", isSignal: true, isRequired: false, transformFunction: null }, listAriaLabel: { classPropertyName: "listAriaLabel", publicName: "listAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, renameInputAriaLabel: { classPropertyName: "renameInputAriaLabel", publicName: "renameInputAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, a11yItemMovedMessage: { classPropertyName: "a11yItemMovedMessage", publicName: "a11yItemMovedMessage", isSignal: true, isRequired: false, transformFunction: null }, a11yItemNotMovedMessage: { classPropertyName: "a11yItemNotMovedMessage", publicName: "a11yItemNotMovedMessage", isSignal: true, isRequired: false, transformFunction: null }, columnVisibilityConfigurable: { classPropertyName: "columnVisibilityConfigurable", publicName: "columnVisibilityConfigurable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }], viewQueries: [{ propertyName: "listOptions", predicate: CdkOption, descendants: true, isSignal: true }, { propertyName: "modalBodyElement", first: true, predicate: ["modalBody"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header\">\n  <span class=\"modal-title\" [id]=\"titleId()\">{{ heading() | translate: translationParams() }}</span>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-sm btn-ghost\"\n    [attr.aria-label]=\"cancelBtnName() | translate\"\n    (click)=\"cancelColumnSelection()\"\n  >\n    <si-icon [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n<p class=\"text-secondary px-8 pb-5 mb-0\">{{ bodyTitle() | translate: translationParams() }}</p>\n<div #modalBody class=\"modal-body\" tabindex=\"-1\" cdkScrollable>\n  <div\n    cdkListbox\n    cdkListboxMultiple\n    cdkDropList\n    [cdkListboxValue]=\"visibleIds\"\n    [attr.aria-label]=\"listAriaLabel() | translate: translationParams\"\n    (cdkListboxValueChange)=\"updateVisibility()\"\n    (cdkDropListDropped)=\"drop($event)\"\n  >\n    @for (column of columns(); track column) {\n      <si-column-selection-editor\n        #cdkOption=\"cdkOption\"\n        cdkDrag\n        class=\"focus-inside\"\n        [cdkDragDisabled]=\"!column.draggable\"\n        [cdkOption]=\"column.id\"\n        [cdkOptionDisabled]=\"column.disabled\"\n        [column]=\"column\"\n        [selected]=\"cdkOption.isSelected()\"\n        [renameInputLabel]=\"renameInputAriaLabel() | translate: translationParams\"\n        [columnVisibilityConfigurable]=\"columnVisibilityConfigurable()\"\n        (titleChange)=\"emitChange()\"\n        (visibilityChange)=\"updateVisibility()\"\n        (keydown.alt.arrowUp)=\"moveUp($index, $event)\"\n        (keydown.alt.arrowDown)=\"moveDown($index, $event)\"\n      />\n    }\n  </div>\n</div>\n<div class=\"modal-footer\">\n  @if (restoreEnabled()) {\n    <button type=\"button\" class=\"btn btn-tertiary me-auto\" (click)=\"restoreToDefault()\">\n      {{ restoreToDefaultBtnName() | translate }}\n    </button>\n  }\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancelColumnSelection()\">\n    {{ cancelBtnName() | translate }}\n  </button>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitColumnSelection()\">\n    {{ submitBtnName() | translate }}\n  </button>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none;max-block-size:100%;overflow:hidden;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiColumnSelectionEditorComponent, selector: "si-column-selection-editor", inputs: ["column", "selected", "renameInputLabel", "columnVisibilityConfigurable"], outputs: ["titleChange", "visibilityChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiColumnSelectionDialogComponent, decorators: [{
             type: Component,
@@ -298,10 +298,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         CdkListbox,
                         CdkOption,
                         CdkScrollableModule,
-                        SiIconNextComponent,
+                        SiIconComponent,
                         SiTranslatePipe,
                         SiColumnSelectionEditorComponent
-                    ], providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-header\">\n  <span class=\"modal-title\" [id]=\"titleId()\">{{ heading() | translate: translationParams() }}</span>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-sm btn-ghost\"\n    [attr.aria-label]=\"cancelBtnName() | translate\"\n    (click)=\"cancelColumnSelection()\"\n  >\n    <si-icon-next [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n<p class=\"text-secondary px-8 pb-5 mb-0\">{{ bodyTitle() | translate: translationParams() }}</p>\n<div #modalBody class=\"modal-body\" tabindex=\"-1\" cdkScrollable>\n  <div\n    cdkListbox\n    cdkListboxMultiple\n    cdkDropList\n    [cdkListboxValue]=\"visibleIds\"\n    [attr.aria-label]=\"listAriaLabel() | translate: translationParams\"\n    (cdkListboxValueChange)=\"updateVisibility()\"\n    (cdkDropListDropped)=\"drop($event)\"\n  >\n    @for (column of columns(); track column) {\n      <si-column-selection-editor\n        #cdkOption=\"cdkOption\"\n        cdkDrag\n        class=\"focus-inside\"\n        [cdkDragDisabled]=\"!column.draggable\"\n        [cdkOption]=\"column.id\"\n        [cdkOptionDisabled]=\"column.disabled\"\n        [column]=\"column\"\n        [selected]=\"cdkOption.isSelected()\"\n        [renameInputLabel]=\"renameInputAriaLabel() | translate: translationParams\"\n        [columnVisibilityConfigurable]=\"columnVisibilityConfigurable()\"\n        (titleChange)=\"emitChange()\"\n        (visibilityChange)=\"updateVisibility()\"\n        (keydown.alt.arrowUp)=\"moveUp($index, $event)\"\n        (keydown.alt.arrowDown)=\"moveDown($index, $event)\"\n      />\n    }\n  </div>\n</div>\n<div class=\"modal-footer\">\n  @if (restoreEnabled()) {\n    <button type=\"button\" class=\"btn btn-tertiary me-auto\" (click)=\"restoreToDefault()\">\n      {{ restoreToDefaultBtnName() | translate }}\n    </button>\n  }\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancelColumnSelection()\">\n    {{ cancelBtnName() | translate }}\n  </button>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitColumnSelection()\">\n    {{ submitBtnName() | translate }}\n  </button>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none;max-block-size:100%;overflow:hidden;display:flex;flex-direction:column}\n"] }]
+                    ], providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal-header\">\n  <span class=\"modal-title\" [id]=\"titleId()\">{{ heading() | translate: translationParams() }}</span>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-sm btn-ghost\"\n    [attr.aria-label]=\"cancelBtnName() | translate\"\n    (click)=\"cancelColumnSelection()\"\n  >\n    <si-icon [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n<p class=\"text-secondary px-8 pb-5 mb-0\">{{ bodyTitle() | translate: translationParams() }}</p>\n<div #modalBody class=\"modal-body\" tabindex=\"-1\" cdkScrollable>\n  <div\n    cdkListbox\n    cdkListboxMultiple\n    cdkDropList\n    [cdkListboxValue]=\"visibleIds\"\n    [attr.aria-label]=\"listAriaLabel() | translate: translationParams\"\n    (cdkListboxValueChange)=\"updateVisibility()\"\n    (cdkDropListDropped)=\"drop($event)\"\n  >\n    @for (column of columns(); track column) {\n      <si-column-selection-editor\n        #cdkOption=\"cdkOption\"\n        cdkDrag\n        class=\"focus-inside\"\n        [cdkDragDisabled]=\"!column.draggable\"\n        [cdkOption]=\"column.id\"\n        [cdkOptionDisabled]=\"column.disabled\"\n        [column]=\"column\"\n        [selected]=\"cdkOption.isSelected()\"\n        [renameInputLabel]=\"renameInputAriaLabel() | translate: translationParams\"\n        [columnVisibilityConfigurable]=\"columnVisibilityConfigurable()\"\n        (titleChange)=\"emitChange()\"\n        (visibilityChange)=\"updateVisibility()\"\n        (keydown.alt.arrowUp)=\"moveUp($index, $event)\"\n        (keydown.alt.arrowDown)=\"moveDown($index, $event)\"\n      />\n    }\n  </div>\n</div>\n<div class=\"modal-footer\">\n  @if (restoreEnabled()) {\n    <button type=\"button\" class=\"btn btn-tertiary me-auto\" (click)=\"restoreToDefault()\">\n      {{ restoreToDefaultBtnName() | translate }}\n    </button>\n  }\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancelColumnSelection()\">\n    {{ cancelBtnName() | translate }}\n  </button>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitColumnSelection()\">\n    {{ submitBtnName() | translate }}\n  </button>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none;max-block-size:100%;overflow:hidden;display:flex;flex-direction:column}\n"] }]
         }] });
 
 /**

package/fesm2022/siemens-element-ng-column-selection-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-column-selection-dialog.mjs","sources":["../../../../projects/element-ng/column-selection-dialog/column-selection-editor/si-column-selection-editor.component.ts","../../../../projects/element-ng/column-selection-dialog/column-selection-editor/si-column-selection-editor.component.html","../../../../projects/element-ng/column-selection-dialog/si-column-selection-dialog.component.ts","../../../../projects/element-ng/column-selection-dialog/si-column-selection-dialog.component.html","../../../../projects/element-ng/column-selection-dialog/si-column-selection-dialog.service.ts","../../../../projects/element-ng/column-selection-dialog/index.ts","../../../../projects/element-ng/column-selection-dialog/siemens-element-ng-column-selection-dialog.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { CdkDragHandle } from '@angular/cdk/drag-drop';\nimport { CdkOption } from '@angular/cdk/listbox';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  output,\n  viewChild\n} from '@angular/core';\nimport {\n  addIcons,\n  elementHide,\n  elementLock,\n  elementMenu,\n  elementShow,\n  SiIconNextComponent\n} from '@siemens/element-ng/icon';\n\nimport { Column } from '../si-column-selection-dialog.types';\n\n@Component({\n  selector: 'si-column-selection-editor',\n  imports: [CdkDragHandle, SiIconNextComponent],\n  templateUrl: './si-column-selection-editor.component.html',\n  styles: `\n    .form-control {\n      cursor: text;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'd-block my-4 mx-1 rounded-2 elevation-1'\n  }\n})\nexport class SiColumnSelectionEditorComponent {\n  readonly column = input.required<Column>();\n  readonly selected = input.required<boolean>();\n  readonly renameInputLabel = input.required<string>();\n  readonly columnVisibilityConfigurable = input.required<boolean>();\n\n  readonly titleChange = output();\n  readonly visibilityChange = output();\n\n  protected readonly cdkOption = inject(CdkOption);\n  protected editing = false;\n  private readonly title = viewChild.required<ElementRef<HTMLInputElement>>('title');\n  private readonly elementRef = inject<ElementRef<HTMLDivElement>>(ElementRef);\n  protected readonly icons = addIcons({\n    elementHide,\n    elementMenu,\n    elementLock,\n    elementShow\n  });\n\n  @HostListener('keydown.enter', ['$event'])\n  protected tryEdit(event: Event): void {\n    if (this.column().editable) {\n      event.stopPropagation();\n      this.startEdit();\n    }\n  }\n\n  protected updateTitle(value: string): void {\n    this.column().title = value;\n    this.titleChange.emit();\n  }\n\n  protected startEdit(): void {\n    if (this.column().editable) {\n      this.editing = true;\n      setTimeout(() => this.title().nativeElement.focus());\n    }\n  }\n\n  protected stopEdit(): void {\n    this.editing = false;\n    this.elementRef.nativeElement.focus();\n  }\n\n  protected toggleVisibility(): void {\n    this.cdkOption.toggle();\n    // manually toggling does not emit an event, so we have to fire one\n    this.visibilityChange.emit();\n  }\n}\n","<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n  <div class=\"d-flex w-100\" [attr.aria-label]=\"column().title\">\n    @if (editing) {\n      <input\n        #title\n        type=\"text\"\n        class=\"form-control w-100\"\n        [attr.aria-label]=\"renameInputLabel()\"\n        [value]=\"column().title\"\n        (input)=\"updateTitle(title.value)\"\n        (keydown.enter)=\"stopEdit()\"\n        (blur)=\"stopEdit()\"\n      />\n    } @else {\n      <span\n        class=\"form-control text-truncate w-100\"\n        [class.border-0]=\"!column().editable\"\n        [class.px-0]=\"!column().editable\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"startEdit()\"\n        >{{ column().title }}</span\n      >\n    }\n  </div>\n\n  <div class=\"d-flex align-items-center\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n        [class.text-primary]=\"!column().disabled\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"toggleVisibility()\"\n      >\n        <si-icon-next [icon]=\"selected() ? icons.elementShow : icons.elementHide\" />\n      </span>\n    }\n    <span\n      cdkDragHandle\n      class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n      [class.disabled]=\"column().disabled\"\n      [class.pe-none]=\"!column().draggable\"\n    >\n      <si-icon-next\n        [class.pe-none]=\"!column().draggable\"\n        [icon]=\"column().draggable ? icons.elementMenu : icons.elementLock\"\n      />\n    </span>\n  </div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport {\n  CDK_DRAG_CONFIG,\n  CdkDrag,\n  CdkDragDrop,\n  CdkDropList,\n  moveItemInArray\n} from '@angular/cdk/drag-drop';\nimport { CdkListbox, CdkOption } from '@angular/cdk/listbox';\nimport { CdkScrollableModule } from '@angular/cdk/scrolling';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  input,\n  model,\n  OnInit,\n  viewChild,\n  viewChildren\n} from '@angular/core';\nimport { addIcons, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { ModalRef } from '@siemens/element-ng/modal';\nimport {\n  injectSiTranslateService,\n  SiTranslatePipe,\n  t,\n  TranslatableString\n} from '@siemens/element-translate-ng/translate';\nimport { first } from 'rxjs/operators';\n\nimport { SiColumnSelectionEditorComponent } from './column-selection-editor/si-column-selection-editor.component';\nimport { Column, ColumnSelectionDialogResult } from './si-column-selection-dialog.types';\n\nconst dragConfig = {\n  dragStartThreshold: 0,\n  pointerDirectionChangeThreshold: 5,\n  zIndex: 10000\n};\n\n@Component({\n  selector: 'si-column-selection-dialog',\n  imports: [\n    CdkDrag,\n    CdkDropList,\n    CdkListbox,\n    CdkOption,\n    CdkScrollableModule,\n    SiIconNextComponent,\n    SiTranslatePipe,\n    SiColumnSelectionEditorComponent\n  ],\n  templateUrl: './si-column-selection-dialog.component.html',\n  styleUrl: './si-column-selection-dialog.component.scss',\n  providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiColumnSelectionDialogComponent implements OnInit {\n  readonly titleId = input<string>();\n  readonly heading = input<TranslatableString>();\n  readonly bodyTitle = input<TranslatableString>();\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`)\n   * ```\n   */\n  readonly submitBtnName = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`)\n  );\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`)\n   * ```\n   */\n  readonly cancelBtnName = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`)\n  );\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`)\n   * ```\n   */\n  readonly restoreToDefaultBtnName = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`)\n  );\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`)\n   * ```\n   */\n  readonly hiddenText = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`)\n  );\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`)\n   * ```\n   */\n  readonly visibleText = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`)\n  );\n  /** @defaultValue false */\n  readonly restoreEnabled = input(false, { transform: booleanAttribute });\n  readonly columns = model.required<Column[]>();\n  /**\n   * @defaultValue\n   * ```\n   * {}\n   * ```\n   */\n  readonly translationParams = input<Record<string, unknown>>({});\n\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.LIST_ARIA_LABEL:List of possible columns. Items can be moved using Alt+ArrowUp or Alt+ArrowDown. Press Enter to rename supported items.`)\n   * ```\n   */\n  readonly listAriaLabel = input(\n    t(\n      () =>\n        $localize`:@@SI_COLUMN_SELECTION_DIALOG.LIST_ARIA_LABEL:List of possible columns. Items can be moved using Alt+ArrowUp or Alt+ArrowDown. Press Enter to rename supported items.`\n    )\n  );\n\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`)\n   * ```\n   */\n  readonly renameInputAriaLabel = input(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`)\n  );\n\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`)\n   * ```\n   */\n  readonly a11yItemMovedMessage = input<TranslatableString>(\n    t(\n      () =>\n        $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`\n    )\n  );\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`)\n   * ```\n   */\n\n  readonly a11yItemNotMovedMessage = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`)\n  );\n  /** @defaultValue true */\n  readonly columnVisibilityConfigurable = input(true, { transform: booleanAttribute });\n\n  private readonly listOptions = viewChildren(CdkOption);\n\n  private readonly modalBodyElement = viewChild.required<ElementRef<HTMLDivElement>>('modalBody');\n\n  private tempHeaderData: Column[] = [];\n\n  protected readonly modalRef = inject(\n    ModalRef<SiColumnSelectionDialogComponent, ColumnSelectionDialogResult>\n  );\n  protected readonly icons = addIcons({ elementCancel });\n\n  protected visibleIds: string[] = [];\n\n  private readonly liveAnnouncer = inject(LiveAnnouncer);\n  private readonly translateService = injectSiTranslateService();\n\n  ngOnInit(): void {\n    this.setupColumnData();\n  }\n\n  /** @internal */\n  get backupColumns(): Column[] {\n    return this.tempHeaderData;\n  }\n\n  protected submitColumnSelection(): void {\n    this.modalRef.hide({ type: 'ok', columns: this.columns() });\n  }\n\n  protected cancelColumnSelection(): void {\n    this.columns.set([]);\n    this.tempHeaderData.forEach(element => this.columns.update(a => [...a, element]));\n    this.modalRef.hide({ type: 'cancel', columns: this.columns() });\n  }\n\n  protected drop(event: CdkDragDrop<string[]>): void {\n    const columns = this.columns();\n    if (columns[event.currentIndex].draggable) {\n      moveItemInArray(columns, event.previousIndex, event.currentIndex);\n      this.emitChange();\n    }\n  }\n\n  protected restoreToDefault(): void {\n    this.modalRef.hidden.next({\n      type: 'restoreDefault',\n      columns: this.columns(),\n      updateColumns: columns => {\n        this.columns.set(columns);\n        this.setupColumnData();\n      }\n    });\n  }\n\n  protected moveDown(index: number, event: Event): void {\n    const columns = this.columns();\n    const listOptions = this.listOptions();\n    if (columns[index].draggable) {\n      let targetIndex = index + 1;\n      while (columns[targetIndex] && !columns[targetIndex].draggable) {\n        targetIndex++;\n      }\n\n      if (targetIndex !== index && columns[targetIndex]?.draggable) {\n        event.preventDefault();\n        moveItemInArray(columns, index, targetIndex);\n\n        // When moving the first partially visible item down,\n        // the browser tries to keep its position stable within the viewport by automatically scrolling down.\n        // This behavior is not wanted here, so we restore the previous scroll after moving the item\n        // TODO: check if this could be solved easier\n        if (\n          listOptions.at(index)!.element.getBoundingClientRect().top <=\n          this.modalBodyElement().nativeElement.getBoundingClientRect().top\n        ) {\n          const previousScrollTop = this.modalBodyElement().nativeElement.scrollTop;\n          setTimeout(() => (this.modalBodyElement().nativeElement.scrollTop = previousScrollTop));\n        }\n\n        // When moving the last visible element down, the scroll position is not adopted. So its scroll out of view.\n        // We correct this manually by scrolling it back into view\n        const targetElement = listOptions.at(targetIndex)!.element;\n        if (\n          targetElement.getBoundingClientRect().bottom >\n          this.modalBodyElement().nativeElement.getBoundingClientRect().bottom\n        ) {\n          targetElement.scrollIntoView({ block: 'end' });\n        }\n\n        this.announceSuccessfulMove(targetIndex);\n        this.emitChange();\n      } else {\n        this.announceNotSuccessfulMove();\n      }\n    }\n  }\n\n  protected moveUp(index: number, event: Event): void {\n    const columns = this.columns();\n    if (columns[index].draggable) {\n      let targetIndex = index - 1;\n      while (columns[targetIndex] && !columns[targetIndex].draggable) {\n        targetIndex--;\n      }\n\n      if (targetIndex !== index && columns[targetIndex]?.draggable) {\n        event.preventDefault();\n        moveItemInArray(columns, index, targetIndex);\n        // it seems like this is only necessary for move up. Don't know why\n        setTimeout(() => this.listOptions().at(targetIndex)!.focus());\n        this.announceSuccessfulMove(targetIndex);\n        this.emitChange();\n      } else {\n        this.announceNotSuccessfulMove();\n      }\n    }\n  }\n\n  protected emitChange(): void {\n    this.modalRef.hidden.next({ type: 'instant', columns: this.columns() });\n  }\n\n  protected updateVisibility(): void {\n    const value = this.listOptions()\n      .filter(option => option.isSelected())\n      .map(option => option.value);\n    for (const column of this.columns()) {\n      column.visible = value.includes(column.id);\n    }\n    this.emitChange();\n  }\n\n  private setupColumnData(): void {\n    const columns = this.columns();\n    this.tempHeaderData = columns.map(x => Object.assign({}, x));\n    this.visibleIds = columns.filter(column => column.visible).map(column => column.id);\n  }\n\n  private announceSuccessfulMove(index: number): void {\n    this.announceMove(this.a11yItemMovedMessage(), {\n      ...this.translationParams,\n      targetPosition: index + 1\n    });\n  }\n\n  private announceNotSuccessfulMove(): void {\n    this.announceMove(this.a11yItemNotMovedMessage(), this.translationParams());\n  }\n\n  private announceMove(message?: string, translationParams?: Record<string, unknown>): void {\n    if (message) {\n      this.translateService\n        .translateAsync(message, translationParams)\n        .pipe(first())\n        .subscribe(translatedMessage => this.liveAnnouncer.announce(translatedMessage));\n    }\n  }\n}\n","<div class=\"modal-header\">\n  <span class=\"modal-title\" [id]=\"titleId()\">{{ heading() | translate: translationParams() }}</span>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-sm btn-ghost\"\n    [attr.aria-label]=\"cancelBtnName() | translate\"\n    (click)=\"cancelColumnSelection()\"\n  >\n    <si-icon-next [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n<p class=\"text-secondary px-8 pb-5 mb-0\">{{ bodyTitle() | translate: translationParams() }}</p>\n<div #modalBody class=\"modal-body\" tabindex=\"-1\" cdkScrollable>\n  <div\n    cdkListbox\n    cdkListboxMultiple\n    cdkDropList\n    [cdkListboxValue]=\"visibleIds\"\n    [attr.aria-label]=\"listAriaLabel() | translate: translationParams\"\n    (cdkListboxValueChange)=\"updateVisibility()\"\n    (cdkDropListDropped)=\"drop($event)\"\n  >\n    @for (column of columns(); track column) {\n      <si-column-selection-editor\n        #cdkOption=\"cdkOption\"\n        cdkDrag\n        class=\"focus-inside\"\n        [cdkDragDisabled]=\"!column.draggable\"\n        [cdkOption]=\"column.id\"\n        [cdkOptionDisabled]=\"column.disabled\"\n        [column]=\"column\"\n        [selected]=\"cdkOption.isSelected()\"\n        [renameInputLabel]=\"renameInputAriaLabel() | translate: translationParams\"\n        [columnVisibilityConfigurable]=\"columnVisibilityConfigurable()\"\n        (titleChange)=\"emitChange()\"\n        (visibilityChange)=\"updateVisibility()\"\n        (keydown.alt.arrowUp)=\"moveUp($index, $event)\"\n        (keydown.alt.arrowDown)=\"moveDown($index, $event)\"\n      />\n    }\n  </div>\n</div>\n<div class=\"modal-footer\">\n  @if (restoreEnabled()) {\n    <button type=\"button\" class=\"btn btn-tertiary me-auto\" (click)=\"restoreToDefault()\">\n      {{ restoreToDefaultBtnName() | translate }}\n    </button>\n  }\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancelColumnSelection()\">\n    {{ cancelBtnName() | translate }}\n  </button>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitColumnSelection()\">\n    {{ submitBtnName() | translate }}\n  </button>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { inject, Injectable } from '@angular/core';\nimport {\n  createModalConfig,\n  ModalDependencyInjectionOptions,\n  ModalOptions,\n  SiModalService\n} from '@siemens/element-ng/modal';\nimport { Observable } from 'rxjs';\n\nimport { SiColumnSelectionDialogComponent } from './si-column-selection-dialog.component';\nimport {\n  ColumnSelectionDialogResult,\n  SiColumnSelectionDialogConfig\n} from './si-column-selection-dialog.types';\n\n@Injectable({ providedIn: 'root' })\nexport class SiColumnSelectionDialogService {\n  private modalService = inject(SiModalService);\n\n  /**\n   * Opens a column selection dialog.\n   *\n   * Despite other dialogs,\n   * this dialog informs the consumer not ONLY with clicking `submit` or `cancel`,\n   * but also with changing the place or visibility of a dialog row\n   * thanks to the `instant` type of emitted event.\n   *\n   * {@label WITH_OBJECT}\n   */\n  showColumnSelectionDialog(\n    dialogConfig: SiColumnSelectionDialogConfig,\n    diOptions?: ModalDependencyInjectionOptions\n  ): Observable<ColumnSelectionDialogResult> {\n    return new Observable<ColumnSelectionDialogResult>(subscriber => {\n      const config: ModalOptions<any> = createModalConfig(dialogConfig);\n      Object.assign(config, diOptions);\n\n      config.class += ' modal-dialog-scrollable';\n      config.keyboard = true;\n\n      const modalRef = this.modalService.show<SiColumnSelectionDialogComponent>(\n        SiColumnSelectionDialogComponent,\n        config\n      );\n      const subscription = modalRef.hidden.subscribe(\n        (confirmationResult: ColumnSelectionDialogResult | undefined) => {\n          const keepModalOpen =\n            confirmationResult?.type === 'instant' || confirmationResult?.type === 'restoreDefault';\n          confirmationResult ??= { type: 'cancel', columns: modalRef.content.backupColumns };\n          subscriber.next(confirmationResult);\n          if (!keepModalOpen) {\n            subscription.unsubscribe();\n            subscriber.complete();\n          }\n        }\n      );\n\n      return () => {\n        if (!subscription.closed) {\n          subscription.unsubscribe();\n          modalRef.detach();\n        }\n      };\n    });\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-column-selection-dialog.types';\nexport * from './si-column-selection-dialog.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-column-selection-dialog.mjs","sources":["../../../../projects/element-ng/column-selection-dialog/column-selection-editor/si-column-selection-editor.component.ts","../../../../projects/element-ng/column-selection-dialog/column-selection-editor/si-column-selection-editor.component.html","../../../../projects/element-ng/column-selection-dialog/si-column-selection-dialog.component.ts","../../../../projects/element-ng/column-selection-dialog/si-column-selection-dialog.component.html","../../../../projects/element-ng/column-selection-dialog/si-column-selection-dialog.service.ts","../../../../projects/element-ng/column-selection-dialog/index.ts","../../../../projects/element-ng/column-selection-dialog/siemens-element-ng-column-selection-dialog.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { CdkDragHandle } from '@angular/cdk/drag-drop';\nimport { CdkOption } from '@angular/cdk/listbox';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  output,\n  viewChild\n} from '@angular/core';\nimport {\n  addIcons,\n  elementHide,\n  elementLock,\n  elementMenu,\n  elementShow,\n  SiIconComponent\n} from '@siemens/element-ng/icon';\n\nimport { Column } from '../si-column-selection-dialog.types';\n\n@Component({\n  selector: 'si-column-selection-editor',\n  imports: [CdkDragHandle, SiIconComponent],\n  templateUrl: './si-column-selection-editor.component.html',\n  styles: `\n    .form-control {\n      cursor: text;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'd-block my-4 mx-1 rounded-2 elevation-1'\n  }\n})\nexport class SiColumnSelectionEditorComponent {\n  readonly column = input.required<Column>();\n  readonly selected = input.required<boolean>();\n  readonly renameInputLabel = input.required<string>();\n  readonly columnVisibilityConfigurable = input.required<boolean>();\n\n  readonly titleChange = output();\n  readonly visibilityChange = output();\n\n  protected readonly cdkOption = inject(CdkOption);\n  protected editing = false;\n  private readonly title = viewChild.required<ElementRef<HTMLInputElement>>('title');\n  private readonly elementRef = inject<ElementRef<HTMLDivElement>>(ElementRef);\n  protected readonly icons = addIcons({\n    elementHide,\n    elementMenu,\n    elementLock,\n    elementShow\n  });\n\n  @HostListener('keydown.enter', ['$event'])\n  protected tryEdit(event: Event): void {\n    if (this.column().editable) {\n      event.stopPropagation();\n      this.startEdit();\n    }\n  }\n\n  protected updateTitle(value: string): void {\n    this.column().title = value;\n    this.titleChange.emit();\n  }\n\n  protected startEdit(): void {\n    if (this.column().editable) {\n      this.editing = true;\n      setTimeout(() => this.title().nativeElement.focus());\n    }\n  }\n\n  protected stopEdit(): void {\n    this.editing = false;\n    this.elementRef.nativeElement.focus();\n  }\n\n  protected toggleVisibility(): void {\n    this.cdkOption.toggle();\n    // manually toggling does not emit an event, so we have to fire one\n    this.visibilityChange.emit();\n  }\n}\n","<div class=\"d-flex p-4\" (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n  <div class=\"d-flex w-100\" [attr.aria-label]=\"column().title\">\n    @if (editing) {\n      <input\n        #title\n        type=\"text\"\n        class=\"form-control w-100\"\n        [attr.aria-label]=\"renameInputLabel()\"\n        [value]=\"column().title\"\n        (input)=\"updateTitle(title.value)\"\n        (keydown.enter)=\"stopEdit()\"\n        (blur)=\"stopEdit()\"\n      />\n    } @else {\n      <span\n        class=\"form-control text-truncate w-100\"\n        [class.border-0]=\"!column().editable\"\n        [class.px-0]=\"!column().editable\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"startEdit()\"\n        >{{ column().title }}</span\n      >\n    }\n  </div>\n\n  <div class=\"d-flex align-items-center\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n        [class.text-primary]=\"!column().disabled\"\n        [class.disabled]=\"column().disabled\"\n        (click)=\"toggleVisibility()\"\n      >\n        <si-icon [icon]=\"selected() ? icons.elementShow : icons.elementHide\" />\n      </span>\n    }\n    <span\n      cdkDragHandle\n      class=\"btn btn-circle btn-sm btn-tertiary ms-4\"\n      [class.disabled]=\"column().disabled\"\n      [class.pe-none]=\"!column().draggable\"\n    >\n      <si-icon\n        [class.pe-none]=\"!column().draggable\"\n        [icon]=\"column().draggable ? icons.elementMenu : icons.elementLock\"\n      />\n    </span>\n  </div>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport {\n  CDK_DRAG_CONFIG,\n  CdkDrag,\n  CdkDragDrop,\n  CdkDropList,\n  moveItemInArray\n} from '@angular/cdk/drag-drop';\nimport { CdkListbox, CdkOption } from '@angular/cdk/listbox';\nimport { CdkScrollableModule } from '@angular/cdk/scrolling';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  input,\n  model,\n  OnInit,\n  viewChild,\n  viewChildren\n} from '@angular/core';\nimport { addIcons, elementCancel, SiIconComponent } from '@siemens/element-ng/icon';\nimport { ModalRef } from '@siemens/element-ng/modal';\nimport {\n  injectSiTranslateService,\n  SiTranslatePipe,\n  t,\n  TranslatableString\n} from '@siemens/element-translate-ng/translate';\nimport { first } from 'rxjs/operators';\n\nimport { SiColumnSelectionEditorComponent } from './column-selection-editor/si-column-selection-editor.component';\nimport { Column, ColumnSelectionDialogResult } from './si-column-selection-dialog.types';\n\nconst dragConfig = {\n  dragStartThreshold: 0,\n  pointerDirectionChangeThreshold: 5,\n  zIndex: 10000\n};\n\n@Component({\n  selector: 'si-column-selection-dialog',\n  imports: [\n    CdkDrag,\n    CdkDropList,\n    CdkListbox,\n    CdkOption,\n    CdkScrollableModule,\n    SiIconComponent,\n    SiTranslatePipe,\n    SiColumnSelectionEditorComponent\n  ],\n  templateUrl: './si-column-selection-dialog.component.html',\n  styleUrl: './si-column-selection-dialog.component.scss',\n  providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiColumnSelectionDialogComponent implements OnInit {\n  readonly titleId = input<string>();\n  readonly heading = input<TranslatableString>();\n  readonly bodyTitle = input<TranslatableString>();\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`)\n   * ```\n   */\n  readonly submitBtnName = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`)\n  );\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`)\n   * ```\n   */\n  readonly cancelBtnName = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`)\n  );\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`)\n   * ```\n   */\n  readonly restoreToDefaultBtnName = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`)\n  );\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`)\n   * ```\n   */\n  readonly hiddenText = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`)\n  );\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`)\n   * ```\n   */\n  readonly visibleText = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`)\n  );\n  /** @defaultValue false */\n  readonly restoreEnabled = input(false, { transform: booleanAttribute });\n  readonly columns = model.required<Column[]>();\n  /**\n   * @defaultValue\n   * ```\n   * {}\n   * ```\n   */\n  readonly translationParams = input<Record<string, unknown>>({});\n\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.LIST_ARIA_LABEL:List of possible columns. Items can be moved using Alt+ArrowUp or Alt+ArrowDown. Press Enter to rename supported items.`)\n   * ```\n   */\n  readonly listAriaLabel = input(\n    t(\n      () =>\n        $localize`:@@SI_COLUMN_SELECTION_DIALOG.LIST_ARIA_LABEL:List of possible columns. Items can be moved using Alt+ArrowUp or Alt+ArrowDown. Press Enter to rename supported items.`\n    )\n  );\n\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`)\n   * ```\n   */\n  readonly renameInputAriaLabel = input(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`)\n  );\n\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`)\n   * ```\n   */\n  readonly a11yItemMovedMessage = input<TranslatableString>(\n    t(\n      () =>\n        $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`\n    )\n  );\n  /**\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`)\n   * ```\n   */\n\n  readonly a11yItemNotMovedMessage = input<TranslatableString>(\n    t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`)\n  );\n  /** @defaultValue true */\n  readonly columnVisibilityConfigurable = input(true, { transform: booleanAttribute });\n\n  private readonly listOptions = viewChildren(CdkOption);\n\n  private readonly modalBodyElement = viewChild.required<ElementRef<HTMLDivElement>>('modalBody');\n\n  private tempHeaderData: Column[] = [];\n\n  protected readonly modalRef = inject(\n    ModalRef<SiColumnSelectionDialogComponent, ColumnSelectionDialogResult>\n  );\n  protected readonly icons = addIcons({ elementCancel });\n\n  protected visibleIds: string[] = [];\n\n  private readonly liveAnnouncer = inject(LiveAnnouncer);\n  private readonly translateService = injectSiTranslateService();\n\n  ngOnInit(): void {\n    this.setupColumnData();\n  }\n\n  /** @internal */\n  get backupColumns(): Column[] {\n    return this.tempHeaderData;\n  }\n\n  protected submitColumnSelection(): void {\n    this.modalRef.hide({ type: 'ok', columns: this.columns() });\n  }\n\n  protected cancelColumnSelection(): void {\n    this.columns.set([]);\n    this.tempHeaderData.forEach(element => this.columns.update(a => [...a, element]));\n    this.modalRef.hide({ type: 'cancel', columns: this.columns() });\n  }\n\n  protected drop(event: CdkDragDrop<string[]>): void {\n    const columns = this.columns();\n    if (columns[event.currentIndex].draggable) {\n      moveItemInArray(columns, event.previousIndex, event.currentIndex);\n      this.emitChange();\n    }\n  }\n\n  protected restoreToDefault(): void {\n    this.modalRef.hidden.next({\n      type: 'restoreDefault',\n      columns: this.columns(),\n      updateColumns: columns => {\n        this.columns.set(columns);\n        this.setupColumnData();\n      }\n    });\n  }\n\n  protected moveDown(index: number, event: Event): void {\n    const columns = this.columns();\n    const listOptions = this.listOptions();\n    if (columns[index].draggable) {\n      let targetIndex = index + 1;\n      while (columns[targetIndex] && !columns[targetIndex].draggable) {\n        targetIndex++;\n      }\n\n      if (targetIndex !== index && columns[targetIndex]?.draggable) {\n        event.preventDefault();\n        moveItemInArray(columns, index, targetIndex);\n\n        // When moving the first partially visible item down,\n        // the browser tries to keep its position stable within the viewport by automatically scrolling down.\n        // This behavior is not wanted here, so we restore the previous scroll after moving the item\n        // TODO: check if this could be solved easier\n        if (\n          listOptions.at(index)!.element.getBoundingClientRect().top <=\n          this.modalBodyElement().nativeElement.getBoundingClientRect().top\n        ) {\n          const previousScrollTop = this.modalBodyElement().nativeElement.scrollTop;\n          setTimeout(() => (this.modalBodyElement().nativeElement.scrollTop = previousScrollTop));\n        }\n\n        // When moving the last visible element down, the scroll position is not adopted. So its scroll out of view.\n        // We correct this manually by scrolling it back into view\n        const targetElement = listOptions.at(targetIndex)!.element;\n        if (\n          targetElement.getBoundingClientRect().bottom >\n          this.modalBodyElement().nativeElement.getBoundingClientRect().bottom\n        ) {\n          targetElement.scrollIntoView({ block: 'end' });\n        }\n\n        this.announceSuccessfulMove(targetIndex);\n        this.emitChange();\n      } else {\n        this.announceNotSuccessfulMove();\n      }\n    }\n  }\n\n  protected moveUp(index: number, event: Event): void {\n    const columns = this.columns();\n    if (columns[index].draggable) {\n      let targetIndex = index - 1;\n      while (columns[targetIndex] && !columns[targetIndex].draggable) {\n        targetIndex--;\n      }\n\n      if (targetIndex !== index && columns[targetIndex]?.draggable) {\n        event.preventDefault();\n        moveItemInArray(columns, index, targetIndex);\n        // it seems like this is only necessary for move up. Don't know why\n        setTimeout(() => this.listOptions().at(targetIndex)!.focus());\n        this.announceSuccessfulMove(targetIndex);\n        this.emitChange();\n      } else {\n        this.announceNotSuccessfulMove();\n      }\n    }\n  }\n\n  protected emitChange(): void {\n    this.modalRef.hidden.next({ type: 'instant', columns: this.columns() });\n  }\n\n  protected updateVisibility(): void {\n    const value = this.listOptions()\n      .filter(option => option.isSelected())\n      .map(option => option.value);\n    for (const column of this.columns()) {\n      column.visible = value.includes(column.id);\n    }\n    this.emitChange();\n  }\n\n  private setupColumnData(): void {\n    const columns = this.columns();\n    this.tempHeaderData = columns.map(x => Object.assign({}, x));\n    this.visibleIds = columns.filter(column => column.visible).map(column => column.id);\n  }\n\n  private announceSuccessfulMove(index: number): void {\n    this.announceMove(this.a11yItemMovedMessage(), {\n      ...this.translationParams,\n      targetPosition: index + 1\n    });\n  }\n\n  private announceNotSuccessfulMove(): void {\n    this.announceMove(this.a11yItemNotMovedMessage(), this.translationParams());\n  }\n\n  private announceMove(message?: string, translationParams?: Record<string, unknown>): void {\n    if (message) {\n      this.translateService\n        .translateAsync(message, translationParams)\n        .pipe(first())\n        .subscribe(translatedMessage => this.liveAnnouncer.announce(translatedMessage));\n    }\n  }\n}\n","<div class=\"modal-header\">\n  <span class=\"modal-title\" [id]=\"titleId()\">{{ heading() | translate: translationParams() }}</span>\n  <button\n    type=\"button\"\n    class=\"btn btn-circle btn-sm btn-ghost\"\n    [attr.aria-label]=\"cancelBtnName() | translate\"\n    (click)=\"cancelColumnSelection()\"\n  >\n    <si-icon [icon]=\"icons.elementCancel\" />\n  </button>\n</div>\n<p class=\"text-secondary px-8 pb-5 mb-0\">{{ bodyTitle() | translate: translationParams() }}</p>\n<div #modalBody class=\"modal-body\" tabindex=\"-1\" cdkScrollable>\n  <div\n    cdkListbox\n    cdkListboxMultiple\n    cdkDropList\n    [cdkListboxValue]=\"visibleIds\"\n    [attr.aria-label]=\"listAriaLabel() | translate: translationParams\"\n    (cdkListboxValueChange)=\"updateVisibility()\"\n    (cdkDropListDropped)=\"drop($event)\"\n  >\n    @for (column of columns(); track column) {\n      <si-column-selection-editor\n        #cdkOption=\"cdkOption\"\n        cdkDrag\n        class=\"focus-inside\"\n        [cdkDragDisabled]=\"!column.draggable\"\n        [cdkOption]=\"column.id\"\n        [cdkOptionDisabled]=\"column.disabled\"\n        [column]=\"column\"\n        [selected]=\"cdkOption.isSelected()\"\n        [renameInputLabel]=\"renameInputAriaLabel() | translate: translationParams\"\n        [columnVisibilityConfigurable]=\"columnVisibilityConfigurable()\"\n        (titleChange)=\"emitChange()\"\n        (visibilityChange)=\"updateVisibility()\"\n        (keydown.alt.arrowUp)=\"moveUp($index, $event)\"\n        (keydown.alt.arrowDown)=\"moveDown($index, $event)\"\n      />\n    }\n  </div>\n</div>\n<div class=\"modal-footer\">\n  @if (restoreEnabled()) {\n    <button type=\"button\" class=\"btn btn-tertiary me-auto\" (click)=\"restoreToDefault()\">\n      {{ restoreToDefaultBtnName() | translate }}\n    </button>\n  }\n  <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancelColumnSelection()\">\n    {{ cancelBtnName() | translate }}\n  </button>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitColumnSelection()\">\n    {{ submitBtnName() | translate }}\n  </button>\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { inject, Injectable } from '@angular/core';\nimport {\n  createModalConfig,\n  ModalDependencyInjectionOptions,\n  ModalOptions,\n  SiModalService\n} from '@siemens/element-ng/modal';\nimport { Observable } from 'rxjs';\n\nimport { SiColumnSelectionDialogComponent } from './si-column-selection-dialog.component';\nimport {\n  ColumnSelectionDialogResult,\n  SiColumnSelectionDialogConfig\n} from './si-column-selection-dialog.types';\n\n@Injectable({ providedIn: 'root' })\nexport class SiColumnSelectionDialogService {\n  private modalService = inject(SiModalService);\n\n  /**\n   * Opens a column selection dialog.\n   *\n   * Despite other dialogs,\n   * this dialog informs the consumer not ONLY with clicking `submit` or `cancel`,\n   * but also with changing the place or visibility of a dialog row\n   * thanks to the `instant` type of emitted event.\n   *\n   * {@label WITH_OBJECT}\n   */\n  showColumnSelectionDialog(\n    dialogConfig: SiColumnSelectionDialogConfig,\n    diOptions?: ModalDependencyInjectionOptions\n  ): Observable<ColumnSelectionDialogResult> {\n    return new Observable<ColumnSelectionDialogResult>(subscriber => {\n      const config: ModalOptions<any> = createModalConfig(dialogConfig);\n      Object.assign(config, diOptions);\n\n      config.class += ' modal-dialog-scrollable';\n      config.keyboard = true;\n\n      const modalRef = this.modalService.show<SiColumnSelectionDialogComponent>(\n        SiColumnSelectionDialogComponent,\n        config\n      );\n      const subscription = modalRef.hidden.subscribe(\n        (confirmationResult: ColumnSelectionDialogResult | undefined) => {\n          const keepModalOpen =\n            confirmationResult?.type === 'instant' || confirmationResult?.type === 'restoreDefault';\n          confirmationResult ??= { type: 'cancel', columns: modalRef.content.backupColumns };\n          subscriber.next(confirmationResult);\n          if (!keepModalOpen) {\n            subscription.unsubscribe();\n            subscriber.complete();\n          }\n        }\n      );\n\n      return () => {\n        if (!subscription.closed) {\n          subscription.unsubscribe();\n          modalRef.detach();\n        }\n      };\n    });\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-column-selection-dialog.types';\nexport * from './si-column-selection-dialog.service';\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-content-action-bar.mjs

@@ -1,11 +1,11 @@
 import * as i2 from '@angular/cdk/menu';
 import { CdkMenuBar, CdkMenuModule } from '@angular/cdk/menu';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, booleanAttribute, viewChild, ElementRef, computed, inject, NgModule } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, booleanAttribute, viewChild, ElementRef, computed, linkedSignal, inject, NgModule } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import * as i3 from '@siemens/element-ng/auto-collapsable-list';
 import { SiAutoCollapsableListModule } from '@siemens/element-ng/auto-collapsable-list';
-import { SiIconNextComponent, addIcons, elementOptionsVertical, elementCancel } from '@siemens/element-ng/icon';
+import { SiIconComponent, addIcons, elementOptionsVertical, elementCancel } from '@siemens/element-ng/icon';
 import * as i4 from '@siemens/element-ng/link';
 import { SiLinkModule } from '@siemens/element-ng/link';
 import * as i1 from '@siemens/element-ng/menu';
@@ -19,11 +19,11 @@ import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 class SiContentActionBarToggleComponent {
     icon = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiContentActionBarToggleComponent, isStandalone: true, selector: "[si-content-action-bar-toggle]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "dropdown-item flex-grow-0 focus-inside" }, ngImport: i0, template: "<si-icon-next class=\"icon\" [icon]=\"icon()\" />\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:24px}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:-4px}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:-4px!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:8px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover,:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiContentActionBarToggleComponent, isStandalone: true, selector: "[si-content-action-bar-toggle]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "dropdown-item flex-grow-0 focus-inside" }, ngImport: i0, template: "<si-icon class=\"icon\" [icon]=\"icon()\" />\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:24px}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:-4px}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:-4px!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:8px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover,:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[si-content-action-bar-toggle]', imports: [SiIconNextComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'dropdown-item flex-grow-0 focus-inside' }, template: "<si-icon-next class=\"icon\" [icon]=\"icon()\" />\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:24px}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:-4px}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:-4px!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:8px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover,:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"] }]
+            args: [{ selector: '[si-content-action-bar-toggle]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'dropdown-item flex-grow-0 focus-inside' }, template: "<si-icon class=\"icon\" [icon]=\"icon()\" />\n", styles: [".item-wrapper{display:flex;align-items:center;flex:1;min-inline-size:24px}.item-title:empty,.item-end:empty{display:none!important}:host-context(si-menu-bar,si-content-action-bar){color:var(--element-action-secondary-text);background:var(--element-base-1);padding-inline:8px}:host-context(si-menu-bar,si-content-action-bar) .item-wrapper{justify-content:center}:host-context(si-menu-bar,si-content-action-bar) .icon{margin-inline:-4px}:host-context(si-menu-bar,si-content-action-bar) .item-end{margin-inline-end:-4px!important}:host-context(si-menu-bar,si-content-action-bar) .item-title{padding-inline-start:0;flex:0 1 auto}:host-context(si-menu-bar,si-content-action-bar) .item-title:empty+.item-end .submenu{display:none}:host-context(si-menu-bar,si-content-action-bar) .icon+.item-title{padding-inline-start:8px}:host-context(si-menu-bar,si-content-action-bar) .item-end .submenu{transform:rotate(90deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true] .item-end .submenu{transform:rotate(270deg)}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .icon{margin-inline:0}:host-context(si-menu-bar,si-content-action-bar)[aria-haspopup] .item-title{padding-inline-start:4px!important}:host-context(si-menu-bar,si-content-action-bar):focus,:host-context(si-menu-bar,si-content-action-bar).focus{color:var(--element-action-secondary-text);background:var(--element-base-1)}:host-context(si-menu-bar,si-content-action-bar):hover,:host-context(si-menu-bar,si-content-action-bar).hover,:host-context(si-menu-bar,si-content-action-bar):active,:host-context(si-menu-bar,si-content-action-bar).active,:host-context(si-menu-bar,si-content-action-bar)[aria-expanded=true]{color:var(--element-action-secondary-text-hover);background:var(--element-action-secondary-hover)}:host-context(si-menu-bar,si-content-action-bar):disabled,:host-context(si-menu-bar,si-content-action-bar).disabled{opacity:var(--element-action-disabled-opacity);color:var(--element-action-secondary-text);background:var(--element-base-1)}\n"] }]
         }] });
 
 /**
@@ -116,15 +116,10 @@ class SiContentActionBarComponent {
         return secondaryActions;
     });
     icons = addIcons({ elementCancel, elementOptionsVertical });
-    expanded = true;
+    expanded = linkedSignal(() => this.viewType() === 'expanded');
     parentElement;
     elementRef = inject(ElementRef);
     menuActionService = inject(SiMenuActionService, { optional: true });
-    ngOnChanges(changes) {
-        if (changes.viewType) {
-            this.expanded = this.viewType() === 'expanded';
-        }
-    }
     ngAfterViewInit() {
         setTimeout(() => {
             if (this.parentElement !== this.elementRef.nativeElement.parentElement) {
@@ -133,11 +128,11 @@ class SiContentActionBarComponent {
         });
     }
     expand() {
-        this.expanded = true;
+        this.expanded.set(true);
         setTimeout(() => this.menuBarElement()?.nativeElement.focus());
     }
     collapse() {
-        this.expanded = false;
+        this.expanded.set(false);
         setTimeout(() => this.expandElement()?.nativeElement.focus());
     }
     isNewItemStyle(item) {
@@ -152,7 +147,7 @@ class SiContentActionBarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiContentActionBarComponent, isStandalone: true, selector: "si-content-action-bar", inputs: { primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, preventIconsInDropdownMenus: { classPropertyName: "preventIconsInDropdownMenus", publicName: "preventIconsInDropdownMenus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "viewType()" } }, viewQueries: [{ propertyName: "expandElement", first: true, predicate: ["expandElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "menuBarElement", first: true, predicate: CdkMenuBar, descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          }\n          @if (!primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n", styles: [":host.mobile [siAutoCollapsableList]{inline-size:40px}div>[si-content-action-bar-toggle]{inline-size:40px;justify-content:center;border-radius:var(--element-button-radius)}si-menu-bar>*:first-child{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}si-menu-bar>*:last-child{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}\n"], dependencies: [{ kind: "ngmodule", type: SiMenuModule }, { kind: "directive", type: i1.SiMenuBarDirective, selector: "si-menu-bar", inputs: ["disabled"] }, { kind: "component", type: i1.SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "component", type: i1.SiMenuItemCheckboxComponent, selector: "si-menu-item-checkbox, button[si-menu-item-checkbox]" }, { kind: "component", type: i1.SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i2.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: SiAutoCollapsableListModule }, { kind: "directive", type: i3.SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: i3.SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: i3.SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i4.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiContentActionBarToggleComponent, selector: "[si-content-action-bar-toggle]", inputs: ["icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiContentActionBarComponent, isStandalone: true, selector: "si-content-action-bar", inputs: { primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, preventIconsInDropdownMenus: { classPropertyName: "preventIconsInDropdownMenus", publicName: "preventIconsInDropdownMenus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "viewType()" } }, viewQueries: [{ propertyName: "expandElement", first: true, predicate: ["expandElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "menuBarElement", first: true, predicate: CdkMenuBar, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded() && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded()\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          }\n          @if (!primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n", styles: [":host.mobile [siAutoCollapsableList]{inline-size:40px}div>[si-content-action-bar-toggle]{inline-size:40px;justify-content:center;border-radius:var(--element-button-radius)}si-menu-bar>*:first-child{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}si-menu-bar>*:last-child{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}\n"], dependencies: [{ kind: "ngmodule", type: SiMenuModule }, { kind: "directive", type: i1.SiMenuBarDirective, selector: "si-menu-bar", inputs: ["disabled"] }, { kind: "component", type: i1.SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "component", type: i1.SiMenuItemCheckboxComponent, selector: "si-menu-item-checkbox, button[si-menu-item-checkbox]" }, { kind: "component", type: i1.SiMenuItemComponent, selector: "si-menu-item, a[si-menu-item], button[si-menu-item]" }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: i2.CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "ngmodule", type: SiAutoCollapsableListModule }, { kind: "directive", type: i3.SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: i3.SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: i3.SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i4.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiContentActionBarToggleComponent, selector: "[si-content-action-bar-toggle]", inputs: ["icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiContentActionBarComponent, decorators: [{
             type: Component,
@@ -166,7 +161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         RouterLink
                     ], host: {
                         '[class]': 'viewType()'
-                    }, template: "@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          }\n          @if (!primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n", styles: [":host.mobile [siAutoCollapsableList]{inline-size:40px}div>[si-content-action-bar-toggle]{inline-size:40px;justify-content:center;border-radius:var(--element-button-radius)}si-menu-bar>*:first-child{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}si-menu-bar>*:last-child{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}\n"] }]
+                    }, template: "@if (viewType() !== 'mobile' && primaryActions()?.length) {\n  <div siAutoCollapsableList class=\"d-flex\" [siAutoCollapsableListContainerElement]=\"parentElement\">\n    @if (viewType() === 'collapsible' && !expanded() && collapsibleListItem.canBeVisible()) {\n      <button\n        #expandElement\n        si-content-action-bar-toggle\n        type=\"button\"\n        [icon]=\"icons.elementOptionsVertical\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        (click)=\"expand()\"\n      ></button>\n    }\n    <si-menu-bar\n      #collapsibleListItem=\"siAutoCollapsableListItem\"\n      siAutoCollapsableListItem\n      [forceHide]=\"!expanded()\"\n      [disabled]=\"disabled()\"\n    >\n      <!-- ?? syntax is not working for track -->\n      @for (primaryAction of primaryActions(); track primaryAction.id ? primaryAction.id : $index) {\n        @if (isNewItemStyle(primaryAction)) {\n          @switch (primaryAction.type) {\n            @case ('action') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('checkbox') {\n              <button\n                type=\"button\"\n                si-menu-item-checkbox\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [checked]=\"primaryAction.checked\"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [class.active]=\"primaryAction.checked\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                (triggered)=\"runAction(primaryAction)\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n            }\n            @case ('group') {\n              <button\n                type=\"button\"\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [cdkMenuTriggerFor]=\"groupSubmenu\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </button>\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #groupSubmenu>\n                <si-menu-factory [items]=\"primaryAction.children\" />\n              </ng-template>\n            }\n            @case ('router-link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [routerLink]=\"primaryAction.routerLink\"\n                [queryParams]=\"primaryAction.extras?.queryParams\"\n                [queryParamsHandling]=\"primaryAction.extras?.queryParamsHandling\"\n                [fragment]=\"primaryAction.extras?.fragment\"\n                [state]=\"primaryAction.extras?.state\"\n                [relativeTo]=\"primaryAction.extras?.relativeTo\"\n                [preserveFragment]=\"primaryAction.extras?.preserveFragment\"\n                [skipLocationChange]=\"primaryAction.extras?.skipLocationChange\"\n                [replaceUrl]=\"primaryAction.extras?.replaceUrl\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n            @case ('link') {\n              <a\n                si-menu-item\n                [attr.data-id]=\"primaryAction.id\"\n                [attr.title]=\"\n                  primaryAction.iconOnly ? (primaryAction.label | translate) : undefined\n                \"\n                [badge]=\"primaryAction.badge\"\n                [badgeColor]=\"primaryAction.badgeColor ?? 'secondary'\"\n                [disabled]=\"primaryAction.disabled || disabled()\"\n                [icon]=\"primaryAction.icon\"\n                [iconBadgeDot]=\"primaryAction.iconBadge\"\n                [href]=\"primaryAction.href\"\n                [target]=\"primaryAction.target\"\n              >\n                @if (!primaryAction.iconOnly) {\n                  {{ primaryAction.label | translate }}\n                }\n              </a>\n            }\n          }\n        } @else {\n          @if (primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n              [cdkMenuTriggerFor]=\"primaryAction.items ? mainItemSubmenu : null\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n              <!-- Cannot use template context because of https://github.com/angular/components/issues/26256 -->\n              <ng-template #mainItemSubmenu>\n                <si-menu-factory [items]=\"primaryAction.items\" />\n              </ng-template>\n            </a>\n          }\n          @if (!primaryAction.items) {\n            <a\n              si-menu-item\n              activeClass=\"active\"\n              [attr.data-id]=\"primaryAction.id\"\n              [siLink]=\"primaryAction\"\n              [icon]=\"primaryAction.icon\"\n              [attr.aria-label]=\"primaryAction.title | translate\"\n              [badge]=\"primaryAction.badge\"\n              [actionParam]=\"actionParam()\"\n              [iconBadgeDot]=\"primaryAction.badgeDot\"\n              [disabled]=\"primaryAction.disabled || disabled()\"\n            >\n              @if (!primaryAction.iconOnly && primaryAction.title) {\n                <span>{{ primaryAction.title | translate }}</span>\n              }\n            </a>\n          }\n        }\n      }\n      @if (secondaryActions()?.length) {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementOptionsVertical\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [cdkMenuTriggerFor]=\"secondaryActionsMenu\"\n          [disabled]=\"disabled()\"\n        ></button>\n      }\n      @if (viewType() === 'collapsible') {\n        <button\n          type=\"button\"\n          si-content-action-bar-toggle\n          cdkMenuItem\n          [icon]=\"icons.elementCancel\"\n          [attr.aria-label]=\"toggleItemLabel() | translate\"\n          [disabled]=\"disabled()\"\n          (cdkMenuItemTriggered)=\"collapse()\"\n        >\n        </button>\n      }\n    </si-menu-bar>\n    <button\n      si-content-action-bar-toggle\n      siAutoCollapsableListOverflowItem\n      type=\"button\"\n      [icon]=\"icons.elementOptionsVertical\"\n      [cdkMenuTriggerFor]=\"mobile\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n    >\n    </button>\n  </div>\n}\n\n@if (viewType() === 'mobile' || !primaryActions()?.length) {\n  <button\n    si-content-action-bar-toggle\n    type=\"button\"\n    [icon]=\"icons.elementOptionsVertical\"\n    [cdkMenuTriggerFor]=\"mobile\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"toggleItemLabel() | translate\"\n  >\n  </button>\n}\n\n<ng-template #secondaryActionsMenu>\n  <si-menu-factory [items]=\"secondaryActionsInternal()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n\n<ng-template #mobile>\n  <si-menu-factory [items]=\"mobileActions()\" [actionParam]=\"actionParam()\" />\n</ng-template>\n", styles: [":host.mobile [siAutoCollapsableList]{inline-size:40px}div>[si-content-action-bar-toggle]{inline-size:40px;justify-content:center;border-radius:var(--element-button-radius)}si-menu-bar>*:first-child{border-start-start-radius:var(--element-button-radius);border-end-start-radius:var(--element-button-radius)}si-menu-bar>*:last-child{border-start-end-radius:var(--element-button-radius);border-end-end-radius:var(--element-button-radius)}\n"] }]
         }] });
 
 /**