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 { elementShow, elementLock, elementMenu, elementHide, elementCancel } from '@siemens/element-icons';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import { t, injectSiTranslateService, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
import { first } from 'rxjs/operators';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiColumnSelectionEditorComponent {
    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
    selected = input.required(...(ngDevMode ? [{ debugName: "selected" }] : []));
    renameInputLabel = input.required(...(ngDevMode ? [{ debugName: "renameInputLabel" }] : []));
    columnVisibilityConfigurable = input.required(...(ngDevMode ? [{ debugName: "columnVisibilityConfigurable" }] : []));
    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: "21.0.8", ngImport: i0, type: SiColumnSelectionEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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=\"flex-fill overflow-hidden\" [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 flex-shrink-0\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle 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-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: "21.0.8", ngImport: i0, type: SiColumnSelectionEditorComponent, decorators: [{
            type: Component,
            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=\"flex-fill overflow-hidden\" [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 flex-shrink-0\">\n    @if (columnVisibilityConfigurable()) {\n      <span\n        class=\"btn btn-circle 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-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: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: true }] }], renameInputLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "renameInputLabel", required: true }] }], columnVisibilityConfigurable: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibilityConfigurable", required: true }] }], titleChange: [{ type: i0.Output, args: ["titleChange"] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }], title: [{ type: i0.ViewChild, args: ['title', { isSignal: true }] }], tryEdit: [{
                type: HostListener,
                args: ['keydown.enter', ['$event']]
            }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
const dragConfig = {
    dragStartThreshold: 0,
    pointerDirectionChangeThreshold: 5,
    zIndex: 10000
};
class SiColumnSelectionDialogComponent {
    titleId = input(...(ngDevMode ? [undefined, { debugName: "titleId" }] : []));
    heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
    bodyTitle = input(...(ngDevMode ? [undefined, { debugName: "bodyTitle" }] : []));
    /**
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`)
     * ```
     */
    submitBtnName = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.SUBMIT:Apply`), ...(ngDevMode ? [{ debugName: "submitBtnName" }] : []));
    /**
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`)
     * ```
     */
    cancelBtnName = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.CANCEL:Cancel`), ...(ngDevMode ? [{ debugName: "cancelBtnName" }] : []));
    /**
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`)
     * ```
     */
    restoreToDefaultBtnName = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT:Restore to default`), ...(ngDevMode ? [{ debugName: "restoreToDefaultBtnName" }] : []));
    /**
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`)
     * ```
     */
    hiddenText = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.HIDDEN:Hidden`), ...(ngDevMode ? [{ debugName: "hiddenText" }] : []));
    /**
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`)
     * ```
     */
    visibleText = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.VISIBLE:Visible`), ...(ngDevMode ? [{ debugName: "visibleText" }] : []));
    /** @defaultValue false */
    restoreEnabled = input(false, { ...(ngDevMode ? { debugName: "restoreEnabled" } : {}), transform: booleanAttribute });
    columns = model.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
    /**
     * @defaultValue
     * ```
     * {}
     * ```
     */
    translationParams = input({}, ...(ngDevMode ? [{ debugName: "translationParams" }] : []));
    /**
     * @defaultValue
     * ```
     * 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.`)
     * ```
     */
    listAriaLabel = input(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.`), ...(ngDevMode ? [{ debugName: "listAriaLabel" }] : []));
    /**
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`)
     * ```
     */
    renameInputAriaLabel = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL:Rename column`), ...(ngDevMode ? [{ debugName: "renameInputAriaLabel" }] : []));
    /**
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`)
     * ```
     */
    a11yItemMovedMessage = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED:Item is now at position {{targetPosition}}`), ...(ngDevMode ? [{ debugName: "a11yItemMovedMessage" }] : []));
    /**
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`)
     * ```
     */
    a11yItemNotMovedMessage = input(t(() => $localize `:@@SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED:Item was not moved`), ...(ngDevMode ? [{ debugName: "a11yItemNotMovedMessage" }] : []));
    /** @defaultValue true */
    columnVisibilityConfigurable = input(true, { ...(ngDevMode ? { debugName: "columnVisibilityConfigurable" } : {}), transform: booleanAttribute });
    listOptions = viewChildren(CdkOption, ...(ngDevMode ? [{ debugName: "listOptions" }] : []));
    modalBodyElement = viewChild.required('modalBody');
    tempHeaderData = [];
    modalRef = inject((ModalRef));
    icons = addIcons({ elementCancel });
    visibleIds = [];
    liveAnnouncer = inject(LiveAnnouncer);
    translateService = injectSiTranslateService();
    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: "21.0.8", ngImport: i0, type: SiColumnSelectionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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-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", "cdkDropListHasAnchor"], 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: "component", type: SiColumnSelectionEditorComponent, selector: "si-column-selection-editor", inputs: ["column", "selected", "renameInputLabel", "columnVisibilityConfigurable"], outputs: ["titleChange", "visibilityChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColumnSelectionDialogComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-column-selection-dialog', imports: [
                        CdkDrag,
                        CdkDropList,
                        CdkListbox,
                        CdkOption,
                        CdkScrollableModule,
                        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-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"] }]
        }], propDecorators: { titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], bodyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyTitle", required: false }] }], submitBtnName: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitBtnName", required: false }] }], cancelBtnName: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelBtnName", required: false }] }], restoreToDefaultBtnName: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreToDefaultBtnName", required: false }] }], hiddenText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenText", required: false }] }], visibleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleText", required: false }] }], restoreEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreEnabled", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }, { type: i0.Output, args: ["columnsChange"] }], translationParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationParams", required: false }] }], listAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "listAriaLabel", required: false }] }], renameInputAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "renameInputAriaLabel", required: false }] }], a11yItemMovedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "a11yItemMovedMessage", required: false }] }], a11yItemNotMovedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "a11yItemNotMovedMessage", required: false }] }], columnVisibilityConfigurable: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibilityConfigurable", required: false }] }], listOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CdkOption), { isSignal: true }] }], modalBodyElement: [{ type: i0.ViewChild, args: ['modalBody', { isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * 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: "21.0.8", ngImport: i0, type: SiColumnSelectionDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColumnSelectionDialogService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiColumnSelectionDialogService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SiColumnSelectionDialogService };
//# sourceMappingURL=siemens-element-ng-column-selection-dialog.mjs.map
