@wizishop/angular-components 14.3.15 → 14.3.16

package/fesm2020/wizishop-angular-components.mjs

@@ -1,7 +1,7 @@
 import * as i1$2 from '@wizishop/ng-wizi-bulma';
 import { NwbAllModule, NwbFilterGroup } from '@wizishop/ng-wizi-bulma';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostListener, Injectable, InjectionToken, ContentChildren, NgModule, Inject, Pipe, Attribute, Optional, ViewChild, ChangeDetectionStrategy, HostBinding, ContentChild } from '@angular/core';
+import { Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostListener, Injectable, InjectionToken, HostBinding, ContentChildren, NgModule, Inject, Pipe, Attribute, Optional, ViewChild, ChangeDetectionStrategy, ContentChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -11,7 +11,7 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { Subject, merge, takeUntil as takeUntil$1, startWith, fromEvent, ReplaySubject, interval, map as map$1 } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged, tap, map, takeWhile, filter } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/overlay';
-import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, A, Z, ZERO, NINE, ENTER, SPACE, hasModifierKey, ESCAPE } from '@angular/cdk/keycodes';
+import { TAB, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, A, Z, ZERO, NINE, ENTER, SPACE, hasModifierKey, ESCAPE } from '@angular/cdk/keycodes';
 import { CdkTableModule } from '@angular/cdk/table';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { TagInputModule } from 'ngx-chips';
@@ -350,6 +350,7 @@ const OPTION_SELECTION_HANDLER = new InjectionToken('OPTION_SELECTION_HANDLER');
 class SelectOptionDirective {
     constructor(contentRef) {
         this.contentRef = contentRef;
+        this.cursor = 'pointer';
         this.disabled = false;
         this.selected = false;
         this.selectedChange = new EventEmitter();
@@ -357,6 +358,9 @@ class SelectOptionDirective {
     onClick() {
         this.onSelectOption();
     }
+    get isOptionSelected() {
+        return this.selected;
+    }
     onSelectOption() {
         if (this.disabled) {
             return;
@@ -382,16 +386,22 @@ class SelectOptionDirective {
     }
 }
 SelectOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-SelectOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.7", type: SelectOptionDirective, selector: "[wacSelectOption]", inputs: { disabled: "disabled", value: "value", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()" } }, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: SelectOptionDirective }], ngImport: i0 });
+SelectOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.7", type: SelectOptionDirective, selector: "[wacOption]", inputs: { disabled: "disabled", value: "value", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()" }, properties: { "class.wac-option-selected": "this.isOptionSelected", "style.cursor": "this.cursor" } }, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: SelectOptionDirective }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectOptionDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[wacSelectOption]',
+                    selector: '[wacOption]',
                     providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: SelectOptionDirective }]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click']
+            }], isOptionSelected: [{
+                type: HostBinding,
+                args: ['class.wac-option-selected']
+            }], cursor: [{
+                type: HostBinding,
+                args: ['style.cursor']
             }], disabled: [{
                 type: Input
             }], value: [{
@@ -502,8 +512,8 @@ class ValueChangeService {
         this.value = selectedOption.value;
     }
     handleSelectedOptionsEvent() {
-        this.optionSelectedChangeListeners().subscribe((selectEvent) => {
-            this.value = selectEvent.value;
+        this.optionSelectedChangeListeners().subscribe((value) => {
+            this.value = value;
         });
     }
     updateSelectPlaceholder() {
@@ -519,11 +529,7 @@ class ValueChangeService {
     }
     optionSelectedChangeListeners() {
         const selectedChange$ = this.optionChildren.map((option) => {
-            return option.selectedChange.pipe(map((value) => {
-                return {
-                    value
-                };
-            }));
+            return option.selectedChange.pipe(map((selected) => option.getValue()));
         });
         return merge(...selectedChange$).pipe(takeUntil(this.resetListeners$));
     }
@@ -551,13 +557,20 @@ class SelectDirective {
         this.valueChangeService = valueChangeService;
         this.valueChange = new EventEmitter();
         this.disabled = false;
+        this.tabIndex = 0;
         this.isDestroyed$ = new Subject();
         // ControlValueAccessor methods
         this.onChange = () => { };
         this.onTouch = () => { };
     }
+    get tabindex() {
+        return this.tabIndex;
+    }
     /** Handles all keydown events on the select. */
     onKeydown(event) {
+        if (event.keyCode === TAB) {
+            return;
+        }
         if (this.disabled) {
             return;
         }
@@ -600,8 +613,8 @@ class SelectDirective {
             keyCode === LEFT_ARROW ||
             keyCode === RIGHT_ARROW;
         const isTyping = (keyCode >= A && keyCode <= Z) || (keyCode >= ZERO && keyCode <= NINE);
-        event.preventDefault(); // prevents the page from scrolling
         if (isArrowKey) {
+            event.preventDefault(); // prevents the page from scrolling
             // select the next option on arrow key down
             if (keyCode === DOWN_ARROW || keyCode === RIGHT_ARROW) {
                 this.valueChangeService.selectNextOption();
@@ -633,7 +646,7 @@ class SelectDirective {
     }
 }
 SelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectDirective, deps: [{ token: ValueChangeService }], target: i0.ɵɵFactoryTarget.Directive });
-SelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.7", type: SelectDirective, selector: "[wacSelect]", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, providers: [
+SelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.7", type: SelectDirective, selector: "[wacSelect]", inputs: { value: "value", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "this.tabindex" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: SelectDirective, multi: true },
         ValueChangeService
     ], queries: [{ propertyName: "optionChildren", predicate: OPTION_SELECTION_HANDLER, descendants: true }], ngImport: i0 });
@@ -646,7 +659,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                         ValueChangeService
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: ValueChangeService }]; }, propDecorators: { onKeydown: [{
+        }], ctorParameters: function () { return [{ type: ValueChangeService }]; }, propDecorators: { tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], optionChildren: [{
@@ -658,6 +674,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Output
             }], disabled: [{
                 type: Input
+            }], tabIndex: [{
+                type: Input
             }] } });
 
 const directives$2 = [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective, SelectDirective];
@@ -4553,6 +4571,7 @@ class SelectTestComponent extends SelectDirective {
         this._openPanel = false;
         this.openPanelChange = new EventEmitter();
         this.enableSearch = false;
+        this.tabIndex = -1;
         this.isDestroyed$ = new Subject();
         this.isKeyBoardAction = false;
         this.skipIfTriggeredByKeyboardAction = () => {
@@ -4613,16 +4632,37 @@ class SelectTestComponent extends SelectDirective {
         this.openPanelChange.emit(this.openPanel);
     }
     onKeydown(event) {
+        const keyCode = event.keyCode;
+        if (event.keyCode === TAB) {
+            // go to the next element with tabindex
+            if (this.openPanel) {
+                this.openPanel = false;
+            }
+            return;
+        }
         if (this.disabled) {
             return;
         }
-        event.preventDefault(); // prevents the page from scrolling
         const actionTriggered = this.openPanel ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);
         if (actionTriggered) {
             return;
         }
         this.isKeyBoardAction = true;
-        super.handleKeyboardAction(event);
+        super.onKeydown(event);
+    }
+    handleKeyboardActionWithSearch(event) {
+        const keyCode = event.keyCode;
+        if (keyCode === DOWN_ARROW) {
+            this.isKeyBoardAction = true;
+            this.valueChangeService.selectNextOption();
+            return true;
+        }
+        if (keyCode === UP_ARROW) {
+            this.isKeyBoardAction = true;
+            this.valueChangeService.selectPreviousOption();
+            return true;
+        }
+        return false;
     }
     /** Handles keyboard events while the select is closed. */
     _handleClosedKeydown(event) {
@@ -4647,10 +4687,14 @@ class SelectTestComponent extends SelectDirective {
             keyCode === UP_ARROW ||
             keyCode === LEFT_ARROW ||
             keyCode === RIGHT_ARROW;
-        const isEscapeKey = keyCode === ESCAPE || keyCode === ENTER || keyCode === SPACE;
+        const isEscapeKey = keyCode === ESCAPE || keyCode === ENTER || keyCode === SPACE || keyCode === TAB;
         if ((isArrowKey && event.altKey) || isEscapeKey) {
             // Close the select on ALT + arrow key to match the native <select>
             this.openPanel = false;
+            if (this.customSearchTrigger && keyCode !== TAB) {
+                // If a escape key is used with the search, the focus on the select is loosed. And we can not interact with the select anymore.
+                this.selectHeader.nativeElement.focus();
+            }
             return true;
         }
         return false;
@@ -4667,13 +4711,13 @@ SelectTestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 SelectTestComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectTestComponent, selector: "wac-select-test", inputs: { required: "required", keepPanelOpen: "keepPanelOpen", openPanel: "openPanel", enableSearch: "enableSearch" }, outputs: { openPanelChange: "openPanelChange" }, host: { properties: { "attr.role": "this.role" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: SelectTestComponent, multi: true },
         ValueChangeService
-    ], queries: [{ propertyName: "customSearchTrigger", first: true, predicate: SelectSearchTriggerComponent, descendants: true }, { propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"!!label\" class=\"wac-select-test__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n\n<div\n  class=\"wac-select-test\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select-test__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div class=\"wac-select-test__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select-test__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select-test__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select-test__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select-test__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: i4$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "customSearchTrigger", first: true, predicate: SelectSearchTriggerComponent, descendants: true }, { propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], viewQueries: [{ propertyName: "selectHeader", first: true, predicate: ["selectHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"!!label\" class=\"wac-select-test__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n\n<div\n  class=\"wac-select-test\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select-test__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div #selectHeader class=\"wac-select-test__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select-test__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select-test__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select-test__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select-test__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: i4$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectTestComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-select-test', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: SelectTestComponent, multi: true },
                         ValueChangeService
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<p *ngIf=\"!!label\" class=\"wac-select-test__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n\n<div\n  class=\"wac-select-test\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select-test__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div class=\"wac-select-test__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select-test__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select-test__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select-test__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select-test__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>" }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<p *ngIf=\"!!label\" class=\"wac-select-test__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n\n<div\n  class=\"wac-select-test\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select-test__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div #selectHeader class=\"wac-select-test__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select-test__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select-test__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select-test__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select-test__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: ValueChangeService }]; }, propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -4683,6 +4727,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }], label: [{
                 type: ContentChild,
                 args: [LabelComponent]
+            }], selectHeader: [{
+                type: ViewChild,
+                args: ['selectHeader']
             }], required: [{
                 type: Input
             }], keepPanelOpen: [{