@fundamental-ngx/platform 0.43.25 → 0.43.27

package/fesm2020/fundamental-ngx-platform-value-help-dialog.mjs

@@ -48,7 +48,7 @@ import { BaseDataProvider, DataProvider, isDataSource, PlatformContentDensityDep
 import * as i11 from '@fundamental-ngx/core/skeleton';
 import { SkeletonModule } from '@fundamental-ngx/core/skeleton';
 import { BehaviorSubject, Subject, of, startWith, takeUntil, Subscription, isObservable } from 'rxjs';
-import { take, takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { take, tap, filter, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import { cloneDeep } from 'lodash-es';
 import * as i4 from '@fundamental-ngx/core/title';
 import * as i10 from '@fundamental-ngx/core/scrollbar';
@@ -600,7 +600,7 @@ class SelectTabComponent extends VhdBaseTab {
     }
 }
 SelectTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectTabComponent, selector: "fdp-select-tab", inputs: { selectTabTitleId: "selectTabTitleId", selectTabCountId: "selectTabCountId", selected: "selected", loading: "loading", filters: "filters", selection: "selection", emptyTableMessage: "emptyTableMessage", uniqueKey: "uniqueKey", pageSize: "pageSize", defaultMobileHeaders: "defaultMobileHeaders", displayedData: "displayedData", allowSelectAll: "allowSelectAll" }, outputs: { select: "select" }, providers: [DestroyedService], viewQueries: [{ propertyName: "infiniteScrollTable", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-header\">\n    <h5 fd-title role=\"heading\" aria-level=\"5\">\n        {{ 'platformVHD.selectTabDisplayCountLabel' | fdTranslate : { count: displayedData.length } }}\n    </h5>\n</div>\n<div\n    class=\"fdp-value-help-dialog__table-holder table-content\"\n    fd-scrollbar\n    fdInfiniteScroll\n    (onScrollAction)=\"_showMoreElements()\"\n    [scrollPercent]=\"80\"\n    role=\"table\"\n>\n    <table\n        fd-table\n        [popIn]=\"mobile\"\n        [noBorderX]=\"mobile\"\n        [noBorderY]=\"false\"\n        [attr.aria-colcount]=\"_tableFilters.main.length\"\n        [attr.aria-rowcount]=\"displayedData.length\"\n        role=\"grid\"\n        aria-multiselectable=\"true\"\n        [attr.aria-labelledby]=\"selectTabTitleId + ' ' + selectTabCountId\"\n    >\n        <label [id]=\"selectTabCountId\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n            {{\n                'platformVHD.selectTabCountHiddenA11yLabel'\n                    | fdTranslate : { rowCount: displayedData.length, colCount: _tableFilters.main.length }\n            }}\n        </label>\n        <label [id]=\"selectTabTitleId\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n            {{ 'platformVHD.selectTabDisplayCountLabel' | fdTranslate : { count: displayedData.length } }}\n        </label>\n        <thead fd-table-header>\n            <tr fd-table-row *ngIf=\"displayedData.length && _tableFilters\">\n                <th fd-table-cell [fitContent]=\"mobile\">\n                    <fd-checkbox\n                        *ngIf=\"isMultiSelection && allowSelectAll\"\n                        [name]=\"uid + '-row-all'\"\n                        [tristate]=\"true\"\n                        [tristateSelectable]=\"false\"\n                        [ngModel]=\"_selectedAll\"\n                        (ngModelChange)=\"_toggleAllRows()\"\n                    ></fd-checkbox>\n                </th>\n                <th\n                    fd-table-cell\n                    *ngFor=\"let filter of _tableFilters.main; trackBy: _trackByFilterFn; let colindex = index\"\n                    [attr.aria-colindex]=\"colindex\"\n                >\n                    {{ filter.label }}\n                </th>\n            </tr>\n        </thead>\n        <tbody fd-table-body>\n            <ng-container\n                *ngFor=\"\n                    let row of displayedData | slice : _shownFrom : _shownCount;\n                    trackBy: _trackByTableRowFn;\n                    index as i\n                \"\n            >\n                <tr\n                    fd-table-row\n                    [hoverable]=\"!mobile\"\n                    [main]=\"mobile\"\n                    [attr.aria-selected]=\"_selectedMap[row[uniqueKey]]\"\n                    [activable]=\"!isMultiSelection\"\n                    (click)=\"!isMultiSelection && _toggleSelectRow(row)\"\n                >\n                    <td fd-table-cell [fitContent]=\"mobile\">\n                        <fd-checkbox\n                            *ngIf=\"isMultiSelection\"\n                            [name]=\"uid + '-row-' + i\"\n                            [ngModel]=\"_selectedMap[row[uniqueKey]]\"\n                            (change)=\"_toggleSelectRow(row)\"\n                        ></fd-checkbox>\n                    </td>\n                    <td\n                        fd-table-cell\n                        *ngFor=\"let filter of _tableFilters.main; let rowIndex = index\"\n                        [attr.aria-rowindex]=\"rowIndex\"\n                    >\n                        <ng-container *ngIf=\"_columnDefMap.get(filter.key) as columnDef; else defaultColumnRenderer\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"columnDef.templateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: row,\n                                    key: filter.key,\n                                    value: row[filter.key] || ''\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n                        <ng-template #defaultColumnRenderer>\n                            {{ row[filter.key] || '' }}\n                        </ng-template>\n                    </td>\n                </tr>\n\n                <tr\n                    fd-table-row\n                    *ngIf=\"mobile && _tableFilters.secondary.length\"\n                    [secondary]=\"true\"\n                    [attr.aria-selected]=\"_selectedMap[row[uniqueKey]]\"\n                >\n                    <td fd-table-cell></td>\n                    <td colspan=\"100%\" fd-table-cell [fitContent]=\"true\">\n                        <p fd-table-text *ngFor=\"let filter of _tableFilters.secondary\">\n                            <label>{{ filter.label }}:</label>\n                            {{ row[filter.key] || '' }}\n                        </p>\n                    </td>\n                </tr>\n            </ng-container>\n            <tr\n                fd-table-row\n                *ngIf=\"displayedData.length && mobile && _shownCount && _shownCount !== displayedData.length\"\n            >\n                <td colspan=\"100%\">\n                    <div fd-bar barDesign=\"header-with-subheader\">\n                        <div fd-bar-middle>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [label]=\"'platformVHD.selectTabMoreBtnLabel' | fdTranslate\"\n                                    (click)=\"_showMoreElements()\"\n                                ></button>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                </td>\n            </tr>\n            <ng-container *ngIf=\"loading && !displayedData.length\">\n                <tr fd-table-row *fdkRepeat=\"3\">\n                    <td fd-table-cell *fdkRepeat=\"3\">\n                        <fd-skeleton style=\"margin: auto 0\" type=\"text\" textLines=\"1\" width=\"60%\"></fd-skeleton>\n                    </td>\n                </tr>\n            </ng-container>\n            <tr fd-table-row *ngIf=\"!loading && !displayedData.length\">\n                <td fd-table-cell colspan=\"100%\">\n                    <div class=\"fdp-value-help-dialog__empty-message\">\n                        {{ emptyTableMessage || ('platformVHD.searchTableEmptyMessage' | fdTranslate) }}\n                    </div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n", styles: [".fdp-value-help-dialog__advanced-filters .fd-col{padding-top:0}.fdp-value-help-dialog__content-holder fdp-select-tab{display:flex;flex-direction:column;overflow:hidden;height:100%}.fdp-value-help-dialog__content-holder .table-header{flex:0 0 auto}.fdp-value-help-dialog__content-holder .table-content{flex:1 1 auto;overflow:auto;min-height:5rem}.fdp-value-help-dialog__table-holder{padding-top:0;padding-bottom:0}.fdp-value-help-dialog__empty-message{padding:1rem 2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i5.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i5.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i5.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i4.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i5$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i7.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i7.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i7.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i7.TableTextDirective, selector: "[fdTableText], [fd-table-text]", inputs: ["fdTableTextClass", "noWrap", "title", "maxWidth"] }, { kind: "component", type: i8.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i9.InfiniteScrollDirective, selector: "[fdInfiniteScroll]", inputs: ["scrollPercent", "scrollOffset"], outputs: ["onScrollAction"] }, { kind: "directive", type: i10.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }, { kind: "component", type: i11.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "directive", type: i2$1.RepeatDirective, selector: "[fdkRepeat], [fdRepeat]", inputs: ["fdkRepeat", "fdRepeat"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SelectTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectTabComponent, selector: "fdp-select-tab", inputs: { selectTabTitleId: "selectTabTitleId", selectTabCountId: "selectTabCountId", selected: "selected", loading: "loading", filters: "filters", selection: "selection", emptyTableMessage: "emptyTableMessage", uniqueKey: "uniqueKey", pageSize: "pageSize", defaultMobileHeaders: "defaultMobileHeaders", displayedData: "displayedData", allowSelectAll: "allowSelectAll" }, outputs: { select: "select" }, providers: [DestroyedService], viewQueries: [{ propertyName: "infiniteScrollTable", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-header\">\n    <h5 fd-title role=\"heading\" aria-level=\"5\">\n        {{ 'platformVHD.selectTabDisplayCountLabel' | fdTranslate : { count: displayedData.length } }}\n    </h5>\n</div>\n<div\n    class=\"fdp-value-help-dialog__table-holder table-content\"\n    fd-scrollbar\n    fdInfiniteScroll\n    (onScrollAction)=\"_showMoreElements()\"\n    [scrollPercent]=\"80\"\n    role=\"table\"\n>\n    <table\n        fd-table\n        [popIn]=\"mobile\"\n        [noBorderX]=\"mobile\"\n        [noBorderY]=\"false\"\n        [attr.aria-colcount]=\"_tableFilters.main.length\"\n        [attr.aria-rowcount]=\"displayedData.length\"\n        role=\"grid\"\n        aria-multiselectable=\"true\"\n        [attr.aria-labelledby]=\"selectTabTitleId + ' ' + selectTabCountId\"\n    >\n        <label [id]=\"selectTabCountId\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n            {{\n                'platformVHD.selectTabCountHiddenA11yLabel'\n                    | fdTranslate : { rowCount: displayedData.length, colCount: _tableFilters.main.length }\n            }}\n        </label>\n        <label [id]=\"selectTabTitleId\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n            {{ 'platformVHD.selectTabDisplayCountLabel' | fdTranslate : { count: displayedData.length } }}\n        </label>\n        <thead fd-table-header>\n            <tr fd-table-row *ngIf=\"displayedData.length && _tableFilters\">\n                <th fd-table-cell [fitContent]=\"mobile\">\n                    <fd-checkbox\n                        *ngIf=\"isMultiSelection && allowSelectAll\"\n                        [name]=\"uid + '-row-all'\"\n                        [tristate]=\"true\"\n                        [tristateSelectable]=\"false\"\n                        [ngModel]=\"_selectedAll\"\n                        (ngModelChange)=\"_toggleAllRows()\"\n                    ></fd-checkbox>\n                </th>\n                <th\n                    fd-table-cell\n                    *ngFor=\"let filter of _tableFilters.main; trackBy: _trackByFilterFn; let colindex = index\"\n                    [attr.aria-colindex]=\"colindex\"\n                >\n                    {{ filter.label }}\n                </th>\n            </tr>\n        </thead>\n        <tbody fd-table-body>\n            <ng-container\n                *ngFor=\"\n                    let row of displayedData | slice : _shownFrom : _shownCount;\n                    trackBy: _trackByTableRowFn;\n                    index as i\n                \"\n            >\n                <tr\n                    fd-table-row\n                    [hoverable]=\"!mobile\"\n                    [main]=\"mobile\"\n                    [attr.aria-selected]=\"_selectedMap[row[uniqueKey]]\"\n                    [activable]=\"!isMultiSelection\"\n                    (click)=\"!isMultiSelection && _toggleSelectRow(row)\"\n                >\n                    <td fd-table-cell [fitContent]=\"mobile\">\n                        <fd-checkbox\n                            *ngIf=\"isMultiSelection\"\n                            [name]=\"uid + '-row-' + i\"\n                            [ngModel]=\"_selectedMap[row[uniqueKey]]\"\n                            (change)=\"_toggleSelectRow(row)\"\n                        ></fd-checkbox>\n                    </td>\n                    <td\n                        fd-table-cell\n                        *ngFor=\"let filter of _tableFilters.main; let rowIndex = index\"\n                        [attr.aria-rowindex]=\"rowIndex\"\n                    >\n                        <ng-container *ngIf=\"_columnDefMap.get(filter.key) as columnDef; else defaultColumnRenderer\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"columnDef.templateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: row,\n                                    key: filter.key,\n                                    value: row[filter.key] || ''\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n                        <ng-template #defaultColumnRenderer>\n                            {{ row[filter.key] || '' }}\n                        </ng-template>\n                    </td>\n                </tr>\n\n                <tr\n                    fd-table-row\n                    *ngIf=\"mobile && _tableFilters.secondary.length\"\n                    [secondary]=\"true\"\n                    [attr.aria-selected]=\"_selectedMap[row[uniqueKey]]\"\n                >\n                    <td fd-table-cell></td>\n                    <td colspan=\"100%\" fd-table-cell [fitContent]=\"true\">\n                        <p fd-table-text *ngFor=\"let filter of _tableFilters.secondary\">\n                            <label>{{ filter.label }}:</label>\n                            {{ row[filter.key] || '' }}\n                        </p>\n                    </td>\n                </tr>\n            </ng-container>\n            <tr\n                fd-table-row\n                *ngIf=\"displayedData.length && mobile && _shownCount && _shownCount !== displayedData.length\"\n            >\n                <td colspan=\"100%\">\n                    <div fd-bar barDesign=\"header-with-subheader\">\n                        <div fd-bar-middle>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [label]=\"'platformVHD.selectTabMoreBtnLabel' | fdTranslate\"\n                                    (click)=\"_showMoreElements()\"\n                                ></button>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                </td>\n            </tr>\n            <ng-container *ngIf=\"loading && !displayedData.length\">\n                <tr fd-table-row *fdkRepeat=\"3\">\n                    <td fd-table-cell *fdkRepeat=\"3\">\n                        <fd-skeleton style=\"margin: auto 0\" type=\"text\" textLines=\"1\" width=\"60%\"></fd-skeleton>\n                    </td>\n                </tr>\n            </ng-container>\n            <tr fd-table-row *ngIf=\"!loading && !displayedData.length\">\n                <td fd-table-cell colspan=\"100%\">\n                    <div class=\"fdp-value-help-dialog__empty-message\">\n                        {{ emptyTableMessage || ('platformVHD.searchTableEmptyMessage' | fdTranslate) }}\n                    </div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n", styles: [".fdp-value-help-dialog__advanced-filters .fd-col{padding-top:0}.fdp-value-help-dialog__content-holder fdp-select-tab{display:flex;flex-direction:column;overflow:hidden;height:100%}.fdp-value-help-dialog__content-holder .table-header{flex:0 0 auto}.fdp-value-help-dialog__content-holder .table-content{flex:1 1 auto;overflow:auto;min-height:5rem}.fdp-value-help-dialog__table-holder{padding-top:0;padding-bottom:0}.fdp-value-help-dialog__empty-message{padding:1rem 2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i5.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i5.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i5.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i4.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: i5$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i7.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i7.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i7.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i7.TableTextDirective, selector: "[fdTableText], [fd-table-text]", inputs: ["fdTableTextClass", "noWrap", "title", "maxWidth"] }, { kind: "component", type: i8.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "directive", type: i9.InfiniteScrollDirective, selector: "[fdInfiniteScroll]", inputs: ["scrollPercent", "scrollOffset"], outputs: ["onScrollAction"] }, { kind: "directive", type: i10.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }, { kind: "component", type: i11.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "directive", type: i2$1.RepeatDirective, selector: "[fdkRepeat], [fdRepeat]", inputs: ["fdkRepeat", "fdRepeat"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-select-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DestroyedService], template: "<div class=\"table-header\">\n    <h5 fd-title role=\"heading\" aria-level=\"5\">\n        {{ 'platformVHD.selectTabDisplayCountLabel' | fdTranslate : { count: displayedData.length } }}\n    </h5>\n</div>\n<div\n    class=\"fdp-value-help-dialog__table-holder table-content\"\n    fd-scrollbar\n    fdInfiniteScroll\n    (onScrollAction)=\"_showMoreElements()\"\n    [scrollPercent]=\"80\"\n    role=\"table\"\n>\n    <table\n        fd-table\n        [popIn]=\"mobile\"\n        [noBorderX]=\"mobile\"\n        [noBorderY]=\"false\"\n        [attr.aria-colcount]=\"_tableFilters.main.length\"\n        [attr.aria-rowcount]=\"displayedData.length\"\n        role=\"grid\"\n        aria-multiselectable=\"true\"\n        [attr.aria-labelledby]=\"selectTabTitleId + ' ' + selectTabCountId\"\n    >\n        <label [id]=\"selectTabCountId\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n            {{\n                'platformVHD.selectTabCountHiddenA11yLabel'\n                    | fdTranslate : { rowCount: displayedData.length, colCount: _tableFilters.main.length }\n            }}\n        </label>\n        <label [id]=\"selectTabTitleId\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n            {{ 'platformVHD.selectTabDisplayCountLabel' | fdTranslate : { count: displayedData.length } }}\n        </label>\n        <thead fd-table-header>\n            <tr fd-table-row *ngIf=\"displayedData.length && _tableFilters\">\n                <th fd-table-cell [fitContent]=\"mobile\">\n                    <fd-checkbox\n                        *ngIf=\"isMultiSelection && allowSelectAll\"\n                        [name]=\"uid + '-row-all'\"\n                        [tristate]=\"true\"\n                        [tristateSelectable]=\"false\"\n                        [ngModel]=\"_selectedAll\"\n                        (ngModelChange)=\"_toggleAllRows()\"\n                    ></fd-checkbox>\n                </th>\n                <th\n                    fd-table-cell\n                    *ngFor=\"let filter of _tableFilters.main; trackBy: _trackByFilterFn; let colindex = index\"\n                    [attr.aria-colindex]=\"colindex\"\n                >\n                    {{ filter.label }}\n                </th>\n            </tr>\n        </thead>\n        <tbody fd-table-body>\n            <ng-container\n                *ngFor=\"\n                    let row of displayedData | slice : _shownFrom : _shownCount;\n                    trackBy: _trackByTableRowFn;\n                    index as i\n                \"\n            >\n                <tr\n                    fd-table-row\n                    [hoverable]=\"!mobile\"\n                    [main]=\"mobile\"\n                    [attr.aria-selected]=\"_selectedMap[row[uniqueKey]]\"\n                    [activable]=\"!isMultiSelection\"\n                    (click)=\"!isMultiSelection && _toggleSelectRow(row)\"\n                >\n                    <td fd-table-cell [fitContent]=\"mobile\">\n                        <fd-checkbox\n                            *ngIf=\"isMultiSelection\"\n                            [name]=\"uid + '-row-' + i\"\n                            [ngModel]=\"_selectedMap[row[uniqueKey]]\"\n                            (change)=\"_toggleSelectRow(row)\"\n                        ></fd-checkbox>\n                    </td>\n                    <td\n                        fd-table-cell\n                        *ngFor=\"let filter of _tableFilters.main; let rowIndex = index\"\n                        [attr.aria-rowindex]=\"rowIndex\"\n                    >\n                        <ng-container *ngIf=\"_columnDefMap.get(filter.key) as columnDef; else defaultColumnRenderer\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"columnDef.templateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: row,\n                                    key: filter.key,\n                                    value: row[filter.key] || ''\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n                        <ng-template #defaultColumnRenderer>\n                            {{ row[filter.key] || '' }}\n                        </ng-template>\n                    </td>\n                </tr>\n\n                <tr\n                    fd-table-row\n                    *ngIf=\"mobile && _tableFilters.secondary.length\"\n                    [secondary]=\"true\"\n                    [attr.aria-selected]=\"_selectedMap[row[uniqueKey]]\"\n                >\n                    <td fd-table-cell></td>\n                    <td colspan=\"100%\" fd-table-cell [fitContent]=\"true\">\n                        <p fd-table-text *ngFor=\"let filter of _tableFilters.secondary\">\n                            <label>{{ filter.label }}:</label>\n                            {{ row[filter.key] || '' }}\n                        </p>\n                    </td>\n                </tr>\n            </ng-container>\n            <tr\n                fd-table-row\n                *ngIf=\"displayedData.length && mobile && _shownCount && _shownCount !== displayedData.length\"\n            >\n                <td colspan=\"100%\">\n                    <div fd-bar barDesign=\"header-with-subheader\">\n                        <div fd-bar-middle>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [label]=\"'platformVHD.selectTabMoreBtnLabel' | fdTranslate\"\n                                    (click)=\"_showMoreElements()\"\n                                ></button>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                </td>\n            </tr>\n            <ng-container *ngIf=\"loading && !displayedData.length\">\n                <tr fd-table-row *fdkRepeat=\"3\">\n                    <td fd-table-cell *fdkRepeat=\"3\">\n                        <fd-skeleton style=\"margin: auto 0\" type=\"text\" textLines=\"1\" width=\"60%\"></fd-skeleton>\n                    </td>\n                </tr>\n            </ng-container>\n            <tr fd-table-row *ngIf=\"!loading && !displayedData.length\">\n                <td fd-table-cell colspan=\"100%\">\n                    <div class=\"fdp-value-help-dialog__empty-message\">\n                        {{ emptyTableMessage || ('platformVHD.searchTableEmptyMessage' | fdTranslate) }}\n                    </div>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</div>\n", styles: [".fdp-value-help-dialog__advanced-filters .fd-col{padding-top:0}.fdp-value-help-dialog__content-holder fdp-select-tab{display:flex;flex-direction:column;overflow:hidden;height:100%}.fdp-value-help-dialog__content-holder .table-header{flex:0 0 auto}.fdp-value-help-dialog__content-holder .table-content{flex:1 1 auto;overflow:auto;min-height:5rem}.fdp-value-help-dialog__table-holder{padding-top:0;padding-bottom:0}.fdp-value-help-dialog__empty-message{padding:1rem 2rem}\n"] }]
@@ -804,7 +804,7 @@ class DefineTabComponent extends VhdBaseTab {
     }
 }
 DefineTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefineTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DefineTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefineTabComponent, selector: "fdp-define-tab", inputs: { titleId: "titleId", selectedId: "selectedId", conditions: "conditions", included: "included", excluded: "excluded", strategyLabels: "strategyLabels" }, outputs: { includeChange: "includeChange", excludeChange: "excludeChange", conditionChange: "conditionChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<h5 [id]=\"titleId\" role=\"heading\" aria-level=\"5\" fd-title class=\"define-condition-title\">\n    {{ 'platformVHD.defineConditionTitle' | fdTranslate }}\n</h5>\n<ng-container *ngFor=\"let item of _conditions; trackBy: _trackByKeyAndType; index as i\">\n    <fd-layout-grid class=\"condition-row\" [noGap]=\"true\">\n        <div fdLayoutGridRow>\n            <div [fdLayoutGridCol]=\"5\">\n                <label id=\"CONDITIONPANEL_OPERATOR_LABEL\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n                    CONDITIONPANEL_OPERATOR_LABEL\n                </label>\n                <label [id]=\"selectedId\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n                    {{\n                        'platformVHD.defineConditionSelectedValueHiddenA11yLabel'\n                            | fdTranslate : { value: item.strategy }\n                    }}</label\n                >\n                <fd-select\n                    class=\"vhd-condition-filters\"\n                    fdLayoutGridCol\n                    colGrow\n                    [class.fd-select-custom-class]=\"false\"\n                    #sttr\n                    [controlTemplate]=\"customSelectTemplate\"\n                    [name]=\"uid + '-' + type + '-strategy-' + item.id\"\n                    [(ngModel)]=\"item.strategy\"\n                    (valueChange)=\"_filterChanged()\"\n                    role=\"combobox\"\n                    aria-roledescription=\"select\"\n                    aria-haspopup=\"listbox\"\n                    [ariaLabelledBy]=\"titleId + ' ' + 'CONDITIONPANEL_OPERATOR_LABEL' + ' ' + selectedId\"\n                >\n                    <ng-container *ngIf=\"_includeStrategy.length\">\n                        <li fd-list-group-header>\n                            {{ 'platformVHD.defineConditionConditionsGroupHeaderInclude' | fdTranslate }}\n                        </li>\n                        <li fd-option *ngFor=\"let strategy of _includeStrategy\" [value]=\"strategy.key\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"conditionStrategyOption\"\n                                [ngTemplateOutletContext]=\"{ type: _defineTypes.include, strategy: strategy }\"\n                            ></ng-container>\n                        </li>\n                    </ng-container>\n                    <ng-container *ngIf=\"_excludeStrategy.length\">\n                        <li fd-list-group-header>\n                            {{ 'platformVHD.defineConditionConditionsGroupHeaderExclude' | fdTranslate }}\n                        </li>\n                        <li fd-option *ngFor=\"let strategy of _excludeStrategy\" [value]=\"strategy.key\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"conditionStrategyOption\"\n                                [ngTemplateOutletContext]=\"{ type: _defineTypes.exclude, strategy: strategy }\"\n                            ></ng-container>\n                        </li>\n                    </ng-container>\n                </fd-select>\n            </div>\n            <div\n                fdLayoutGridCol\n                colGrow\n                *ngIf=\"\n                    item.strategy !== _strategyIncludeValues.empty && item.strategy !== _strategyExcludeValues.not_empty\n                \"\n            >\n                <div fdLayoutGridRow>\n                    <ng-container *ngIf=\"item.strategy === _strategyIncludeValues.between; else valueIncludeTemplate\">\n                        <div fdLayoutGridCol colGrow>\n                            <fd-form-input-message-group [triggers]=\"['focusin', 'focusout']\">\n                                <input\n                                    fd-form-control\n                                    fdp-condition-count-message\n                                    [maxCharacters]=\"_rules.maxCharactersHintCount\"\n                                    type=\"text\"\n                                    [placeholder]=\"'platformVHD.defineConditionFromPlaceholder' | fdTranslate\"\n                                    placeholder=\"from\"\n                                    required\n                                    [state]=\"fromModel.invalid ? 'error' : null\"\n                                    [name]=\"uid + '-' + type + '-from-' + item.id\"\n                                    (blur)=\"_validateConditionValue(item, [!!fromModel.valid, !!toModel.valid])\"\n                                    #fromModel=\"ngModel\"\n                                    [(ngModel)]=\"item.value\"\n                                />\n                                <ng-container\n                                    [ngTemplateOutlet]=\"countError\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item.value && item.value.length }\"\n                                ></ng-container>\n                            </fd-form-input-message-group>\n                        </div>\n                        <div fdLayoutGridCol colGrow>\n                            <fd-form-input-message-group [triggers]=\"['focusin', 'focusout']\">\n                                <input\n                                    fd-form-control\n                                    fdp-condition-count-message\n                                    [maxCharacters]=\"_rules.maxCharactersHintCount\"\n                                    type=\"text\"\n                                    [placeholder]=\"'platformVHD.defineConditionToPlaceholder' | fdTranslate\"\n                                    required\n                                    [state]=\"toModel.invalid ? 'error' : null\"\n                                    [name]=\"uid + '-' + type + '-to-' + item.id\"\n                                    (blur)=\"_validateConditionValue(item, [!!fromModel.valid, !!toModel.valid])\"\n                                    #toModel=\"ngModel\"\n                                    [(ngModel)]=\"item.valueTo\"\n                                />\n                                <ng-container\n                                    [ngTemplateOutlet]=\"countError\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item.value && item.value.length }\"\n                                ></ng-container>\n                            </fd-form-input-message-group>\n                        </div>\n                    </ng-container>\n                    <ng-template #valueIncludeTemplate>\n                        <div fdLayoutGridCol colGrow>\n                            <fd-form-input-message-group>\n                                <input\n                                    fd-form-control\n                                    fdp-condition-count-message\n                                    [maxCharacters]=\"_rules.maxCharactersHintCount\"\n                                    type=\"text\"\n                                    [placeholder]=\"'platformVHD.defineConditionValuePlaceholder' | fdTranslate\"\n                                    [state]=\"valueModel.invalid ? 'error' : null\"\n                                    [name]=\"uid + '-' + type + '-value-' + item.id\"\n                                    (blur)=\"_validateConditionValue(item, !!valueModel.valid)\"\n                                    #valueModel=\"ngModel\"\n                                    [(ngModel)]=\"item.value\"\n                                />\n                                <ng-container *ngIf=\"valueModel.invalid\">\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"countError\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: item.value && item.value.length }\"\n                                    ></ng-container>\n                                </ng-container>\n                            </fd-form-input-message-group>\n                        </div>\n                    </ng-template>\n                </div>\n            </div>\n            <div class=\"action-col\" fdLayoutGridCol colGrow>\n                <button\n                    fd-button\n                    [ariaLabel]=\"'platformVHD.defineConditionRemoveConditionButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    glyph=\"decline\"\n                    [title]=\"'platformVHD.defineConditionRemoveConditionButtonTitle' | fdTranslate\"\n                    (click)=\"removeCondition(i)\"\n                ></button>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-container>\n\n<fd-layout-grid class=\"condition-row new-condition-row\" [noGap]=\"true\">\n    <div fdLayoutGridRow>\n        <div fdLayoutGridCol colGrow>&nbsp;</div>\n        <div fdLayoutGridCol class=\"action-col\">\n            <button\n                fd-button\n                [attr.aria-label]=\"'platformVHD.defineConditionAddConditionButtonTitle' | fdTranslate\"\n                [label]=\"'platformVHD.defineConditionAddConditionButtonLabel' | fdTranslate\"\n                [title]=\"'platformVHD.defineConditionAddConditionButtonTitle' | fdTranslate\"\n                (click)=\"addEmptyCondition()\"\n            ></button>\n        </div>\n    </div>\n</fd-layout-grid>\n\n<ng-template #conditionStrategyOption let-type=\"type\" let-strategy=\"strategy\">\n    <ng-container [ngSwitch]=\"strategy.key\">\n        <ng-container *ngSwitchCase=\"'contains'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelContains' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'equalTo'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelEqualTo' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'between'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelBetween' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'startsWith'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelStartsWith' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'endsWith'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelEndsWith' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'lessThan'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelLessThan' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'lessThanEqual'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelLessThanEqual' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'greaterThan'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelGreaterThan' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'greaterThanEqual'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelGreaterThanEqual' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'empty'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelEmpty' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'not_equalTo'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelNotEqualTo' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'not_empty'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelNotEmpty' | fdTranslate }}\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #countError let-count>\n    <fd-form-message type=\"error\" *ngIf=\"count && count > 7\">\n        {{ 'platformVHD.defineConditionMaxCountError' | fdTranslate : { count: 7 } }}\n    </fd-form-message>\n</ng-template>\n\n<ng-template #customSelectTemplate let-textValue>\n    {{ textValue }}\n</ng-template>\n", styles: [".fdp-value-help-dialog .fd-row{min-width:100%!important;margin:0!important}.fdp-value-help-dialog .condition-row>.fd-col{padding:0 .5rem .5rem 0}.fdp-value-help-dialog .condition-row>.fd-col:last-child{padding-right:0}.fdp-value-help-dialog .condition-row .fd-input{margin:0}.fdp-value-help-dialog fdp-define-tab{height:100%;overflow:auto}.fdp-value-help-dialog fdp-define-tab .define-condition-title{padding:.625rem 0 0}.fdp-value-help-dialog fdp-define-tab .fd-container--no-gap{margin:0!important}.fdp-value-help-dialog .vhd-condition-filters fd-popover{width:100%}.fdp-value-help-dialog .condition-row{align-items:center}.fdp-value-help-dialog .condition-row .main-col{min-width:auto;flex:1 1 auto}.fdp-value-help-dialog .condition-row .action-col{min-width:auto;flex:0 0 auto}.fdp-value-help-dialog .condition-row .fd-input{margin-top:0}.fdp-value-help-dialog .condition-row.new-condition-row{padding-top:.5rem}.fdp-value-help-dialog .condition-row.new-condition-row .fd-button{margin-right:2.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i5$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5$2.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i5$2.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i5$2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i5$2.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i6.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i6.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i6.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "directive", type: i14.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i8$1.SelectComponent, selector: "fd-select", inputs: ["controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "extendedBodyTemplate", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i8$1.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: ConditionCountMessageDirective, selector: "[fdp-condition-count-message]", inputs: ["maxCharacters"] }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+DefineTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DefineTabComponent, selector: "fdp-define-tab", inputs: { titleId: "titleId", selectedId: "selectedId", conditions: "conditions", included: "included", excluded: "excluded", strategyLabels: "strategyLabels" }, outputs: { includeChange: "includeChange", excludeChange: "excludeChange", conditionChange: "conditionChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<h5 [id]=\"titleId\" role=\"heading\" aria-level=\"5\" fd-title class=\"define-condition-title\">\n    {{ 'platformVHD.defineConditionTitle' | fdTranslate }}\n</h5>\n<ng-container *ngFor=\"let item of _conditions; trackBy: _trackByKeyAndType; index as i\">\n    <fd-layout-grid class=\"condition-row\" [noGap]=\"true\">\n        <div fdLayoutGridRow>\n            <div [fdLayoutGridCol]=\"5\">\n                <label id=\"CONDITIONPANEL_OPERATOR_LABEL\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n                    CONDITIONPANEL_OPERATOR_LABEL\n                </label>\n                <label [id]=\"selectedId\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n                    {{\n                        'platformVHD.defineConditionSelectedValueHiddenA11yLabel'\n                            | fdTranslate : { value: item.strategy }\n                    }}</label\n                >\n                <fd-select\n                    class=\"vhd-condition-filters\"\n                    fdLayoutGridCol\n                    colGrow\n                    [class.fd-select-custom-class]=\"false\"\n                    #sttr\n                    [controlTemplate]=\"customSelectTemplate\"\n                    [name]=\"uid + '-' + type + '-strategy-' + item.id\"\n                    [(ngModel)]=\"item.strategy\"\n                    (valueChange)=\"_filterChanged()\"\n                    role=\"combobox\"\n                    aria-roledescription=\"select\"\n                    aria-haspopup=\"listbox\"\n                    [ariaLabelledBy]=\"titleId + ' ' + 'CONDITIONPANEL_OPERATOR_LABEL' + ' ' + selectedId\"\n                >\n                    <ng-container *ngIf=\"_includeStrategy.length\">\n                        <li fd-list-group-header>\n                            {{ 'platformVHD.defineConditionConditionsGroupHeaderInclude' | fdTranslate }}\n                        </li>\n                        <li fd-option *ngFor=\"let strategy of _includeStrategy\" [value]=\"strategy.key\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"conditionStrategyOption\"\n                                [ngTemplateOutletContext]=\"{ type: _defineTypes.include, strategy: strategy }\"\n                            ></ng-container>\n                        </li>\n                    </ng-container>\n                    <ng-container *ngIf=\"_excludeStrategy.length\">\n                        <li fd-list-group-header>\n                            {{ 'platformVHD.defineConditionConditionsGroupHeaderExclude' | fdTranslate }}\n                        </li>\n                        <li fd-option *ngFor=\"let strategy of _excludeStrategy\" [value]=\"strategy.key\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"conditionStrategyOption\"\n                                [ngTemplateOutletContext]=\"{ type: _defineTypes.exclude, strategy: strategy }\"\n                            ></ng-container>\n                        </li>\n                    </ng-container>\n                </fd-select>\n            </div>\n            <div\n                fdLayoutGridCol\n                colGrow\n                *ngIf=\"\n                    item.strategy !== _strategyIncludeValues.empty && item.strategy !== _strategyExcludeValues.not_empty\n                \"\n            >\n                <div fdLayoutGridRow>\n                    <ng-container *ngIf=\"item.strategy === _strategyIncludeValues.between; else valueIncludeTemplate\">\n                        <div fdLayoutGridCol colGrow>\n                            <fd-form-input-message-group [triggers]=\"['focusin', 'focusout']\">\n                                <input\n                                    fd-form-control\n                                    fdp-condition-count-message\n                                    [maxCharacters]=\"_rules.maxCharactersHintCount\"\n                                    type=\"text\"\n                                    [placeholder]=\"'platformVHD.defineConditionFromPlaceholder' | fdTranslate\"\n                                    placeholder=\"from\"\n                                    required\n                                    [state]=\"fromModel.invalid ? 'error' : null\"\n                                    [name]=\"uid + '-' + type + '-from-' + item.id\"\n                                    (blur)=\"_validateConditionValue(item, [!!fromModel.valid, !!toModel.valid])\"\n                                    #fromModel=\"ngModel\"\n                                    [(ngModel)]=\"item.value\"\n                                />\n                                <ng-container\n                                    [ngTemplateOutlet]=\"countError\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item.value && item.value.length }\"\n                                ></ng-container>\n                            </fd-form-input-message-group>\n                        </div>\n                        <div fdLayoutGridCol colGrow>\n                            <fd-form-input-message-group [triggers]=\"['focusin', 'focusout']\">\n                                <input\n                                    fd-form-control\n                                    fdp-condition-count-message\n                                    [maxCharacters]=\"_rules.maxCharactersHintCount\"\n                                    type=\"text\"\n                                    [placeholder]=\"'platformVHD.defineConditionToPlaceholder' | fdTranslate\"\n                                    required\n                                    [state]=\"toModel.invalid ? 'error' : null\"\n                                    [name]=\"uid + '-' + type + '-to-' + item.id\"\n                                    (blur)=\"_validateConditionValue(item, [!!fromModel.valid, !!toModel.valid])\"\n                                    #toModel=\"ngModel\"\n                                    [(ngModel)]=\"item.valueTo\"\n                                />\n                                <ng-container\n                                    [ngTemplateOutlet]=\"countError\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item.value && item.value.length }\"\n                                ></ng-container>\n                            </fd-form-input-message-group>\n                        </div>\n                    </ng-container>\n                    <ng-template #valueIncludeTemplate>\n                        <div fdLayoutGridCol colGrow>\n                            <fd-form-input-message-group>\n                                <input\n                                    fd-form-control\n                                    fdp-condition-count-message\n                                    [maxCharacters]=\"_rules.maxCharactersHintCount\"\n                                    type=\"text\"\n                                    [placeholder]=\"'platformVHD.defineConditionValuePlaceholder' | fdTranslate\"\n                                    [state]=\"valueModel.invalid ? 'error' : null\"\n                                    [name]=\"uid + '-' + type + '-value-' + item.id\"\n                                    (blur)=\"_validateConditionValue(item, !!valueModel.valid)\"\n                                    #valueModel=\"ngModel\"\n                                    [(ngModel)]=\"item.value\"\n                                />\n                                <ng-container *ngIf=\"valueModel.invalid\">\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"countError\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: item.value && item.value.length }\"\n                                    ></ng-container>\n                                </ng-container>\n                            </fd-form-input-message-group>\n                        </div>\n                    </ng-template>\n                </div>\n            </div>\n            <div class=\"action-col\" fdLayoutGridCol colGrow>\n                <button\n                    fd-button\n                    [ariaLabel]=\"'platformVHD.defineConditionRemoveConditionButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    glyph=\"decline\"\n                    [title]=\"'platformVHD.defineConditionRemoveConditionButtonTitle' | fdTranslate\"\n                    (click)=\"removeCondition(i)\"\n                ></button>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-container>\n\n<fd-layout-grid class=\"condition-row new-condition-row\" [noGap]=\"true\">\n    <div fdLayoutGridRow>\n        <div fdLayoutGridCol colGrow>&nbsp;</div>\n        <div fdLayoutGridCol class=\"action-col\">\n            <button\n                fd-button\n                [attr.aria-label]=\"'platformVHD.defineConditionAddConditionButtonTitle' | fdTranslate\"\n                [label]=\"'platformVHD.defineConditionAddConditionButtonLabel' | fdTranslate\"\n                [title]=\"'platformVHD.defineConditionAddConditionButtonTitle' | fdTranslate\"\n                (click)=\"addEmptyCondition()\"\n            ></button>\n        </div>\n    </div>\n</fd-layout-grid>\n\n<ng-template #conditionStrategyOption let-type=\"type\" let-strategy=\"strategy\">\n    <ng-container [ngSwitch]=\"strategy.key\">\n        <ng-container *ngSwitchCase=\"'contains'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelContains' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'equalTo'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelEqualTo' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'between'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelBetween' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'startsWith'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelStartsWith' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'endsWith'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelEndsWith' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'lessThan'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelLessThan' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'lessThanEqual'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelLessThanEqual' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'greaterThan'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelGreaterThan' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'greaterThanEqual'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelGreaterThanEqual' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'empty'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelEmpty' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'not_equalTo'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelNotEqualTo' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'not_empty'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelNotEmpty' | fdTranslate }}\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #countError let-count>\n    <fd-form-message type=\"error\" *ngIf=\"count && count > 7\">\n        {{ 'platformVHD.defineConditionMaxCountError' | fdTranslate : { count: 7 } }}\n    </fd-form-message>\n</ng-template>\n\n<ng-template #customSelectTemplate let-textValue>\n    {{ textValue }}\n</ng-template>\n", styles: [".fdp-value-help-dialog .fd-row{min-width:100%!important;margin:0!important}.fdp-value-help-dialog .condition-row>.fd-col{padding:0 .5rem .5rem 0}.fdp-value-help-dialog .condition-row>.fd-col:last-child{padding-right:0}.fdp-value-help-dialog .condition-row .fd-input{margin:0}.fdp-value-help-dialog fdp-define-tab{height:100%;overflow:auto}.fdp-value-help-dialog fdp-define-tab .define-condition-title{padding:.625rem 0 0}.fdp-value-help-dialog fdp-define-tab .fd-container--no-gap{margin:0!important}.fdp-value-help-dialog .vhd-condition-filters fd-popover{width:100%}.fdp-value-help-dialog .condition-row{align-items:center}.fdp-value-help-dialog .condition-row .main-col{min-width:auto;flex:1 1 auto}.fdp-value-help-dialog .condition-row .action-col{min-width:auto;flex:0 0 auto}.fdp-value-help-dialog .condition-row .fd-input{margin-top:0}.fdp-value-help-dialog .condition-row.new-condition-row{padding-top:.5rem}.fdp-value-help-dialog .condition-row.new-condition-row .fd-button{margin-right:2.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.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: i5$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5$2.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i5$2.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i5$2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i5$2.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i6.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i6.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i6.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "directive", type: i14.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i8$1.SelectComponent, selector: "fd-select", inputs: ["controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "extendedBodyTemplate", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i8$1.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "directive", type: ConditionCountMessageDirective, selector: "[fdp-condition-count-message]", inputs: ["maxCharacters"] }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DefineTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-define-tab', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 [id]=\"titleId\" role=\"heading\" aria-level=\"5\" fd-title class=\"define-condition-title\">\n    {{ 'platformVHD.defineConditionTitle' | fdTranslate }}\n</h5>\n<ng-container *ngFor=\"let item of _conditions; trackBy: _trackByKeyAndType; index as i\">\n    <fd-layout-grid class=\"condition-row\" [noGap]=\"true\">\n        <div fdLayoutGridRow>\n            <div [fdLayoutGridCol]=\"5\">\n                <label id=\"CONDITIONPANEL_OPERATOR_LABEL\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n                    CONDITIONPANEL_OPERATOR_LABEL\n                </label>\n                <label [id]=\"selectedId\" fd-form-label class=\"fdp-value-help-dialog__hidden_label\">\n                    {{\n                        'platformVHD.defineConditionSelectedValueHiddenA11yLabel'\n                            | fdTranslate : { value: item.strategy }\n                    }}</label\n                >\n                <fd-select\n                    class=\"vhd-condition-filters\"\n                    fdLayoutGridCol\n                    colGrow\n                    [class.fd-select-custom-class]=\"false\"\n                    #sttr\n                    [controlTemplate]=\"customSelectTemplate\"\n                    [name]=\"uid + '-' + type + '-strategy-' + item.id\"\n                    [(ngModel)]=\"item.strategy\"\n                    (valueChange)=\"_filterChanged()\"\n                    role=\"combobox\"\n                    aria-roledescription=\"select\"\n                    aria-haspopup=\"listbox\"\n                    [ariaLabelledBy]=\"titleId + ' ' + 'CONDITIONPANEL_OPERATOR_LABEL' + ' ' + selectedId\"\n                >\n                    <ng-container *ngIf=\"_includeStrategy.length\">\n                        <li fd-list-group-header>\n                            {{ 'platformVHD.defineConditionConditionsGroupHeaderInclude' | fdTranslate }}\n                        </li>\n                        <li fd-option *ngFor=\"let strategy of _includeStrategy\" [value]=\"strategy.key\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"conditionStrategyOption\"\n                                [ngTemplateOutletContext]=\"{ type: _defineTypes.include, strategy: strategy }\"\n                            ></ng-container>\n                        </li>\n                    </ng-container>\n                    <ng-container *ngIf=\"_excludeStrategy.length\">\n                        <li fd-list-group-header>\n                            {{ 'platformVHD.defineConditionConditionsGroupHeaderExclude' | fdTranslate }}\n                        </li>\n                        <li fd-option *ngFor=\"let strategy of _excludeStrategy\" [value]=\"strategy.key\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"conditionStrategyOption\"\n                                [ngTemplateOutletContext]=\"{ type: _defineTypes.exclude, strategy: strategy }\"\n                            ></ng-container>\n                        </li>\n                    </ng-container>\n                </fd-select>\n            </div>\n            <div\n                fdLayoutGridCol\n                colGrow\n                *ngIf=\"\n                    item.strategy !== _strategyIncludeValues.empty && item.strategy !== _strategyExcludeValues.not_empty\n                \"\n            >\n                <div fdLayoutGridRow>\n                    <ng-container *ngIf=\"item.strategy === _strategyIncludeValues.between; else valueIncludeTemplate\">\n                        <div fdLayoutGridCol colGrow>\n                            <fd-form-input-message-group [triggers]=\"['focusin', 'focusout']\">\n                                <input\n                                    fd-form-control\n                                    fdp-condition-count-message\n                                    [maxCharacters]=\"_rules.maxCharactersHintCount\"\n                                    type=\"text\"\n                                    [placeholder]=\"'platformVHD.defineConditionFromPlaceholder' | fdTranslate\"\n                                    placeholder=\"from\"\n                                    required\n                                    [state]=\"fromModel.invalid ? 'error' : null\"\n                                    [name]=\"uid + '-' + type + '-from-' + item.id\"\n                                    (blur)=\"_validateConditionValue(item, [!!fromModel.valid, !!toModel.valid])\"\n                                    #fromModel=\"ngModel\"\n                                    [(ngModel)]=\"item.value\"\n                                />\n                                <ng-container\n                                    [ngTemplateOutlet]=\"countError\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item.value && item.value.length }\"\n                                ></ng-container>\n                            </fd-form-input-message-group>\n                        </div>\n                        <div fdLayoutGridCol colGrow>\n                            <fd-form-input-message-group [triggers]=\"['focusin', 'focusout']\">\n                                <input\n                                    fd-form-control\n                                    fdp-condition-count-message\n                                    [maxCharacters]=\"_rules.maxCharactersHintCount\"\n                                    type=\"text\"\n                                    [placeholder]=\"'platformVHD.defineConditionToPlaceholder' | fdTranslate\"\n                                    required\n                                    [state]=\"toModel.invalid ? 'error' : null\"\n                                    [name]=\"uid + '-' + type + '-to-' + item.id\"\n                                    (blur)=\"_validateConditionValue(item, [!!fromModel.valid, !!toModel.valid])\"\n                                    #toModel=\"ngModel\"\n                                    [(ngModel)]=\"item.valueTo\"\n                                />\n                                <ng-container\n                                    [ngTemplateOutlet]=\"countError\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item.value && item.value.length }\"\n                                ></ng-container>\n                            </fd-form-input-message-group>\n                        </div>\n                    </ng-container>\n                    <ng-template #valueIncludeTemplate>\n                        <div fdLayoutGridCol colGrow>\n                            <fd-form-input-message-group>\n                                <input\n                                    fd-form-control\n                                    fdp-condition-count-message\n                                    [maxCharacters]=\"_rules.maxCharactersHintCount\"\n                                    type=\"text\"\n                                    [placeholder]=\"'platformVHD.defineConditionValuePlaceholder' | fdTranslate\"\n                                    [state]=\"valueModel.invalid ? 'error' : null\"\n                                    [name]=\"uid + '-' + type + '-value-' + item.id\"\n                                    (blur)=\"_validateConditionValue(item, !!valueModel.valid)\"\n                                    #valueModel=\"ngModel\"\n                                    [(ngModel)]=\"item.value\"\n                                />\n                                <ng-container *ngIf=\"valueModel.invalid\">\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"countError\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: item.value && item.value.length }\"\n                                    ></ng-container>\n                                </ng-container>\n                            </fd-form-input-message-group>\n                        </div>\n                    </ng-template>\n                </div>\n            </div>\n            <div class=\"action-col\" fdLayoutGridCol colGrow>\n                <button\n                    fd-button\n                    [ariaLabel]=\"'platformVHD.defineConditionRemoveConditionButtonTitle' | fdTranslate\"\n                    fdType=\"transparent\"\n                    glyph=\"decline\"\n                    [title]=\"'platformVHD.defineConditionRemoveConditionButtonTitle' | fdTranslate\"\n                    (click)=\"removeCondition(i)\"\n                ></button>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-container>\n\n<fd-layout-grid class=\"condition-row new-condition-row\" [noGap]=\"true\">\n    <div fdLayoutGridRow>\n        <div fdLayoutGridCol colGrow>&nbsp;</div>\n        <div fdLayoutGridCol class=\"action-col\">\n            <button\n                fd-button\n                [attr.aria-label]=\"'platformVHD.defineConditionAddConditionButtonTitle' | fdTranslate\"\n                [label]=\"'platformVHD.defineConditionAddConditionButtonLabel' | fdTranslate\"\n                [title]=\"'platformVHD.defineConditionAddConditionButtonTitle' | fdTranslate\"\n                (click)=\"addEmptyCondition()\"\n            ></button>\n        </div>\n    </div>\n</fd-layout-grid>\n\n<ng-template #conditionStrategyOption let-type=\"type\" let-strategy=\"strategy\">\n    <ng-container [ngSwitch]=\"strategy.key\">\n        <ng-container *ngSwitchCase=\"'contains'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelContains' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'equalTo'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelEqualTo' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'between'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelBetween' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'startsWith'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelStartsWith' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'endsWith'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelEndsWith' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'lessThan'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelLessThan' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'lessThanEqual'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelLessThanEqual' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'greaterThan'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelGreaterThan' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'greaterThanEqual'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelGreaterThanEqual' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'empty'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelEmpty' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'not_equalTo'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelNotEqualTo' | fdTranslate }}\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'not_empty'\">\n            {{ 'platformVHD.defineConditionConditionStrategyLabelNotEmpty' | fdTranslate }}\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #countError let-count>\n    <fd-form-message type=\"error\" *ngIf=\"count && count > 7\">\n        {{ 'platformVHD.defineConditionMaxCountError' | fdTranslate : { count: 7 } }}\n    </fd-form-message>\n</ng-template>\n\n<ng-template #customSelectTemplate let-textValue>\n    {{ textValue }}\n</ng-template>\n", styles: [".fdp-value-help-dialog .fd-row{min-width:100%!important;margin:0!important}.fdp-value-help-dialog .condition-row>.fd-col{padding:0 .5rem .5rem 0}.fdp-value-help-dialog .condition-row>.fd-col:last-child{padding-right:0}.fdp-value-help-dialog .condition-row .fd-input{margin:0}.fdp-value-help-dialog fdp-define-tab{height:100%;overflow:auto}.fdp-value-help-dialog fdp-define-tab .define-condition-title{padding:.625rem 0 0}.fdp-value-help-dialog fdp-define-tab .fd-container--no-gap{margin:0!important}.fdp-value-help-dialog .vhd-condition-filters fd-popover{width:100%}.fdp-value-help-dialog .condition-row{align-items:center}.fdp-value-help-dialog .condition-row .main-col{min-width:auto;flex:1 1 auto}.fdp-value-help-dialog .condition-row .action-col{min-width:auto;flex:0 0 auto}.fdp-value-help-dialog .condition-row .fd-input{margin-top:0}.fdp-value-help-dialog .condition-row.new-condition-row{padding-top:.5rem}.fdp-value-help-dialog .condition-row.new-condition-row .fd-button{margin-right:2.5rem}\n"] }]
@@ -1109,17 +1109,26 @@ class PlatformValueHelpDialogComponent extends VhdComponent {
      * Close dialog with value;
      */
     success() {
-        if (this.activeDialog) {
-            const value = {
-                selected: this.selectedItems,
-                conditions: this.validConditions
-            };
+        if (!this.activeDialog) {
+            return;
+        }
+        const value = {
+            selected: this.selectedItems,
+            conditions: this.validConditions
+        };
+        this._internalLoadingState = true;
+        this._changeDetectorRef.detectChanges();
+        this._getValidatorFunction(value)
+            .pipe(tap(() => {
+            this._internalLoadingState = false;
+            this._changeDetectorRef.detectChanges();
+        }), filter((r) => r), take(1), takeUntil$1(this._destroyed))
+            .subscribe(() => {
             if (typeof this.formatToken === 'function') {
                 this.formatToken(value);
-                return this.activeDialog.close(value);
             }
-            this.activeDialog.close(value);
-        }
+            this.activeDialog?.close(value);
+        });
     }
     /**
      * Hide advanced search on mobile view and if it's opened
@@ -1309,14 +1318,19 @@ class PlatformValueHelpDialogComponent extends VhdComponent {
         }
         return true;
     }
+    /** @hidden */
+    _getValidatorFunction(value) {
+        const validator = typeof this.tokenValidator === 'function' ? this.tokenValidator(value) : of(true);
+        return isObservable(validator) ? validator : of(validator);
+    }
 }
 PlatformValueHelpDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PlatformValueHelpDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.DialogService }, { token: i2$1.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-PlatformValueHelpDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PlatformValueHelpDialogComponent, selector: "fdp-value-help-dialog", inputs: { id: "id", value: "value", dialogTitle: "dialogTitle", initialTab: "initialTab", tabs: "tabs", isOpenAdvanced: "isOpenAdvanced", dataSource: "dataSource", dialogConfig: "dialogConfig", uniqueKey: "uniqueKey", headerId: "headerId", tokenViewField: "tokenViewField", tokenizerFn: "tokenizerFn", mobile: "mobile", formatToken: "formatToken", conditionDisplayFn: "conditionDisplayFn", selectTabTitle: "selectTabTitle", searchSelection: "searchSelection", searchTableEmptyMessage: "searchTableEmptyMessage", searchTablePageSize: "searchTablePageSize", searchTableMobileHeaders: "searchTableMobileHeaders", maxShownInitialFilters: "maxShownInitialFilters", loading: "loading", defineTabTitle: "defineTabTitle", allowSelectAll: "allowSelectAll", defineStrategyLabels: "defineStrategyLabels" }, outputs: { valueChange: "valueChange", onDataRequested: "onDataRequested", onDataReceived: "onDataReceived" }, providers: [
+PlatformValueHelpDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PlatformValueHelpDialogComponent, selector: "fdp-value-help-dialog", inputs: { id: "id", value: "value", dialogTitle: "dialogTitle", initialTab: "initialTab", tabs: "tabs", isOpenAdvanced: "isOpenAdvanced", dataSource: "dataSource", dialogConfig: "dialogConfig", uniqueKey: "uniqueKey", headerId: "headerId", tokenViewField: "tokenViewField", tokenizerFn: "tokenizerFn", mobile: "mobile", formatToken: "formatToken", conditionDisplayFn: "conditionDisplayFn", tokenValidator: "tokenValidator", selectTabTitle: "selectTabTitle", searchSelection: "searchSelection", searchTableEmptyMessage: "searchTableEmptyMessage", searchTablePageSize: "searchTablePageSize", searchTableMobileHeaders: "searchTableMobileHeaders", maxShownInitialFilters: "maxShownInitialFilters", loading: "loading", defineTabTitle: "defineTabTitle", allowSelectAll: "allowSelectAll", defineStrategyLabels: "defineStrategyLabels" }, outputs: { valueChange: "valueChange", onDataRequested: "onDataRequested", onDataReceived: "onDataReceived" }, providers: [
         {
             provide: VhdComponent,
             useExisting: PlatformValueHelpDialogComponent
         }
-    ], queries: [{ propertyName: "filters", predicate: VhdFilterComponent }, { propertyName: "columnDef", predicate: ValueHelpColumnDefDirective }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"header\">\n                <ng-container *ngTemplateOutlet=\"mobile ? mobileDialogTitle : desktopDialogTitle\"></ng-container>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body [dir]=\"_dir\">\n            <ng-container *ngIf=\"!mobile\">\n                <ng-container *ngTemplateOutlet=\"advancedSearchContent\"></ng-container>\n            </ng-container>\n            <div fd-scrollbar class=\"fdp-value-help-dialog__content-holder\">\n                <ng-container *ngIf=\"mobile\">\n                    <ng-container *ngTemplateOutlet=\"advancedSearchContent\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"selectedTab === _tabTypes.selectFromList\">\n                    <ng-container *ngTemplateOutlet=\"selectionContent\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"selectedTab === _tabTypes.defineConditions\">\n                    <ng-container *ngTemplateOutlet=\"defineConditionsContent\"></ng-container>\n                </ng-container>\n            </div>\n        </fd-dialog-body>\n        <fd-dialog-footer [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"footer\">\n                <div\n                    class=\"fdp-value-help-dialog__row fdp-value-help-dialog__selection-row\"\n                    [attr.aria-label]=\"'platformVHD.selectionBarLabel' | fdTranslate\"\n                    *ngIf=\"!isMobileAdvancedSearchActive\"\n                >\n                    <h5 fd-title class=\"selected-and-condition-title\" [id]=\"id + '-selected-item'\">\n                        <ng-container *ngIf=\"hasSelectedAndConditions; else noItemsPanelTitle\">\n                            {{ 'platformVHD.selectedAndConditionLabel' | fdTranslate }}\n                            ({{ selectedItems.length + validConditions.length }})\n                        </ng-container>\n                    </h5>\n\n                    <div class=\"fdp-value-help-dialog__tokens-wrapper\">\n                        <div class=\"fdp-value-help-dialog__tokens\">\n                            <!-- Selected items -->\n                            <fd-tokenizer [tokenizerFocusable]=\"false\">\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"removeSelected(selectedIndex)\"\n                                    *ngFor=\"\n                                        let item of selectedItems;\n                                        index as selectedIndex;\n                                        trackBy: _trackBySelectedFn\n                                    \"\n                                    >{{ !!tokenizerFn ? (item | displayFnPipe : tokenizerFn) : item[tokenViewField] }}\n                                </fd-token>\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"removeCondition(conditionIndex)\"\n                                    *ngFor=\"\n                                        let item of validConditions;\n                                        index as conditionIndex;\n                                        trackBy: _trackByConditionFn\n                                    \"\n                                >\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"conditionValue\"\n                                        [ngTemplateOutletContext]=\"{ item: item }\"\n                                    ></ng-container>\n                                </fd-token>\n                                <input fd-form-control fd-tokenizer-input [disabled]=\"!hasSelectedAndConditions\" />\n                            </fd-tokenizer>\n                        </div>\n                        <button\n                            (click)=\"clearSelectedAndConditionItems()\"\n                            class=\"fdp-value-help-dialog__tokens-clear\"\n                            fd-button\n                            [disabled]=\"!hasSelectedAndConditions\"\n                            fdType=\"transparent\"\n                            [title]=\"'platformVHD.footerClearSelectedTitle' | fdTranslate\"\n                            glyph=\"decline\"\n                            [attr.aria-label]=\"'platformVHD.footerClearSelectedAriaLabel' | fdTranslate\"\n                        ></button>\n                    </div>\n                </div>\n                <div class=\"fdp-value-help-dialog__actions-row\">\n                    <button\n                        fd-button\n                        data-go-advanced\n                        [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                        fdType=\"emphasized\"\n                        *ngIf=\"mobile && isOpenAdvanced\"\n                        (click)=\"searchAdvanced()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'platformVHD.successButtonLabel' | fdTranslate\"\n                        fdType=\"emphasized\"\n                        *ngIf=\"selectedTab !== _tabTypes.advancedSearch\"\n                        (click)=\"success()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'platformVHD.cancelButtonLabel' | fdTranslate\"\n                        fdType=\"transparent\"\n                        (click)=\"dismiss()\"\n                    ></button>\n                </div>\n            </ng-template>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n\n<ng-template #noItemsPanelTitle>\n    {{ 'platformVHD.selectedEmptyLabel' | fdTranslate }}\n</ng-template>\n\n<ng-template #advancedSearchContent>\n    <ng-container *ngIf=\"isSelectionTab\">\n        <form class=\"fdp-value-help-dialog__row fdp-value-help-dialog__advanced-search\" [id]=\"'advanced-search-' + id\">\n            <fd-layout-grid *ngIf=\"!mobile || (mobile && !isOpenAdvanced)\">\n                <div fdLayoutGridRow>\n                    <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"mobile ? 12 : 6\" [colXl]=\"mobile ? 12 : 6\">\n                        <fdp-search-field\n                            [placeholder]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                            (searchSubmit)=\"search()\"\n                            (inputChange)=\"_mainSearch = $event.text\"\n                        ></fdp-search-field>\n                    </div>\n\n                    <div\n                        [fdLayoutGridCol]=\"12\"\n                        [colMd]=\"12\"\n                        [colLg]=\"mobile ? 12 : 6\"\n                        [colXl]=\"mobile ? 12 : 6\"\n                        *ngIf=\"_hasAdvanced\"\n                        class=\"fdp-value-help-dialog__advanced-actions\"\n                    >\n                        <fd-toolbar [clearBorder]=\"true\">\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\n                            <button\n                                fd-toolbar-item\n                                fd-button\n                                fdType=\"transparent\"\n                                *ngIf=\"_hasAdvanced\"\n                                [label]=\"\n                                    (mobile\n                                        ? 'platformVHD.searchAdvancedSearchLabel'\n                                        : isOpenAdvanced\n                                        ? 'platformVHD.searchHideAdvancedSearchLabel'\n                                        : 'platformVHD.searchShowAdvancedSearchLabel'\n                                    ) | fdTranslate\n                                \"\n                                (click)=\"toggleAdvancedSearch()\"\n                            ></button>\n                            <button\n                                fd-toolbar-item\n                                type=\"submit\"\n                                fd-button\n                                [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                fdType=\"emphasized\"\n                                [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                (click)=\"filter()\"\n                            ></button>\n                        </fd-toolbar>\n                    </div>\n                </div>\n            </fd-layout-grid>\n            <div\n                [id]=\"'advanced-search-content-' + id\"\n                *ngIf=\"isOpenAdvanced && _hasAdvanced\"\n                class=\"fdp-value-help-dialog__advanced-filters\"\n            >\n                <fd-busy-indicator [loading]=\"loadingState && _firstLoadingDone\" [block]=\"true\">\n                    <fd-layout-grid\n                        *ngIf=\"_firstLoadingDone; else filtersLoading\"\n                        [class.fdp-value-help-dialog__with-toggle-all]=\"filters.length > maxShownInitialFilters\"\n                    >\n                        <div fdLayoutGridRow>\n                            <ng-container\n                                *ngFor=\"\n                                    let filter of _displayedFilters | slice : 0 : shownFilterCount + 1;\n                                    trackBy: _trackByFilterFn\n                                \"\n                            >\n                                <ng-container *ngIf=\"filter.advanced\">\n                                    <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"6\" [colXl]=\"3\">\n                                        <label class=\"fd-form-group__header\" fd-form-label [for]=\"'input' + filter.key\"\n                                            >{{ filter.label }}:</label\n                                        >\n                                        <ng-container *ngIf=\"filter.filterDef\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"filter.filterDef.templateRef\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: filter }\"\n                                            ></ng-template>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!filter.filterDef\">\n                                            <input\n                                                [(ngModel)]=\"filter.value\"\n                                                fd-form-control\n                                                type=\"text\"\n                                                [name]=\"'search-by-' + filter.label\"\n                                                [id]=\"'input' + filter.key\"\n                                            />\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </ng-container>\n\n                            <div\n                                colGrow\n                                [fdLayoutGridCol]=\"12\"\n                                [colMd]=\"12\"\n                                [colLg]=\"6\"\n                                [colXl]=\"3\"\n                                *ngIf=\"filters.length > maxShownInitialFilters\"\n                                class=\"fdp-value-help-dialog__toggle-filters\"\n                            >\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    (click)=\"toggleShownFilters()\"\n                                    [label]=\"\n                                        (isShowAllFilters\n                                            ? 'platformVHD.searchHideAllAdvancedSearchLabel'\n                                            : 'platformVHD.searchShowAllAdvancedSearchLabel'\n                                        ) | fdTranslate\n                                    \"\n                                ></button>\n                            </div>\n                        </div>\n                    </fd-layout-grid>\n\n                    <ng-template #filtersLoading>\n                        <fd-skeleton width=\"100%\" height=\"100px\">\n                            <svg:rect x=\"0\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"0\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n                            <svg:rect x=\"35%\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"35%\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n                            <svg:rect x=\"0\" y=\"60\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"0\" y=\"80\" rx=\"4\" width=\"25%\" height=\"16\" />\n                        </fd-skeleton>\n                    </ng-template>\n                </fd-busy-indicator>\n            </div>\n        </form>\n    </ng-container>\n</ng-template>\n\n<ng-template #selectionContent>\n    <fd-busy-indicator\n        [loading]=\"loadingState && _firstLoadingDone\"\n        [block]=\"true\"\n        class=\"fdp-value-help-dialog__table-busy-indicator\"\n    >\n        <fdp-select-tab\n            [selected]=\"selectedItems\"\n            [loading]=\"loadingState && !_firstLoadingDone\"\n            [uid]=\"id\"\n            [displayedData]=\"_displayedData\"\n            [tabTitle]=\"selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate)\"\n            [mobile]=\"mobile\"\n            [selection]=\"searchSelection\"\n            [emptyTableMessage]=\"searchTableEmptyMessage || ('platformVHD.searchTableEmptyMessage' | fdTranslate)\"\n            [uniqueKey]=\"uniqueKey\"\n            [pageSize]=\"searchTablePageSize\"\n            [defaultMobileHeaders]=\"searchTableMobileHeaders\"\n            [filters]=\"_displayedFilters\"\n            [allowSelectAll]=\"allowSelectAll\"\n            (select)=\"onSelect($event)\"\n        ></fdp-select-tab>\n    </fd-busy-indicator>\n</ng-template>\n\n<ng-template #defineConditionsContent>\n    <div fd-scrollbar>\n        <fdp-define-tab\n            [strategyLabels]=\"defineStrategyLabels\"\n            [conditions]=\"conditionItems\"\n            [uid]=\"id\"\n            [tabTitle]=\"defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate)\"\n            [mobile]=\"mobile\"\n            (conditionChange)=\"onConditionChange($event)\"\n        ></fdp-define-tab>\n    </div>\n</ng-template>\n\n<ng-template #dialogTitleText>\n    <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n</ng-template>\n\n<ng-template #tabLink let-title=\"title\" let-type=\"type\">\n    <ng-container *ngIf=\"selectedTab === type && showSelectionTab && showDefineTab\">\n        <button\n            fd-button\n            glyph=\"navigation-left-arrow\"\n            fdType=\"transparent\"\n            (click)=\"switchTab()\"\n            [title]=\"'platformVHD.selectMobileTabBackBtnTitle' | fdTranslate\"\n        ></button>\n        <h5 fd-title>{{ title }}</h5>\n    </ng-container>\n    <ng-container *ngIf=\"selectedTab !== type\">\n        <a\n            fd-list-link\n            (click)=\"switchTab(type)\"\n            [title]=\"'platformVHD.selectMobileTabBtnOpenDialogLabel' | fdTranslate\"\n        >\n            <span fd-list-title>{{ title }}</span>\n            <i fd-list-icon glyph=\"navigation-right-arrow\"></i>\n        </a>\n    </ng-container>\n</ng-template>\n\n<ng-template #advancedHeader>\n    <button fd-button glyph=\"navigation-left-arrow\" fdType=\"transparent\" (click)=\"toggleAdvancedSearch()\"></button>\n    <h5 fd-title>{{ 'platformVHD.searchAdvancedSearchLabel' | fdTranslate }}</h5>\n</ng-template>\n\n<ng-template #desktopDialogTitle>\n    <ng-container *ngTemplateOutlet=\"dialogTitleText\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"desktopTabs\"></ng-container>\n</ng-template>\n\n<ng-template #mobileDialogTitle>\n    <div class=\"fdp-value-help-dialog__mobile-title\">\n        <ng-container *ngIf=\"hasSelectedTab; else dialogTitleText\">\n            <ng-container *ngTemplateOutlet=\"selectedTabHeader\"></ng-container>\n        </ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"mobileTabs\"></ng-container>\n</ng-template>\n\n<ng-template #desktopTabs>\n    <nav fd-tab-nav class=\"fdp-value-help-dialog__tabs\" *ngIf=\"showSelectionTab && showDefineTab\">\n        <div fd-tab-item (click)=\"switchTab(_tabTypes.selectFromList)\" *ngIf=\"showSelectionTab\">\n            <a\n                fd-tab-link\n                [active]=\"selectedTab === _tabTypes.selectFromList\"\n                [tabindex]=\"selectedTab === _tabTypes.selectFromList ? '0' : '-1'\"\n                ><span fd-tab-tag>{{ selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }}</span></a\n            >\n        </div>\n        <div fd-tab-item (click)=\"switchTab(_tabTypes.defineConditions)\" *ngIf=\"showDefineTab\">\n            <a\n                fd-tab-link\n                [active]=\"selectedTab === _tabTypes.defineConditions\"\n                [tabindex]=\"selectedTab === _tabTypes.defineConditions ? '0' : '-1'\"\n                ><span fd-tab-tag>{{ defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }}</span></a\n            >\n        </div>\n    </nav>\n</ng-template>\n\n<ng-template #mobileTabs>\n    <div *ngIf=\"!hasSelectedTab && showSelectionTab && showDefineTab\">\n        <div fd-bar [inPage]=\"true\" *ngIf=\"showSelectionTab\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    {{ selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }}\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fd-button-bar\n                        glyph=\"navigation-right-arrow\"\n                        (click)=\"switchTab(_tabTypes.selectFromList)\"\n                        [title]=\"\n                            'platformVHD.selectMobileTabTitle'\n                                | fdTranslate\n                                    : { title: selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }\n                        \"\n                    ></fd-button-bar>\n                </fd-bar-element>\n            </div>\n        </div>\n        <div fd-bar [inPage]=\"true\" *ngIf=\"showDefineTab\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    {{ defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }}\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fd-button-bar\n                        glyph=\"navigation-right-arrow\"\n                        [title]=\"\n                            'platformVHD.selectMobileTabTitle'\n                                | fdTranslate\n                                    : { title: defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }\n                        \"\n                        (click)=\"switchTab(_tabTypes.defineConditions)\"\n                    >\n                    </fd-button-bar>\n                </fd-bar-element>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #selectedTabHeader>\n    <ng-container [ngSwitch]=\"selectedTab\">\n        <ng-container *ngSwitchCase=\"_tabTypes.selectFromList\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    tabLink;\n                    context: {\n                        title: selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate),\n                        type: selectedTab\n                    }\n                \"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"_tabTypes.advancedSearch\">\n            <ng-container *ngTemplateOutlet=\"advancedHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"_tabTypes.defineConditions\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    tabLink;\n                    context: {\n                        title: defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate),\n                        type: selectedTab\n                    }\n                \"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #conditionValue let-item=\"item\">\n    <span *ngIf=\"item.strategy !== 'empty' && item.strategy !== 'not_empty'; else emptyCondition\">\n        {{ item | displayFnPipe : conditionDisplayFn : _displayedFilters }}\n    </span>\n    <ng-template #emptyCondition>\n        <ng-container *ngIf=\"item.strategy === 'not_empty'; else emptyConditionText\">\n            !(<ng-container *ngTemplateOutlet=\"emptyConditionText\"></ng-container>)\n        </ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #emptyConditionText> &lt;{{ 'platformVHD.selectMobileConditionEmpty' | fdTranslate }}&gt; </ng-template>\n", styles: [".fdp-value-help-dialog .fd-dialog__body{display:flex;flex-direction:column;overflow:hidden}.fdp-value-help-dialog .fd-title--h5{padding:.5rem 0}.fdp-value-help-dialog .fd-toolbar{background:none;border:none;padding:.1735rem .5rem;height:auto;min-height:1.625rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__advanced-search{padding-top:1rem}.fdp-value-help-dialog__advanced-search,.fdp-value-help-dialog .fd-dialog__body{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.fdp-value-help-dialog__advanced-filters{padding-top:1rem}.fdp-value-help-dialog__advanced-filters label{height:auto}.fdp-value-help-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.fdp-value-help-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.fdp-value-help-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.fdp-value-help-dialog-mobile .fdp-value-help-dialog__advanced-actions{justify-content:flex-start}.fdp-value-help-dialog__advanced-actions .fd-toolbar{padding:0}.fdp-value-help-dialog .fd-bar.fd-bar--cozy{height:auto}.fdp-value-help-dialog .fd-dialog__header{box-shadow:none}.fdp-value-help-dialog .fd-dialog__header .fd-title{display:flex;align-items:center;padding-left:2rem;padding-right:2rem;min-height:2.5rem;box-shadow:none;border-bottom:none;background-color:#fff;background-color:var(--sapObjectHeader_Background, #fff);position:relative;z-index:2}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__mobile-title{display:flex;border-bottom:1px solid #d9d9d9;border-bottom:1px solid var(--sapGroup_TitleBorderColor, #d9d9d9)}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__mobile-title .fd-title{flex:1 1 auto;border:none}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__tabs{position:relative}.fdp-value-help-dialog .fd-dialog__header,.fdp-value-help-dialog .fd-dialog__footer{height:auto;flex-direction:column}.fdp-value-help-dialog .fd-dialog__header.fd-bar,.fdp-value-help-dialog .fd-dialog__footer.fd-bar{padding:0}.fdp-value-help-dialog .fd-dialog__footer{border-top:none}.fdp-value-help-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;min-height:20rem}.fdp-value-help-dialog__row{padding:0 2rem 1rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.fdp-value-help-dialog__tokens-wrapper{display:flex}.fdp-value-help-dialog__tokens{flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.fdp-value-help-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.fdp-value-help-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.fdp-value-help-dialog__actions-row{padding:.5rem 1rem;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.fdp-value-help-dialog__actions-row .fd-button{margin-left:.5rem}.fdp-value-help-dialog .fdp-value-help-dialog__hidden_label{display:none!important}.fdp-value-help-dialog__table-busy-indicator{height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i5.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i5.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i5.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i5.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i1$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i1$1.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "component", type: i4.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i2$1.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i7$1.TabNavComponent, selector: "[fd-tab-nav]", inputs: ["class", "mode", "size"] }, { kind: "directive", type: i7$1.TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { kind: "directive", type: i7$1.TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown", "focused"] }, { kind: "directive", type: i7$1.TabTagDirective, selector: "[fdTabTag], [fd-tab-tag]" }, { kind: "component", type: i5$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i9$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i9$1.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i9$1.TokenizerInputDirective, selector: "[fd-tokenizer-input]", inputs: ["class"] }, { kind: "component", type: i5$2.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5$2.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i5$2.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i11$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i6.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i6.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i6.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i13$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i13$1.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i13$1.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i14.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i14.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i14.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i15.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "directive", type: i10.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }, { kind: "component", type: i11.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "component", type: SelectTabComponent, selector: "fdp-select-tab", inputs: ["selectTabTitleId", "selectTabCountId", "selected", "loading", "filters", "selection", "emptyTableMessage", "uniqueKey", "pageSize", "defaultMobileHeaders", "displayedData", "allowSelectAll"], outputs: ["select"] }, { kind: "component", type: DefineTabComponent, selector: "fdp-define-tab", inputs: ["titleId", "selectedId", "conditions", "included", "excluded", "strategyLabels"], outputs: ["includeChange", "excludeChange", "conditionChange"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i2$1.DisplayFnPipe, name: "displayFnPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "filters", predicate: VhdFilterComponent }, { propertyName: "columnDef", predicate: ValueHelpColumnDefDirective }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"header\">\n                <ng-container *ngTemplateOutlet=\"mobile ? mobileDialogTitle : desktopDialogTitle\"></ng-container>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body [dir]=\"_dir\">\n            <ng-container *ngIf=\"!mobile\">\n                <ng-container *ngTemplateOutlet=\"advancedSearchContent\"></ng-container>\n            </ng-container>\n            <div fd-scrollbar class=\"fdp-value-help-dialog__content-holder\">\n                <ng-container *ngIf=\"mobile\">\n                    <ng-container *ngTemplateOutlet=\"advancedSearchContent\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"selectedTab === _tabTypes.selectFromList\">\n                    <ng-container *ngTemplateOutlet=\"selectionContent\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"selectedTab === _tabTypes.defineConditions\">\n                    <ng-container *ngTemplateOutlet=\"defineConditionsContent\"></ng-container>\n                </ng-container>\n            </div>\n        </fd-dialog-body>\n        <fd-dialog-footer [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"footer\">\n                <div\n                    class=\"fdp-value-help-dialog__row fdp-value-help-dialog__selection-row\"\n                    [attr.aria-label]=\"'platformVHD.selectionBarLabel' | fdTranslate\"\n                    *ngIf=\"!isMobileAdvancedSearchActive\"\n                >\n                    <h5 fd-title class=\"selected-and-condition-title\" [id]=\"id + '-selected-item'\">\n                        <ng-container *ngIf=\"hasSelectedAndConditions; else noItemsPanelTitle\">\n                            {{ 'platformVHD.selectedAndConditionLabel' | fdTranslate }}\n                            ({{ selectedItems.length + validConditions.length }})\n                        </ng-container>\n                    </h5>\n\n                    <div class=\"fdp-value-help-dialog__tokens-wrapper\">\n                        <div class=\"fdp-value-help-dialog__tokens\">\n                            <!-- Selected items -->\n                            <fd-tokenizer [tokenizerFocusable]=\"false\">\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"removeSelected(selectedIndex)\"\n                                    *ngFor=\"\n                                        let item of selectedItems;\n                                        index as selectedIndex;\n                                        trackBy: _trackBySelectedFn\n                                    \"\n                                    >{{ !!tokenizerFn ? (item | displayFnPipe : tokenizerFn) : item[tokenViewField] }}\n                                </fd-token>\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"removeCondition(conditionIndex)\"\n                                    *ngFor=\"\n                                        let item of validConditions;\n                                        index as conditionIndex;\n                                        trackBy: _trackByConditionFn\n                                    \"\n                                >\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"conditionValue\"\n                                        [ngTemplateOutletContext]=\"{ item: item }\"\n                                    ></ng-container>\n                                </fd-token>\n                                <input fd-form-control fd-tokenizer-input [disabled]=\"!hasSelectedAndConditions\" />\n                            </fd-tokenizer>\n                        </div>\n                        <button\n                            (click)=\"clearSelectedAndConditionItems()\"\n                            class=\"fdp-value-help-dialog__tokens-clear\"\n                            fd-button\n                            [disabled]=\"!hasSelectedAndConditions\"\n                            fdType=\"transparent\"\n                            [title]=\"'platformVHD.footerClearSelectedTitle' | fdTranslate\"\n                            glyph=\"decline\"\n                            [attr.aria-label]=\"'platformVHD.footerClearSelectedAriaLabel' | fdTranslate\"\n                        ></button>\n                    </div>\n                </div>\n                <div class=\"fdp-value-help-dialog__actions-row\">\n                    <button\n                        fd-button\n                        data-go-advanced\n                        [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                        fdType=\"emphasized\"\n                        *ngIf=\"mobile && isOpenAdvanced\"\n                        (click)=\"searchAdvanced()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-succes\n                        [disabled]=\"loadingState\"\n                        [label]=\"'platformVHD.successButtonLabel' | fdTranslate\"\n                        fdType=\"emphasized\"\n                        *ngIf=\"selectedTab !== _tabTypes.advancedSearch\"\n                        (click)=\"success()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'platformVHD.cancelButtonLabel' | fdTranslate\"\n                        fdType=\"transparent\"\n                        (click)=\"dismiss()\"\n                    ></button>\n                </div>\n            </ng-template>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n\n<ng-template #noItemsPanelTitle>\n    {{ 'platformVHD.selectedEmptyLabel' | fdTranslate }}\n</ng-template>\n\n<ng-template #advancedSearchContent>\n    <ng-container *ngIf=\"isSelectionTab\">\n        <form class=\"fdp-value-help-dialog__row fdp-value-help-dialog__advanced-search\" [id]=\"'advanced-search-' + id\">\n            <fd-layout-grid *ngIf=\"!mobile || (mobile && !isOpenAdvanced)\">\n                <div fdLayoutGridRow>\n                    <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"mobile ? 12 : 6\" [colXl]=\"mobile ? 12 : 6\">\n                        <fdp-search-field\n                            [placeholder]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                            (searchSubmit)=\"search()\"\n                            (inputChange)=\"_mainSearch = $event.text\"\n                        ></fdp-search-field>\n                    </div>\n\n                    <div\n                        [fdLayoutGridCol]=\"12\"\n                        [colMd]=\"12\"\n                        [colLg]=\"mobile ? 12 : 6\"\n                        [colXl]=\"mobile ? 12 : 6\"\n                        *ngIf=\"_hasAdvanced\"\n                        class=\"fdp-value-help-dialog__advanced-actions\"\n                    >\n                        <fd-toolbar [clearBorder]=\"true\">\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\n                            <button\n                                fd-toolbar-item\n                                fd-button\n                                fdType=\"transparent\"\n                                *ngIf=\"_hasAdvanced\"\n                                [label]=\"\n                                    (mobile\n                                        ? 'platformVHD.searchAdvancedSearchLabel'\n                                        : isOpenAdvanced\n                                        ? 'platformVHD.searchHideAdvancedSearchLabel'\n                                        : 'platformVHD.searchShowAdvancedSearchLabel'\n                                    ) | fdTranslate\n                                \"\n                                (click)=\"toggleAdvancedSearch()\"\n                            ></button>\n                            <button\n                                fd-toolbar-item\n                                type=\"submit\"\n                                fd-button\n                                [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                fdType=\"emphasized\"\n                                [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                (click)=\"filter()\"\n                            ></button>\n                        </fd-toolbar>\n                    </div>\n                </div>\n            </fd-layout-grid>\n            <div\n                [id]=\"'advanced-search-content-' + id\"\n                *ngIf=\"isOpenAdvanced && _hasAdvanced\"\n                class=\"fdp-value-help-dialog__advanced-filters\"\n            >\n                <fd-busy-indicator [loading]=\"loadingState && _firstLoadingDone\" [block]=\"true\">\n                    <fd-layout-grid\n                        *ngIf=\"_firstLoadingDone; else filtersLoading\"\n                        [class.fdp-value-help-dialog__with-toggle-all]=\"filters.length > maxShownInitialFilters\"\n                    >\n                        <div fdLayoutGridRow>\n                            <ng-container\n                                *ngFor=\"\n                                    let filter of _displayedFilters | slice : 0 : shownFilterCount + 1;\n                                    trackBy: _trackByFilterFn\n                                \"\n                            >\n                                <ng-container *ngIf=\"filter.advanced\">\n                                    <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"6\" [colXl]=\"3\">\n                                        <label class=\"fd-form-group__header\" fd-form-label [for]=\"'input' + filter.key\"\n                                            >{{ filter.label }}:</label\n                                        >\n                                        <ng-container *ngIf=\"filter.filterDef\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"filter.filterDef.templateRef\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: filter }\"\n                                            ></ng-template>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!filter.filterDef\">\n                                            <input\n                                                [(ngModel)]=\"filter.value\"\n                                                fd-form-control\n                                                type=\"text\"\n                                                [name]=\"'search-by-' + filter.label\"\n                                                [id]=\"'input' + filter.key\"\n                                            />\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </ng-container>\n\n                            <div\n                                colGrow\n                                [fdLayoutGridCol]=\"12\"\n                                [colMd]=\"12\"\n                                [colLg]=\"6\"\n                                [colXl]=\"3\"\n                                *ngIf=\"filters.length > maxShownInitialFilters\"\n                                class=\"fdp-value-help-dialog__toggle-filters\"\n                            >\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    (click)=\"toggleShownFilters()\"\n                                    [label]=\"\n                                        (isShowAllFilters\n                                            ? 'platformVHD.searchHideAllAdvancedSearchLabel'\n                                            : 'platformVHD.searchShowAllAdvancedSearchLabel'\n                                        ) | fdTranslate\n                                    \"\n                                ></button>\n                            </div>\n                        </div>\n                    </fd-layout-grid>\n\n                    <ng-template #filtersLoading>\n                        <fd-skeleton width=\"100%\" height=\"100px\">\n                            <svg:rect x=\"0\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"0\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n                            <svg:rect x=\"35%\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"35%\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n                            <svg:rect x=\"0\" y=\"60\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"0\" y=\"80\" rx=\"4\" width=\"25%\" height=\"16\" />\n                        </fd-skeleton>\n                    </ng-template>\n                </fd-busy-indicator>\n            </div>\n        </form>\n    </ng-container>\n</ng-template>\n\n<ng-template #selectionContent>\n    <fd-busy-indicator\n        [loading]=\"loadingState && _firstLoadingDone\"\n        [block]=\"true\"\n        class=\"fdp-value-help-dialog__table-busy-indicator\"\n    >\n        <fdp-select-tab\n            [selected]=\"selectedItems\"\n            [loading]=\"loadingState && !_firstLoadingDone\"\n            [uid]=\"id\"\n            [displayedData]=\"_displayedData\"\n            [tabTitle]=\"selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate)\"\n            [mobile]=\"mobile\"\n            [selection]=\"searchSelection\"\n            [emptyTableMessage]=\"searchTableEmptyMessage || ('platformVHD.searchTableEmptyMessage' | fdTranslate)\"\n            [uniqueKey]=\"uniqueKey\"\n            [pageSize]=\"searchTablePageSize\"\n            [defaultMobileHeaders]=\"searchTableMobileHeaders\"\n            [filters]=\"_displayedFilters\"\n            [allowSelectAll]=\"allowSelectAll\"\n            (select)=\"onSelect($event)\"\n        ></fdp-select-tab>\n    </fd-busy-indicator>\n</ng-template>\n\n<ng-template #defineConditionsContent>\n    <div fd-scrollbar>\n        <fdp-define-tab\n            [strategyLabels]=\"defineStrategyLabels\"\n            [conditions]=\"conditionItems\"\n            [uid]=\"id\"\n            [tabTitle]=\"defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate)\"\n            [mobile]=\"mobile\"\n            (conditionChange)=\"onConditionChange($event)\"\n        ></fdp-define-tab>\n    </div>\n</ng-template>\n\n<ng-template #dialogTitleText>\n    <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n</ng-template>\n\n<ng-template #tabLink let-title=\"title\" let-type=\"type\">\n    <ng-container *ngIf=\"selectedTab === type && showSelectionTab && showDefineTab\">\n        <button\n            fd-button\n            glyph=\"navigation-left-arrow\"\n            fdType=\"transparent\"\n            (click)=\"switchTab()\"\n            [title]=\"'platformVHD.selectMobileTabBackBtnTitle' | fdTranslate\"\n        ></button>\n        <h5 fd-title>{{ title }}</h5>\n    </ng-container>\n    <ng-container *ngIf=\"selectedTab !== type\">\n        <a\n            fd-list-link\n            (click)=\"switchTab(type)\"\n            [title]=\"'platformVHD.selectMobileTabBtnOpenDialogLabel' | fdTranslate\"\n        >\n            <span fd-list-title>{{ title }}</span>\n            <i fd-list-icon glyph=\"navigation-right-arrow\"></i>\n        </a>\n    </ng-container>\n</ng-template>\n\n<ng-template #advancedHeader>\n    <button fd-button glyph=\"navigation-left-arrow\" fdType=\"transparent\" (click)=\"toggleAdvancedSearch()\"></button>\n    <h5 fd-title>{{ 'platformVHD.searchAdvancedSearchLabel' | fdTranslate }}</h5>\n</ng-template>\n\n<ng-template #desktopDialogTitle>\n    <ng-container *ngTemplateOutlet=\"dialogTitleText\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"desktopTabs\"></ng-container>\n</ng-template>\n\n<ng-template #mobileDialogTitle>\n    <div class=\"fdp-value-help-dialog__mobile-title\">\n        <ng-container *ngIf=\"hasSelectedTab; else dialogTitleText\">\n            <ng-container *ngTemplateOutlet=\"selectedTabHeader\"></ng-container>\n        </ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"mobileTabs\"></ng-container>\n</ng-template>\n\n<ng-template #desktopTabs>\n    <nav fd-tab-nav class=\"fdp-value-help-dialog__tabs\" *ngIf=\"showSelectionTab && showDefineTab\">\n        <div fd-tab-item (click)=\"switchTab(_tabTypes.selectFromList)\" *ngIf=\"showSelectionTab\">\n            <a\n                fd-tab-link\n                [active]=\"selectedTab === _tabTypes.selectFromList\"\n                [tabindex]=\"selectedTab === _tabTypes.selectFromList ? '0' : '-1'\"\n                ><span fd-tab-tag>{{ selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }}</span></a\n            >\n        </div>\n        <div fd-tab-item (click)=\"switchTab(_tabTypes.defineConditions)\" *ngIf=\"showDefineTab\">\n            <a\n                fd-tab-link\n                [active]=\"selectedTab === _tabTypes.defineConditions\"\n                [tabindex]=\"selectedTab === _tabTypes.defineConditions ? '0' : '-1'\"\n                ><span fd-tab-tag>{{ defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }}</span></a\n            >\n        </div>\n    </nav>\n</ng-template>\n\n<ng-template #mobileTabs>\n    <div *ngIf=\"!hasSelectedTab && showSelectionTab && showDefineTab\">\n        <div fd-bar [inPage]=\"true\" *ngIf=\"showSelectionTab\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    {{ selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }}\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fd-button-bar\n                        glyph=\"navigation-right-arrow\"\n                        (click)=\"switchTab(_tabTypes.selectFromList)\"\n                        [title]=\"\n                            'platformVHD.selectMobileTabTitle'\n                                | fdTranslate\n                                    : { title: selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }\n                        \"\n                    ></fd-button-bar>\n                </fd-bar-element>\n            </div>\n        </div>\n        <div fd-bar [inPage]=\"true\" *ngIf=\"showDefineTab\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    {{ defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }}\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fd-button-bar\n                        glyph=\"navigation-right-arrow\"\n                        [title]=\"\n                            'platformVHD.selectMobileTabTitle'\n                                | fdTranslate\n                                    : { title: defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }\n                        \"\n                        (click)=\"switchTab(_tabTypes.defineConditions)\"\n                    >\n                    </fd-button-bar>\n                </fd-bar-element>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #selectedTabHeader>\n    <ng-container [ngSwitch]=\"selectedTab\">\n        <ng-container *ngSwitchCase=\"_tabTypes.selectFromList\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    tabLink;\n                    context: {\n                        title: selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate),\n                        type: selectedTab\n                    }\n                \"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"_tabTypes.advancedSearch\">\n            <ng-container *ngTemplateOutlet=\"advancedHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"_tabTypes.defineConditions\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    tabLink;\n                    context: {\n                        title: defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate),\n                        type: selectedTab\n                    }\n                \"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #conditionValue let-item=\"item\">\n    <span *ngIf=\"item.strategy !== 'empty' && item.strategy !== 'not_empty'; else emptyCondition\">\n        {{ item | displayFnPipe : conditionDisplayFn : _displayedFilters }}\n    </span>\n    <ng-template #emptyCondition>\n        <ng-container *ngIf=\"item.strategy === 'not_empty'; else emptyConditionText\">\n            !(<ng-container *ngTemplateOutlet=\"emptyConditionText\"></ng-container>)\n        </ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #emptyConditionText> &lt;{{ 'platformVHD.selectMobileConditionEmpty' | fdTranslate }}&gt; </ng-template>\n", styles: [".fdp-value-help-dialog .fd-dialog__body{display:flex;flex-direction:column;overflow:hidden}.fdp-value-help-dialog .fd-title--h5{padding:.5rem 0}.fdp-value-help-dialog .fd-toolbar{background:none;border:none;padding:.1735rem .5rem;height:auto;min-height:1.625rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__advanced-search{padding-top:1rem}.fdp-value-help-dialog__advanced-search,.fdp-value-help-dialog .fd-dialog__body{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.fdp-value-help-dialog__advanced-filters{padding-top:1rem}.fdp-value-help-dialog__advanced-filters label{height:auto}.fdp-value-help-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.fdp-value-help-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.fdp-value-help-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.fdp-value-help-dialog-mobile .fdp-value-help-dialog__advanced-actions{justify-content:flex-start}.fdp-value-help-dialog__advanced-actions .fd-toolbar{padding:0}.fdp-value-help-dialog .fd-bar.fd-bar--cozy{height:auto}.fdp-value-help-dialog .fd-dialog__header{box-shadow:none}.fdp-value-help-dialog .fd-dialog__header .fd-title{display:flex;align-items:center;padding-left:2rem;padding-right:2rem;min-height:2.5rem;box-shadow:none;border-bottom:none;background-color:#fff;background-color:var(--sapObjectHeader_Background, #fff);position:relative;z-index:2}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__mobile-title{display:flex;border-bottom:1px solid #d9d9d9;border-bottom:1px solid var(--sapGroup_TitleBorderColor, #d9d9d9)}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__mobile-title .fd-title{flex:1 1 auto;border:none}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__tabs{position:relative}.fdp-value-help-dialog .fd-dialog__header,.fdp-value-help-dialog .fd-dialog__footer{height:auto;flex-direction:column}.fdp-value-help-dialog .fd-dialog__header.fd-bar,.fdp-value-help-dialog .fd-dialog__footer.fd-bar{padding:0}.fdp-value-help-dialog .fd-dialog__footer{border-top:none}.fdp-value-help-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;min-height:20rem}.fdp-value-help-dialog__row{padding:0 2rem 1rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.fdp-value-help-dialog__tokens-wrapper{display:flex}.fdp-value-help-dialog__tokens{flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.fdp-value-help-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.fdp-value-help-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.fdp-value-help-dialog__actions-row{padding:.5rem 1rem;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.fdp-value-help-dialog__actions-row .fd-button{margin-left:.5rem}.fdp-value-help-dialog .fdp-value-help-dialog__hidden_label{display:none!important}.fdp-value-help-dialog__table-busy-indicator{height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i5.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i5.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i5.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i5.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i1$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i1$1.DialogDecisiveButtonDirective, selector: "[fd-dialog-decisive-button]" }, { kind: "component", type: i4.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: i2$1.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i7$1.TabNavComponent, selector: "[fd-tab-nav]", inputs: ["class", "mode", "size"] }, { kind: "directive", type: i7$1.TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { kind: "directive", type: i7$1.TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown", "focused"] }, { kind: "directive", type: i7$1.TabTagDirective, selector: "[fdTabTag], [fd-tab-tag]" }, { kind: "component", type: i5$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i9$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i9$1.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i9$1.TokenizerInputDirective, selector: "[fd-tokenizer-input]", inputs: ["class"] }, { kind: "component", type: i5$2.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i5$2.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i5$2.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i11$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i6.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i6.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i6.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i13$1.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "hasTitle", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "directive", type: i13$1.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i13$1.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "directive", type: i14.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i14.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i14.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "component", type: i15.SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "searchSuggestionMessage", "searchSuggestionNavigateMessage", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "directive", type: i10.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }, { kind: "component", type: i11.SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "component", type: SelectTabComponent, selector: "fdp-select-tab", inputs: ["selectTabTitleId", "selectTabCountId", "selected", "loading", "filters", "selection", "emptyTableMessage", "uniqueKey", "pageSize", "defaultMobileHeaders", "displayedData", "allowSelectAll"], outputs: ["select"] }, { kind: "component", type: DefineTabComponent, selector: "fdp-define-tab", inputs: ["titleId", "selectedId", "conditions", "included", "excluded", "strategyLabels"], outputs: ["includeChange", "excludeChange", "conditionChange"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i2$1.DisplayFnPipe, name: "displayFnPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PlatformValueHelpDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-value-help-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1324,7 +1338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             provide: VhdComponent,
                             useExisting: PlatformValueHelpDialogComponent
                         }
-                    ], template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"header\">\n                <ng-container *ngTemplateOutlet=\"mobile ? mobileDialogTitle : desktopDialogTitle\"></ng-container>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body [dir]=\"_dir\">\n            <ng-container *ngIf=\"!mobile\">\n                <ng-container *ngTemplateOutlet=\"advancedSearchContent\"></ng-container>\n            </ng-container>\n            <div fd-scrollbar class=\"fdp-value-help-dialog__content-holder\">\n                <ng-container *ngIf=\"mobile\">\n                    <ng-container *ngTemplateOutlet=\"advancedSearchContent\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"selectedTab === _tabTypes.selectFromList\">\n                    <ng-container *ngTemplateOutlet=\"selectionContent\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"selectedTab === _tabTypes.defineConditions\">\n                    <ng-container *ngTemplateOutlet=\"defineConditionsContent\"></ng-container>\n                </ng-container>\n            </div>\n        </fd-dialog-body>\n        <fd-dialog-footer [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"footer\">\n                <div\n                    class=\"fdp-value-help-dialog__row fdp-value-help-dialog__selection-row\"\n                    [attr.aria-label]=\"'platformVHD.selectionBarLabel' | fdTranslate\"\n                    *ngIf=\"!isMobileAdvancedSearchActive\"\n                >\n                    <h5 fd-title class=\"selected-and-condition-title\" [id]=\"id + '-selected-item'\">\n                        <ng-container *ngIf=\"hasSelectedAndConditions; else noItemsPanelTitle\">\n                            {{ 'platformVHD.selectedAndConditionLabel' | fdTranslate }}\n                            ({{ selectedItems.length + validConditions.length }})\n                        </ng-container>\n                    </h5>\n\n                    <div class=\"fdp-value-help-dialog__tokens-wrapper\">\n                        <div class=\"fdp-value-help-dialog__tokens\">\n                            <!-- Selected items -->\n                            <fd-tokenizer [tokenizerFocusable]=\"false\">\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"removeSelected(selectedIndex)\"\n                                    *ngFor=\"\n                                        let item of selectedItems;\n                                        index as selectedIndex;\n                                        trackBy: _trackBySelectedFn\n                                    \"\n                                    >{{ !!tokenizerFn ? (item | displayFnPipe : tokenizerFn) : item[tokenViewField] }}\n                                </fd-token>\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"removeCondition(conditionIndex)\"\n                                    *ngFor=\"\n                                        let item of validConditions;\n                                        index as conditionIndex;\n                                        trackBy: _trackByConditionFn\n                                    \"\n                                >\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"conditionValue\"\n                                        [ngTemplateOutletContext]=\"{ item: item }\"\n                                    ></ng-container>\n                                </fd-token>\n                                <input fd-form-control fd-tokenizer-input [disabled]=\"!hasSelectedAndConditions\" />\n                            </fd-tokenizer>\n                        </div>\n                        <button\n                            (click)=\"clearSelectedAndConditionItems()\"\n                            class=\"fdp-value-help-dialog__tokens-clear\"\n                            fd-button\n                            [disabled]=\"!hasSelectedAndConditions\"\n                            fdType=\"transparent\"\n                            [title]=\"'platformVHD.footerClearSelectedTitle' | fdTranslate\"\n                            glyph=\"decline\"\n                            [attr.aria-label]=\"'platformVHD.footerClearSelectedAriaLabel' | fdTranslate\"\n                        ></button>\n                    </div>\n                </div>\n                <div class=\"fdp-value-help-dialog__actions-row\">\n                    <button\n                        fd-button\n                        data-go-advanced\n                        [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                        fdType=\"emphasized\"\n                        *ngIf=\"mobile && isOpenAdvanced\"\n                        (click)=\"searchAdvanced()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-succes\n                        [label]=\"'platformVHD.successButtonLabel' | fdTranslate\"\n                        fdType=\"emphasized\"\n                        *ngIf=\"selectedTab !== _tabTypes.advancedSearch\"\n                        (click)=\"success()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'platformVHD.cancelButtonLabel' | fdTranslate\"\n                        fdType=\"transparent\"\n                        (click)=\"dismiss()\"\n                    ></button>\n                </div>\n            </ng-template>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n\n<ng-template #noItemsPanelTitle>\n    {{ 'platformVHD.selectedEmptyLabel' | fdTranslate }}\n</ng-template>\n\n<ng-template #advancedSearchContent>\n    <ng-container *ngIf=\"isSelectionTab\">\n        <form class=\"fdp-value-help-dialog__row fdp-value-help-dialog__advanced-search\" [id]=\"'advanced-search-' + id\">\n            <fd-layout-grid *ngIf=\"!mobile || (mobile && !isOpenAdvanced)\">\n                <div fdLayoutGridRow>\n                    <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"mobile ? 12 : 6\" [colXl]=\"mobile ? 12 : 6\">\n                        <fdp-search-field\n                            [placeholder]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                            (searchSubmit)=\"search()\"\n                            (inputChange)=\"_mainSearch = $event.text\"\n                        ></fdp-search-field>\n                    </div>\n\n                    <div\n                        [fdLayoutGridCol]=\"12\"\n                        [colMd]=\"12\"\n                        [colLg]=\"mobile ? 12 : 6\"\n                        [colXl]=\"mobile ? 12 : 6\"\n                        *ngIf=\"_hasAdvanced\"\n                        class=\"fdp-value-help-dialog__advanced-actions\"\n                    >\n                        <fd-toolbar [clearBorder]=\"true\">\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\n                            <button\n                                fd-toolbar-item\n                                fd-button\n                                fdType=\"transparent\"\n                                *ngIf=\"_hasAdvanced\"\n                                [label]=\"\n                                    (mobile\n                                        ? 'platformVHD.searchAdvancedSearchLabel'\n                                        : isOpenAdvanced\n                                        ? 'platformVHD.searchHideAdvancedSearchLabel'\n                                        : 'platformVHD.searchShowAdvancedSearchLabel'\n                                    ) | fdTranslate\n                                \"\n                                (click)=\"toggleAdvancedSearch()\"\n                            ></button>\n                            <button\n                                fd-toolbar-item\n                                type=\"submit\"\n                                fd-button\n                                [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                fdType=\"emphasized\"\n                                [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                (click)=\"filter()\"\n                            ></button>\n                        </fd-toolbar>\n                    </div>\n                </div>\n            </fd-layout-grid>\n            <div\n                [id]=\"'advanced-search-content-' + id\"\n                *ngIf=\"isOpenAdvanced && _hasAdvanced\"\n                class=\"fdp-value-help-dialog__advanced-filters\"\n            >\n                <fd-busy-indicator [loading]=\"loadingState && _firstLoadingDone\" [block]=\"true\">\n                    <fd-layout-grid\n                        *ngIf=\"_firstLoadingDone; else filtersLoading\"\n                        [class.fdp-value-help-dialog__with-toggle-all]=\"filters.length > maxShownInitialFilters\"\n                    >\n                        <div fdLayoutGridRow>\n                            <ng-container\n                                *ngFor=\"\n                                    let filter of _displayedFilters | slice : 0 : shownFilterCount + 1;\n                                    trackBy: _trackByFilterFn\n                                \"\n                            >\n                                <ng-container *ngIf=\"filter.advanced\">\n                                    <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"6\" [colXl]=\"3\">\n                                        <label class=\"fd-form-group__header\" fd-form-label [for]=\"'input' + filter.key\"\n                                            >{{ filter.label }}:</label\n                                        >\n                                        <ng-container *ngIf=\"filter.filterDef\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"filter.filterDef.templateRef\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: filter }\"\n                                            ></ng-template>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!filter.filterDef\">\n                                            <input\n                                                [(ngModel)]=\"filter.value\"\n                                                fd-form-control\n                                                type=\"text\"\n                                                [name]=\"'search-by-' + filter.label\"\n                                                [id]=\"'input' + filter.key\"\n                                            />\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </ng-container>\n\n                            <div\n                                colGrow\n                                [fdLayoutGridCol]=\"12\"\n                                [colMd]=\"12\"\n                                [colLg]=\"6\"\n                                [colXl]=\"3\"\n                                *ngIf=\"filters.length > maxShownInitialFilters\"\n                                class=\"fdp-value-help-dialog__toggle-filters\"\n                            >\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    (click)=\"toggleShownFilters()\"\n                                    [label]=\"\n                                        (isShowAllFilters\n                                            ? 'platformVHD.searchHideAllAdvancedSearchLabel'\n                                            : 'platformVHD.searchShowAllAdvancedSearchLabel'\n                                        ) | fdTranslate\n                                    \"\n                                ></button>\n                            </div>\n                        </div>\n                    </fd-layout-grid>\n\n                    <ng-template #filtersLoading>\n                        <fd-skeleton width=\"100%\" height=\"100px\">\n                            <svg:rect x=\"0\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"0\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n                            <svg:rect x=\"35%\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"35%\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n                            <svg:rect x=\"0\" y=\"60\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"0\" y=\"80\" rx=\"4\" width=\"25%\" height=\"16\" />\n                        </fd-skeleton>\n                    </ng-template>\n                </fd-busy-indicator>\n            </div>\n        </form>\n    </ng-container>\n</ng-template>\n\n<ng-template #selectionContent>\n    <fd-busy-indicator\n        [loading]=\"loadingState && _firstLoadingDone\"\n        [block]=\"true\"\n        class=\"fdp-value-help-dialog__table-busy-indicator\"\n    >\n        <fdp-select-tab\n            [selected]=\"selectedItems\"\n            [loading]=\"loadingState && !_firstLoadingDone\"\n            [uid]=\"id\"\n            [displayedData]=\"_displayedData\"\n            [tabTitle]=\"selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate)\"\n            [mobile]=\"mobile\"\n            [selection]=\"searchSelection\"\n            [emptyTableMessage]=\"searchTableEmptyMessage || ('platformVHD.searchTableEmptyMessage' | fdTranslate)\"\n            [uniqueKey]=\"uniqueKey\"\n            [pageSize]=\"searchTablePageSize\"\n            [defaultMobileHeaders]=\"searchTableMobileHeaders\"\n            [filters]=\"_displayedFilters\"\n            [allowSelectAll]=\"allowSelectAll\"\n            (select)=\"onSelect($event)\"\n        ></fdp-select-tab>\n    </fd-busy-indicator>\n</ng-template>\n\n<ng-template #defineConditionsContent>\n    <div fd-scrollbar>\n        <fdp-define-tab\n            [strategyLabels]=\"defineStrategyLabels\"\n            [conditions]=\"conditionItems\"\n            [uid]=\"id\"\n            [tabTitle]=\"defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate)\"\n            [mobile]=\"mobile\"\n            (conditionChange)=\"onConditionChange($event)\"\n        ></fdp-define-tab>\n    </div>\n</ng-template>\n\n<ng-template #dialogTitleText>\n    <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n</ng-template>\n\n<ng-template #tabLink let-title=\"title\" let-type=\"type\">\n    <ng-container *ngIf=\"selectedTab === type && showSelectionTab && showDefineTab\">\n        <button\n            fd-button\n            glyph=\"navigation-left-arrow\"\n            fdType=\"transparent\"\n            (click)=\"switchTab()\"\n            [title]=\"'platformVHD.selectMobileTabBackBtnTitle' | fdTranslate\"\n        ></button>\n        <h5 fd-title>{{ title }}</h5>\n    </ng-container>\n    <ng-container *ngIf=\"selectedTab !== type\">\n        <a\n            fd-list-link\n            (click)=\"switchTab(type)\"\n            [title]=\"'platformVHD.selectMobileTabBtnOpenDialogLabel' | fdTranslate\"\n        >\n            <span fd-list-title>{{ title }}</span>\n            <i fd-list-icon glyph=\"navigation-right-arrow\"></i>\n        </a>\n    </ng-container>\n</ng-template>\n\n<ng-template #advancedHeader>\n    <button fd-button glyph=\"navigation-left-arrow\" fdType=\"transparent\" (click)=\"toggleAdvancedSearch()\"></button>\n    <h5 fd-title>{{ 'platformVHD.searchAdvancedSearchLabel' | fdTranslate }}</h5>\n</ng-template>\n\n<ng-template #desktopDialogTitle>\n    <ng-container *ngTemplateOutlet=\"dialogTitleText\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"desktopTabs\"></ng-container>\n</ng-template>\n\n<ng-template #mobileDialogTitle>\n    <div class=\"fdp-value-help-dialog__mobile-title\">\n        <ng-container *ngIf=\"hasSelectedTab; else dialogTitleText\">\n            <ng-container *ngTemplateOutlet=\"selectedTabHeader\"></ng-container>\n        </ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"mobileTabs\"></ng-container>\n</ng-template>\n\n<ng-template #desktopTabs>\n    <nav fd-tab-nav class=\"fdp-value-help-dialog__tabs\" *ngIf=\"showSelectionTab && showDefineTab\">\n        <div fd-tab-item (click)=\"switchTab(_tabTypes.selectFromList)\" *ngIf=\"showSelectionTab\">\n            <a\n                fd-tab-link\n                [active]=\"selectedTab === _tabTypes.selectFromList\"\n                [tabindex]=\"selectedTab === _tabTypes.selectFromList ? '0' : '-1'\"\n                ><span fd-tab-tag>{{ selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }}</span></a\n            >\n        </div>\n        <div fd-tab-item (click)=\"switchTab(_tabTypes.defineConditions)\" *ngIf=\"showDefineTab\">\n            <a\n                fd-tab-link\n                [active]=\"selectedTab === _tabTypes.defineConditions\"\n                [tabindex]=\"selectedTab === _tabTypes.defineConditions ? '0' : '-1'\"\n                ><span fd-tab-tag>{{ defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }}</span></a\n            >\n        </div>\n    </nav>\n</ng-template>\n\n<ng-template #mobileTabs>\n    <div *ngIf=\"!hasSelectedTab && showSelectionTab && showDefineTab\">\n        <div fd-bar [inPage]=\"true\" *ngIf=\"showSelectionTab\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    {{ selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }}\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fd-button-bar\n                        glyph=\"navigation-right-arrow\"\n                        (click)=\"switchTab(_tabTypes.selectFromList)\"\n                        [title]=\"\n                            'platformVHD.selectMobileTabTitle'\n                                | fdTranslate\n                                    : { title: selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }\n                        \"\n                    ></fd-button-bar>\n                </fd-bar-element>\n            </div>\n        </div>\n        <div fd-bar [inPage]=\"true\" *ngIf=\"showDefineTab\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    {{ defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }}\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fd-button-bar\n                        glyph=\"navigation-right-arrow\"\n                        [title]=\"\n                            'platformVHD.selectMobileTabTitle'\n                                | fdTranslate\n                                    : { title: defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }\n                        \"\n                        (click)=\"switchTab(_tabTypes.defineConditions)\"\n                    >\n                    </fd-button-bar>\n                </fd-bar-element>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #selectedTabHeader>\n    <ng-container [ngSwitch]=\"selectedTab\">\n        <ng-container *ngSwitchCase=\"_tabTypes.selectFromList\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    tabLink;\n                    context: {\n                        title: selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate),\n                        type: selectedTab\n                    }\n                \"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"_tabTypes.advancedSearch\">\n            <ng-container *ngTemplateOutlet=\"advancedHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"_tabTypes.defineConditions\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    tabLink;\n                    context: {\n                        title: defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate),\n                        type: selectedTab\n                    }\n                \"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #conditionValue let-item=\"item\">\n    <span *ngIf=\"item.strategy !== 'empty' && item.strategy !== 'not_empty'; else emptyCondition\">\n        {{ item | displayFnPipe : conditionDisplayFn : _displayedFilters }}\n    </span>\n    <ng-template #emptyCondition>\n        <ng-container *ngIf=\"item.strategy === 'not_empty'; else emptyConditionText\">\n            !(<ng-container *ngTemplateOutlet=\"emptyConditionText\"></ng-container>)\n        </ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #emptyConditionText> &lt;{{ 'platformVHD.selectMobileConditionEmpty' | fdTranslate }}&gt; </ng-template>\n", styles: [".fdp-value-help-dialog .fd-dialog__body{display:flex;flex-direction:column;overflow:hidden}.fdp-value-help-dialog .fd-title--h5{padding:.5rem 0}.fdp-value-help-dialog .fd-toolbar{background:none;border:none;padding:.1735rem .5rem;height:auto;min-height:1.625rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__advanced-search{padding-top:1rem}.fdp-value-help-dialog__advanced-search,.fdp-value-help-dialog .fd-dialog__body{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.fdp-value-help-dialog__advanced-filters{padding-top:1rem}.fdp-value-help-dialog__advanced-filters label{height:auto}.fdp-value-help-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.fdp-value-help-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.fdp-value-help-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.fdp-value-help-dialog-mobile .fdp-value-help-dialog__advanced-actions{justify-content:flex-start}.fdp-value-help-dialog__advanced-actions .fd-toolbar{padding:0}.fdp-value-help-dialog .fd-bar.fd-bar--cozy{height:auto}.fdp-value-help-dialog .fd-dialog__header{box-shadow:none}.fdp-value-help-dialog .fd-dialog__header .fd-title{display:flex;align-items:center;padding-left:2rem;padding-right:2rem;min-height:2.5rem;box-shadow:none;border-bottom:none;background-color:#fff;background-color:var(--sapObjectHeader_Background, #fff);position:relative;z-index:2}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__mobile-title{display:flex;border-bottom:1px solid #d9d9d9;border-bottom:1px solid var(--sapGroup_TitleBorderColor, #d9d9d9)}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__mobile-title .fd-title{flex:1 1 auto;border:none}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__tabs{position:relative}.fdp-value-help-dialog .fd-dialog__header,.fdp-value-help-dialog .fd-dialog__footer{height:auto;flex-direction:column}.fdp-value-help-dialog .fd-dialog__header.fd-bar,.fdp-value-help-dialog .fd-dialog__footer.fd-bar{padding:0}.fdp-value-help-dialog .fd-dialog__footer{border-top:none}.fdp-value-help-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;min-height:20rem}.fdp-value-help-dialog__row{padding:0 2rem 1rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.fdp-value-help-dialog__tokens-wrapper{display:flex}.fdp-value-help-dialog__tokens{flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.fdp-value-help-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.fdp-value-help-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.fdp-value-help-dialog__actions-row{padding:.5rem 1rem;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.fdp-value-help-dialog__actions-row .fd-button{margin-left:.5rem}.fdp-value-help-dialog .fdp-value-help-dialog__hidden_label{display:none!important}.fdp-value-help-dialog__table-busy-indicator{height:100%}\n"] }]
+                    ], template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #container>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"header\">\n                <ng-container *ngTemplateOutlet=\"mobile ? mobileDialogTitle : desktopDialogTitle\"></ng-container>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body [dir]=\"_dir\">\n            <ng-container *ngIf=\"!mobile\">\n                <ng-container *ngTemplateOutlet=\"advancedSearchContent\"></ng-container>\n            </ng-container>\n            <div fd-scrollbar class=\"fdp-value-help-dialog__content-holder\">\n                <ng-container *ngIf=\"mobile\">\n                    <ng-container *ngTemplateOutlet=\"advancedSearchContent\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"selectedTab === _tabTypes.selectFromList\">\n                    <ng-container *ngTemplateOutlet=\"selectionContent\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"selectedTab === _tabTypes.defineConditions\">\n                    <ng-container *ngTemplateOutlet=\"defineConditionsContent\"></ng-container>\n                </ng-container>\n            </div>\n        </fd-dialog-body>\n        <fd-dialog-footer [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"footer\">\n                <div\n                    class=\"fdp-value-help-dialog__row fdp-value-help-dialog__selection-row\"\n                    [attr.aria-label]=\"'platformVHD.selectionBarLabel' | fdTranslate\"\n                    *ngIf=\"!isMobileAdvancedSearchActive\"\n                >\n                    <h5 fd-title class=\"selected-and-condition-title\" [id]=\"id + '-selected-item'\">\n                        <ng-container *ngIf=\"hasSelectedAndConditions; else noItemsPanelTitle\">\n                            {{ 'platformVHD.selectedAndConditionLabel' | fdTranslate }}\n                            ({{ selectedItems.length + validConditions.length }})\n                        </ng-container>\n                    </h5>\n\n                    <div class=\"fdp-value-help-dialog__tokens-wrapper\">\n                        <div class=\"fdp-value-help-dialog__tokens\">\n                            <!-- Selected items -->\n                            <fd-tokenizer [tokenizerFocusable]=\"false\">\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"removeSelected(selectedIndex)\"\n                                    *ngFor=\"\n                                        let item of selectedItems;\n                                        index as selectedIndex;\n                                        trackBy: _trackBySelectedFn\n                                    \"\n                                    >{{ !!tokenizerFn ? (item | displayFnPipe : tokenizerFn) : item[tokenViewField] }}\n                                </fd-token>\n                                <fd-token\n                                    fd-toolbar-item\n                                    fdOverflowPriority=\"high\"\n                                    class=\"fdp-value-help-dialog__selection-token\"\n                                    (onCloseClick)=\"removeCondition(conditionIndex)\"\n                                    *ngFor=\"\n                                        let item of validConditions;\n                                        index as conditionIndex;\n                                        trackBy: _trackByConditionFn\n                                    \"\n                                >\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"conditionValue\"\n                                        [ngTemplateOutletContext]=\"{ item: item }\"\n                                    ></ng-container>\n                                </fd-token>\n                                <input fd-form-control fd-tokenizer-input [disabled]=\"!hasSelectedAndConditions\" />\n                            </fd-tokenizer>\n                        </div>\n                        <button\n                            (click)=\"clearSelectedAndConditionItems()\"\n                            class=\"fdp-value-help-dialog__tokens-clear\"\n                            fd-button\n                            [disabled]=\"!hasSelectedAndConditions\"\n                            fdType=\"transparent\"\n                            [title]=\"'platformVHD.footerClearSelectedTitle' | fdTranslate\"\n                            glyph=\"decline\"\n                            [attr.aria-label]=\"'platformVHD.footerClearSelectedAriaLabel' | fdTranslate\"\n                        ></button>\n                    </div>\n                </div>\n                <div class=\"fdp-value-help-dialog__actions-row\">\n                    <button\n                        fd-button\n                        data-go-advanced\n                        [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                        fdType=\"emphasized\"\n                        *ngIf=\"mobile && isOpenAdvanced\"\n                        (click)=\"searchAdvanced()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-succes\n                        [disabled]=\"loadingState\"\n                        [label]=\"'platformVHD.successButtonLabel' | fdTranslate\"\n                        fdType=\"emphasized\"\n                        *ngIf=\"selectedTab !== _tabTypes.advancedSearch\"\n                        (click)=\"success()\"\n                    ></button>\n                    <button\n                        fd-button\n                        data-dismiss-dialog\n                        fd-dialog-decisive-button\n                        [label]=\"'platformVHD.cancelButtonLabel' | fdTranslate\"\n                        fdType=\"transparent\"\n                        (click)=\"dismiss()\"\n                    ></button>\n                </div>\n            </ng-template>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n\n<ng-template #noItemsPanelTitle>\n    {{ 'platformVHD.selectedEmptyLabel' | fdTranslate }}\n</ng-template>\n\n<ng-template #advancedSearchContent>\n    <ng-container *ngIf=\"isSelectionTab\">\n        <form class=\"fdp-value-help-dialog__row fdp-value-help-dialog__advanced-search\" [id]=\"'advanced-search-' + id\">\n            <fd-layout-grid *ngIf=\"!mobile || (mobile && !isOpenAdvanced)\">\n                <div fdLayoutGridRow>\n                    <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"mobile ? 12 : 6\" [colXl]=\"mobile ? 12 : 6\">\n                        <fdp-search-field\n                            [placeholder]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                            (searchSubmit)=\"search()\"\n                            (inputChange)=\"_mainSearch = $event.text\"\n                        ></fdp-search-field>\n                    </div>\n\n                    <div\n                        [fdLayoutGridCol]=\"12\"\n                        [colMd]=\"12\"\n                        [colLg]=\"mobile ? 12 : 6\"\n                        [colXl]=\"mobile ? 12 : 6\"\n                        *ngIf=\"_hasAdvanced\"\n                        class=\"fdp-value-help-dialog__advanced-actions\"\n                    >\n                        <fd-toolbar [clearBorder]=\"true\">\n                            <fd-toolbar-spacer></fd-toolbar-spacer>\n                            <button\n                                fd-toolbar-item\n                                fd-button\n                                fdType=\"transparent\"\n                                *ngIf=\"_hasAdvanced\"\n                                [label]=\"\n                                    (mobile\n                                        ? 'platformVHD.searchAdvancedSearchLabel'\n                                        : isOpenAdvanced\n                                        ? 'platformVHD.searchHideAdvancedSearchLabel'\n                                        : 'platformVHD.searchShowAdvancedSearchLabel'\n                                    ) | fdTranslate\n                                \"\n                                (click)=\"toggleAdvancedSearch()\"\n                            ></button>\n                            <button\n                                fd-toolbar-item\n                                type=\"submit\"\n                                fd-button\n                                [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                fdType=\"emphasized\"\n                                [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                (click)=\"filter()\"\n                            ></button>\n                        </fd-toolbar>\n                    </div>\n                </div>\n            </fd-layout-grid>\n            <div\n                [id]=\"'advanced-search-content-' + id\"\n                *ngIf=\"isOpenAdvanced && _hasAdvanced\"\n                class=\"fdp-value-help-dialog__advanced-filters\"\n            >\n                <fd-busy-indicator [loading]=\"loadingState && _firstLoadingDone\" [block]=\"true\">\n                    <fd-layout-grid\n                        *ngIf=\"_firstLoadingDone; else filtersLoading\"\n                        [class.fdp-value-help-dialog__with-toggle-all]=\"filters.length > maxShownInitialFilters\"\n                    >\n                        <div fdLayoutGridRow>\n                            <ng-container\n                                *ngFor=\"\n                                    let filter of _displayedFilters | slice : 0 : shownFilterCount + 1;\n                                    trackBy: _trackByFilterFn\n                                \"\n                            >\n                                <ng-container *ngIf=\"filter.advanced\">\n                                    <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"6\" [colXl]=\"3\">\n                                        <label class=\"fd-form-group__header\" fd-form-label [for]=\"'input' + filter.key\"\n                                            >{{ filter.label }}:</label\n                                        >\n                                        <ng-container *ngIf=\"filter.filterDef\">\n                                            <ng-template\n                                                [ngTemplateOutlet]=\"filter.filterDef.templateRef\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: filter }\"\n                                            ></ng-template>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"!filter.filterDef\">\n                                            <input\n                                                [(ngModel)]=\"filter.value\"\n                                                fd-form-control\n                                                type=\"text\"\n                                                [name]=\"'search-by-' + filter.label\"\n                                                [id]=\"'input' + filter.key\"\n                                            />\n                                        </ng-container>\n                                    </div>\n                                </ng-container>\n                            </ng-container>\n\n                            <div\n                                colGrow\n                                [fdLayoutGridCol]=\"12\"\n                                [colMd]=\"12\"\n                                [colLg]=\"6\"\n                                [colXl]=\"3\"\n                                *ngIf=\"filters.length > maxShownInitialFilters\"\n                                class=\"fdp-value-help-dialog__toggle-filters\"\n                            >\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    (click)=\"toggleShownFilters()\"\n                                    [label]=\"\n                                        (isShowAllFilters\n                                            ? 'platformVHD.searchHideAllAdvancedSearchLabel'\n                                            : 'platformVHD.searchShowAllAdvancedSearchLabel'\n                                        ) | fdTranslate\n                                    \"\n                                ></button>\n                            </div>\n                        </div>\n                    </fd-layout-grid>\n\n                    <ng-template #filtersLoading>\n                        <fd-skeleton width=\"100%\" height=\"100px\">\n                            <svg:rect x=\"0\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"0\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n                            <svg:rect x=\"35%\" y=\"0\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"35%\" y=\"20\" rx=\"4\" width=\"25%\" height=\"16\" />\n\n                            <svg:rect x=\"0\" y=\"60\" rx=\"4\" width=\"15%\" height=\"8\" />\n                            <svg:rect x=\"0\" y=\"80\" rx=\"4\" width=\"25%\" height=\"16\" />\n                        </fd-skeleton>\n                    </ng-template>\n                </fd-busy-indicator>\n            </div>\n        </form>\n    </ng-container>\n</ng-template>\n\n<ng-template #selectionContent>\n    <fd-busy-indicator\n        [loading]=\"loadingState && _firstLoadingDone\"\n        [block]=\"true\"\n        class=\"fdp-value-help-dialog__table-busy-indicator\"\n    >\n        <fdp-select-tab\n            [selected]=\"selectedItems\"\n            [loading]=\"loadingState && !_firstLoadingDone\"\n            [uid]=\"id\"\n            [displayedData]=\"_displayedData\"\n            [tabTitle]=\"selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate)\"\n            [mobile]=\"mobile\"\n            [selection]=\"searchSelection\"\n            [emptyTableMessage]=\"searchTableEmptyMessage || ('platformVHD.searchTableEmptyMessage' | fdTranslate)\"\n            [uniqueKey]=\"uniqueKey\"\n            [pageSize]=\"searchTablePageSize\"\n            [defaultMobileHeaders]=\"searchTableMobileHeaders\"\n            [filters]=\"_displayedFilters\"\n            [allowSelectAll]=\"allowSelectAll\"\n            (select)=\"onSelect($event)\"\n        ></fdp-select-tab>\n    </fd-busy-indicator>\n</ng-template>\n\n<ng-template #defineConditionsContent>\n    <div fd-scrollbar>\n        <fdp-define-tab\n            [strategyLabels]=\"defineStrategyLabels\"\n            [conditions]=\"conditionItems\"\n            [uid]=\"id\"\n            [tabTitle]=\"defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate)\"\n            [mobile]=\"mobile\"\n            (conditionChange)=\"onConditionChange($event)\"\n        ></fdp-define-tab>\n    </div>\n</ng-template>\n\n<ng-template #dialogTitleText>\n    <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n</ng-template>\n\n<ng-template #tabLink let-title=\"title\" let-type=\"type\">\n    <ng-container *ngIf=\"selectedTab === type && showSelectionTab && showDefineTab\">\n        <button\n            fd-button\n            glyph=\"navigation-left-arrow\"\n            fdType=\"transparent\"\n            (click)=\"switchTab()\"\n            [title]=\"'platformVHD.selectMobileTabBackBtnTitle' | fdTranslate\"\n        ></button>\n        <h5 fd-title>{{ title }}</h5>\n    </ng-container>\n    <ng-container *ngIf=\"selectedTab !== type\">\n        <a\n            fd-list-link\n            (click)=\"switchTab(type)\"\n            [title]=\"'platformVHD.selectMobileTabBtnOpenDialogLabel' | fdTranslate\"\n        >\n            <span fd-list-title>{{ title }}</span>\n            <i fd-list-icon glyph=\"navigation-right-arrow\"></i>\n        </a>\n    </ng-container>\n</ng-template>\n\n<ng-template #advancedHeader>\n    <button fd-button glyph=\"navigation-left-arrow\" fdType=\"transparent\" (click)=\"toggleAdvancedSearch()\"></button>\n    <h5 fd-title>{{ 'platformVHD.searchAdvancedSearchLabel' | fdTranslate }}</h5>\n</ng-template>\n\n<ng-template #desktopDialogTitle>\n    <ng-container *ngTemplateOutlet=\"dialogTitleText\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"desktopTabs\"></ng-container>\n</ng-template>\n\n<ng-template #mobileDialogTitle>\n    <div class=\"fdp-value-help-dialog__mobile-title\">\n        <ng-container *ngIf=\"hasSelectedTab; else dialogTitleText\">\n            <ng-container *ngTemplateOutlet=\"selectedTabHeader\"></ng-container>\n        </ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"mobileTabs\"></ng-container>\n</ng-template>\n\n<ng-template #desktopTabs>\n    <nav fd-tab-nav class=\"fdp-value-help-dialog__tabs\" *ngIf=\"showSelectionTab && showDefineTab\">\n        <div fd-tab-item (click)=\"switchTab(_tabTypes.selectFromList)\" *ngIf=\"showSelectionTab\">\n            <a\n                fd-tab-link\n                [active]=\"selectedTab === _tabTypes.selectFromList\"\n                [tabindex]=\"selectedTab === _tabTypes.selectFromList ? '0' : '-1'\"\n                ><span fd-tab-tag>{{ selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }}</span></a\n            >\n        </div>\n        <div fd-tab-item (click)=\"switchTab(_tabTypes.defineConditions)\" *ngIf=\"showDefineTab\">\n            <a\n                fd-tab-link\n                [active]=\"selectedTab === _tabTypes.defineConditions\"\n                [tabindex]=\"selectedTab === _tabTypes.defineConditions ? '0' : '-1'\"\n                ><span fd-tab-tag>{{ defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }}</span></a\n            >\n        </div>\n    </nav>\n</ng-template>\n\n<ng-template #mobileTabs>\n    <div *ngIf=\"!hasSelectedTab && showSelectionTab && showDefineTab\">\n        <div fd-bar [inPage]=\"true\" *ngIf=\"showSelectionTab\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    {{ selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }}\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fd-button-bar\n                        glyph=\"navigation-right-arrow\"\n                        (click)=\"switchTab(_tabTypes.selectFromList)\"\n                        [title]=\"\n                            'platformVHD.selectMobileTabTitle'\n                                | fdTranslate\n                                    : { title: selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate) }\n                        \"\n                    ></fd-button-bar>\n                </fd-bar-element>\n            </div>\n        </div>\n        <div fd-bar [inPage]=\"true\" *ngIf=\"showDefineTab\">\n            <div fd-bar-left>\n                <fd-bar-element>\n                    {{ defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }}\n                </fd-bar-element>\n            </div>\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <fd-button-bar\n                        glyph=\"navigation-right-arrow\"\n                        [title]=\"\n                            'platformVHD.selectMobileTabTitle'\n                                | fdTranslate\n                                    : { title: defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate) }\n                        \"\n                        (click)=\"switchTab(_tabTypes.defineConditions)\"\n                    >\n                    </fd-button-bar>\n                </fd-bar-element>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #selectedTabHeader>\n    <ng-container [ngSwitch]=\"selectedTab\">\n        <ng-container *ngSwitchCase=\"_tabTypes.selectFromList\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    tabLink;\n                    context: {\n                        title: selectTabTitle || ('platformVHD.selectTabTitle' | fdTranslate),\n                        type: selectedTab\n                    }\n                \"\n            ></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"_tabTypes.advancedSearch\">\n            <ng-container *ngTemplateOutlet=\"advancedHeader\"></ng-container>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"_tabTypes.defineConditions\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    tabLink;\n                    context: {\n                        title: defineTabTitle || ('platformVHD.defineTabTitle' | fdTranslate),\n                        type: selectedTab\n                    }\n                \"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #conditionValue let-item=\"item\">\n    <span *ngIf=\"item.strategy !== 'empty' && item.strategy !== 'not_empty'; else emptyCondition\">\n        {{ item | displayFnPipe : conditionDisplayFn : _displayedFilters }}\n    </span>\n    <ng-template #emptyCondition>\n        <ng-container *ngIf=\"item.strategy === 'not_empty'; else emptyConditionText\">\n            !(<ng-container *ngTemplateOutlet=\"emptyConditionText\"></ng-container>)\n        </ng-container>\n    </ng-template>\n</ng-template>\n\n<ng-template #emptyConditionText> &lt;{{ 'platformVHD.selectMobileConditionEmpty' | fdTranslate }}&gt; </ng-template>\n", styles: [".fdp-value-help-dialog .fd-dialog__body{display:flex;flex-direction:column;overflow:hidden}.fdp-value-help-dialog .fd-title--h5{padding:.5rem 0}.fdp-value-help-dialog .fd-toolbar{background:none;border:none;padding:.1735rem .5rem;height:auto;min-height:1.625rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__advanced-search{padding-top:1rem}.fdp-value-help-dialog__advanced-search,.fdp-value-help-dialog .fd-dialog__body{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.fdp-value-help-dialog__advanced-filters{padding-top:1rem}.fdp-value-help-dialog__advanced-filters label{height:auto}.fdp-value-help-dialog__toggle-filters{display:flex;justify-content:flex-end;align-items:flex-end}.fdp-value-help-dialog__toggle-filters .fd-button{margin-bottom:.25rem}.fdp-value-help-dialog__advanced-actions{display:flex;align-items:center;justify-content:flex-end}.fdp-value-help-dialog-mobile .fdp-value-help-dialog__advanced-actions{justify-content:flex-start}.fdp-value-help-dialog__advanced-actions .fd-toolbar{padding:0}.fdp-value-help-dialog .fd-bar.fd-bar--cozy{height:auto}.fdp-value-help-dialog .fd-dialog__header{box-shadow:none}.fdp-value-help-dialog .fd-dialog__header .fd-title{display:flex;align-items:center;padding-left:2rem;padding-right:2rem;min-height:2.5rem;box-shadow:none;border-bottom:none;background-color:#fff;background-color:var(--sapObjectHeader_Background, #fff);position:relative;z-index:2}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__mobile-title{display:flex;border-bottom:1px solid #d9d9d9;border-bottom:1px solid var(--sapGroup_TitleBorderColor, #d9d9d9)}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__mobile-title .fd-title{flex:1 1 auto;border:none}.fdp-value-help-dialog .fd-dialog__header .fdp-value-help-dialog__tabs{position:relative}.fdp-value-help-dialog .fd-dialog__header,.fdp-value-help-dialog .fd-dialog__footer{height:auto;flex-direction:column}.fdp-value-help-dialog .fd-dialog__header.fd-bar,.fdp-value-help-dialog .fd-dialog__footer.fd-bar{padding:0}.fdp-value-help-dialog .fd-dialog__footer{border-top:none}.fdp-value-help-dialog__content-holder{padding:0 2rem 1rem;display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;min-height:20rem}.fdp-value-help-dialog__row{padding:0 2rem 1rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__selection-row{background-color:#f7f7f7;background-color:var(--sapBackgroundColor, #f7f7f7)}.fdp-value-help-dialog__tokens-wrapper{display:flex}.fdp-value-help-dialog__tokens{flex:1 1 auto;overflow:hidden;align-items:center;border:1px solid #89919a;border-color:var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background:none}.fdp-value-help-dialog__tokens fd-toolbar{flex:1 1 auto;overflow:hidden}.fdp-value-help-dialog__tokens-clear{height:auto;min-width:2rem;padding:.125rem 0;justify-content:center}.fdp-value-help-dialog__actions-row{padding:.5rem 1rem;display:flex;align-items:center;justify-content:flex-end;border-top:.0625rem solid #d9d9d9;border-top:.0625rem solid var(--sapPageFooter_BorderColor, #d9d9d9)}.fdp-value-help-dialog__actions-row .fd-button{margin-left:.5rem}.fdp-value-help-dialog .fdp-value-help-dialog__hidden_label{display:none!important}.fdp-value-help-dialog__table-busy-indicator{height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.DialogService }, { type: i2$1.RtlService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { id: [{
@@ -1357,6 +1371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], conditionDisplayFn: [{
                 type: Input
+            }], tokenValidator: [{
+                type: Input
             }], selectTabTitle: [{
                 type: Input
             }], searchSelection: [{