@fundamental-ngx/platform 0.48.0-rc.13 → 0.48.0-rc.15

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Component, Input, Directive, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy, Output, ViewChild, TemplateRef, Optional, ContentChildren, NgModule } from '@angular/core';
-import { BehaviorSubject, Subject, of, Subscription, isObservable } from 'rxjs';
+import { Component, Input, Directive, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy, Output, inject, DestroyRef, ViewChild, TemplateRef, ContentChild, Optional, ContentChildren, NgModule } from '@angular/core';
+import { BehaviorSubject, Subject, of, startWith, Subscription, isObservable } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { BaseDataProvider, DataProvider, isDataSource } from '@fundamental-ngx/platform/shared';
 import { NgTemplateOutlet, SlicePipe, NgForOf } from '@angular/common';
@@ -15,6 +15,7 @@ import { TitleComponent } from '@fundamental-ngx/core/title';
 import { FdTranslatePipe } from '@fundamental-ngx/i18n';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { CdkScrollable } from '@angular/cdk/overlay';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@fundamental-ngx/cdk/utils';
 import { RepeatDirective, FocusableGridDirective, TemplateDirective, DisplayFnPipe } from '@fundamental-ngx/cdk/utils';
 import { BarComponent, BarMiddleDirective, BarElementDirective, BarLeftDirective, BarRightDirective, ButtonBarComponent } from '@fundamental-ngx/core/bar';
@@ -460,6 +461,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 type: Output
             }] } });
 
+class VhdComponent {
+}
+
 /* eslint-disable @typescript-eslint/member-ordering */
 let titleUniqueId = 0;
 class SelectTabComponent extends VhdBaseTab {
@@ -505,7 +509,13 @@ class SelectTabComponent extends VhdBaseTab {
         /** @hidden */
         this._selectedMap = {};
         /** @hidden */
+        this._columnDefMap = new Map();
+        /** @hidden */
         this.selectedItems = [];
+        /** @hidden */
+        this._vhd = inject(VhdComponent, { optional: true });
+        /** @hidden */
+        this._destroyRef = inject(DestroyRef);
         /** @hidden Track function for main data */
         this._trackByTableRowFn = (_index, item) => {
             if (item) {
@@ -529,6 +539,12 @@ class SelectTabComponent extends VhdBaseTab {
     /** @hidden */
     ngAfterViewInit() {
         Promise.resolve(true).then(() => this._checkScrollAndShowMore());
+        this._vhd?.columnDef.changes.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this._columnDefMap.clear();
+            this._vhd?.columnDef.forEach((item) => {
+                this._columnDefMap.set(item.column, item);
+            });
+        });
     }
     /** @hidden  */
     ngOnChanges(changes) {
@@ -677,7 +693,7 @@ class SelectTabComponent extends VhdBaseTab {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SelectTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: SelectTabComponent, isStandalone: true, selector: "fdp-select-tab", inputs: { selectTabTitleId: "selectTabTitleId", selectTabCountId: "selectTabCountId", selected: "selected", loading: "loading", filters: "filters", selection: "selection", uniqueKey: "uniqueKey", pageSize: "pageSize", defaultMobileHeaders: "defaultMobileHeaders", displayedData: "displayedData" }, outputs: { select: "select" }, 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            @if (displayedData.length && _tableFilters) {\n                <tr fd-table-row>\n                    <th fd-table-cell [fitContent]=\"mobile\">\n                        @if (isMultiSelection) {\n                            <fd-checkbox\n                                [name]=\"uid + '-row-all'\"\n                                [tristate]=\"true\"\n                                [tristateSelectable]=\"false\"\n                                [ngModel]=\"_selectedAll\"\n                                (ngModelChange)=\"_toggleAllRows()\"\n                            ></fd-checkbox>\n                        }\n                    </th>\n                    @for (\n                        filter of _tableFilters.main;\n                        track _trackByFilterFn(colindex, filter);\n                        let colindex = $index\n                    ) {\n                        <th fd-table-cell [attr.aria-colindex]=\"colindex\">\n                            {{ filter.label }}\n                        </th>\n                    }\n                </tr>\n            }\n        </thead>\n        <tbody fd-table-body>\n            @for (\n                row of displayedData | slice: _shownFrom : _shownCount;\n                track _trackByTableRowFn(i, row);\n                let i = $index\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                        @if (isMultiSelection) {\n                            <fd-checkbox\n                                [name]=\"uid + '-row-' + i\"\n                                [ngModel]=\"_selectedMap[row[uniqueKey]]\"\n                                (change)=\"_toggleSelectRow(row)\"\n                            ></fd-checkbox>\n                        }\n                    </td>\n                    @for (filter of _tableFilters.main; track filter; let rowIndex = $index) {\n                        <td fd-table-cell [attr.aria-rowindex]=\"rowIndex\">\n                            {{ row[filter.key] || '' }}\n                        </td>\n                    }\n                </tr>\n                @if (mobile && _tableFilters.secondary.length) {\n                    <tr fd-table-row [secondary]=\"true\" [attr.aria-selected]=\"_selectedMap[row[uniqueKey]]\">\n                        <td fd-table-cell></td>\n                        <td colspan=\"100%\" fd-table-cell [fitContent]=\"true\">\n                            @for (filter of _tableFilters.secondary; track filter) {\n                                <p fd-table-text>\n                                    <label>{{ filter.label }}:</label>\n                                    {{ row[filter.key] || '' }}\n                                </p>\n                            }\n                        </td>\n                    </tr>\n                }\n            }\n            @if (displayedData.length && mobile && _shownCount && _shownCount !== displayedData.length) {\n                <tr fd-table-row>\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            }\n            @if (!displayedData.length) {\n                @if (loading) {\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                } @else {\n                    <tr fd-table-row>\n                        <td fd-table-cell colspan=\"100%\">\n                            <div class=\"fdp-value-help-dialog__empty-message\">\n                                {{ 'platformVHD.searchTableEmptyMessage' | fdTranslate }}\n                            </div>\n                        </td>\n                    </tr>\n                }\n            }\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: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[fdInfiniteScroll]", inputs: ["scrollPercent", "scrollOffset"], outputs: ["onScrollAction"] }, { kind: "component", type: TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "directive", type: TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: TableTextDirective, selector: "[fdTableText], [fd-table-text]", inputs: ["fdTableTextClass", "noWrap", "title", "maxWidth"] }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: RepeatDirective, selector: "[fdkRepeat]", inputs: ["fdkRepeat"] }, { kind: "component", type: SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: SelectTabComponent, isStandalone: true, selector: "fdp-select-tab", inputs: { selectTabTitleId: "selectTabTitleId", selectTabCountId: "selectTabCountId", selected: "selected", loading: "loading", filters: "filters", selection: "selection", uniqueKey: "uniqueKey", pageSize: "pageSize", defaultMobileHeaders: "defaultMobileHeaders", displayedData: "displayedData" }, outputs: { select: "select" }, 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            @if (displayedData.length && _tableFilters) {\n                <tr fd-table-row>\n                    <th fd-table-cell [fitContent]=\"mobile\">\n                        @if (isMultiSelection) {\n                            <fd-checkbox\n                                [name]=\"uid + '-row-all'\"\n                                [tristate]=\"true\"\n                                [tristateSelectable]=\"false\"\n                                [ngModel]=\"_selectedAll\"\n                                (ngModelChange)=\"_toggleAllRows()\"\n                            ></fd-checkbox>\n                        }\n                    </th>\n                    @for (\n                        filter of _tableFilters.main;\n                        track _trackByFilterFn(colindex, filter);\n                        let colindex = $index\n                    ) {\n                        <th fd-table-cell [attr.aria-colindex]=\"colindex\">\n                            {{ filter.label }}\n                        </th>\n                    }\n                </tr>\n            }\n        </thead>\n        <tbody fd-table-body>\n            @for (\n                row of displayedData | slice: _shownFrom : _shownCount;\n                track _trackByTableRowFn(i, row);\n                let i = $index\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                        @if (isMultiSelection) {\n                            <fd-checkbox\n                                [name]=\"uid + '-row-' + i\"\n                                [ngModel]=\"_selectedMap[row[uniqueKey]]\"\n                                (change)=\"_toggleSelectRow(row)\"\n                            ></fd-checkbox>\n                        }\n                    </td>\n                    @for (filter of _tableFilters.main; track filter; let rowIndex = $index) {\n                        <td fd-table-cell [attr.aria-rowindex]=\"rowIndex\">\n                            @if (_columnDefMap.get(filter.key); as columnDef) {\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                            } @else {\n                                {{ row[filter.key] || '' }}\n                            }\n                        </td>\n                    }\n                </tr>\n                @if (mobile && _tableFilters.secondary.length) {\n                    <tr fd-table-row [secondary]=\"true\" [attr.aria-selected]=\"_selectedMap[row[uniqueKey]]\">\n                        <td fd-table-cell></td>\n                        <td colspan=\"100%\" fd-table-cell [fitContent]=\"true\">\n                            @for (filter of _tableFilters.secondary; track filter) {\n                                <p fd-table-text>\n                                    <label>{{ filter.label }}:</label>\n                                    {{ row[filter.key] || '' }}\n                                </p>\n                            }\n                        </td>\n                    </tr>\n                }\n            }\n            @if (displayedData.length && mobile && _shownCount && _shownCount !== displayedData.length) {\n                <tr fd-table-row>\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            }\n            @if (!displayedData.length) {\n                @if (loading) {\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                } @else {\n                    <tr fd-table-row>\n                        <td fd-table-cell colspan=\"100%\">\n                            <div class=\"fdp-value-help-dialog__empty-message\">\n                                {{ 'platformVHD.searchTableEmptyMessage' | fdTranslate }}\n                            </div>\n                        </td>\n                    </tr>\n                }\n            }\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: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[fdInfiniteScroll]", inputs: ["scrollPercent", "scrollOffset"], outputs: ["onScrollAction"] }, { kind: "component", type: TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "directive", type: TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: TableTextDirective, selector: "[fdTableText], [fd-table-text]", inputs: ["fdTableTextClass", "noWrap", "title", "maxWidth"] }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: RepeatDirective, selector: "[fdkRepeat]", inputs: ["fdkRepeat"] }, { kind: "component", type: SkeletonComponent, selector: "fd-skeleton", inputs: ["animated", "type", "textLines", "width", "height"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SelectTabComponent, decorators: [{
             type: Component,
@@ -703,8 +719,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         RepeatDirective,
                         SkeletonComponent,
                         SlicePipe,
-                        FdTranslatePipe
-                    ], 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            @if (displayedData.length && _tableFilters) {\n                <tr fd-table-row>\n                    <th fd-table-cell [fitContent]=\"mobile\">\n                        @if (isMultiSelection) {\n                            <fd-checkbox\n                                [name]=\"uid + '-row-all'\"\n                                [tristate]=\"true\"\n                                [tristateSelectable]=\"false\"\n                                [ngModel]=\"_selectedAll\"\n                                (ngModelChange)=\"_toggleAllRows()\"\n                            ></fd-checkbox>\n                        }\n                    </th>\n                    @for (\n                        filter of _tableFilters.main;\n                        track _trackByFilterFn(colindex, filter);\n                        let colindex = $index\n                    ) {\n                        <th fd-table-cell [attr.aria-colindex]=\"colindex\">\n                            {{ filter.label }}\n                        </th>\n                    }\n                </tr>\n            }\n        </thead>\n        <tbody fd-table-body>\n            @for (\n                row of displayedData | slice: _shownFrom : _shownCount;\n                track _trackByTableRowFn(i, row);\n                let i = $index\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                        @if (isMultiSelection) {\n                            <fd-checkbox\n                                [name]=\"uid + '-row-' + i\"\n                                [ngModel]=\"_selectedMap[row[uniqueKey]]\"\n                                (change)=\"_toggleSelectRow(row)\"\n                            ></fd-checkbox>\n                        }\n                    </td>\n                    @for (filter of _tableFilters.main; track filter; let rowIndex = $index) {\n                        <td fd-table-cell [attr.aria-rowindex]=\"rowIndex\">\n                            {{ row[filter.key] || '' }}\n                        </td>\n                    }\n                </tr>\n                @if (mobile && _tableFilters.secondary.length) {\n                    <tr fd-table-row [secondary]=\"true\" [attr.aria-selected]=\"_selectedMap[row[uniqueKey]]\">\n                        <td fd-table-cell></td>\n                        <td colspan=\"100%\" fd-table-cell [fitContent]=\"true\">\n                            @for (filter of _tableFilters.secondary; track filter) {\n                                <p fd-table-text>\n                                    <label>{{ filter.label }}:</label>\n                                    {{ row[filter.key] || '' }}\n                                </p>\n                            }\n                        </td>\n                    </tr>\n                }\n            }\n            @if (displayedData.length && mobile && _shownCount && _shownCount !== displayedData.length) {\n                <tr fd-table-row>\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            }\n            @if (!displayedData.length) {\n                @if (loading) {\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                } @else {\n                    <tr fd-table-row>\n                        <td fd-table-cell colspan=\"100%\">\n                            <div class=\"fdp-value-help-dialog__empty-message\">\n                                {{ 'platformVHD.searchTableEmptyMessage' | fdTranslate }}\n                            </div>\n                        </td>\n                    </tr>\n                }\n            }\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"] }]
+                        FdTranslatePipe,
+                        NgTemplateOutlet
+                    ], 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            @if (displayedData.length && _tableFilters) {\n                <tr fd-table-row>\n                    <th fd-table-cell [fitContent]=\"mobile\">\n                        @if (isMultiSelection) {\n                            <fd-checkbox\n                                [name]=\"uid + '-row-all'\"\n                                [tristate]=\"true\"\n                                [tristateSelectable]=\"false\"\n                                [ngModel]=\"_selectedAll\"\n                                (ngModelChange)=\"_toggleAllRows()\"\n                            ></fd-checkbox>\n                        }\n                    </th>\n                    @for (\n                        filter of _tableFilters.main;\n                        track _trackByFilterFn(colindex, filter);\n                        let colindex = $index\n                    ) {\n                        <th fd-table-cell [attr.aria-colindex]=\"colindex\">\n                            {{ filter.label }}\n                        </th>\n                    }\n                </tr>\n            }\n        </thead>\n        <tbody fd-table-body>\n            @for (\n                row of displayedData | slice: _shownFrom : _shownCount;\n                track _trackByTableRowFn(i, row);\n                let i = $index\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                        @if (isMultiSelection) {\n                            <fd-checkbox\n                                [name]=\"uid + '-row-' + i\"\n                                [ngModel]=\"_selectedMap[row[uniqueKey]]\"\n                                (change)=\"_toggleSelectRow(row)\"\n                            ></fd-checkbox>\n                        }\n                    </td>\n                    @for (filter of _tableFilters.main; track filter; let rowIndex = $index) {\n                        <td fd-table-cell [attr.aria-rowindex]=\"rowIndex\">\n                            @if (_columnDefMap.get(filter.key); as columnDef) {\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                            } @else {\n                                {{ row[filter.key] || '' }}\n                            }\n                        </td>\n                    }\n                </tr>\n                @if (mobile && _tableFilters.secondary.length) {\n                    <tr fd-table-row [secondary]=\"true\" [attr.aria-selected]=\"_selectedMap[row[uniqueKey]]\">\n                        <td fd-table-cell></td>\n                        <td colspan=\"100%\" fd-table-cell [fitContent]=\"true\">\n                            @for (filter of _tableFilters.secondary; track filter) {\n                                <p fd-table-text>\n                                    <label>{{ filter.label }}:</label>\n                                    {{ row[filter.key] || '' }}\n                                </p>\n                            }\n                        </td>\n                    </tr>\n                }\n            }\n            @if (displayedData.length && mobile && _shownCount && _shownCount !== displayedData.length) {\n                <tr fd-table-row>\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            }\n            @if (!displayedData.length) {\n                @if (loading) {\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                } @else {\n                    <tr fd-table-row>\n                        <td fd-table-cell colspan=\"100%\">\n                            <div class=\"fdp-value-help-dialog__empty-message\">\n                                {{ 'platformVHD.searchTableEmptyMessage' | fdTranslate }}\n                            </div>\n                        </td>\n                    </tr>\n                }\n            }\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"] }]
         }], propDecorators: { selectTabTitleId: [{
                 type: Input
             }], selectTabCountId: [{
@@ -734,6 +751,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 args: [InfiniteScrollDirective]
             }] } });
 
+class ValueHelpFilterDefDirective {
+    constructor() {
+        /** Template reference */
+        this.templateRef = inject((TemplateRef));
+    }
+    /** @hidden */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ValueHelpFilterDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: ValueHelpFilterDefDirective, isStandalone: true, selector: "[fdpValueHelpFilterDef]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ValueHelpFilterDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdpValueHelpFilterDef]',
+                    standalone: true
+                }]
+        }] });
+
 class VhdFilterComponent {
     constructor() {
         /** Allow to control which of filters should show as main in mobile view.
@@ -749,7 +786,7 @@ class VhdFilterComponent {
         this.exclude = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: VhdFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: VhdFilterComponent, isStandalone: true, selector: "fdp-value-help-dialog-filter", inputs: { key: "key", main: "main", label: "label", value: "value", advanced: "advanced", include: "include", exclude: "exclude" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: VhdFilterComponent, isStandalone: true, selector: "fdp-value-help-dialog-filter", inputs: { key: "key", main: "main", label: "label", value: "value", advanced: "advanced", include: "include", exclude: "exclude" }, queries: [{ propertyName: "filterDef", first: true, predicate: ValueHelpFilterDefDirective, descendants: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: VhdFilterComponent, decorators: [{
             type: Component,
@@ -773,10 +810,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 type: Input
             }], exclude: [{
                 type: Input
+            }], filterDef: [{
+                type: ContentChild,
+                args: [ValueHelpFilterDefDirective]
+            }] } });
+
+class ValueHelpColumnDefDirective {
+    constructor() {
+        /** Template reference */
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ValueHelpColumnDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: ValueHelpColumnDefDirective, isStandalone: true, selector: "[fdpValueHelpColumnDef]", inputs: { as: ["fdpValueHelpColumnDefAs", "as"], column: ["fdpValueHelpColumnDefColumn", "column"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ValueHelpColumnDefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdpValueHelpColumnDef]',
+                    standalone: true
+                }]
+        }], propDecorators: { as: [{
+                type: Input,
+                args: ['fdpValueHelpColumnDefAs']
+            }], column: [{
+                type: Input,
+                args: ['fdpValueHelpColumnDefColumn']
             }] } });
 
 let vhiUniqueId = 0;
-class PlatformValueHelpDialogComponent {
+class PlatformValueHelpDialogComponent extends VhdComponent {
     /** Data source */
     set dataSource(value) {
         if (value) {
@@ -792,6 +854,7 @@ class PlatformValueHelpDialogComponent {
     }
     /** @hidden */
     constructor(elementRef, _changeDetectorRef, _dialogService, _rtlService) {
+        super();
         this.elementRef = elementRef;
         this._changeDetectorRef = _changeDetectorRef;
         this._dialogService = _dialogService;
@@ -1016,7 +1079,7 @@ class PlatformValueHelpDialogComponent {
         const nonEmptyFilters = new Map();
         if (!onlySearch) {
             this._displayedFilters
-                .filter(({ value }) => !!value && value.trim().length)
+                .filter(({ value }) => !!value && typeof value === 'string' ? value.trim().length : value !== undefined)
                 .forEach((e) => nonEmptyFilters.set(e.key, e.value));
         }
         if (this._mainSearch.length) {
@@ -1251,11 +1314,21 @@ class PlatformValueHelpDialogComponent {
         return true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformValueHelpDialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.DialogService }, { token: i2.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: PlatformValueHelpDialogComponent, isStandalone: true, 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", searchSelection: "searchSelection", searchTablePageSize: "searchTablePageSize", searchTableMobileHeaders: "searchTableMobileHeaders", maxShownInitialFilters: "maxShownInitialFilters", loading: "loading", defineStrategyLabels: "defineStrategyLabels" }, outputs: { valueChange: "valueChange", onDataRequested: "onDataRequested", onDataReceived: "onDataReceived" }, queries: [{ propertyName: "filters", predicate: VhdFilterComponent }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["container"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] 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-template [ngTemplateOutlet]=\"mobile ? mobileDialogTitle : desktopDialogTitle\"></ng-template>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body [dir]=\"_dir\">\n            @if (!mobile) {\n                <ng-template [ngTemplateOutlet]=\"advancedSearchContent\"></ng-template>\n            }\n            <div fd-scrollbar class=\"fdp-value-help-dialog__content-holder\">\n                @if (mobile) {\n                    <ng-template [ngTemplateOutlet]=\"advancedSearchContent\"></ng-template>\n                }\n                @if (selectedTab === _tabTypes.selectFromList) {\n                    <ng-template [ngTemplateOutlet]=\"selectionContent\"></ng-template>\n                }\n                @if (selectedTab === _tabTypes.defineConditions) {\n                    <ng-template [ngTemplateOutlet]=\"defineConditionsContent\"></ng-template>\n                }\n            </div>\n        </fd-dialog-body>\n        <fd-dialog-footer [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"footer\">\n                @if (!isMobileAdvancedSearchActive) {\n                    <div\n                        class=\"fdp-value-help-dialog__row fdp-value-help-dialog__selection-row\"\n                        [attr.aria-label]=\"'platformVHD.selectionBarLabel' | fdTranslate\"\n                    >\n                        <h5 fd-title class=\"selected-and-condition-title\" [id]=\"id + '-selected-item'\">\n                            @if (hasSelectedAndConditions) {\n                                {{ 'platformVHD.selectedAndConditionLabel' | fdTranslate }}\n                                ({{ selectedItems.length + validConditions.length }})\n                            } @else {\n                                {{ 'platformVHD.selectedEmptyLabel' | fdTranslate }}\n                            }\n                        </h5>\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                                        *ngFor=\"\n                                            let item of selectedItems;\n                                            trackBy: _trackBySelectedFn;\n                                            index as selectedIndex\n                                        \"\n                                        fd-toolbar-item\n                                        fdOverflowPriority=\"high\"\n                                        class=\"fdp-value-help-dialog__selection-token\"\n                                        (onCloseClick)=\"removeSelected(selectedIndex)\"\n                                        >{{\n                                            !!tokenizerFn ? (item | displayFnPipe: tokenizerFn) : item[tokenViewField]\n                                        }}\n                                    </fd-token>\n                                    <fd-token\n                                        *ngFor=\"\n                                            let item of validConditions;\n                                            trackBy: _trackByConditionFn;\n                                            index as conditionIndex\n                                        \"\n                                        fd-toolbar-item\n                                        fdOverflowPriority=\"high\"\n                                        class=\"fdp-value-help-dialog__selection-token\"\n                                        (onCloseClick)=\"removeCondition(conditionIndex)\"\n                                    >\n                                        <ng-template\n                                            [ngTemplateOutlet]=\"conditionValue\"\n                                            [ngTemplateOutletContext]=\"{ item: item }\"\n                                        ></ng-template>\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                }\n                <div class=\"fdp-value-help-dialog__actions-row\">\n                    @if (mobile && isOpenAdvanced) {\n                        <button\n                            fd-button\n                            data-go-advanced\n                            [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                            fdType=\"emphasized\"\n                            (click)=\"searchAdvanced()\"\n                        ></button>\n                    }\n                    @if (selectedTab !== _tabTypes.advancedSearch) {\n                        <button\n                            fd-button\n                            data-succes\n                            [label]=\"'platformVHD.successButtonLabel' | fdTranslate\"\n                            fdType=\"emphasized\"\n                            (click)=\"success()\"\n                        ></button>\n                    }\n                    <button\n                        fd-button\n                        data-dismiss-dialog\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<ng-template #advancedSearchContent>\n    @if (isSelectionTab) {\n        <form class=\"fdp-value-help-dialog__row fdp-value-help-dialog__advanced-search\" [id]=\"'advanced-search-' + id\">\n            @if (!mobile || (mobile && !isOpenAdvanced)) {\n                <fd-layout-grid>\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                        @if (_hasAdvanced) {\n                            <div\n                                [fdLayoutGridCol]=\"12\"\n                                [colMd]=\"12\"\n                                [colLg]=\"mobile ? 12 : 6\"\n                                [colXl]=\"mobile ? 12 : 6\"\n                                class=\"fdp-value-help-dialog__advanced-actions\"\n                            >\n                                <fd-toolbar [clearBorder]=\"true\">\n                                    <fd-toolbar-spacer></fd-toolbar-spacer>\n                                    @if (_hasAdvanced) {\n                                        <button\n                                            fd-toolbar-item\n                                            fd-button\n                                            fdType=\"transparent\"\n                                            [label]=\"\n                                                (mobile\n                                                    ? 'platformVHD.searchAdvancedSearchLabel'\n                                                    : isOpenAdvanced\n                                                      ? 'platformVHD.searchHideAdvancedSearchLabel'\n                                                      : 'platformVHD.searchShowAdvancedSearchLabel'\n                                                ) | fdTranslate\n                                            \"\n                                            (click)=\"toggleAdvancedSearch()\"\n                                        ></button>\n                                    }\n                                    <button\n                                        fd-toolbar-item\n                                        type=\"submit\"\n                                        fd-button\n                                        fdType=\"emphasized\"\n                                        [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                        (click)=\"filter()\"\n                                    ></button>\n                                </fd-toolbar>\n                            </div>\n                        }\n                    </div>\n                </fd-layout-grid>\n            }\n            @if (isOpenAdvanced && _hasAdvanced) {\n                <div [id]=\"'advanced-search-content-' + id\" class=\"fdp-value-help-dialog__advanced-filters\">\n                    <fd-busy-indicator [loading]=\"loadingState && _firstLoadingDone\" [block]=\"true\">\n                        @if (_firstLoadingDone) {\n                            <fd-layout-grid\n                                [class.fdp-value-help-dialog__with-toggle-all]=\"filters.length > maxShownInitialFilters\"\n                            >\n                                <div fdLayoutGridRow>\n                                    @for (\n                                        filter of _displayedFilters | slice: 0 : shownFilterCount + 1;\n                                        track _trackByFilterFn($index, filter)\n                                    ) {\n                                        @if (filter.advanced) {\n                                            <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"6\" [colXl]=\"3\">\n                                                <label\n                                                    class=\"fd-form-group__header\"\n                                                    fd-form-label\n                                                    [for]=\"'input' + filter.key\"\n                                                    >{{ filter.label }}:</label\n                                                >\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                                            </div>\n                                        }\n                                    }\n                                    @if (filters.length > maxShownInitialFilters) {\n                                        <div\n                                            colGrow\n                                            [fdLayoutGridCol]=\"12\"\n                                            [colMd]=\"12\"\n                                            [colLg]=\"6\"\n                                            [colXl]=\"3\"\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                                    }\n                                </div>\n                            </fd-layout-grid>\n                        } @else {\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                                <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                                <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                        }\n                    </fd-busy-indicator>\n                </div>\n            }\n        </form>\n    }\n</ng-template>\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]=\"'platformVHD.selectTabTitle' | fdTranslate\"\n            [mobile]=\"mobile\"\n            [selection]=\"searchSelection\"\n            [uniqueKey]=\"uniqueKey\"\n            [pageSize]=\"searchTablePageSize\"\n            [defaultMobileHeaders]=\"searchTableMobileHeaders\"\n            [filters]=\"_displayedFilters\"\n            (select)=\"onSelect($event)\"\n        ></fdp-select-tab>\n    </fd-busy-indicator>\n</ng-template>\n<ng-template #defineConditionsContent>\n    <div fd-scrollbar>\n        <fdp-define-tab\n            [strategyLabels]=\"defineStrategyLabels\"\n            [conditions]=\"conditionItems\"\n            [uid]=\"id\"\n            [tabTitle]=\"'platformVHD.defineTabTitle' | fdTranslate\"\n            [mobile]=\"mobile\"\n            (conditionChange)=\"onConditionChange($event)\"\n        ></fdp-define-tab>\n    </div>\n</ng-template>\n<ng-template #dialogTitleText>\n    <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n</ng-template>\n<ng-template #tabLink let-title=\"title\" let-type=\"type\">\n    @if (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    }\n    @if (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    }\n</ng-template>\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<ng-template #desktopDialogTitle>\n    <ng-template [ngTemplateOutlet]=\"dialogTitleText\"></ng-template>\n    <ng-template [ngTemplateOutlet]=\"desktopTabs\"></ng-template>\n</ng-template>\n<ng-template #mobileDialogTitle>\n    <div class=\"fdp-value-help-dialog__mobile-title\">\n        @if (hasSelectedTab) {\n            <ng-template [ngTemplateOutlet]=\"selectedTabHeader\"></ng-template>\n        } @else {\n            <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n        }\n    </div>\n    <ng-template [ngTemplateOutlet]=\"mobileTabs\"></ng-template>\n</ng-template>\n<ng-template #desktopTabs>\n    @if (showSelectionTab && showDefineTab) {\n        <nav fd-tab-nav class=\"fdp-value-help-dialog__tabs\">\n            @if (showSelectionTab) {\n                <div fd-tab-item (click)=\"switchTab(_tabTypes.selectFromList)\">\n                    <a\n                        fd-tab-link\n                        [active]=\"selectedTab === _tabTypes.selectFromList\"\n                        [tabindex]=\"selectedTab === _tabTypes.selectFromList ? '0' : '-1'\"\n                        ><span fd-tab-tag>{{ 'platformVHD.selectTabTitle' | fdTranslate }}</span></a\n                    >\n                </div>\n            }\n            @if (showDefineTab) {\n                <div fd-tab-item (click)=\"switchTab(_tabTypes.defineConditions)\">\n                    <a\n                        fd-tab-link\n                        [active]=\"selectedTab === _tabTypes.defineConditions\"\n                        [tabindex]=\"selectedTab === _tabTypes.defineConditions ? '0' : '-1'\"\n                        ><span fd-tab-tag>{{ 'platformVHD.defineTabTitle' | fdTranslate }}</span></a\n                    >\n                </div>\n            }\n        </nav>\n    }\n</ng-template>\n<ng-template #mobileTabs>\n    @if (!hasSelectedTab && showSelectionTab && showDefineTab) {\n        <div>\n            @if (showSelectionTab) {\n                <div fd-bar [inPage]=\"true\">\n                    <div fd-bar-left>\n                        <fd-bar-element>\n                            {{ '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: { title: 'platformVHD.selectTabTitle' | fdTranslate }\n                                \"\n                            ></fd-button-bar>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            }\n            @if (showDefineTab) {\n                <div fd-bar [inPage]=\"true\">\n                    <div fd-bar-left>\n                        <fd-bar-element>\n                            {{ '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: { title: 'platformVHD.defineTabTitle' | fdTranslate }\n                                \"\n                                (click)=\"switchTab(_tabTypes.defineConditions)\"\n                            >\n                            </fd-button-bar>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n<ng-template #selectedTabHeader>\n    @switch (selectedTab) {\n        @case (_tabTypes.selectFromList) {\n            <ng-template\n                [ngTemplateOutlet]=\"tabLink\"\n                [ngTemplateOutletContext]=\"{\n                    title: 'platformVHD.selectTabTitle' | fdTranslate,\n                    type: selectedTab\n                }\"\n            ></ng-template>\n        }\n        @case (_tabTypes.advancedSearch) {\n            <ng-template [ngTemplateOutlet]=\"advancedHeader\"></ng-template>\n        }\n        @case (_tabTypes.defineConditions) {\n            <ng-template\n                [ngTemplateOutlet]=\"tabLink\"\n                [ngTemplateOutletContext]=\"{\n                    title: 'platformVHD.defineTabTitle' | fdTranslate,\n                    type: selectedTab\n                }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n<ng-template #conditionValue let-item=\"item\">\n    @if (item.strategy !== 'empty' && item.strategy !== 'not_empty') {\n        <span>\n            {{ item | displayFnPipe: conditionDisplayFn : _displayedFilters }}\n        </span>\n    } @else {\n        @if (item.strategy === 'not_empty') {\n            !(<ng-template [ngTemplateOutlet]=\"emptyConditionText\"></ng-template>)\n        } @else {\n            &lt;{{ 'platformVHD.selectMobileConditionEmpty' | fdTranslate }}&gt;\n        }\n    }\n</ng-template>\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: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: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}.fdp-value-help-dialog__row{padding:0 2rem 1rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__selection-row{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 var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;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: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "directive", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: TokenizerInputDirective, selector: "[fdTokenizerInput], [fd-tokenizer-input]", inputs: ["class"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "directive", type: LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: 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", "uniqueKey", "pageSize", "defaultMobileHeaders", "displayedData"], outputs: ["select"] }, { kind: "component", type: DefineTabComponent, selector: "fdp-define-tab", inputs: ["titleId", "selectedId", "conditions", "strategyLabels"], outputs: ["includeChange", "excludeChange", "conditionChange"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "component", type: TabNavComponent, selector: "[fd-tab-nav]", inputs: ["class", "mode", "size"] }, { kind: "directive", type: TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { kind: "directive", type: TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown", "focused"] }, { kind: "directive", type: TabTagDirective, selector: "[fdTabTag], [fd-tab-tag]" }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: PlatformValueHelpDialogComponent, isStandalone: true, 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", searchSelection: "searchSelection", searchTablePageSize: "searchTablePageSize", searchTableMobileHeaders: "searchTableMobileHeaders", maxShownInitialFilters: "maxShownInitialFilters", loading: "loading", 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 [fdDialogTemplate] 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-template [ngTemplateOutlet]=\"mobile ? mobileDialogTitle : desktopDialogTitle\"></ng-template>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body [dir]=\"_dir\">\n            @if (!mobile) {\n                <ng-template [ngTemplateOutlet]=\"advancedSearchContent\"></ng-template>\n            }\n            <div fd-scrollbar class=\"fdp-value-help-dialog__content-holder\">\n                @if (mobile) {\n                    <ng-template [ngTemplateOutlet]=\"advancedSearchContent\"></ng-template>\n                }\n                @if (selectedTab === _tabTypes.selectFromList) {\n                    <ng-template [ngTemplateOutlet]=\"selectionContent\"></ng-template>\n                }\n                @if (selectedTab === _tabTypes.defineConditions) {\n                    <ng-template [ngTemplateOutlet]=\"defineConditionsContent\"></ng-template>\n                }\n            </div>\n        </fd-dialog-body>\n        <fd-dialog-footer [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"footer\">\n                @if (!isMobileAdvancedSearchActive) {\n                    <div\n                        class=\"fdp-value-help-dialog__row fdp-value-help-dialog__selection-row\"\n                        [attr.aria-label]=\"'platformVHD.selectionBarLabel' | fdTranslate\"\n                    >\n                        <h5 fd-title class=\"selected-and-condition-title\" [id]=\"id + '-selected-item'\">\n                            @if (hasSelectedAndConditions) {\n                                {{ 'platformVHD.selectedAndConditionLabel' | fdTranslate }}\n                                ({{ selectedItems.length + validConditions.length }})\n                            } @else {\n                                {{ 'platformVHD.selectedEmptyLabel' | fdTranslate }}\n                            }\n                        </h5>\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                                        *ngFor=\"\n                                            let item of selectedItems;\n                                            trackBy: _trackBySelectedFn;\n                                            index as selectedIndex\n                                        \"\n                                        fd-toolbar-item\n                                        fdOverflowPriority=\"high\"\n                                        class=\"fdp-value-help-dialog__selection-token\"\n                                        (onCloseClick)=\"removeSelected(selectedIndex)\"\n                                        >{{\n                                            !!tokenizerFn ? (item | displayFnPipe: tokenizerFn) : item[tokenViewField]\n                                        }}\n                                    </fd-token>\n                                    <fd-token\n                                        *ngFor=\"\n                                            let item of validConditions;\n                                            trackBy: _trackByConditionFn;\n                                            index as conditionIndex\n                                        \"\n                                        fd-toolbar-item\n                                        fdOverflowPriority=\"high\"\n                                        class=\"fdp-value-help-dialog__selection-token\"\n                                        (onCloseClick)=\"removeCondition(conditionIndex)\"\n                                    >\n                                        <ng-template\n                                            [ngTemplateOutlet]=\"conditionValue\"\n                                            [ngTemplateOutletContext]=\"{ item: item }\"\n                                        ></ng-template>\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                }\n                <div class=\"fdp-value-help-dialog__actions-row\">\n                    @if (mobile && isOpenAdvanced) {\n                        <button\n                            fd-button\n                            data-go-advanced\n                            [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                            fdType=\"emphasized\"\n                            (click)=\"searchAdvanced()\"\n                        ></button>\n                    }\n                    @if (selectedTab !== _tabTypes.advancedSearch) {\n                        <button\n                            fd-button\n                            data-succes\n                            [label]=\"'platformVHD.successButtonLabel' | fdTranslate\"\n                            fdType=\"emphasized\"\n                            (click)=\"success()\"\n                        ></button>\n                    }\n                    <button\n                        fd-button\n                        data-dismiss-dialog\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<ng-template #advancedSearchContent>\n    @if (isSelectionTab) {\n        <form class=\"fdp-value-help-dialog__row fdp-value-help-dialog__advanced-search\" [id]=\"'advanced-search-' + id\">\n            @if (!mobile || (mobile && !isOpenAdvanced)) {\n                <fd-layout-grid>\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                        @if (_hasAdvanced) {\n                            <div\n                                [fdLayoutGridCol]=\"12\"\n                                [colMd]=\"12\"\n                                [colLg]=\"mobile ? 12 : 6\"\n                                [colXl]=\"mobile ? 12 : 6\"\n                                class=\"fdp-value-help-dialog__advanced-actions\"\n                            >\n                                <fd-toolbar [clearBorder]=\"true\">\n                                    <fd-toolbar-spacer></fd-toolbar-spacer>\n                                    @if (_hasAdvanced) {\n                                        <button\n                                            fd-toolbar-item\n                                            fd-button\n                                            fdType=\"transparent\"\n                                            [label]=\"\n                                                (mobile\n                                                    ? 'platformVHD.searchAdvancedSearchLabel'\n                                                    : isOpenAdvanced\n                                                      ? 'platformVHD.searchHideAdvancedSearchLabel'\n                                                      : 'platformVHD.searchShowAdvancedSearchLabel'\n                                                ) | fdTranslate\n                                            \"\n                                            (click)=\"toggleAdvancedSearch()\"\n                                        ></button>\n                                    }\n                                    <button\n                                        fd-toolbar-item\n                                        type=\"submit\"\n                                        fd-button\n                                        fdType=\"emphasized\"\n                                        [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                        (click)=\"filter()\"\n                                    ></button>\n                                </fd-toolbar>\n                            </div>\n                        }\n                    </div>\n                </fd-layout-grid>\n            }\n            @if (isOpenAdvanced && _hasAdvanced) {\n                <div [id]=\"'advanced-search-content-' + id\" class=\"fdp-value-help-dialog__advanced-filters\">\n                    <fd-busy-indicator [loading]=\"loadingState && _firstLoadingDone\" [block]=\"true\">\n                        @if (_firstLoadingDone) {\n                            <fd-layout-grid\n                                [class.fdp-value-help-dialog__with-toggle-all]=\"filters.length > maxShownInitialFilters\"\n                            >\n                                <div fdLayoutGridRow>\n                                    @for (\n                                        filter of _displayedFilters | slice: 0 : shownFilterCount + 1;\n                                        track _trackByFilterFn($index, filter)\n                                    ) {\n                                        @if (filter.advanced) {\n                                            <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"6\" [colXl]=\"3\">\n                                                <label\n                                                    class=\"fd-form-group__header\"\n                                                    fd-form-label\n                                                    [for]=\"'input' + filter.key\"\n                                                    >{{ filter.label }}:</label\n                                                >\n                                                @if (filter.filterDef) {\n                                                    <ng-template\n                                                        [ngTemplateOutlet]=\"filter.filterDef.templateRef\"\n                                                        [ngTemplateOutletContext]=\"{ $implicit: filter }\"\n                                                    ></ng-template>\n                                                } @else {\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                                                }\n                                            </div>\n                                        }\n                                    }\n                                    @if (filters.length > maxShownInitialFilters) {\n                                        <div\n                                            colGrow\n                                            [fdLayoutGridCol]=\"12\"\n                                            [colMd]=\"12\"\n                                            [colLg]=\"6\"\n                                            [colXl]=\"3\"\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                                    }\n                                </div>\n                            </fd-layout-grid>\n                        } @else {\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                                <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                                <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                        }\n                    </fd-busy-indicator>\n                </div>\n            }\n        </form>\n    }\n</ng-template>\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]=\"'platformVHD.selectTabTitle' | fdTranslate\"\n            [mobile]=\"mobile\"\n            [selection]=\"searchSelection\"\n            [uniqueKey]=\"uniqueKey\"\n            [pageSize]=\"searchTablePageSize\"\n            [defaultMobileHeaders]=\"searchTableMobileHeaders\"\n            [filters]=\"_displayedFilters\"\n            (select)=\"onSelect($event)\"\n        ></fdp-select-tab>\n    </fd-busy-indicator>\n</ng-template>\n<ng-template #defineConditionsContent>\n    <div fd-scrollbar>\n        <fdp-define-tab\n            [strategyLabels]=\"defineStrategyLabels\"\n            [conditions]=\"conditionItems\"\n            [uid]=\"id\"\n            [tabTitle]=\"'platformVHD.defineTabTitle' | fdTranslate\"\n            [mobile]=\"mobile\"\n            (conditionChange)=\"onConditionChange($event)\"\n        ></fdp-define-tab>\n    </div>\n</ng-template>\n<ng-template #dialogTitleText>\n    <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n</ng-template>\n<ng-template #tabLink let-title=\"title\" let-type=\"type\">\n    @if (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    }\n    @if (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    }\n</ng-template>\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<ng-template #desktopDialogTitle>\n    <ng-template [ngTemplateOutlet]=\"dialogTitleText\"></ng-template>\n    <ng-template [ngTemplateOutlet]=\"desktopTabs\"></ng-template>\n</ng-template>\n<ng-template #mobileDialogTitle>\n    <div class=\"fdp-value-help-dialog__mobile-title\">\n        @if (hasSelectedTab) {\n            <ng-template [ngTemplateOutlet]=\"selectedTabHeader\"></ng-template>\n        } @else {\n            <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n        }\n    </div>\n    <ng-template [ngTemplateOutlet]=\"mobileTabs\"></ng-template>\n</ng-template>\n<ng-template #desktopTabs>\n    @if (showSelectionTab && showDefineTab) {\n        <nav fd-tab-nav class=\"fdp-value-help-dialog__tabs\">\n            @if (showSelectionTab) {\n                <div fd-tab-item (click)=\"switchTab(_tabTypes.selectFromList)\">\n                    <a\n                        fd-tab-link\n                        [active]=\"selectedTab === _tabTypes.selectFromList\"\n                        [tabindex]=\"selectedTab === _tabTypes.selectFromList ? '0' : '-1'\"\n                        ><span fd-tab-tag>{{ 'platformVHD.selectTabTitle' | fdTranslate }}</span></a\n                    >\n                </div>\n            }\n            @if (showDefineTab) {\n                <div fd-tab-item (click)=\"switchTab(_tabTypes.defineConditions)\">\n                    <a\n                        fd-tab-link\n                        [active]=\"selectedTab === _tabTypes.defineConditions\"\n                        [tabindex]=\"selectedTab === _tabTypes.defineConditions ? '0' : '-1'\"\n                        ><span fd-tab-tag>{{ 'platformVHD.defineTabTitle' | fdTranslate }}</span></a\n                    >\n                </div>\n            }\n        </nav>\n    }\n</ng-template>\n<ng-template #mobileTabs>\n    @if (!hasSelectedTab && showSelectionTab && showDefineTab) {\n        <div>\n            @if (showSelectionTab) {\n                <div fd-bar [inPage]=\"true\">\n                    <div fd-bar-left>\n                        <fd-bar-element>\n                            {{ '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: { title: 'platformVHD.selectTabTitle' | fdTranslate }\n                                \"\n                            ></fd-button-bar>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            }\n            @if (showDefineTab) {\n                <div fd-bar [inPage]=\"true\">\n                    <div fd-bar-left>\n                        <fd-bar-element>\n                            {{ '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: { title: 'platformVHD.defineTabTitle' | fdTranslate }\n                                \"\n                                (click)=\"switchTab(_tabTypes.defineConditions)\"\n                            >\n                            </fd-button-bar>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n<ng-template #selectedTabHeader>\n    @switch (selectedTab) {\n        @case (_tabTypes.selectFromList) {\n            <ng-template\n                [ngTemplateOutlet]=\"tabLink\"\n                [ngTemplateOutletContext]=\"{\n                    title: 'platformVHD.selectTabTitle' | fdTranslate,\n                    type: selectedTab\n                }\"\n            ></ng-template>\n        }\n        @case (_tabTypes.advancedSearch) {\n            <ng-template [ngTemplateOutlet]=\"advancedHeader\"></ng-template>\n        }\n        @case (_tabTypes.defineConditions) {\n            <ng-template\n                [ngTemplateOutlet]=\"tabLink\"\n                [ngTemplateOutletContext]=\"{\n                    title: 'platformVHD.defineTabTitle' | fdTranslate,\n                    type: selectedTab\n                }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n<ng-template #conditionValue let-item=\"item\">\n    @if (item.strategy !== 'empty' && item.strategy !== 'not_empty') {\n        <span>\n            {{ item | displayFnPipe: conditionDisplayFn : _displayedFilters }}\n        </span>\n    } @else {\n        @if (item.strategy === 'not_empty') {\n            !(<ng-template [ngTemplateOutlet]=\"emptyConditionText\"></ng-template>)\n        } @else {\n            &lt;{{ 'platformVHD.selectMobileConditionEmpty' | fdTranslate }}&gt;\n        }\n    }\n</ng-template>\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: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: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}.fdp-value-help-dialog__row{padding:0 2rem 1rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__selection-row{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 var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;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: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "directive", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: TokenizerInputDirective, selector: "[fdTokenizerInput], [fd-tokenizer-input]", inputs: ["class"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "directive", type: LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "component", type: SearchFieldComponent, selector: "fdp-search-field", inputs: ["categoryMode", "appearance", "placeholder", "mobile", "mobileConfig", "disableRefresh", "disableSearch", "suggestions", "dataSource", "inputText", "categories", "currentCategory", "categoryLabel", "hideCategoryLabel", "isLoading", "ariaLabel", "ariaLabelledby", "forceSearchButton", "disableSuggestionsFoundAnnouncer"], outputs: ["inputChange", "searchSubmit", "cancelSearch", "isOpenChange"] }, { kind: "component", type: ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: 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", "uniqueKey", "pageSize", "defaultMobileHeaders", "displayedData"], outputs: ["select"] }, { kind: "component", type: DefineTabComponent, selector: "fdp-define-tab", inputs: ["titleId", "selectedId", "conditions", "strategyLabels"], outputs: ["includeChange", "excludeChange", "conditionChange"] }, { kind: "directive", type: ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "component", type: TabNavComponent, selector: "[fd-tab-nav]", inputs: ["class", "mode", "size"] }, { kind: "directive", type: TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { kind: "directive", type: TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown", "focused"] }, { kind: "directive", type: TabTagDirective, selector: "[fdTabTag], [fd-tab-tag]" }, { kind: "component", type: BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformValueHelpDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-value-help-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'fdp-value-help-dialog', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: VhdComponent,
+                            useExisting: PlatformValueHelpDialogComponent
+                        }
+                    ], standalone: true, imports: [
                         DialogComponent,
                         DialogHeaderComponent,
                         TemplateDirective,
@@ -1299,7 +1372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                         FdTranslatePipe,
                         DisplayFnPipe,
                         NgForOf
-                    ], template: "<ng-template [fdDialogTemplate] 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-template [ngTemplateOutlet]=\"mobile ? mobileDialogTitle : desktopDialogTitle\"></ng-template>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body [dir]=\"_dir\">\n            @if (!mobile) {\n                <ng-template [ngTemplateOutlet]=\"advancedSearchContent\"></ng-template>\n            }\n            <div fd-scrollbar class=\"fdp-value-help-dialog__content-holder\">\n                @if (mobile) {\n                    <ng-template [ngTemplateOutlet]=\"advancedSearchContent\"></ng-template>\n                }\n                @if (selectedTab === _tabTypes.selectFromList) {\n                    <ng-template [ngTemplateOutlet]=\"selectionContent\"></ng-template>\n                }\n                @if (selectedTab === _tabTypes.defineConditions) {\n                    <ng-template [ngTemplateOutlet]=\"defineConditionsContent\"></ng-template>\n                }\n            </div>\n        </fd-dialog-body>\n        <fd-dialog-footer [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"footer\">\n                @if (!isMobileAdvancedSearchActive) {\n                    <div\n                        class=\"fdp-value-help-dialog__row fdp-value-help-dialog__selection-row\"\n                        [attr.aria-label]=\"'platformVHD.selectionBarLabel' | fdTranslate\"\n                    >\n                        <h5 fd-title class=\"selected-and-condition-title\" [id]=\"id + '-selected-item'\">\n                            @if (hasSelectedAndConditions) {\n                                {{ 'platformVHD.selectedAndConditionLabel' | fdTranslate }}\n                                ({{ selectedItems.length + validConditions.length }})\n                            } @else {\n                                {{ 'platformVHD.selectedEmptyLabel' | fdTranslate }}\n                            }\n                        </h5>\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                                        *ngFor=\"\n                                            let item of selectedItems;\n                                            trackBy: _trackBySelectedFn;\n                                            index as selectedIndex\n                                        \"\n                                        fd-toolbar-item\n                                        fdOverflowPriority=\"high\"\n                                        class=\"fdp-value-help-dialog__selection-token\"\n                                        (onCloseClick)=\"removeSelected(selectedIndex)\"\n                                        >{{\n                                            !!tokenizerFn ? (item | displayFnPipe: tokenizerFn) : item[tokenViewField]\n                                        }}\n                                    </fd-token>\n                                    <fd-token\n                                        *ngFor=\"\n                                            let item of validConditions;\n                                            trackBy: _trackByConditionFn;\n                                            index as conditionIndex\n                                        \"\n                                        fd-toolbar-item\n                                        fdOverflowPriority=\"high\"\n                                        class=\"fdp-value-help-dialog__selection-token\"\n                                        (onCloseClick)=\"removeCondition(conditionIndex)\"\n                                    >\n                                        <ng-template\n                                            [ngTemplateOutlet]=\"conditionValue\"\n                                            [ngTemplateOutletContext]=\"{ item: item }\"\n                                        ></ng-template>\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                }\n                <div class=\"fdp-value-help-dialog__actions-row\">\n                    @if (mobile && isOpenAdvanced) {\n                        <button\n                            fd-button\n                            data-go-advanced\n                            [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                            fdType=\"emphasized\"\n                            (click)=\"searchAdvanced()\"\n                        ></button>\n                    }\n                    @if (selectedTab !== _tabTypes.advancedSearch) {\n                        <button\n                            fd-button\n                            data-succes\n                            [label]=\"'platformVHD.successButtonLabel' | fdTranslate\"\n                            fdType=\"emphasized\"\n                            (click)=\"success()\"\n                        ></button>\n                    }\n                    <button\n                        fd-button\n                        data-dismiss-dialog\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<ng-template #advancedSearchContent>\n    @if (isSelectionTab) {\n        <form class=\"fdp-value-help-dialog__row fdp-value-help-dialog__advanced-search\" [id]=\"'advanced-search-' + id\">\n            @if (!mobile || (mobile && !isOpenAdvanced)) {\n                <fd-layout-grid>\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                        @if (_hasAdvanced) {\n                            <div\n                                [fdLayoutGridCol]=\"12\"\n                                [colMd]=\"12\"\n                                [colLg]=\"mobile ? 12 : 6\"\n                                [colXl]=\"mobile ? 12 : 6\"\n                                class=\"fdp-value-help-dialog__advanced-actions\"\n                            >\n                                <fd-toolbar [clearBorder]=\"true\">\n                                    <fd-toolbar-spacer></fd-toolbar-spacer>\n                                    @if (_hasAdvanced) {\n                                        <button\n                                            fd-toolbar-item\n                                            fd-button\n                                            fdType=\"transparent\"\n                                            [label]=\"\n                                                (mobile\n                                                    ? 'platformVHD.searchAdvancedSearchLabel'\n                                                    : isOpenAdvanced\n                                                      ? 'platformVHD.searchHideAdvancedSearchLabel'\n                                                      : 'platformVHD.searchShowAdvancedSearchLabel'\n                                                ) | fdTranslate\n                                            \"\n                                            (click)=\"toggleAdvancedSearch()\"\n                                        ></button>\n                                    }\n                                    <button\n                                        fd-toolbar-item\n                                        type=\"submit\"\n                                        fd-button\n                                        fdType=\"emphasized\"\n                                        [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                        (click)=\"filter()\"\n                                    ></button>\n                                </fd-toolbar>\n                            </div>\n                        }\n                    </div>\n                </fd-layout-grid>\n            }\n            @if (isOpenAdvanced && _hasAdvanced) {\n                <div [id]=\"'advanced-search-content-' + id\" class=\"fdp-value-help-dialog__advanced-filters\">\n                    <fd-busy-indicator [loading]=\"loadingState && _firstLoadingDone\" [block]=\"true\">\n                        @if (_firstLoadingDone) {\n                            <fd-layout-grid\n                                [class.fdp-value-help-dialog__with-toggle-all]=\"filters.length > maxShownInitialFilters\"\n                            >\n                                <div fdLayoutGridRow>\n                                    @for (\n                                        filter of _displayedFilters | slice: 0 : shownFilterCount + 1;\n                                        track _trackByFilterFn($index, filter)\n                                    ) {\n                                        @if (filter.advanced) {\n                                            <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"6\" [colXl]=\"3\">\n                                                <label\n                                                    class=\"fd-form-group__header\"\n                                                    fd-form-label\n                                                    [for]=\"'input' + filter.key\"\n                                                    >{{ filter.label }}:</label\n                                                >\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                                            </div>\n                                        }\n                                    }\n                                    @if (filters.length > maxShownInitialFilters) {\n                                        <div\n                                            colGrow\n                                            [fdLayoutGridCol]=\"12\"\n                                            [colMd]=\"12\"\n                                            [colLg]=\"6\"\n                                            [colXl]=\"3\"\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                                    }\n                                </div>\n                            </fd-layout-grid>\n                        } @else {\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                                <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                                <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                        }\n                    </fd-busy-indicator>\n                </div>\n            }\n        </form>\n    }\n</ng-template>\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]=\"'platformVHD.selectTabTitle' | fdTranslate\"\n            [mobile]=\"mobile\"\n            [selection]=\"searchSelection\"\n            [uniqueKey]=\"uniqueKey\"\n            [pageSize]=\"searchTablePageSize\"\n            [defaultMobileHeaders]=\"searchTableMobileHeaders\"\n            [filters]=\"_displayedFilters\"\n            (select)=\"onSelect($event)\"\n        ></fdp-select-tab>\n    </fd-busy-indicator>\n</ng-template>\n<ng-template #defineConditionsContent>\n    <div fd-scrollbar>\n        <fdp-define-tab\n            [strategyLabels]=\"defineStrategyLabels\"\n            [conditions]=\"conditionItems\"\n            [uid]=\"id\"\n            [tabTitle]=\"'platformVHD.defineTabTitle' | fdTranslate\"\n            [mobile]=\"mobile\"\n            (conditionChange)=\"onConditionChange($event)\"\n        ></fdp-define-tab>\n    </div>\n</ng-template>\n<ng-template #dialogTitleText>\n    <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n</ng-template>\n<ng-template #tabLink let-title=\"title\" let-type=\"type\">\n    @if (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    }\n    @if (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    }\n</ng-template>\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<ng-template #desktopDialogTitle>\n    <ng-template [ngTemplateOutlet]=\"dialogTitleText\"></ng-template>\n    <ng-template [ngTemplateOutlet]=\"desktopTabs\"></ng-template>\n</ng-template>\n<ng-template #mobileDialogTitle>\n    <div class=\"fdp-value-help-dialog__mobile-title\">\n        @if (hasSelectedTab) {\n            <ng-template [ngTemplateOutlet]=\"selectedTabHeader\"></ng-template>\n        } @else {\n            <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n        }\n    </div>\n    <ng-template [ngTemplateOutlet]=\"mobileTabs\"></ng-template>\n</ng-template>\n<ng-template #desktopTabs>\n    @if (showSelectionTab && showDefineTab) {\n        <nav fd-tab-nav class=\"fdp-value-help-dialog__tabs\">\n            @if (showSelectionTab) {\n                <div fd-tab-item (click)=\"switchTab(_tabTypes.selectFromList)\">\n                    <a\n                        fd-tab-link\n                        [active]=\"selectedTab === _tabTypes.selectFromList\"\n                        [tabindex]=\"selectedTab === _tabTypes.selectFromList ? '0' : '-1'\"\n                        ><span fd-tab-tag>{{ 'platformVHD.selectTabTitle' | fdTranslate }}</span></a\n                    >\n                </div>\n            }\n            @if (showDefineTab) {\n                <div fd-tab-item (click)=\"switchTab(_tabTypes.defineConditions)\">\n                    <a\n                        fd-tab-link\n                        [active]=\"selectedTab === _tabTypes.defineConditions\"\n                        [tabindex]=\"selectedTab === _tabTypes.defineConditions ? '0' : '-1'\"\n                        ><span fd-tab-tag>{{ 'platformVHD.defineTabTitle' | fdTranslate }}</span></a\n                    >\n                </div>\n            }\n        </nav>\n    }\n</ng-template>\n<ng-template #mobileTabs>\n    @if (!hasSelectedTab && showSelectionTab && showDefineTab) {\n        <div>\n            @if (showSelectionTab) {\n                <div fd-bar [inPage]=\"true\">\n                    <div fd-bar-left>\n                        <fd-bar-element>\n                            {{ '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: { title: 'platformVHD.selectTabTitle' | fdTranslate }\n                                \"\n                            ></fd-button-bar>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            }\n            @if (showDefineTab) {\n                <div fd-bar [inPage]=\"true\">\n                    <div fd-bar-left>\n                        <fd-bar-element>\n                            {{ '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: { title: 'platformVHD.defineTabTitle' | fdTranslate }\n                                \"\n                                (click)=\"switchTab(_tabTypes.defineConditions)\"\n                            >\n                            </fd-button-bar>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n<ng-template #selectedTabHeader>\n    @switch (selectedTab) {\n        @case (_tabTypes.selectFromList) {\n            <ng-template\n                [ngTemplateOutlet]=\"tabLink\"\n                [ngTemplateOutletContext]=\"{\n                    title: 'platformVHD.selectTabTitle' | fdTranslate,\n                    type: selectedTab\n                }\"\n            ></ng-template>\n        }\n        @case (_tabTypes.advancedSearch) {\n            <ng-template [ngTemplateOutlet]=\"advancedHeader\"></ng-template>\n        }\n        @case (_tabTypes.defineConditions) {\n            <ng-template\n                [ngTemplateOutlet]=\"tabLink\"\n                [ngTemplateOutletContext]=\"{\n                    title: 'platformVHD.defineTabTitle' | fdTranslate,\n                    type: selectedTab\n                }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n<ng-template #conditionValue let-item=\"item\">\n    @if (item.strategy !== 'empty' && item.strategy !== 'not_empty') {\n        <span>\n            {{ item | displayFnPipe: conditionDisplayFn : _displayedFilters }}\n        </span>\n    } @else {\n        @if (item.strategy === 'not_empty') {\n            !(<ng-template [ngTemplateOutlet]=\"emptyConditionText\"></ng-template>)\n        } @else {\n            &lt;{{ 'platformVHD.selectMobileConditionEmpty' | fdTranslate }}&gt;\n        }\n    }\n</ng-template>\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: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: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}.fdp-value-help-dialog__row{padding:0 2rem 1rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__selection-row{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 var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;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 [fdDialogTemplate] 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-template [ngTemplateOutlet]=\"mobile ? mobileDialogTitle : desktopDialogTitle\"></ng-template>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body [dir]=\"_dir\">\n            @if (!mobile) {\n                <ng-template [ngTemplateOutlet]=\"advancedSearchContent\"></ng-template>\n            }\n            <div fd-scrollbar class=\"fdp-value-help-dialog__content-holder\">\n                @if (mobile) {\n                    <ng-template [ngTemplateOutlet]=\"advancedSearchContent\"></ng-template>\n                }\n                @if (selectedTab === _tabTypes.selectFromList) {\n                    <ng-template [ngTemplateOutlet]=\"selectionContent\"></ng-template>\n                }\n                @if (selectedTab === _tabTypes.defineConditions) {\n                    <ng-template [ngTemplateOutlet]=\"defineConditionsContent\"></ng-template>\n                }\n            </div>\n        </fd-dialog-body>\n        <fd-dialog-footer [dir]=\"_dir\">\n            <ng-template fdkTemplate=\"footer\">\n                @if (!isMobileAdvancedSearchActive) {\n                    <div\n                        class=\"fdp-value-help-dialog__row fdp-value-help-dialog__selection-row\"\n                        [attr.aria-label]=\"'platformVHD.selectionBarLabel' | fdTranslate\"\n                    >\n                        <h5 fd-title class=\"selected-and-condition-title\" [id]=\"id + '-selected-item'\">\n                            @if (hasSelectedAndConditions) {\n                                {{ 'platformVHD.selectedAndConditionLabel' | fdTranslate }}\n                                ({{ selectedItems.length + validConditions.length }})\n                            } @else {\n                                {{ 'platformVHD.selectedEmptyLabel' | fdTranslate }}\n                            }\n                        </h5>\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                                        *ngFor=\"\n                                            let item of selectedItems;\n                                            trackBy: _trackBySelectedFn;\n                                            index as selectedIndex\n                                        \"\n                                        fd-toolbar-item\n                                        fdOverflowPriority=\"high\"\n                                        class=\"fdp-value-help-dialog__selection-token\"\n                                        (onCloseClick)=\"removeSelected(selectedIndex)\"\n                                        >{{\n                                            !!tokenizerFn ? (item | displayFnPipe: tokenizerFn) : item[tokenViewField]\n                                        }}\n                                    </fd-token>\n                                    <fd-token\n                                        *ngFor=\"\n                                            let item of validConditions;\n                                            trackBy: _trackByConditionFn;\n                                            index as conditionIndex\n                                        \"\n                                        fd-toolbar-item\n                                        fdOverflowPriority=\"high\"\n                                        class=\"fdp-value-help-dialog__selection-token\"\n                                        (onCloseClick)=\"removeCondition(conditionIndex)\"\n                                    >\n                                        <ng-template\n                                            [ngTemplateOutlet]=\"conditionValue\"\n                                            [ngTemplateOutletContext]=\"{ item: item }\"\n                                        ></ng-template>\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                }\n                <div class=\"fdp-value-help-dialog__actions-row\">\n                    @if (mobile && isOpenAdvanced) {\n                        <button\n                            fd-button\n                            data-go-advanced\n                            [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                            fdType=\"emphasized\"\n                            (click)=\"searchAdvanced()\"\n                        ></button>\n                    }\n                    @if (selectedTab !== _tabTypes.advancedSearch) {\n                        <button\n                            fd-button\n                            data-succes\n                            [label]=\"'platformVHD.successButtonLabel' | fdTranslate\"\n                            fdType=\"emphasized\"\n                            (click)=\"success()\"\n                        ></button>\n                    }\n                    <button\n                        fd-button\n                        data-dismiss-dialog\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<ng-template #advancedSearchContent>\n    @if (isSelectionTab) {\n        <form class=\"fdp-value-help-dialog__row fdp-value-help-dialog__advanced-search\" [id]=\"'advanced-search-' + id\">\n            @if (!mobile || (mobile && !isOpenAdvanced)) {\n                <fd-layout-grid>\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                        @if (_hasAdvanced) {\n                            <div\n                                [fdLayoutGridCol]=\"12\"\n                                [colMd]=\"12\"\n                                [colLg]=\"mobile ? 12 : 6\"\n                                [colXl]=\"mobile ? 12 : 6\"\n                                class=\"fdp-value-help-dialog__advanced-actions\"\n                            >\n                                <fd-toolbar [clearBorder]=\"true\">\n                                    <fd-toolbar-spacer></fd-toolbar-spacer>\n                                    @if (_hasAdvanced) {\n                                        <button\n                                            fd-toolbar-item\n                                            fd-button\n                                            fdType=\"transparent\"\n                                            [label]=\"\n                                                (mobile\n                                                    ? 'platformVHD.searchAdvancedSearchLabel'\n                                                    : isOpenAdvanced\n                                                      ? 'platformVHD.searchHideAdvancedSearchLabel'\n                                                      : 'platformVHD.searchShowAdvancedSearchLabel'\n                                                ) | fdTranslate\n                                            \"\n                                            (click)=\"toggleAdvancedSearch()\"\n                                        ></button>\n                                    }\n                                    <button\n                                        fd-toolbar-item\n                                        type=\"submit\"\n                                        fd-button\n                                        fdType=\"emphasized\"\n                                        [label]=\"'platformVHD.searchButtonLabel' | fdTranslate\"\n                                        (click)=\"filter()\"\n                                    ></button>\n                                </fd-toolbar>\n                            </div>\n                        }\n                    </div>\n                </fd-layout-grid>\n            }\n            @if (isOpenAdvanced && _hasAdvanced) {\n                <div [id]=\"'advanced-search-content-' + id\" class=\"fdp-value-help-dialog__advanced-filters\">\n                    <fd-busy-indicator [loading]=\"loadingState && _firstLoadingDone\" [block]=\"true\">\n                        @if (_firstLoadingDone) {\n                            <fd-layout-grid\n                                [class.fdp-value-help-dialog__with-toggle-all]=\"filters.length > maxShownInitialFilters\"\n                            >\n                                <div fdLayoutGridRow>\n                                    @for (\n                                        filter of _displayedFilters | slice: 0 : shownFilterCount + 1;\n                                        track _trackByFilterFn($index, filter)\n                                    ) {\n                                        @if (filter.advanced) {\n                                            <div [fdLayoutGridCol]=\"12\" [colMd]=\"12\" [colLg]=\"6\" [colXl]=\"3\">\n                                                <label\n                                                    class=\"fd-form-group__header\"\n                                                    fd-form-label\n                                                    [for]=\"'input' + filter.key\"\n                                                    >{{ filter.label }}:</label\n                                                >\n                                                @if (filter.filterDef) {\n                                                    <ng-template\n                                                        [ngTemplateOutlet]=\"filter.filterDef.templateRef\"\n                                                        [ngTemplateOutletContext]=\"{ $implicit: filter }\"\n                                                    ></ng-template>\n                                                } @else {\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                                                }\n                                            </div>\n                                        }\n                                    }\n                                    @if (filters.length > maxShownInitialFilters) {\n                                        <div\n                                            colGrow\n                                            [fdLayoutGridCol]=\"12\"\n                                            [colMd]=\"12\"\n                                            [colLg]=\"6\"\n                                            [colXl]=\"3\"\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                                    }\n                                </div>\n                            </fd-layout-grid>\n                        } @else {\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                                <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                                <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                        }\n                    </fd-busy-indicator>\n                </div>\n            }\n        </form>\n    }\n</ng-template>\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]=\"'platformVHD.selectTabTitle' | fdTranslate\"\n            [mobile]=\"mobile\"\n            [selection]=\"searchSelection\"\n            [uniqueKey]=\"uniqueKey\"\n            [pageSize]=\"searchTablePageSize\"\n            [defaultMobileHeaders]=\"searchTableMobileHeaders\"\n            [filters]=\"_displayedFilters\"\n            (select)=\"onSelect($event)\"\n        ></fdp-select-tab>\n    </fd-busy-indicator>\n</ng-template>\n<ng-template #defineConditionsContent>\n    <div fd-scrollbar>\n        <fdp-define-tab\n            [strategyLabels]=\"defineStrategyLabels\"\n            [conditions]=\"conditionItems\"\n            [uid]=\"id\"\n            [tabTitle]=\"'platformVHD.defineTabTitle' | fdTranslate\"\n            [mobile]=\"mobile\"\n            (conditionChange)=\"onConditionChange($event)\"\n        ></fdp-define-tab>\n    </div>\n</ng-template>\n<ng-template #dialogTitleText>\n    <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n</ng-template>\n<ng-template #tabLink let-title=\"title\" let-type=\"type\">\n    @if (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    }\n    @if (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    }\n</ng-template>\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<ng-template #desktopDialogTitle>\n    <ng-template [ngTemplateOutlet]=\"dialogTitleText\"></ng-template>\n    <ng-template [ngTemplateOutlet]=\"desktopTabs\"></ng-template>\n</ng-template>\n<ng-template #mobileDialogTitle>\n    <div class=\"fdp-value-help-dialog__mobile-title\">\n        @if (hasSelectedTab) {\n            <ng-template [ngTemplateOutlet]=\"selectedTabHeader\"></ng-template>\n        } @else {\n            <h5 [attr.id]=\"headerId\" fd-title>{{ dialogTitle }}</h5>\n        }\n    </div>\n    <ng-template [ngTemplateOutlet]=\"mobileTabs\"></ng-template>\n</ng-template>\n<ng-template #desktopTabs>\n    @if (showSelectionTab && showDefineTab) {\n        <nav fd-tab-nav class=\"fdp-value-help-dialog__tabs\">\n            @if (showSelectionTab) {\n                <div fd-tab-item (click)=\"switchTab(_tabTypes.selectFromList)\">\n                    <a\n                        fd-tab-link\n                        [active]=\"selectedTab === _tabTypes.selectFromList\"\n                        [tabindex]=\"selectedTab === _tabTypes.selectFromList ? '0' : '-1'\"\n                        ><span fd-tab-tag>{{ 'platformVHD.selectTabTitle' | fdTranslate }}</span></a\n                    >\n                </div>\n            }\n            @if (showDefineTab) {\n                <div fd-tab-item (click)=\"switchTab(_tabTypes.defineConditions)\">\n                    <a\n                        fd-tab-link\n                        [active]=\"selectedTab === _tabTypes.defineConditions\"\n                        [tabindex]=\"selectedTab === _tabTypes.defineConditions ? '0' : '-1'\"\n                        ><span fd-tab-tag>{{ 'platformVHD.defineTabTitle' | fdTranslate }}</span></a\n                    >\n                </div>\n            }\n        </nav>\n    }\n</ng-template>\n<ng-template #mobileTabs>\n    @if (!hasSelectedTab && showSelectionTab && showDefineTab) {\n        <div>\n            @if (showSelectionTab) {\n                <div fd-bar [inPage]=\"true\">\n                    <div fd-bar-left>\n                        <fd-bar-element>\n                            {{ '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: { title: 'platformVHD.selectTabTitle' | fdTranslate }\n                                \"\n                            ></fd-button-bar>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            }\n            @if (showDefineTab) {\n                <div fd-bar [inPage]=\"true\">\n                    <div fd-bar-left>\n                        <fd-bar-element>\n                            {{ '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: { title: 'platformVHD.defineTabTitle' | fdTranslate }\n                                \"\n                                (click)=\"switchTab(_tabTypes.defineConditions)\"\n                            >\n                            </fd-button-bar>\n                        </fd-bar-element>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n<ng-template #selectedTabHeader>\n    @switch (selectedTab) {\n        @case (_tabTypes.selectFromList) {\n            <ng-template\n                [ngTemplateOutlet]=\"tabLink\"\n                [ngTemplateOutletContext]=\"{\n                    title: 'platformVHD.selectTabTitle' | fdTranslate,\n                    type: selectedTab\n                }\"\n            ></ng-template>\n        }\n        @case (_tabTypes.advancedSearch) {\n            <ng-template [ngTemplateOutlet]=\"advancedHeader\"></ng-template>\n        }\n        @case (_tabTypes.defineConditions) {\n            <ng-template\n                [ngTemplateOutlet]=\"tabLink\"\n                [ngTemplateOutletContext]=\"{\n                    title: 'platformVHD.defineTabTitle' | fdTranslate,\n                    type: selectedTab\n                }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n<ng-template #conditionValue let-item=\"item\">\n    @if (item.strategy !== 'empty' && item.strategy !== 'not_empty') {\n        <span>\n            {{ item | displayFnPipe: conditionDisplayFn : _displayedFilters }}\n        </span>\n    } @else {\n        @if (item.strategy === 'not_empty') {\n            !(<ng-template [ngTemplateOutlet]=\"emptyConditionText\"></ng-template>)\n        } @else {\n            &lt;{{ 'platformVHD.selectMobileConditionEmpty' | fdTranslate }}&gt;\n        }\n    }\n</ng-template>\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: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: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}.fdp-value-help-dialog__row{padding:0 2rem 1rem}.fdp-value-help-dialog__row.fdp-value-help-dialog__selection-row{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 var(--sapContent_ForegroundBorderColor, #89919a);margin-right:.5rem;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: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.DialogService }, { type: i2.RtlService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { id: [{
@@ -1353,6 +1426,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
             }], filters: [{
                 type: ContentChildren,
                 args: [VhdFilterComponent]
+            }], columnDef: [{
+                type: ContentChildren,
+                args: [ValueHelpColumnDefDirective]
             }], dialogContainer: [{
                 type: ViewChild,
                 args: ['container', { read: TemplateRef }]
@@ -1376,5 +1452,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayValueHelpDialogDataSource, BaseEntity, ConditionCountMessageDirective, DefineTabComponent, MAX_CHARACTER_HINT_COUNT, ObservableValueHelpDialogDataSource, PlatformValueHelpDialogComponent, PlatformValueHelpDialogModule, SelectTabComponent, ValueHelpDialogDataSource, VhdBaseTab, VhdDataProvider, VhdDefineExcludeStrategy, VhdDefineIncludeStrategy, VhdDefineType, VhdExcludedEntity, VhdFilterComponent, VhdIncludedEntity, VhdTab, defaultConditionDisplayFn };
+export { ArrayValueHelpDialogDataSource, BaseEntity, ConditionCountMessageDirective, DefineTabComponent, MAX_CHARACTER_HINT_COUNT, ObservableValueHelpDialogDataSource, PlatformValueHelpDialogComponent, PlatformValueHelpDialogModule, SelectTabComponent, ValueHelpColumnDefDirective, ValueHelpDialogDataSource, ValueHelpFilterDefDirective, VhdBaseTab, VhdDataProvider, VhdDefineExcludeStrategy, VhdDefineIncludeStrategy, VhdDefineType, VhdExcludedEntity, VhdFilterComponent, VhdIncludedEntity, VhdTab, defaultConditionDisplayFn };
 //# sourceMappingURL=fundamental-ngx-platform-value-help-dialog.mjs.map