import * as i0 from '@angular/core';
import { Directive, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, EventEmitter, inject, effect, booleanAttribute, HostBinding, ContentChild, Output, Input, DestroyRef, ContentChildren, NgModule } from '@angular/core';
import { NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
import { FilterStringsPipe } from '@fundamental-ngx/cdk/utils';
import { ButtonBarComponent, BarComponent, BarLeftDirective, BarElementDirective, BarRightDirective } from '@fundamental-ngx/core/bar';
import { ButtonComponent } from '@fundamental-ngx/core/button';
import * as i1 from '@fundamental-ngx/core/dialog';
import { DialogComponent, DialogHeaderComponent, DialogBodyComponent, DialogFooterComponent } from '@fundamental-ngx/core/dialog';
import { FD_DYNAMIC_PAGE } from '@fundamental-ngx/core/dynamic-page';
import { ListComponent, ListItemComponent, ListLinkDirective, ListTitleDirective } from '@fundamental-ngx/core/list';
import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent, PopoverBodyHeaderDirective, PopoverBodyFooterDirective } from '@fundamental-ngx/core/popover';
import { TitleComponent } from '@fundamental-ngx/core/title';
import { FdTranslatePipe } from '@fundamental-ngx/i18n';
import { FDP_DYNAMIC_PAGE } from '@fundamental-ngx/platform/dynamic-page';
import { SearchFieldComponent } from '@fundamental-ngx/platform/search-field';
import equal from 'fast-deep-equal';
import { BehaviorSubject, startWith, filter, Subscription } from 'rxjs';
import { CdkScrollable } from '@angular/cdk/overlay';
import * as i2 from '@angular/forms';
import { Validators, FormsModule, ReactiveFormsModule, FormGroupDirective } from '@angular/forms';
import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
import { FormGroupComponent, FormFieldComponent, InputComponent, CheckboxComponent, FormFieldErrorDirective } from '@fundamental-ngx/platform/form';
import { IconComponent } from '@fundamental-ngx/core/icon';
import { RadioButtonComponent } from '@fundamental-ngx/core/radio';
import { ArrayTableDataProvider, TableDataSource, TableComponent, TableColumnComponent } from '@fundamental-ngx/platform/table';
import { TableInitialStateDirective, FdpCellDef, FdpTableCell, TableDataSourceDirective, TableHeaderResizerDirective } from '@fundamental-ngx/platform/table-helpers';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FDP_PRESET_MANAGED_COMPONENT } from '@fundamental-ngx/platform/shared';

/**
 * Directive used to change dirty label of Variant Management component.
 *
 * Usage:
 *
 * ```
 * html
 * <fdp-variant-management>
 *     <span *fdpVariantManagementDirtyLabel>I'm dirty</span>
 * </fdp-variant-management>
 * ```
 */
class VariantManagementDirtyLabelDirective {
    /** @hidden */
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VariantManagementDirtyLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: VariantManagementDirtyLabelDirective, isStandalone: true, selector: "[fdpVariantManagementDirtyLabel]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VariantManagementDirtyLabelDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdpVariantManagementDirtyLabel]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }] });

class ManageVariantItemComponent {
    /** @hidden */
    constructor(dialog, _formBuilder) {
        this.dialog = dialog;
        this._formBuilder = _formBuilder;
        this._dialogConfig = this.dialog.data;
        this._nameValidator = [this._variantNameValidator(this._dialogConfig)];
        this._form = this._formBuilder.group({
            name: [
                this._dialogConfig.currentVariantName,
                [Validators.required, this._variantNameValidator(this._dialogConfig)]
            ],
            isDefault: false,
            access: 'private',
            applyAutomatically: false,
            readonly: false,
            favourite: false
        });
    }
    /** @Hidden */
    _submitForm() {
        this._formContainer.onSubmit(new Event('submit'));
        if (!this._form.valid) {
            return;
        }
        this.dialog.close(this._form.value);
    }
    /** @hidden */
    _variantNameValidator(data) {
        return (control) => data.existingVariantNames.includes(control.value) ? { nameTaken: true } : null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ManageVariantItemComponent, deps: [{ token: i1.DialogRef }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ManageVariantItemComponent, isStandalone: true, selector: "fdp-manage-variant-item", viewQueries: [{ propertyName: "_formContainer", first: true, predicate: ["formContainer"], descendants: true, read: FormGroupDirective }], ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <h1 fd-title>{{ 'platformVariantManagement.saveView' | fdTranslate }}</h1>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        <fdp-form-group #formContainer [formGroup]=\"_form\" [unifiedLayout]=\"false\" [useForm]=\"true\">\n            <fdp-form-field\n                id=\"name\"\n                [label]=\"'platformVariantManagement.view' | fdTranslate\"\n                [column]=\"1\"\n                [rank]=\"1\"\n                [required]=\"true\"\n                [validators]=\"_nameValidator\"\n                [labelColumnLayout]=\"{ S: 12 }\"\n                [fieldColumnLayout]=\"{ S: 12 }\"\n                [gapColumnLayout]=\"{ S: 12 }\"\n            >\n                <fdp-input name=\"name\" formControlName=\"name\"></fdp-input>\n            </fdp-form-field>\n            <fdp-form-field\n                id=\"isDefault\"\n                [noLabelLayout]=\"true\"\n                [labelColumnLayout]=\"{ S: 12 }\"\n                [fieldColumnLayout]=\"{ S: 12 }\"\n                [gapColumnLayout]=\"{ S: 12 }\"\n            >\n                <fdp-checkbox\n                    name=\"isDefault\"\n                    formControlName=\"isDefault\"\n                    [label]=\"'platformVariantManagement.setAsDefault' | fdTranslate\"\n                ></fdp-checkbox>\n            </fdp-form-field>\n            <fdp-form-field\n                id=\"access\"\n                [noLabelLayout]=\"true\"\n                [labelColumnLayout]=\"{ S: 12 }\"\n                [fieldColumnLayout]=\"{ S: 12 }\"\n                [gapColumnLayout]=\"{ S: 12 }\"\n            >\n                <fdp-checkbox\n                    [values]=\"{ trueValue: 'public', falseValue: 'private' }\"\n                    name=\"access\"\n                    formControlName=\"access\"\n                    [label]=\"'platformVariantManagement.public' | fdTranslate\"\n                ></fdp-checkbox>\n            </fdp-form-field>\n            <fdp-form-field\n                id=\"applyAutomatically\"\n                [noLabelLayout]=\"true\"\n                [labelColumnLayout]=\"{ S: 12 }\"\n                [fieldColumnLayout]=\"{ S: 12 }\"\n                [gapColumnLayout]=\"{ S: 12 }\"\n            >\n                <fdp-checkbox\n                    name=\"applyAutomatically\"\n                    formControlName=\"applyAutomatically\"\n                    [label]=\"'platformVariantManagement.applyAutomatically' | fdTranslate\"\n                ></fdp-checkbox>\n            </fdp-form-field>\n            <span *fdpFormFieldError=\"'required'\">\n                {{ 'platformVariantManagement.requiredFieldError' | fdTranslate }}\n            </span>\n            <span *fdpFormFieldError=\"'nameTaken'\">\n                {{ 'platformVariantManagement.nameTakenFieldError' | fdTranslate }}\n            </span>\n        </fdp-form-group>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformVariantManagement.save' | fdTranslate\"\n            (click)=\"_submitForm()\"\n            ariaLabel=\"Interested Emphasized\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            [label]=\"'platformVariantManagement.cancel' | fdTranslate\"\n            (click)=\"dialog.dismiss('Cancel')\"\n            ariaLabel=\"Cancel\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: FormGroupComponent, selector: "fdp-form-group", inputs: ["id", "name", "editable", "noLabelLayout", "class", "hint", "inlineColumnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "formGroup", "topTitle", "mainTitle", "hideMainTItle", "object", "i18Strings", "useForm", "columnLayout", "unifiedLayout"], outputs: ["onSubmit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "fdp-form-field", inputs: ["label", "id", "hint", "noLabelLayout", "validators", "rank", "placeholder", "column", "columnLayout", "labelColumnLayout", "fieldColumnLayout", "gapColumnLayout", "i18Strings", "required", "editable", "columns", "disabled", "colon", "formGroupContainer"], outputs: ["onChange", "onColumnChange"] }, { kind: "component", type: InputComponent, selector: "fdp-input", inputs: ["type", "required", "value"], outputs: ["focusChange"] }, { kind: "component", type: CheckboxComponent, selector: "fdp-checkbox", inputs: ["title", "label", "tristate", "checked", "tristateSelectable", "values", "standalone", "displayOnly"], outputs: ["checkedChange"] }, { kind: "directive", type: FormFieldErrorDirective, selector: "[fdpFormFieldError]", inputs: ["fdpFormFieldErrorAs", "fdpFormFieldError", "fdpFormFieldErrorType"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ManageVariantItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fdp-manage-variant-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        DialogComponent,
                        DialogHeaderComponent,
                        TitleComponent,
                        CdkScrollable,
                        ScrollbarDirective,
                        DialogBodyComponent,
                        FormGroupComponent,
                        FormsModule,
                        ReactiveFormsModule,
                        FormFieldComponent,
                        InputComponent,
                        CheckboxComponent,
                        FormFieldErrorDirective,
                        DialogFooterComponent,
                        ButtonBarComponent,
                        FdTranslatePipe
                    ], template: "<fd-dialog>\n    <fd-dialog-header>\n        <h1 fd-title>{{ 'platformVariantManagement.saveView' | fdTranslate }}</h1>\n    </fd-dialog-header>\n\n    <fd-dialog-body>\n        <fdp-form-group #formContainer [formGroup]=\"_form\" [unifiedLayout]=\"false\" [useForm]=\"true\">\n            <fdp-form-field\n                id=\"name\"\n                [label]=\"'platformVariantManagement.view' | fdTranslate\"\n                [column]=\"1\"\n                [rank]=\"1\"\n                [required]=\"true\"\n                [validators]=\"_nameValidator\"\n                [labelColumnLayout]=\"{ S: 12 }\"\n                [fieldColumnLayout]=\"{ S: 12 }\"\n                [gapColumnLayout]=\"{ S: 12 }\"\n            >\n                <fdp-input name=\"name\" formControlName=\"name\"></fdp-input>\n            </fdp-form-field>\n            <fdp-form-field\n                id=\"isDefault\"\n                [noLabelLayout]=\"true\"\n                [labelColumnLayout]=\"{ S: 12 }\"\n                [fieldColumnLayout]=\"{ S: 12 }\"\n                [gapColumnLayout]=\"{ S: 12 }\"\n            >\n                <fdp-checkbox\n                    name=\"isDefault\"\n                    formControlName=\"isDefault\"\n                    [label]=\"'platformVariantManagement.setAsDefault' | fdTranslate\"\n                ></fdp-checkbox>\n            </fdp-form-field>\n            <fdp-form-field\n                id=\"access\"\n                [noLabelLayout]=\"true\"\n                [labelColumnLayout]=\"{ S: 12 }\"\n                [fieldColumnLayout]=\"{ S: 12 }\"\n                [gapColumnLayout]=\"{ S: 12 }\"\n            >\n                <fdp-checkbox\n                    [values]=\"{ trueValue: 'public', falseValue: 'private' }\"\n                    name=\"access\"\n                    formControlName=\"access\"\n                    [label]=\"'platformVariantManagement.public' | fdTranslate\"\n                ></fdp-checkbox>\n            </fdp-form-field>\n            <fdp-form-field\n                id=\"applyAutomatically\"\n                [noLabelLayout]=\"true\"\n                [labelColumnLayout]=\"{ S: 12 }\"\n                [fieldColumnLayout]=\"{ S: 12 }\"\n                [gapColumnLayout]=\"{ S: 12 }\"\n            >\n                <fdp-checkbox\n                    name=\"applyAutomatically\"\n                    formControlName=\"applyAutomatically\"\n                    [label]=\"'platformVariantManagement.applyAutomatically' | fdTranslate\"\n                ></fdp-checkbox>\n            </fdp-form-field>\n            <span *fdpFormFieldError=\"'required'\">\n                {{ 'platformVariantManagement.requiredFieldError' | fdTranslate }}\n            </span>\n            <span *fdpFormFieldError=\"'nameTaken'\">\n                {{ 'platformVariantManagement.nameTakenFieldError' | fdTranslate }}\n            </span>\n        </fdp-form-group>\n    </fd-dialog-body>\n\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformVariantManagement.save' | fdTranslate\"\n            (click)=\"_submitForm()\"\n            ariaLabel=\"Interested Emphasized\"\n        ></fd-button-bar>\n\n        <fd-button-bar\n            [label]=\"'platformVariantManagement.cancel' | fdTranslate\"\n            (click)=\"dialog.dismiss('Cancel')\"\n            ariaLabel=\"Cancel\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n" }]
        }], ctorParameters: () => [{ type: i1.DialogRef }, { type: i2.FormBuilder }], propDecorators: { _formContainer: [{
                type: ViewChild,
                args: ['formContainer', { read: FormGroupDirective }]
            }] } });

class VariantManagementDataProvider extends ArrayTableDataProvider {
    /** @hidden */
    constructor(items) {
        super(items);
    }
    /** Updates items list. */
    update(items) {
        this.items$.next(items);
    }
}

class ManageVariantsDialogComponent {
    /** @hidden */
    constructor(dialog, _cdr) {
        this.dialog = dialog;
        this._cdr = _cdr;
        /** @hidden */
        this._variants = [];
        // We clone all variants, so we don't change original instances immediately.
        this._variants = this.dialog.data.map((oldVariant) => oldVariant.clone({}, false));
        this._dataProvider = new VariantManagementDataProvider(this._variants);
        this._source = new TableDataSource(this._dataProvider);
    }
    /** @Hidden */
    _markAsFavourite(item) {
        item.favourite = !item.favourite;
    }
    /** @hidden */
    _removeVariant(item) {
        this._variants.splice(this._variants.findIndex((variant) => item.id === variant.id), 1);
        this._dataProvider.update(this._variants);
        this._cdr.detectChanges();
    }
    /**
     * @hidden
     * Closes dialog with updated variants array.
     */
    _saveVariants() {
        this.dialog.close(this._variants);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ManageVariantsDialogComponent, deps: [{ token: i1.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ManageVariantsDialogComponent, isStandalone: true, selector: "fdp-manage-variants-dialog", ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <h1 id=\"fd-dialog-header-1\" fd-title>\n            {{ 'platformVariantManagement.manageViews' | fdTranslate }}\n        </h1>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        <fdp-table [dataSource]=\"_source\" [noVerticalBorders]=\"true\" class=\"fd-variant-management__table\">\n            <fdp-column name=\"favourite\" key=\"favourite\">\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    <fd-icon\n                        class=\"fd-variant-management__favourite-state\"\n                        [class.fd-variant-management__favourite-state--active]=\"item.favourite\"\n                        [ariaLabel]=\"'platformVariantManagement.markAsFavourite' | fdTranslate\"\n                        tabindex=\"0\"\n                        (click)=\"_markAsFavourite(item)\"\n                        glyph=\"favorite\"\n                    ></fd-icon>\n                </fdp-table-cell>\n            </fdp-column>\n            <fdp-column [label]=\"'platformVariantManagement.view' | fdTranslate\" name=\"name\" key=\"name\">\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    @if (!item.readonly) {\n                        <fdp-input [(ngModel)]=\"item.name\"></fdp-input>\n                    } @else {\n                        {{ item.name }}\n                    }\n                </fdp-table-cell>\n            </fdp-column>\n            <fdp-column [label]=\"'platformVariantManagement.sharing' | fdTranslate\" name=\"access\" key=\"access\">\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    {{\n                        (item.access === 'public'\n                            ? 'platformVariantManagement.access.public'\n                            : 'platformVariantManagement.access.private'\n                        ) | fdTranslate\n                    }}\n                </fdp-table-cell>\n            </fdp-column>\n            <fdp-column\n                [label]=\"'platformVariantManagement.default' | fdTranslate\"\n                name=\"isDefault\"\n                key=\"isDefault\"\n                align=\"center\"\n            >\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    <fd-radio-button\n                        [value]=\"true\"\n                        [id]=\"'radio-' + item.id\"\n                        name=\"is-variant-default\"\n                        [(ngModel)]=\"item.isDefault\"\n                    ></fd-radio-button>\n                </fdp-table-cell>\n            </fdp-column>\n            <fdp-column\n                [label]=\"'platformVariantManagement.applyAutomatically' | fdTranslate\"\n                name=\"applyAutomatically\"\n                key=\"applyAutomatically\"\n                align=\"center\"\n            >\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    <fdp-checkbox\n                        class=\"fd-variant-management__centered-checkbox\"\n                        [standalone]=\"true\"\n                        name=\"applyAutomatically\"\n                        [(ngModel)]=\"item.applyAutomatically\"\n                    ></fdp-checkbox>\n                </fdp-table-cell>\n            </fdp-column>\n            <fdp-column\n                [label]=\"'platformVariantManagement.createdBy' | fdTranslate\"\n                name=\"createdBy\"\n                key=\"createdBy\"\n            ></fdp-column>\n            <fdp-column name=\"actions\">\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    @if (!item.readonly) {\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            glyph=\"decline\"\n                            [title]=\"'platformVariantManagement.removeVariant' | fdTranslate\"\n                            (click)=\"_removeVariant(item)\"\n                        ></button>\n                    }\n                </fdp-table-cell>\n            </fdp-column>\n        </fdp-table>\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformVariantManagement.save' | fdTranslate\"\n            (click)=\"_saveVariants()\"\n            ariaLabel=\"Interested Emphasized\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformVariantManagement.cancel' | fdTranslate\"\n            (click)=\"dialog.dismiss('Cancel')\"\n            [ariaLabel]=\"'platformVariantManagement.cancel' | fdTranslate\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: TableComponent, selector: "fdp-table", inputs: ["name", "id", "enableDragResize", "fixed", "freezeColumnsTo", "freezeEndColumnsTo", "pageScrolling", "showGrowingButton", "showItemsCount", "pageSize", "pageScrollingThreshold", "bodyHeight", "emptyTableMessage", "noVisibleColumnsMessage", "noHorizontalBorders", "outerScroll", "noVerticalBorders", "noBorders", "noBodyBorders", "noOuterBorders", "noBorderX", "noBorderY", "relationKey", "expandedStateKey", "hasChildrenKey", "rowNavigatable", "highlightNavigatedRow", "rowsActivable", "selectedKey", "selectableKey", "trackBy", "rowComparator", "rowsClass", "editableRowSkeleton", "expandOnInit", "rowHeight", "secondaryRowHeight", "loadPagesBefore", "nonInteractiveHeader", "selectionMode", "enableTristateMode", "semanticHighlighting", "forceCheckedAllState", "ariaLabelledBy", "minimumColumnWidth", "showTableFooter", "nonFrozenColumnsMinWidth", "loading"], outputs: ["presetChanged", "rowSelectionChange", "sortChange", "filterChange", "groupChange", "columnsChange", "pageChange", "columnFreeze", "rowToggleOpenState", "cellActivate", "rowActivate", "rowNavigate", "emptyRowAdded", "save", "cancel", "tableScrolled", "tableRowsSet", "allRowsExpanded", "allRowsCollapsed", "cellFocused"] }, { kind: "directive", type: TableInitialStateDirective, selector: "[fdpTableInitialState],    fdp-table", inputs: ["initialVisibleColumns", "initialSortBy", "initialFilterBy", "initialGroupBy", "initialPage", "state"] }, { kind: "component", type: TableColumnComponent, selector: "fdp-column", inputs: ["name", "key", "label", "footerLabel", "footerCellTemplate", "align", "sortable", "filterable", "visible", "dataType", "filterSelectOptions", "groupable", "freezable", "endFreezable", "nonInteractive", "width", "noWrap", "applyText", "role", "announceEmptyCell"] }, { kind: "directive", type: FdpCellDef, selector: "[fdpCellDef]", inputs: ["fdpCellDefAs"] }, { kind: "directive", type: FdpTableCell, selector: "fdp-table-cell" }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "component", type: InputComponent, selector: "fdp-input", inputs: ["type", "required", "value"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "readOnly", "selectedValue", "name", "id", "value", "required", "standalone", "wrapLabel", "valignLabel"] }, { kind: "component", type: CheckboxComponent, selector: "fdp-checkbox", inputs: ["title", "label", "tristate", "checked", "tristateSelectable", "values", "standalone", "displayOnly"], outputs: ["checkedChange"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ManageVariantsDialogComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fdp-manage-variants-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        DialogComponent,
                        DialogHeaderComponent,
                        TitleComponent,
                        CdkScrollable,
                        ScrollbarDirective,
                        DialogBodyComponent,
                        TableDataSourceDirective,
                        TableHeaderResizerDirective,
                        TableComponent,
                        TableInitialStateDirective,
                        TableColumnComponent,
                        FdpCellDef,
                        FdpTableCell,
                        IconComponent,
                        InputComponent,
                        FormsModule,
                        RadioButtonComponent,
                        CheckboxComponent,
                        ButtonComponent,
                        DialogFooterComponent,
                        ButtonBarComponent,
                        FdTranslatePipe
                    ], template: "<fd-dialog>\n    <fd-dialog-header>\n        <h1 id=\"fd-dialog-header-1\" fd-title>\n            {{ 'platformVariantManagement.manageViews' | fdTranslate }}\n        </h1>\n    </fd-dialog-header>\n    <fd-dialog-body>\n        <fdp-table [dataSource]=\"_source\" [noVerticalBorders]=\"true\" class=\"fd-variant-management__table\">\n            <fdp-column name=\"favourite\" key=\"favourite\">\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    <fd-icon\n                        class=\"fd-variant-management__favourite-state\"\n                        [class.fd-variant-management__favourite-state--active]=\"item.favourite\"\n                        [ariaLabel]=\"'platformVariantManagement.markAsFavourite' | fdTranslate\"\n                        tabindex=\"0\"\n                        (click)=\"_markAsFavourite(item)\"\n                        glyph=\"favorite\"\n                    ></fd-icon>\n                </fdp-table-cell>\n            </fdp-column>\n            <fdp-column [label]=\"'platformVariantManagement.view' | fdTranslate\" name=\"name\" key=\"name\">\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    @if (!item.readonly) {\n                        <fdp-input [(ngModel)]=\"item.name\"></fdp-input>\n                    } @else {\n                        {{ item.name }}\n                    }\n                </fdp-table-cell>\n            </fdp-column>\n            <fdp-column [label]=\"'platformVariantManagement.sharing' | fdTranslate\" name=\"access\" key=\"access\">\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    {{\n                        (item.access === 'public'\n                            ? 'platformVariantManagement.access.public'\n                            : 'platformVariantManagement.access.private'\n                        ) | fdTranslate\n                    }}\n                </fdp-table-cell>\n            </fdp-column>\n            <fdp-column\n                [label]=\"'platformVariantManagement.default' | fdTranslate\"\n                name=\"isDefault\"\n                key=\"isDefault\"\n                align=\"center\"\n            >\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    <fd-radio-button\n                        [value]=\"true\"\n                        [id]=\"'radio-' + item.id\"\n                        name=\"is-variant-default\"\n                        [(ngModel)]=\"item.isDefault\"\n                    ></fd-radio-button>\n                </fdp-table-cell>\n            </fdp-column>\n            <fdp-column\n                [label]=\"'platformVariantManagement.applyAutomatically' | fdTranslate\"\n                name=\"applyAutomatically\"\n                key=\"applyAutomatically\"\n                align=\"center\"\n            >\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    <fdp-checkbox\n                        class=\"fd-variant-management__centered-checkbox\"\n                        [standalone]=\"true\"\n                        name=\"applyAutomatically\"\n                        [(ngModel)]=\"item.applyAutomatically\"\n                    ></fdp-checkbox>\n                </fdp-table-cell>\n            </fdp-column>\n            <fdp-column\n                [label]=\"'platformVariantManagement.createdBy' | fdTranslate\"\n                name=\"createdBy\"\n                key=\"createdBy\"\n            ></fdp-column>\n            <fdp-column name=\"actions\">\n                <fdp-table-cell *fdpCellDef=\"let item; as: _variantModel\">\n                    @if (!item.readonly) {\n                        <button\n                            fd-button\n                            fdType=\"transparent\"\n                            glyph=\"decline\"\n                            [title]=\"'platformVariantManagement.removeVariant' | fdTranslate\"\n                            (click)=\"_removeVariant(item)\"\n                        ></button>\n                    }\n                </fdp-table-cell>\n            </fdp-column>\n        </fdp-table>\n    </fd-dialog-body>\n    <fd-dialog-footer>\n        <fd-button-bar\n            fdType=\"emphasized\"\n            [label]=\"'platformVariantManagement.save' | fdTranslate\"\n            (click)=\"_saveVariants()\"\n            ariaLabel=\"Interested Emphasized\"\n        ></fd-button-bar>\n        <fd-button-bar\n            [label]=\"'platformVariantManagement.cancel' | fdTranslate\"\n            (click)=\"dialog.dismiss('Cancel')\"\n            [ariaLabel]=\"'platformVariantManagement.cancel' | fdTranslate\"\n        ></fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n" }]
        }], ctorParameters: () => [{ type: i1.DialogRef }, { type: i0.ChangeDetectorRef }] });

const FDP_VARIANT_MANAGEMENT_WRAPPER = new InjectionToken('FdpVariantManagementWrapper');
const FDP_VARIANT_MANAGEMENT = new InjectionToken('FdpVariantManagement');

let defaultVariantId = 0;
class VariantItem {
    /** @hidden */
    constructor(config) {
        /** Visibility of the variant. If public, available for everyone. */
        this.access = 'public';
        /** Whether to automatically apply changes in preset managed component. */
        this.applyAutomatically = false;
        /** Whether variant is marked as favourite. */
        this.favourite = false;
        /** Variant ID. */
        this.id = `variant-item-${++defaultVariantId}`;
        /** Whether to apply variant automatically. */
        this.isDefault = false;
        /** Whether variant is editable. */
        this.readonly = false;
        Object.keys(config).forEach((configKey) => {
            this[configKey] = config[configKey];
        });
    }
    /**
     * Clones current variant and applies new config on top of it.
     * @param newVariantData New config.
     * @param refreshId Whether to assign new ID to the new variant.
     */
    clone(newVariantData = {}, refreshId = true) {
        const currentVariantData = Object.assign({}, this, newVariantData);
        currentVariantData.data = structuredClone(currentVariantData.data);
        if (refreshId) {
            delete currentVariantData.id;
        }
        const newVariant = new VariantItem(currentVariantData);
        return newVariant;
    }
}

class VariantManagementComponent {
    /** Initial variants array. */
    set variants(items) {
        this._variants = this._transformVariants(items);
        let currentVariantIndex = this._variants.findIndex((variant) => variant.isDefault);
        currentVariantIndex = currentVariantIndex > -1 ? currentVariantIndex : 0;
        const currentVariant = this._variants[currentVariantIndex];
        this.selectVariant(currentVariant);
    }
    /** @hidden */
    get _dynamicPage() {
        return this._coreDynamicPage || this._platformDynamicPage;
    }
    /** @hidden */
    constructor(_dialogService, _cdr) {
        this._dialogService = _dialogService;
        this._cdr = _cdr;
        /** Header size. */
        this.headerSize = 4;
        /** Popover trigger events. */
        this.popoverTriggers = [
            { trigger: 'click', stopPropagation: true, closeAction: true, openAction: true }
        ];
        /** Whether to display search field for variants list. */
        this.displaySearch = false;
        /** Whether the variant management component is in readonly mode. */
        this.readonly = false;
        /** Event emitted when variants data has been updated. */
        this.variantsChange = new EventEmitter();
        /** Event emitted when new variant selected. */
        this.activeVariantChange = new EventEmitter();
        /** @hidden */
        this._initialClass = 'fd-variant-management';
        /**
         * Used internally for communicating with wrapper component.
         */
        this.activeVariantChangeSubject = new BehaviorSubject(null);
        /** @hidden */
        this._variantChanged = false;
        /** @hidden */
        this._variants = [];
        /** @Hidden */
        this._filterPhrase = null;
        /** @hidden */
        this._dynamicPageCollapsed$ = new BehaviorSubject(false);
        /** @hidden */
        this._coreDynamicPage = inject(FD_DYNAMIC_PAGE, { optional: true });
        /** @hidden */
        this._platformDynamicPage = inject(FDP_DYNAMIC_PAGE, { optional: true });
        if (this._dynamicPage) {
            effect(() => {
                this._dynamicPageCollapsed$.next(this._dynamicPage.collapsed());
            });
        }
    }
    /**
     * Manually select variant.
     * @param variant Variant to select.
     */
    selectVariant(variant) {
        this._variantChanged = false;
        this.activeVariant = variant;
        this._originalActiveVariant = variant.clone({}, false);
        this.activeVariantChange.emit(variant);
        this.activeVariantChangeSubject.next(variant);
    }
    /** Returns original variant data. */
    getOriginalActiveVariantData() {
        return this._originalActiveVariant.data;
    }
    /** Returns current active variant data with applied changes. */
    getActiveVariantData() {
        return this.activeVariant.data;
    }
    /**
     * Saves current variant with its configuration.
     */
    saveCurrentVariant() {
        if (this.readonly) {
            return;
        }
        const currentVariantIndex = this._variants.findIndex((variant) => variant.id === this.activeVariant.id);
        this._variants[currentVariantIndex] = this.activeVariant;
        this._originalActiveVariant = this.activeVariant.clone({}, false);
        this._variantChanged = false;
        this.variantsChange.emit(this._variants);
    }
    /** @hidden */
    _openSaveDialog() {
        if (this.readonly) {
            return;
        }
        this._popover?.close(false);
        const dialogRef = this._dialogService.open(ManageVariantItemComponent, {
            data: {
                existingVariantNames: this._variants.map((variant) => variant.name),
                currentVariantName: this.activeVariant.name
            }
        });
        dialogRef.afterClosed.subscribe({
            next: (result) => {
                const newVariant = this.activeVariant.clone({ ...result, ...{ createdBy: this.userName } });
                this._variants.push(newVariant);
                this.variantsChange.emit(this._variants);
                this.activeVariant = newVariant;
                this._variantChanged = false;
                this._cdr.detectChanges();
            },
            error: () => { }
        });
    }
    /**
     * Updates current active preset with new configuration.
     * @param preset Preset configuration.
     * @param componentName component to which this preset belongs to.
     */
    updateActivePreset(preset, componentName) {
        const activeVariantData = this._originalActiveVariant.data[componentName];
        this._variantChanged = activeVariantData && !equal(preset, activeVariantData);
        this.activeVariant.data[componentName] = preset;
        this._cdr.detectChanges();
    }
    /** @hidden */
    _openManageDialog() {
        if (this.readonly) {
            return;
        }
        this._popover?.close(false);
        const dialogRef = this._dialogService.open(ManageVariantsDialogComponent, {
            data: this._variants
        });
        dialogRef.afterClosed.subscribe({
            next: (variants) => {
                this._variants = variants;
                this.variantsChange.emit(this._variants);
            },
            error: () => { }
        });
    }
    /** @hidden */
    _onSearchSubmit(search) {
        this._filterPhrase = search.text;
        this._cdr.detectChanges();
    }
    /** @hidden */
    _cancelSearch() {
        this._filterPhrase = null;
        this._cdr.detectChanges();
    }
    /** @Hidden */
    _trackFn(index, item) {
        return item.id;
    }
    /** @hidden */
    _transformVariants(items) {
        return items.map((variant) => new VariantItem(variant));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VariantManagementComponent, deps: [{ token: i1.DialogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: VariantManagementComponent, isStandalone: true, selector: "fdp-variant-management", inputs: { variants: "variants", headerSize: "headerSize", popoverTriggers: "popoverTriggers", userName: "userName", displaySearch: ["displaySearch", "displaySearch", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute] }, outputs: { variantsChange: "variantsChange", activeVariantChange: "activeVariantChange" }, host: { properties: { "class": "this._initialClass" } }, providers: [
            {
                provide: FDP_VARIANT_MANAGEMENT,
                useExisting: VariantManagementComponent
            }
        ], queries: [{ propertyName: "dirtyLabel", first: true, predicate: VariantManagementDirtyLabelDirective, descendants: true }], viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "@if (activeVariant) {\n    <fd-popover\n        #popover\n        placement=\"bottom\"\n        [noArrow]=\"false\"\n        [focusAutoCapture]=\"true\"\n        [focusTrapped]=\"true\"\n        additionalBodyClass=\"fd-variant-management__popover-body\"\n        [triggers]=\"popoverTriggers\"\n    >\n        <fd-popover-control>\n            <div class=\"fd-variant-management__header\">\n                <h4\n                    fd-title\n                    [ngClass]=\"{\n                        'fd-variant-management__title': true,\n                        'fd-variant-management__title--dynamic-page': _dynamicPage,\n                        'fd-variant-management__title--dynamic-page--collapsed': _dynamicPageCollapsed$ | async\n                    }\"\n                    [headerSize]=\"headerSize\"\n                >\n                    {{ activeVariant.name }}\n                </h4>\n                @if (_variantChanged && !readonly) {\n                    <span\n                        class=\"fd-variant-management__dirty-indicator\"\n                        [class.fd-variant-management__dirty-indicator--custom]=\"!!dirtyLabel\"\n                    >\n                        <ng-template #defaultDirtyIndicator>*</ng-template>\n                        <ng-template\n                            [ngTemplateOutlet]=\"dirtyLabel ? dirtyLabel.templateRef : defaultDirtyIndicator\"\n                        ></ng-template>\n                    </span>\n                }\n                <button fd-button [fdMenu]=\"true\" fdType=\"transparent\" [attr.aria-haspopup]=\"true\"></button>\n            </div>\n        </fd-popover-control>\n        <fd-popover-body>\n            <div fd-popover-body-header>\n                <div fd-bar [barDesign]=\"displaySearch ? 'header-with-subheader' : 'header'\">\n                    <div fd-bar-left>\n                        <fd-bar-element>\n                            <h5 fd-title>{{ 'platformVariantManagement.myViews' | fdTranslate }}</h5>\n                        </fd-bar-element>\n                    </div>\n                </div>\n                @if (displaySearch) {\n                    <div fd-bar barDesign=\"header\">\n                        <div fd-bar-left>\n                            <fd-bar-element>\n                                <fdp-search-field\n                                    [placeholder]=\"'platformVariantManagement.search' | fdTranslate\"\n                                    (searchSubmit)=\"_onSearchSubmit($event)\"\n                                    (cancelSearch)=\"_cancelSearch()\"\n                                    [disableRefresh]=\"true\"\n                                ></fdp-search-field>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                }\n            </div>\n            <ul fd-list>\n                @for (\n                    variant of _variants | fdFilterStrings: { searchTerm: _filterPhrase, key: 'name' };\n                    track variant.id\n                ) {\n                    <li fd-list-item [selected]=\"variant.name === activeVariant.name\" (click)=\"selectVariant(variant)\">\n                        <span fd-list-link>\n                            <span fd-list-title>{{ variant.name }}</span>\n                        </span>\n                    </li>\n                }\n            </ul>\n            @if (!readonly) {\n                <div fd-popover-body-footer>\n                    <div fd-bar barDesign=\"footer\">\n                        <div fd-bar-right>\n                            @if (!activeVariant.readonly && _variantChanged) {\n                                <fd-button-bar\n                                    fdType=\"emphasized\"\n                                    [label]=\"'platformVariantManagement.save' | fdTranslate\"\n                                    (click)=\"saveCurrentVariant()\"\n                                >\n                                </fd-button-bar>\n                            }\n                            <fd-button-bar\n                                [fdType]=\"activeVariant.readonly || !_variantChanged ? 'emphasized' : 'transparent'\"\n                                [label]=\"'platformVariantManagement.saveAs' | fdTranslate\"\n                                (click)=\"_openSaveDialog()\"\n                            ></fd-button-bar>\n                            <fd-button-bar\n                                [label]=\"'platformVariantManagement.manage' | fdTranslate\"\n                                (click)=\"_openManageDialog()\"\n                            ></fd-button-bar>\n                        </div>\n                    </div>\n                </div>\n            }\n        </fd-popover-body>\n    </fd-popover>\n}\n", styles: [".fd-variant-management{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-variant-management:after,.fd-variant-management:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-variant-management__header{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;gap:.125rem}.fd-variant-management__header:after,.fd-variant-management__header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-variant-management .fd-variant-management__title{--fdTitle_Color:var(--fdVariantManagementHeadingColor)}.fd-variant-management .fd-variant-management__title.is-hover,.fd-variant-management .fd-variant-management__title:hover{--fdTitle_Color:var(--fdVariantManagementHeadingHoverColor)}.fd-variant-management .fd-variant-management__title.is-active,.fd-variant-management .fd-variant-management__title:active{--fdTitle_Color:var(--fdVariantManagementHeadingActiveColor)}.fd-variant-management .fd-variant-management__title.is-disabled,.fd-variant-management .fd-variant-management__title:disabled,.fd-variant-management .fd-variant-management__title[aria-disabled=true]{--fdTitle_Color:var(--sapGroup_TitleTextColor);cursor:default}.fd-variant-management .fd-variant-management__title--object-header{--fdTitle_Font_Size:var(--sapObjectHeader_Title_FontSize);--fdTitle_Font_Family:var(--sapObjectHeader_Title_FontFamily)}.fd-variant-management .fd-variant-management__title--snapped-object-header{--fdTitle_Font_Size:var(--sapObjectHeader_Title_SnappedFontSize);--fdTitle_Font_Family:var(--sapObjectHeader_Title_FontFamily)}.fd-variant-management .fd-variant-management__title--table{--fdTitle_Font_Size:var(--sapGroup_Title_FontSize)}.fd-variant-management__dirty-indicator{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;font-weight:700;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-variant-management__dirty-indicator:after,.fd-variant-management__dirty-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-variant-management__dirty-indicator--custom{font-size:var(--sapFontSmallSize)}.fd-variant-management__favourite-state{color:var(--sapContent_NonInteractiveIconColor);cursor:pointer}.fd-variant-management__favourite-state--active{color:var(--sapContent_MarkerIconColor)}.fd-variant-management__centered-checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}\n/*! Bundled license information:\n\nfundamental-styles/dist/variant-management.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "directive", type: PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "clear", "size", "role"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: FilterStringsPipe, name: "fdFilterStrings" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VariantManagementComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fdp-variant-management', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: FDP_VARIANT_MANAGEMENT,
                            useExisting: VariantManagementComponent
                        }
                    ], imports: [
                        PopoverComponent,
                        PopoverControlComponent,
                        TitleComponent,
                        NgTemplateOutlet,
                        PopoverBodyComponent,
                        PopoverBodyHeaderDirective,
                        BarComponent,
                        BarLeftDirective,
                        BarElementDirective,
                        SearchFieldComponent,
                        ListComponent,
                        ListItemComponent,
                        ListLinkDirective,
                        ListTitleDirective,
                        PopoverBodyFooterDirective,
                        BarRightDirective,
                        ButtonBarComponent,
                        FdTranslatePipe,
                        FilterStringsPipe,
                        AsyncPipe,
                        NgClass,
                        ButtonComponent
                    ], template: "@if (activeVariant) {\n    <fd-popover\n        #popover\n        placement=\"bottom\"\n        [noArrow]=\"false\"\n        [focusAutoCapture]=\"true\"\n        [focusTrapped]=\"true\"\n        additionalBodyClass=\"fd-variant-management__popover-body\"\n        [triggers]=\"popoverTriggers\"\n    >\n        <fd-popover-control>\n            <div class=\"fd-variant-management__header\">\n                <h4\n                    fd-title\n                    [ngClass]=\"{\n                        'fd-variant-management__title': true,\n                        'fd-variant-management__title--dynamic-page': _dynamicPage,\n                        'fd-variant-management__title--dynamic-page--collapsed': _dynamicPageCollapsed$ | async\n                    }\"\n                    [headerSize]=\"headerSize\"\n                >\n                    {{ activeVariant.name }}\n                </h4>\n                @if (_variantChanged && !readonly) {\n                    <span\n                        class=\"fd-variant-management__dirty-indicator\"\n                        [class.fd-variant-management__dirty-indicator--custom]=\"!!dirtyLabel\"\n                    >\n                        <ng-template #defaultDirtyIndicator>*</ng-template>\n                        <ng-template\n                            [ngTemplateOutlet]=\"dirtyLabel ? dirtyLabel.templateRef : defaultDirtyIndicator\"\n                        ></ng-template>\n                    </span>\n                }\n                <button fd-button [fdMenu]=\"true\" fdType=\"transparent\" [attr.aria-haspopup]=\"true\"></button>\n            </div>\n        </fd-popover-control>\n        <fd-popover-body>\n            <div fd-popover-body-header>\n                <div fd-bar [barDesign]=\"displaySearch ? 'header-with-subheader' : 'header'\">\n                    <div fd-bar-left>\n                        <fd-bar-element>\n                            <h5 fd-title>{{ 'platformVariantManagement.myViews' | fdTranslate }}</h5>\n                        </fd-bar-element>\n                    </div>\n                </div>\n                @if (displaySearch) {\n                    <div fd-bar barDesign=\"header\">\n                        <div fd-bar-left>\n                            <fd-bar-element>\n                                <fdp-search-field\n                                    [placeholder]=\"'platformVariantManagement.search' | fdTranslate\"\n                                    (searchSubmit)=\"_onSearchSubmit($event)\"\n                                    (cancelSearch)=\"_cancelSearch()\"\n                                    [disableRefresh]=\"true\"\n                                ></fdp-search-field>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                }\n            </div>\n            <ul fd-list>\n                @for (\n                    variant of _variants | fdFilterStrings: { searchTerm: _filterPhrase, key: 'name' };\n                    track variant.id\n                ) {\n                    <li fd-list-item [selected]=\"variant.name === activeVariant.name\" (click)=\"selectVariant(variant)\">\n                        <span fd-list-link>\n                            <span fd-list-title>{{ variant.name }}</span>\n                        </span>\n                    </li>\n                }\n            </ul>\n            @if (!readonly) {\n                <div fd-popover-body-footer>\n                    <div fd-bar barDesign=\"footer\">\n                        <div fd-bar-right>\n                            @if (!activeVariant.readonly && _variantChanged) {\n                                <fd-button-bar\n                                    fdType=\"emphasized\"\n                                    [label]=\"'platformVariantManagement.save' | fdTranslate\"\n                                    (click)=\"saveCurrentVariant()\"\n                                >\n                                </fd-button-bar>\n                            }\n                            <fd-button-bar\n                                [fdType]=\"activeVariant.readonly || !_variantChanged ? 'emphasized' : 'transparent'\"\n                                [label]=\"'platformVariantManagement.saveAs' | fdTranslate\"\n                                (click)=\"_openSaveDialog()\"\n                            ></fd-button-bar>\n                            <fd-button-bar\n                                [label]=\"'platformVariantManagement.manage' | fdTranslate\"\n                                (click)=\"_openManageDialog()\"\n                            ></fd-button-bar>\n                        </div>\n                    </div>\n                </div>\n            }\n        </fd-popover-body>\n    </fd-popover>\n}\n", styles: [".fd-variant-management{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-variant-management:after,.fd-variant-management:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-variant-management__header{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;gap:.125rem}.fd-variant-management__header:after,.fd-variant-management__header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-variant-management .fd-variant-management__title{--fdTitle_Color:var(--fdVariantManagementHeadingColor)}.fd-variant-management .fd-variant-management__title.is-hover,.fd-variant-management .fd-variant-management__title:hover{--fdTitle_Color:var(--fdVariantManagementHeadingHoverColor)}.fd-variant-management .fd-variant-management__title.is-active,.fd-variant-management .fd-variant-management__title:active{--fdTitle_Color:var(--fdVariantManagementHeadingActiveColor)}.fd-variant-management .fd-variant-management__title.is-disabled,.fd-variant-management .fd-variant-management__title:disabled,.fd-variant-management .fd-variant-management__title[aria-disabled=true]{--fdTitle_Color:var(--sapGroup_TitleTextColor);cursor:default}.fd-variant-management .fd-variant-management__title--object-header{--fdTitle_Font_Size:var(--sapObjectHeader_Title_FontSize);--fdTitle_Font_Family:var(--sapObjectHeader_Title_FontFamily)}.fd-variant-management .fd-variant-management__title--snapped-object-header{--fdTitle_Font_Size:var(--sapObjectHeader_Title_SnappedFontSize);--fdTitle_Font_Family:var(--sapObjectHeader_Title_FontFamily)}.fd-variant-management .fd-variant-management__title--table{--fdTitle_Font_Size:var(--sapGroup_Title_FontSize)}.fd-variant-management__dirty-indicator{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;font-weight:700;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-variant-management__dirty-indicator:after,.fd-variant-management__dirty-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-variant-management__dirty-indicator--custom{font-size:var(--sapFontSmallSize)}.fd-variant-management__favourite-state{color:var(--sapContent_NonInteractiveIconColor);cursor:pointer}.fd-variant-management__favourite-state--active{color:var(--sapContent_MarkerIconColor)}.fd-variant-management__centered-checkbox{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}\n/*! Bundled license information:\n\nfundamental-styles/dist/variant-management.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"] }]
        }], ctorParameters: () => [{ type: i1.DialogService }, { type: i0.ChangeDetectorRef }], propDecorators: { variants: [{
                type: Input
            }], headerSize: [{
                type: Input
            }], popoverTriggers: [{
                type: Input
            }], userName: [{
                type: Input
            }], displaySearch: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], readonly: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], variantsChange: [{
                type: Output
            }], activeVariantChange: [{
                type: Output
            }], dirtyLabel: [{
                type: ContentChild,
                args: [VariantManagementDirtyLabelDirective]
            }], _popover: [{
                type: ViewChild,
                args: ['popover']
            }], _initialClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * Wrapper component used to wrap components that implement `PresetManagedComponent`.
 * It automatically bounds existing presets from `Variant Management` component to `PresetManagedComponent`.
 * Wrapper component supports two ways of providing Variant Management component.
 * First one is to pass reference via Input property.
 * Second one is to put Variant Management component inside wrapper component so it would be accessible via @ContentChild.
 * Usage example:
 *
 * ```html
 *  Usage outside wrapper component:
 *  <fdp-variant-management #variantManagement [variants]="..."></fdp-variant-management>
 *  <fdp-variant-management-wrapper [variantManager]="variantManagement">
 *      <fdp-smart-filter-bar>...</fdp-smart-filter-bar>
 *      <fdp-table>...</fdp-table>
 *  </fdp-variant-management-wrapper>
 *
 *  Usage inside wrapper component:
 *  <fdp-variant-management-wrapper>
 *      <fdp-variant-management [variants]="..."></fdp-variant-management>
 *      <fdp-smart-filter-bar>...</fdp-smart-filter-bar>
 *      <fdp-table>...</fdp-table>
 *  </fdp-variant-management-wrapper>
 * ```
 */
class VariantManagementWrapperComponent {
    constructor() {
        /** @hidden */
        this._destroyRef = inject(DestroyRef);
    }
    /** @hidden */
    set _projectedVariantManager(variantManager) {
        this._variantManager = variantManager;
        this._setPresets();
    }
    get _projectedVariantManager() {
        return this._variantManager;
    }
    /** @hidden */
    get _variantManagement() {
        return this._projectedVariantManager || this.variantManager;
    }
    /** @hidden */
    ngAfterViewInit() {
        this._setPresets();
        this._managedComponents?.changes
            .pipe(startWith(this._managedComponents), takeUntilDestroyed(this._destroyRef))
            .subscribe(() => {
            this._listenToPresetChanges();
        });
    }
    /** @hidden */
    ngOnDestroy() {
        this._activeVariantSubscription?.unsubscribe();
        this._componentsPresetChangeSubscription?.unsubscribe();
    }
    /**
     * @hidden
     * Listens to the preset change in Variant Management component and applies new configuration across projected components..
     */
    _setPresets() {
        this._activeVariantSubscription?.unsubscribe();
        this._activeVariantSubscription = this._variantManagement?.activeVariantChangeSubject
            .pipe(filter((variant) => !!variant && !!this._managedComponents), takeUntilDestroyed(this._destroyRef))
            .subscribe(() => {
            const components = this._managedComponents.toArray();
            components.forEach((component) => {
                const data = this._variantManagement.activeVariant.data[component.name];
                component.setPreset(data);
            });
        });
    }
    /**
     * @hidden
     * Listens to preset configuration changes in projected components and sends updated config to Variant Management component.
     */
    _listenToPresetChanges() {
        this._componentsPresetChangeSubscription?.unsubscribe();
        this._componentsPresetChangeSubscription = new Subscription();
        const components = this._managedComponents.toArray();
        components.forEach((component) => {
            this._componentsPresetChangeSubscription.add(component.presetChanged
                .pipe(filter((preset) => {
                const prevPreset = this._getComponentPreset().get(component);
                return !equal(preset, prevPreset);
            }), takeUntilDestroyed(this._destroyRef))
                .subscribe((preset) => {
                this._variantManagement?.updateActivePreset(preset, component.name);
            }));
        });
    }
    /** @hidden */
    _getComponentPreset() {
        const components = this._managedComponents.toArray();
        const data = this._variantManagement.getActiveVariantData();
        const componentsMap = new Map();
        components.forEach((component) => {
            componentsMap.set(component, data[component.name]);
        });
        return componentsMap;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VariantManagementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: VariantManagementWrapperComponent, isStandalone: true, selector: "fdp-variant-management-wrapper", inputs: { variantManager: "variantManager" }, providers: [
            {
                provide: FDP_VARIANT_MANAGEMENT_WRAPPER,
                useExisting: VariantManagementWrapperComponent
            }
        ], queries: [{ propertyName: "_projectedVariantManager", first: true, predicate: FDP_VARIANT_MANAGEMENT, descendants: true }, { propertyName: "_managedComponents", predicate: FDP_PRESET_MANAGED_COMPONENT, descendants: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VariantManagementWrapperComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'fdp-variant-management-wrapper',
                    template: `<ng-content></ng-content>`,
                    encapsulation: ViewEncapsulation.None,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    providers: [
                        {
                            provide: FDP_VARIANT_MANAGEMENT_WRAPPER,
                            useExisting: VariantManagementWrapperComponent
                        }
                    ],
                    standalone: true
                }]
        }], propDecorators: { variantManager: [{
                type: Input
            }], _managedComponents: [{
                type: ContentChildren,
                args: [FDP_PRESET_MANAGED_COMPONENT, { descendants: true }]
            }], _projectedVariantManager: [{
                type: ContentChild,
                args: [FDP_VARIANT_MANAGEMENT, { descendants: true }]
            }] } });

/**
 * @deprecated
 * Use direct imports of components and directives.
 */
class VariantManagementModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VariantManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: VariantManagementModule, imports: [VariantManagementComponent,
            VariantManagementDirtyLabelDirective,
            ManageVariantItemComponent,
            VariantManagementWrapperComponent,
            ManageVariantsDialogComponent], exports: [VariantManagementComponent,
            VariantManagementDirtyLabelDirective,
            ManageVariantItemComponent,
            VariantManagementWrapperComponent,
            ManageVariantsDialogComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VariantManagementModule, imports: [VariantManagementComponent,
            ManageVariantItemComponent,
            ManageVariantsDialogComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VariantManagementModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        VariantManagementComponent,
                        VariantManagementDirtyLabelDirective,
                        ManageVariantItemComponent,
                        VariantManagementWrapperComponent,
                        ManageVariantsDialogComponent
                    ],
                    exports: [
                        VariantManagementComponent,
                        VariantManagementDirtyLabelDirective,
                        ManageVariantItemComponent,
                        VariantManagementWrapperComponent,
                        ManageVariantsDialogComponent
                    ]
                }]
        }] });

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

export { ManageVariantItemComponent, ManageVariantsDialogComponent, VariantManagementComponent, VariantManagementDirtyLabelDirective, VariantManagementModule, VariantManagementWrapperComponent };
//# sourceMappingURL=fundamental-ngx-platform-variant-management.mjs.map
