@fundamental-ngx/platform 0.48.0-rc.8 → 0.48.0

package/fesm2022/fundamental-ngx-platform-variant-management.mjs

@@ -1,15 +1,17 @@
 import * as i0 from '@angular/core';
-import { Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, InjectionToken, EventEmitter, Input, Output, ContentChild, HostBinding, DestroyRef, inject, ContentChildren, NgModule } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
+import { Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, InjectionToken, EventEmitter, inject, effect, booleanAttribute, Input, Output, ContentChild, HostBinding, DestroyRef, ContentChildren, NgModule } from '@angular/core';
+import { NgTemplateOutlet, AsyncPipe, NgClass } 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 { MenuButtonComponent } from '@fundamental-ngx/platform/menu-button';
+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';
@@ -20,7 +22,6 @@ 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 { ButtonComponent } from '@fundamental-ngx/platform/button';
 import { ArrayTableDataProvider, TableDataSource, TableComponent, TableColumnComponent } from '@fundamental-ngx/platform/table';
 import { TableInitialStateDirective, FdpCellDef, FdpTableCell, TableDataSourceDirective, TableHeaderResizerDirective } from '@fundamental-ngx/platform/table-helpers';
 import { cloneDeep } from 'lodash-es';
@@ -44,10 +45,10 @@ class VariantManagementDirtyLabelDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: VariantManagementDirtyLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: VariantManagementDirtyLabelDirective, isStandalone: true, selector: "[fdpVariantManagementDirtyLabel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VariantManagementDirtyLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: VariantManagementDirtyLabelDirective, isStandalone: true, selector: "[fdpVariantManagementDirtyLabel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: VariantManagementDirtyLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VariantManagementDirtyLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdpVariantManagementDirtyLabel]',
@@ -86,10 +87,10 @@ class ManageVariantItemComponent {
     _variantNameValidator(data) {
         return (control) => data.existingVariantNames.includes(control.value) ? { nameTaken: true } : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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: "17.0.4", 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: "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: DialogBodyComponent, selector: "fd-dialog-body" }, { 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],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", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", 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: "17.0.8", 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: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title], span[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { 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],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", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ManageVariantItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ManageVariantItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-manage-variant-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         DialogComponent,
@@ -154,10 +155,10 @@ class ManageVariantsDialogComponent {
     _saveVariants() {
         this.dialog.close(this._variants);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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: "17.0.4", 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                        <fdp-button\n                            buttonType=\"transparent\"\n                            glyph=\"decline\"\n                            [title]=\"'platformVariantManagement.removeVariant' | fdTranslate\"\n                            (click)=\"_removeVariant(item)\"\n                        ></fdp-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: "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: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: 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", "ariaLabelledBy", "loading"], outputs: ["presetChanged", "rowSelectionChange", "sortChange", "filterChange", "groupChange", "columnsChange", "pageChange", "columnFreeze", "rowToggleOpenState", "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", "align", "sortable", "filterable", "visible", "dataType", "groupable", "freezable", "endFreezable", "width", "noWrap", "applyText", "role"] }, { 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"] }, { 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", "selectedValue", "name", "id", "value", "required", "standalone"] }, { kind: "component", type: CheckboxComponent, selector: "fdp-checkbox", inputs: ["title", "label", "tristate", "checked", "tristateSelectable", "values", "standalone", "displayOnly"], outputs: ["checkedChange"] }, { kind: "component", type: ButtonComponent, selector: "fdp-button", inputs: ["glyphPosition", "label", "glyph", "buttonType", "toggled", "title", "ariaSelected", "ariaDisabled", "ariaExpanded", "ariaControlsId", "ariaPressed", "name", "type", "value"], outputs: ["buttonClicked"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", 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: "17.0.8", 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: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title], span[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: 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", "ariaLabelledBy", "nonFrozenColumnsMinWidth", "loading"], outputs: ["presetChanged", "rowSelectionChange", "sortChange", "filterChange", "groupChange", "columnsChange", "pageChange", "columnFreeze", "rowToggleOpenState", "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", "align", "sortable", "filterable", "visible", "dataType", "groupable", "freezable", "endFreezable", "width", "noWrap", "applyText", "role"] }, { 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"] }, { 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", "selectedValue", "name", "id", "value", "required", "standalone"] }, { 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]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ManageVariantsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ManageVariantsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-manage-variants-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         DialogComponent,
@@ -182,7 +183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         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                        <fdp-button\n                            buttonType=\"transparent\"\n                            glyph=\"decline\"\n                            [title]=\"'platformVariantManagement.removeVariant' | fdTranslate\"\n                            (click)=\"_removeVariant(item)\"\n                        ></fdp-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" }]
+                    ], 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');
@@ -234,6 +235,10 @@ class VariantManagementComponent {
         this.selectVariant(currentVariant);
     }
     /** @hidden */
+    get _dynamicPage() {
+        return this._coreDynamicPage || this._platformDynamicPage;
+    }
+    /** @hidden */
     constructor(_dialogService, _cdr) {
         this._dialogService = _dialogService;
         this._cdr = _cdr;
@@ -245,10 +250,14 @@ class VariantManagementComponent {
         ];
         /** 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.
          */
@@ -260,7 +269,16 @@ class VariantManagementComponent {
         /** @Hidden */
         this._filterPhrase = null;
         /** @hidden */
-        this._initialClass = 'fd-variant-management';
+        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.
@@ -285,6 +303,9 @@ class VariantManagementComponent {
      * 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);
@@ -293,6 +314,9 @@ class VariantManagementComponent {
     }
     /** @hidden */
     _openSaveDialog() {
+        if (this.readonly) {
+            return;
+        }
         this._popover?.close(false);
         const dialogRef = this._dialogService.open(ManageVariantItemComponent, {
             data: {
@@ -325,6 +349,9 @@ class VariantManagementComponent {
     }
     /** @hidden */
     _openManageDialog() {
+        if (this.readonly) {
+            return;
+        }
         this._popover?.close(false);
         const dialogRef = this._dialogService.open(ManageVariantsDialogComponent, {
             data: this._variants
@@ -355,15 +382,15 @@ class VariantManagementComponent {
     _transformVariants(items) {
         return items.map((variant) => new VariantItem(variant));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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: "17.0.4", type: VariantManagementComponent, isStandalone: true, selector: "fdp-variant-management", inputs: { variants: "variants", headerSize: "headerSize", popoverTriggers: "popoverTriggers", userName: "userName", displaySearch: "displaySearch" }, outputs: { variantsChange: "variantsChange", activeVariantChange: "activeVariantChange" }, host: { properties: { "class": "this._initialClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", 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: "17.0.8", 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 fd-title class=\"fd-variant-management__title\" [headerSize]=\"headerSize\">\n                    {{ activeVariant.name }}\n                </h4>\n                @if (_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                }\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                @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 (click)=\"selectVariant(variant)\">\n                        <span fd-list-link>\n                            <span fd-list-title>{{ variant.name }}</span>\n                        </span>\n                    </li>\n                }\n            </ul>\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        </fd-popover-body>\n    </fd-popover>\n}\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuButtonComponent, selector: "fdp-menu-button", inputs: ["label", "title", "icon", "type"], outputs: ["buttonClicked"] }, { 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", "size"] }, { 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", "ariaLabel", "ariaLabelledby", "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", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { 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", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: 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: "@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 (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: ["/*!\n * Fundamental Library Styles v0.33.2\n * Copyright (c) 2024 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:normal;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:normal;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{--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{-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:normal;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: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title], span[fd-title]", 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", "size"] }, { 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", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { 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", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: FilterStringsPipe, name: "fdFilterStrings" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: VariantManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VariantManagementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-variant-management', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -375,7 +402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         PopoverControlComponent,
                         TitleComponent,
                         NgTemplateOutlet,
-                        MenuButtonComponent,
                         PopoverBodyComponent,
                         PopoverBodyHeaderDirective,
                         BarComponent,
@@ -390,8 +416,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         BarRightDirective,
                         ButtonBarComponent,
                         FdTranslatePipe,
-                        FilterStringsPipe
-                    ], 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 fd-title class=\"fd-variant-management__title\" [headerSize]=\"headerSize\">\n                    {{ activeVariant.name }}\n                </h4>\n                @if (_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                }\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                @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 (click)=\"selectVariant(variant)\">\n                        <span fd-list-link>\n                            <span fd-list-title>{{ variant.name }}</span>\n                        </span>\n                    </li>\n                }\n            </ul>\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        </fd-popover-body>\n    </fd-popover>\n}\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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"] }]
+                        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 (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: ["/*!\n * Fundamental Library Styles v0.33.2\n * Copyright (c) 2024 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:normal;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:normal;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{--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{-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:normal;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: () => [{ type: i1.DialogService }, { type: i0.ChangeDetectorRef }], propDecorators: { variants: [{
                 type: Input
             }], headerSize: [{
@@ -401,7 +430,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
             }], userName: [{
                 type: Input
             }], displaySearch: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], variantsChange: [{
                 type: Output
             }], activeVariantChange: [{
@@ -517,15 +550,15 @@ class VariantManagementWrapperComponent {
         });
         return componentsMap;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: VariantManagementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: VariantManagementWrapperComponent, isStandalone: true, selector: "fdp-variant-management-wrapper", inputs: { variantManager: "variantManager" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VariantManagementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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: "17.0.4", ngImport: i0, type: VariantManagementWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VariantManagementWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'fdp-variant-management-wrapper',
@@ -551,8 +584,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
             }] } });
 
 class VariantManagementModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: VariantManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: VariantManagementModule, imports: [VariantManagementComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VariantManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: VariantManagementModule, imports: [VariantManagementComponent,
             VariantManagementDirtyLabelDirective,
             ManageVariantItemComponent,
             VariantManagementWrapperComponent,
@@ -561,11 +594,11 @@ class VariantManagementModule {
             ManageVariantItemComponent,
             VariantManagementWrapperComponent,
             ManageVariantsDialogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: VariantManagementModule, imports: [VariantManagementComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VariantManagementModule, imports: [VariantManagementComponent,
             ManageVariantItemComponent,
             ManageVariantsDialogComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: VariantManagementModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VariantManagementModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [