npm - @fundamental-ngx/platform - Versions diffs - 0.45.1 → 0.46.0-rc.1 - Mend

@fundamental-ngx/platform 0.45.1 → 0.46.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (119) hide show

package/esm2022/variant-management/components/manage-variants-dialog/manage-variants-dialog.component.mjs CHANGED Viewed

@@ -45,7 +45,7 @@ export class ManageVariantsDialogComponent {
         this.dialog.close(this._variants);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ManageVariantsDialogComponent, deps: [{ token: i1.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ManageVariantsDialogComponent, 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\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                    <fdp-input *ngIf=\"!item.readonly\" [(ngModel)]=\"item.name\"></fdp-input>\n                    <ng-container *ngIf=\"item.readonly\">{{ item.name }}</ng-container>\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                    <fdp-button\n                        *ngIf=\"!item.readonly\"\n                        buttonType=\"transparent\"\n                        glyph=\"decline\"\n                        [title]=\"'platformVariantManagement.removeVariant' | fdTranslate\"\n                        (click)=\"_removeVariant(item)\"\n                    ></fdp-button>\n                </fdp-table-cell>\n            </fdp-column>\n        </fdp-table>\n    </fd-dialog-body>\n\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\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i5.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.InputComponent, selector: "fdp-input", inputs: ["type", "required", "value"], outputs: ["focusChange"] }, { kind: "component", type: i7.CheckboxComponent, selector: "fdp-checkbox", inputs: ["title", "label", "tristate", "checked", "tristateSelectable", "values", "standalone"], outputs: ["checkedChange"] }, { kind: "component", type: i8.TableComponent, selector: "fdp-table", inputs: ["name", "id", "enableDragResize", "fixed", "freezeColumnsTo", "freezeEndColumnsTo", "pageScrolling", "pageSize", "pageScrollingThreshold", "bodyHeight", "emptyTableMessage", "noVisibleColumnsMessage", "noHorizontalBorders", "noVerticalBorders", "noBorders", "noBodyBorders", "noOuterBorders", "noBorderX", "noBorderY", "relationKey", "expandedStateKey", "hasChildrenKey", "rowNavigatable", "highlightNavigatedRow", "rowsActivable", "selectedKey", "selectableKey", "trackBy", "rowComparator", "rowsClass", "editableRowSkeleton", "expandOnInit", "rowHeight", "loadPagesBefore", "selectionMode", "enableTristateMode", "semanticHighlighting", "forceCheckedAllState", "loading"], outputs: ["presetChanged", "rowSelectionChange", "sortChange", "filterChange", "groupChange", "columnsChange", "pageChange", "columnFreeze", "rowToggleOpenState", "rowActivate", "rowNavigate", "emptyRowAdded", "save", "cancel", "tableScrolled", "tableRowsSet", "allRowsExpanded", "allRowsCollapsed"] }, { kind: "component", type: i8.TableColumnComponent, selector: "fdp-column", inputs: ["name", "key", "label", "align", "sortable", "filterable", "visible", "dataType", "groupable", "freezable", "endFreezable", "width", "noWrap", "applyText", "role"] }, { kind: "directive", type: i9.TableInitialStateDirective, selector: "[fdpTableInitialState],    fdp-table", inputs: ["initialVisibleColumns", "initialSortBy", "initialFilterBy", "initialGroupBy", "initialPage", "state"] }, { kind: "directive", type: i9.FdpTableCell, selector: "fdp-table-cell" }, { kind: "directive", type: i9.FdpCellDef, selector: "[fdpCellDef]", inputs: ["fdpCellDefAs"] }, { kind: "component", type: i10.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i11.RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "pipe", type: i12.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: ManageVariantsDialogComponent, 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\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                    <fdp-input *ngIf=\"!item.readonly\" [(ngModel)]=\"item.name\"></fdp-input>\n                    <ng-container *ngIf=\"item.readonly\">{{ item.name }}</ng-container>\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                    <fdp-button\n                        *ngIf=\"!item.readonly\"\n                        buttonType=\"transparent\"\n                        glyph=\"decline\"\n                        [title]=\"'platformVariantManagement.removeVariant' | fdTranslate\"\n                        (click)=\"_removeVariant(item)\"\n                    ></fdp-button>\n                </fdp-table-cell>\n            </fdp-column>\n        </fdp-table>\n    </fd-dialog-body>\n\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\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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i5.ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.InputComponent, selector: "fdp-input", inputs: ["type", "required", "value"], outputs: ["focusChange"] }, { kind: "component", type: i7.CheckboxComponent, selector: "fdp-checkbox", inputs: ["title", "label", "tristate", "checked", "tristateSelectable", "values", "standalone", "displayOnly"], outputs: ["checkedChange"] }, { kind: "component", type: i8.TableComponent, selector: "fdp-table", inputs: ["name", "id", "enableDragResize", "fixed", "freezeColumnsTo", "freezeEndColumnsTo", "pageScrolling", "pageSize", "pageScrollingThreshold", "bodyHeight", "emptyTableMessage", "noVisibleColumnsMessage", "noHorizontalBorders", "noVerticalBorders", "noBorders", "noBodyBorders", "noOuterBorders", "noBorderX", "noBorderY", "relationKey", "expandedStateKey", "hasChildrenKey", "rowNavigatable", "highlightNavigatedRow", "rowsActivable", "selectedKey", "selectableKey", "trackBy", "rowComparator", "rowsClass", "editableRowSkeleton", "expandOnInit", "rowHeight", "loadPagesBefore", "selectionMode", "enableTristateMode", "semanticHighlighting", "forceCheckedAllState", "loading"], outputs: ["presetChanged", "rowSelectionChange", "sortChange", "filterChange", "groupChange", "columnsChange", "pageChange", "columnFreeze", "rowToggleOpenState", "rowActivate", "rowNavigate", "emptyRowAdded", "save", "cancel", "tableScrolled", "tableRowsSet", "allRowsExpanded", "allRowsCollapsed"] }, { kind: "component", type: i8.TableColumnComponent, selector: "fdp-column", inputs: ["name", "key", "label", "align", "sortable", "filterable", "visible", "dataType", "groupable", "freezable", "endFreezable", "width", "noWrap", "applyText", "role"] }, { kind: "directive", type: i9.TableInitialStateDirective, selector: "[fdpTableInitialState],    fdp-table", inputs: ["initialVisibleColumns", "initialSortBy", "initialFilterBy", "initialGroupBy", "initialPage", "state"] }, { kind: "directive", type: i9.FdpTableCell, selector: "fdp-table-cell" }, { kind: "directive", type: i9.FdpCellDef, selector: "[fdpCellDef]", inputs: ["fdpCellDefAs"] }, { kind: "component", type: i10.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i11.RadioButtonComponent, selector: "fd-radio-button", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "title", "tabIndex", "state", "disabled", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "pipe", type: i12.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ManageVariantsDialogComponent, decorators: [{
             type: Component,

package/esm2022/variant-management/variant-management.component.mjs CHANGED Viewed

@@ -156,7 +156,7 @@ export class VariantManagementComponent {
                 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: "<fd-popover\n    #popover\n    *ngIf=\"activeVariant\"\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 fd-title class=\"fd-variant-management__title\" [headerSize]=\"headerSize\">\n                {{ activeVariant.name }}\n            </h4>\n            <ng-container *ngIf=\"_variantChanged\">\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            </ng-container>\n            <fdp-menu-button type=\"transparent\"> </fdp-menu-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            <div fd-bar barDesign=\"header\" *ngIf=\"displaySearch\">\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        </div>\n        <ul fd-list>\n            <ng-container\n                *ngFor=\"\n                    let variant of _variants | fdFilterStrings : { searchTerm: _filterPhrase, key: 'name' };\n                    trackBy: _trackFn\n                \"\n            >\n                <li fd-list-item (click)=\"selectVariant(variant)\">\n                    <span fd-list-link>\n                        <span fd-list-title>{{ variant.name }}</span>\n                    </span>\n                </li>\n            </ng-container>\n        </ul>\n        <div fd-popover-body-footer>\n            <div fd-bar barDesign=\"footer\">\n                <div fd-bar-right>\n                    <fd-button-bar\n                        fdType=\"emphasized\"\n                        [label]=\"'platformVariantManagement.save' | fdTranslate\"\n                        *ngIf=\"!activeVariant.readonly && _variantChanged\"\n                        (click)=\"saveCurrentVariant()\"\n                    >\n                    </fd-button-bar>\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    </fd-popover-body>\n</fd-popover>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-variant-management{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management:after,.fd-variant-management:before{box-sizing:inherit;font-size:inherit}.fd-variant-management__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.125rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management__header:after,.fd-variant-management__header:before{box-sizing:inherit;font-size:inherit}.fd-variant-management .fd-variant-management__title{color:var(--fdVariantManagementHeadingColor)}.fd-variant-management .fd-variant-management__title.is-hover,.fd-variant-management .fd-variant-management__title:hover{color:var(--fdVariantManagementHeadingHoverColor)}.fd-variant-management .fd-variant-management__title.is-active,.fd-variant-management .fd-variant-management__title:active{color:var(--fdVariantManagementHeadingActiveColor)}.fd-variant-management__dirty-indicator{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management__dirty-indicator:after,.fd-variant-management__dirty-indicator:before{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{-webkit-box-pack:center;-ms-flex-pack:center;display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i3.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i3.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i4.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i6.MenuButtonComponent, selector: "fdp-menu-button", inputs: ["label", "title", "icon", "type"], outputs: ["buttonClicked"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i8.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "pipe", type: i9.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i10.FilterStringsPipe, name: "fdFilterStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "dirtyLabel", first: true, predicate: VariantManagementDirtyLabelDirective, descendants: true }], viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "<fd-popover\n    #popover\n    *ngIf=\"activeVariant\"\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 fd-title class=\"fd-variant-management__title\" [headerSize]=\"headerSize\">\n                {{ activeVariant.name }}\n            </h4>\n            <ng-container *ngIf=\"_variantChanged\">\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            </ng-container>\n            <fdp-menu-button type=\"transparent\"> </fdp-menu-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            <div fd-bar barDesign=\"header\" *ngIf=\"displaySearch\">\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        </div>\n        <ul fd-list>\n            <ng-container\n                *ngFor=\"\n                    let variant of _variants | fdFilterStrings : { searchTerm: _filterPhrase, key: 'name' };\n                    trackBy: _trackFn\n                \"\n            >\n                <li fd-list-item (click)=\"selectVariant(variant)\">\n                    <span fd-list-link>\n                        <span fd-list-title>{{ variant.name }}</span>\n                    </span>\n                </li>\n            </ng-container>\n        </ul>\n        <div fd-popover-body-footer>\n            <div fd-bar barDesign=\"footer\">\n                <div fd-bar-right>\n                    <fd-button-bar\n                        fdType=\"emphasized\"\n                        [label]=\"'platformVariantManagement.save' | fdTranslate\"\n                        *ngIf=\"!activeVariant.readonly && _variantChanged\"\n                        (click)=\"saveCurrentVariant()\"\n                    >\n                    </fd-button-bar>\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    </fd-popover-body>\n</fd-popover>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-variant-management{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management:after,.fd-variant-management:before{box-sizing:inherit;font-size:inherit}.fd-variant-management__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.125rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management__header:after,.fd-variant-management__header:before{box-sizing:inherit;font-size:inherit}.fd-variant-management .fd-variant-management__title{color:var(--fdVariantManagementHeadingColor)}.fd-variant-management .fd-variant-management__title.is-hover,.fd-variant-management .fd-variant-management__title:hover{color:var(--fdVariantManagementHeadingHoverColor)}.fd-variant-management .fd-variant-management__title.is-active,.fd-variant-management .fd-variant-management__title:active{color:var(--fdVariantManagementHeadingActiveColor)}.fd-variant-management__dirty-indicator{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management__dirty-indicator:after,.fd-variant-management__dirty-indicator:before{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{-webkit-box-pack:center;-ms-flex-pack:center;display:flex;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i3.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "directive", type: i3.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i4.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i6.MenuButtonComponent, selector: "fdp-menu-button", inputs: ["label", "title", "icon", "type"], outputs: ["buttonClicked"] }, { kind: "component", type: i7.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i8.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "pipe", type: i9.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i10.FilterStringsPipe, name: "fdFilterStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: VariantManagementComponent, decorators: [{
             type: Component,
@@ -165,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                             provide: FDP_VARIANT_MANAGEMENT,
                             useExisting: VariantManagementComponent
                         }
-                    ], template: "<fd-popover\n    #popover\n    *ngIf=\"activeVariant\"\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 fd-title class=\"fd-variant-management__title\" [headerSize]=\"headerSize\">\n                {{ activeVariant.name }}\n            </h4>\n            <ng-container *ngIf=\"_variantChanged\">\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            </ng-container>\n            <fdp-menu-button type=\"transparent\"> </fdp-menu-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            <div fd-bar barDesign=\"header\" *ngIf=\"displaySearch\">\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        </div>\n        <ul fd-list>\n            <ng-container\n                *ngFor=\"\n                    let variant of _variants | fdFilterStrings : { searchTerm: _filterPhrase, key: 'name' };\n                    trackBy: _trackFn\n                \"\n            >\n                <li fd-list-item (click)=\"selectVariant(variant)\">\n                    <span fd-list-link>\n                        <span fd-list-title>{{ variant.name }}</span>\n                    </span>\n                </li>\n            </ng-container>\n        </ul>\n        <div fd-popover-body-footer>\n            <div fd-bar barDesign=\"footer\">\n                <div fd-bar-right>\n                    <fd-button-bar\n                        fdType=\"emphasized\"\n                        [label]=\"'platformVariantManagement.save' | fdTranslate\"\n                        *ngIf=\"!activeVariant.readonly && _variantChanged\"\n                        (click)=\"saveCurrentVariant()\"\n                    >\n                    </fd-button-bar>\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    </fd-popover-body>\n</fd-popover>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-variant-management{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management:after,.fd-variant-management:before{box-sizing:inherit;font-size:inherit}.fd-variant-management__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.125rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management__header:after,.fd-variant-management__header:before{box-sizing:inherit;font-size:inherit}.fd-variant-management .fd-variant-management__title{color:var(--fdVariantManagementHeadingColor)}.fd-variant-management .fd-variant-management__title.is-hover,.fd-variant-management .fd-variant-management__title:hover{color:var(--fdVariantManagementHeadingHoverColor)}.fd-variant-management .fd-variant-management__title.is-active,.fd-variant-management .fd-variant-management__title:active{color:var(--fdVariantManagementHeadingActiveColor)}.fd-variant-management__dirty-indicator{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management__dirty-indicator:after,.fd-variant-management__dirty-indicator:before{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{-webkit-box-pack:center;-ms-flex-pack:center;display:flex;justify-content:center}\n"] }]
+                    ], template: "<fd-popover\n    #popover\n    *ngIf=\"activeVariant\"\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 fd-title class=\"fd-variant-management__title\" [headerSize]=\"headerSize\">\n                {{ activeVariant.name }}\n            </h4>\n            <ng-container *ngIf=\"_variantChanged\">\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            </ng-container>\n            <fdp-menu-button type=\"transparent\"> </fdp-menu-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            <div fd-bar barDesign=\"header\" *ngIf=\"displaySearch\">\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        </div>\n        <ul fd-list>\n            <ng-container\n                *ngFor=\"\n                    let variant of _variants | fdFilterStrings : { searchTerm: _filterPhrase, key: 'name' };\n                    trackBy: _trackFn\n                \"\n            >\n                <li fd-list-item (click)=\"selectVariant(variant)\">\n                    <span fd-list-link>\n                        <span fd-list-title>{{ variant.name }}</span>\n                    </span>\n                </li>\n            </ng-container>\n        </ul>\n        <div fd-popover-body-footer>\n            <div fd-bar barDesign=\"footer\">\n                <div fd-bar-right>\n                    <fd-button-bar\n                        fdType=\"emphasized\"\n                        [label]=\"'platformVariantManagement.save' | fdTranslate\"\n                        *ngIf=\"!activeVariant.readonly && _variantChanged\"\n                        (click)=\"saveCurrentVariant()\"\n                    >\n                    </fd-button-bar>\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    </fd-popover-body>\n</fd-popover>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-variant-management{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management:after,.fd-variant-management:before{box-sizing:inherit;font-size:inherit}.fd-variant-management__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.125rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management__header:after,.fd-variant-management__header:before{box-sizing:inherit;font-size:inherit}.fd-variant-management .fd-variant-management__title{color:var(--fdVariantManagementHeadingColor)}.fd-variant-management .fd-variant-management__title.is-hover,.fd-variant-management .fd-variant-management__title:hover{color:var(--fdVariantManagementHeadingHoverColor)}.fd-variant-management .fd-variant-management__title.is-active,.fd-variant-management .fd-variant-management__title:active{color:var(--fdVariantManagementHeadingActiveColor)}.fd-variant-management__dirty-indicator{-webkit-box-sizing:border-box;border:0;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:var(--sapContent_LineHeight);margin:0;padding:0}.fd-variant-management__dirty-indicator:after,.fd-variant-management__dirty-indicator:before{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{-webkit-box-pack:center;-ms-flex-pack:center;display:flex;justify-content:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { variants: [{
                 type: Input
             }], headerSize: [{