@siemens/element-ng 47.2.0 → 47.4.0

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

@@ -0,0 +1,146 @@
+import { NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, booleanAttribute, computed, signal, viewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { BlinkService } from '@siemens/element-ng/common';
+import { STATUS_ICON_CONFIG, addIcons, elementRight4, SiIconNextComponent } from '@siemens/element-ng/icon';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiCircleStatusComponent {
+    statusIcons = inject(STATUS_ICON_CONFIG);
+    /**
+     * The status (success, info, warning, danger) to be visualized.
+     */
+    status = input();
+    /* DO NOT REMOVE: Even though the input is marked as deprecated, the core-team decided not to remove the
+     input. The possibility to have custom color is often requested by projects, so we keep it.
+     however in order to discourage it's use, we keep it marked deprecated.
+     */
+    /**
+     * A custom color (e.g. `#fefefe`) for exceptional cases.
+     * @deprecated use the semantic `status` input instead.
+     */
+    color = input();
+    /**
+     * Set a domain type icon (e.g. `element-door`) for which the status shall be shown.
+     * Leave undefined for visualizing the status without an icon.
+     */
+    icon = input();
+    /**
+     * Set the size using either regular or small only works when used together with `icon`
+     *
+     * @defaultValue 'regular'
+     */
+    size = input('regular');
+    /**
+     * event direction is out
+     *
+     * @defaultValue false
+     */
+    eventOut = input(false, { transform: booleanAttribute });
+    /**
+     * Custom icon class for event out
+     */
+    eventIcon = input();
+    /**
+     * Whether the status should appear with a pulsing circle around the badge.
+     *
+     * @defaultValue false
+     */
+    blink = input(false, { transform: booleanAttribute });
+    /**
+     * Blink pulse generator for synchronized blinking with other components
+     */
+    blinkPulse = input();
+    /**
+     * Aria label for icon and status combo. Needed for a11y
+     */
+    ariaLabel = input();
+    backgroundClass = computed(() => this.statusIcon()?.background ?? '');
+    theAriaLabel = computed(() => this.ariaLabel() ?? this.autoLabel());
+    autoLabel = computed(() => {
+        const status = this.status();
+        const statusName = status && this.statusIcons[status] ? status : 'none';
+        const direction = this.eventOut() ? ' out' : '';
+        const iconName = this.icon()?.replace(/^element-{0,1}/, '') ?? '';
+        return `${iconName.toLocaleLowerCase()}${this.status() && this.icon() ? ' in ' : ''}status ${statusName}${direction}`;
+    });
+    statusIcon = computed(() => {
+        const status = this.status();
+        return status ? this.statusIcons[status] : undefined;
+    });
+    blinkOn = signal(false);
+    contrastFix = signal(false);
+    icons = addIcons({ elementRight4 });
+    blinkSubs;
+    bg = viewChild.required('bg');
+    blinkService = inject(BlinkService);
+    ngOnChanges(changes) {
+        if (this.blinkService && changes.blink) {
+            this.blinkSubs?.unsubscribe();
+            if (this.blink()) {
+                const pulse = this.blinkPulse() ?? this.blinkService.pulse$;
+                this.blinkSubs = pulse.subscribe(onOff => {
+                    this.blinkOn.set(onOff);
+                });
+            }
+            else {
+                this.blinkOn.set(false);
+            }
+        }
+        if (changes.color || changes.blink) {
+            queueMicrotask(() => {
+                this.contrastFix.set(!!this.color() && this.blink() && this.calculateContrastFix());
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.blinkSubs?.unsubscribe();
+    }
+    calculateContrastFix() {
+        // see https://www.w3.org/TR/AERT/#color-contrast
+        const rgb = getComputedStyle(this.bg().nativeElement)
+            .backgroundColor?.match(/\d+/g)
+            ?.map(v => +v);
+        return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCircleStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiCircleStatusComponent, isStandalone: true, selector: "si-circle-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, eventOut: { classPropertyName: "eventOut", publicName: "eventOut", isSignal: true, isRequired: false, transformFunction: null }, eventIcon: { classPropertyName: "eventIcon", publicName: "eventIcon", isSignal: true, isRequired: false, transformFunction: null }, blink: { classPropertyName: "blink", publicName: "blink", isSignal: true, isRequired: false, transformFunction: null }, blinkPulse: { classPropertyName: "blinkPulse", publicName: "blinkPulse", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "bg", first: true, predicate: ["bg"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    class=\"bg\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [ngClass]=\"backgroundClass()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon-next class=\"status-icon\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n      <si-icon-next\n        class=\"status-icon\"\n        [ngClass]=\"iconConfig.stackedColor\"\n        [icon]=\"iconConfig.stacked\"\n      />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon-next class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon-next class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon-next class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}:host .status-indication ::ng-deep .status-icon{font-size:24px}:host .status-indication.has-icon.small ::ng-deep .status-icon,:host .status-indication.has-icon.small ::ng-deep .event-out{font-size:16px}.deprecated-dot{inline-size:10px;block-size:10px;border-radius:50%}.event-out{position:absolute;inset-block-end:-2px;inset-inline-end:-13px}.status-indication{position:relative;inline-size:40px;block-size:40px;border-radius:50%;border:1px solid transparent}.status-indication.has-icon{border-color:var(--element-ui-4);background-color:var(--element-base-1);margin-block:6px;margin-inline:0 12px}.status-indication.has-icon .deprecated-dot,.status-indication.has-icon .indicator{position:absolute}.status-indication.has-icon .deprecated-dot{inset-block-start:-2px;inset-inline-end:0}.status-indication.has-icon .indicator{inset-block-start:-9px;inset-inline-end:-13px}.status-indication.has-icon.small{inline-size:32px;block-size:32px;margin-block:4px;margin-inline:0 8px}.status-indication.has-icon.small .event-out{inset-block-end:1px;inset-inline-end:-9px}.status-indication.has-icon.small .deprecated-dot{inline-size:8px;block-size:8px;inset-block-start:-1px;inset-inline-end:-1px}.status-indication.has-icon.small .indicator{inset-block-start:-6px;inset-inline-end:-8px}.status-indication>*{pointer-events:none;line-height:0}.bg{position:absolute;inset:0;border-radius:50%;transition:opacity calc(.5s * var(--element-animations-enabled, 1));opacity:0}.pulse.deprecated-color{opacity:.5}.pulse.deprecated-color.contrast-fix{opacity:.25}.pulse:not(.deprecated-color){opacity:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCircleStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-circle-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, SiIconNextComponent, SiTranslateModule], template: "<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    class=\"bg\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [ngClass]=\"backgroundClass()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon-next class=\"status-icon\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n      <si-icon-next\n        class=\"status-icon\"\n        [ngClass]=\"iconConfig.stackedColor\"\n        [icon]=\"iconConfig.stacked\"\n      />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon-next class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon-next class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon-next class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n", styles: [":host{display:inline-block;vertical-align:middle}:host .status-indication ::ng-deep .status-icon{font-size:24px}:host .status-indication.has-icon.small ::ng-deep .status-icon,:host .status-indication.has-icon.small ::ng-deep .event-out{font-size:16px}.deprecated-dot{inline-size:10px;block-size:10px;border-radius:50%}.event-out{position:absolute;inset-block-end:-2px;inset-inline-end:-13px}.status-indication{position:relative;inline-size:40px;block-size:40px;border-radius:50%;border:1px solid transparent}.status-indication.has-icon{border-color:var(--element-ui-4);background-color:var(--element-base-1);margin-block:6px;margin-inline:0 12px}.status-indication.has-icon .deprecated-dot,.status-indication.has-icon .indicator{position:absolute}.status-indication.has-icon .deprecated-dot{inset-block-start:-2px;inset-inline-end:0}.status-indication.has-icon .indicator{inset-block-start:-9px;inset-inline-end:-13px}.status-indication.has-icon.small{inline-size:32px;block-size:32px;margin-block:4px;margin-inline:0 8px}.status-indication.has-icon.small .event-out{inset-block-end:1px;inset-inline-end:-9px}.status-indication.has-icon.small .deprecated-dot{inline-size:8px;block-size:8px;inset-block-start:-1px;inset-inline-end:-1px}.status-indication.has-icon.small .indicator{inset-block-start:-6px;inset-inline-end:-8px}.status-indication>*{pointer-events:none;line-height:0}.bg{position:absolute;inset:0;border-radius:50%;transition:opacity calc(.5s * var(--element-animations-enabled, 1));opacity:0}.pulse.deprecated-color{opacity:.5}.pulse.deprecated-color.contrast-fix{opacity:.25}.pulse:not(.deprecated-color){opacity:1}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiCircleStatusModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCircleStatusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiCircleStatusModule, imports: [SiCircleStatusComponent], exports: [SiCircleStatusComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCircleStatusModule, imports: [SiCircleStatusComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCircleStatusModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SiCircleStatusComponent],
+                    exports: [SiCircleStatusComponent]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiCircleStatusComponent, SiCircleStatusModule };
+//# sourceMappingURL=siemens-element-ng-circle-status.mjs.map

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

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

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

@@ -0,0 +1,369 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, viewChild, ElementRef, HostListener, ChangeDetectionStrategy, Component, booleanAttribute, model, viewChildren, Injectable } from '@angular/core';
+import { ModalRef, SiModalService, createModalConfig } from '@siemens/element-ng/modal';
+import { Observable } from 'rxjs';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { CdkDragHandle, moveItemInArray, CdkDrag, CdkDropList, CDK_DRAG_CONFIG } from '@angular/cdk/drag-drop';
+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 * as i2 from '@siemens/element-translate-ng/translate';
+import { SiTranslateService, SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { first } from 'rxjs/operators';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiColumnSelectionEditorComponent {
+    column = input.required();
+    selected = input.required();
+    renameInputLabel = input.required();
+    columnVisibilityConfigurable = input.required();
+    titleChange = output();
+    visibilityChange = output();
+    cdkOption = inject(CdkOption);
+    editing = false;
+    title = viewChild.required('title');
+    elementRef = inject(ElementRef);
+    icons = addIcons({
+        elementHide,
+        elementMenu,
+        elementLock,
+        elementShow
+    });
+    tryEdit(event) {
+        if (this.column().editable) {
+            event.stopPropagation();
+            this.startEdit();
+        }
+    }
+    updateTitle(value) {
+        this.column().title = value;
+        this.titleChange.emit();
+    }
+    startEdit() {
+        if (this.column().editable) {
+            this.editing = true;
+            setTimeout(() => this.title().nativeElement.focus());
+        }
+    }
+    stopEdit() {
+        this.editing = false;
+        this.elementRef.nativeElement.focus();
+    }
+    toggleVisibility() {
+        this.cdkOption.toggle();
+        // manually toggling does not emit an event, so we have to fire one
+        this.visibilityChange.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiColumnSelectionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiColumnSelectionEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-column-selection-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDragHandle, SiIconNextComponent], 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"] }]
+        }], propDecorators: { tryEdit: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+const dragConfig = {
+    dragStartThreshold: 0,
+    pointerDirectionChangeThreshold: 5,
+    zIndex: 10000
+};
+class SiColumnSelectionDialogComponent {
+    titleId = input();
+    heading = input();
+    bodyTitle = input();
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`
+     * ```
+     */
+    submitBtnName = input($localize `:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`);
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`
+     * ```
+     */
+    cancelBtnName = input($localize `:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`);
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`
+     * ```
+     */
+    restoreToDefaultBtnName = input($localize `:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`);
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`
+     * ```
+     */
+    hiddenText = input($localize `:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`);
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`
+     * ```
+     */
+    visibleText = input($localize `:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`);
+    /** @defaultValue false */
+    restoreEnabled = input(false, { transform: booleanAttribute });
+    columns = model.required();
+    /**
+     * @defaultValue
+     * ```
+     * {}
+     * ```
+     */
+    translationParams = input({});
+    /**
+     * @defaultValue
+     * ```
+     * $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.`
+     * ```
+     */
+    listAriaLabel = input($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.`);
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`
+     * ```
+     */
+    renameInputAriaLabel = input($localize `:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`);
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`
+     * ```
+     */
+    a11yItemMovedMessage = input($localize `:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`);
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`
+     * ```
+     */
+    a11yItemNotMovedMessage = input($localize `:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`);
+    /** @defaultValue true */
+    columnVisibilityConfigurable = input(true, { transform: booleanAttribute });
+    listOptions = viewChildren(CdkOption);
+    modalBodyElement = viewChild.required('modalBody');
+    tempHeaderData = [];
+    modalRef = inject((ModalRef));
+    icons = addIcons({ elementCancel });
+    visibleIds = [];
+    liveAnnouncer = inject(LiveAnnouncer);
+    translateService = inject(SiTranslateService);
+    ngOnInit() {
+        this.setupColumnData();
+    }
+    /** @internal */
+    get backupColumns() {
+        return this.tempHeaderData;
+    }
+    submitColumnSelection() {
+        this.modalRef.hide({ type: 'ok', columns: this.columns() });
+    }
+    cancelColumnSelection() {
+        this.columns.set([]);
+        this.tempHeaderData.forEach(element => this.columns.update(a => [...a, element]));
+        this.modalRef.hide({ type: 'cancel', columns: this.columns() });
+    }
+    drop(event) {
+        const columns = this.columns();
+        if (columns[event.currentIndex].draggable) {
+            moveItemInArray(columns, event.previousIndex, event.currentIndex);
+            this.emitChange();
+        }
+    }
+    restoreToDefault() {
+        this.modalRef.hidden.next({
+            type: 'restoreDefault',
+            columns: this.columns(),
+            updateColumns: columns => {
+                this.columns.set(columns);
+                this.setupColumnData();
+            }
+        });
+    }
+    moveDown(index, event) {
+        const columns = this.columns();
+        const listOptions = this.listOptions();
+        if (columns[index].draggable) {
+            let targetIndex = index + 1;
+            while (columns[targetIndex] && !columns[targetIndex].draggable) {
+                targetIndex++;
+            }
+            if (targetIndex !== index && columns[targetIndex]?.draggable) {
+                event.preventDefault();
+                moveItemInArray(columns, index, targetIndex);
+                // When moving the first partially visible item down,
+                // the browser tries to keep its position stable within the viewport by automatically scrolling down.
+                // This behavior is not wanted here, so we restore the previous scroll after moving the item
+                // TODO: check if this could be solved easier
+                if (listOptions.at(index).element.getBoundingClientRect().top <=
+                    this.modalBodyElement().nativeElement.getBoundingClientRect().top) {
+                    const previousScrollTop = this.modalBodyElement().nativeElement.scrollTop;
+                    setTimeout(() => (this.modalBodyElement().nativeElement.scrollTop = previousScrollTop));
+                }
+                // When moving the last visible element down, the scroll position is not adopted. So its scroll out of view.
+                // We correct this manually by scrolling it back into view
+                const targetElement = listOptions.at(targetIndex).element;
+                if (targetElement.getBoundingClientRect().bottom >
+                    this.modalBodyElement().nativeElement.getBoundingClientRect().bottom) {
+                    targetElement.scrollIntoView({ block: 'end' });
+                }
+                this.announceSuccessfulMove(targetIndex);
+                this.emitChange();
+            }
+            else {
+                this.announceNotSuccessfulMove();
+            }
+        }
+    }
+    moveUp(index, event) {
+        const columns = this.columns();
+        if (columns[index].draggable) {
+            let targetIndex = index - 1;
+            while (columns[targetIndex] && !columns[targetIndex].draggable) {
+                targetIndex--;
+            }
+            if (targetIndex !== index && columns[targetIndex]?.draggable) {
+                event.preventDefault();
+                moveItemInArray(columns, index, targetIndex);
+                // it seems like this is only necessary for move up. Don't know why
+                setTimeout(() => this.listOptions().at(targetIndex).focus());
+                this.announceSuccessfulMove(targetIndex);
+                this.emitChange();
+            }
+            else {
+                this.announceNotSuccessfulMove();
+            }
+        }
+    }
+    emitChange() {
+        this.modalRef.hidden.next({ type: 'instant', columns: this.columns() });
+    }
+    updateVisibility() {
+        const value = this.listOptions()
+            .filter(option => option.isSelected())
+            .map(option => option.value);
+        for (const column of this.columns()) {
+            column.visible = value.includes(column.id);
+        }
+        this.emitChange();
+    }
+    setupColumnData() {
+        const columns = this.columns();
+        this.tempHeaderData = columns.map(x => Object.assign({}, x));
+        this.visibleIds = columns.filter(column => column.visible).map(column => column.id);
+    }
+    announceSuccessfulMove(index) {
+        this.announceMove(this.a11yItemMovedMessage(), {
+            ...this.translationParams,
+            targetPosition: index + 1
+        });
+    }
+    announceNotSuccessfulMove() {
+        this.announceMove(this.a11yItemNotMovedMessage(), this.translationParams());
+    }
+    announceMove(message, translationParams) {
+        if (message) {
+            this.translateService
+                .translateAsync(message, translationParams)
+                .pipe(first())
+                .subscribe(translatedMessage => this.liveAnnouncer.announce(translatedMessage));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiColumnSelectionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.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: "19.0.6", ngImport: i0, type: SiColumnSelectionDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-column-selection-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CdkDrag,
+                        CdkDropList,
+                        CdkListbox,
+                        CdkOption,
+                        CdkScrollableModule,
+                        SiIconNextComponent,
+                        SiTranslateModule,
+                        SiColumnSelectionEditorComponent
+                    ], providers: [{ provide: CDK_DRAG_CONFIG, useValue: dragConfig }], 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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiColumnSelectionDialogService {
+    modalService = inject(SiModalService);
+    /**
+     * Opens a column selection dialog.
+     *
+     * Despite other dialogs,
+     * this dialog informs the consumer not ONLY with clicking `submit` or `cancel`,
+     * but also with changing the place or visibility of a dialog row
+     * thanks to the `instant` type of emitted event.
+     *
+     * {@label WITH_OBJECT}
+     */
+    showColumnSelectionDialog(dialogConfig, diOptions) {
+        return new Observable(subscriber => {
+            const config = createModalConfig(dialogConfig);
+            Object.assign(config, diOptions);
+            config.class += ' modal-dialog-scrollable';
+            config.keyboard = true;
+            const modalRef = this.modalService.show(SiColumnSelectionDialogComponent, config);
+            const subscription = modalRef.hidden.subscribe((confirmationResult) => {
+                const keepModalOpen = confirmationResult?.type === 'instant' || confirmationResult?.type === 'restoreDefault';
+                confirmationResult ??= { type: 'cancel', columns: modalRef.content.backupColumns };
+                subscriber.next(confirmationResult);
+                if (!keepModalOpen) {
+                    subscription.unsubscribe();
+                    subscriber.complete();
+                }
+            });
+            return () => {
+                if (!subscription.closed) {
+                    subscription.unsubscribe();
+                    modalRef.detach();
+                }
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiColumnSelectionDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiColumnSelectionDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiColumnSelectionDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiColumnSelectionDialogService };
+//# sourceMappingURL=siemens-element-ng-column-selection-dialog.mjs.map