@wizishop/angular-components 14.3.15 → 14.3.17

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];
@@ -1759,23 +1777,68 @@ class CalendarComponent {
             displayMode: 'inline',
             showHeader: false,
             showFooter: true,
-            showButton: true
         };
         this.position = 'bottom';
-        this.dateSelected = new Date();
-        this.typeDate = 'datetime-local';
+        this._dateSelected = new Date(); // todo only change it when setted to a new value, add dateSelectedChange
+        this.dateSelectedChange = new EventEmitter();
+        this.typeDate = 'datetime-local'; // todo check why it is broken
         this.noMargin = false;
+        this.disabled = false;
         this.selected = new EventEmitter();
         this.changeData = new EventEmitter();
         this.open = false;
         this.startLabel = '';
         this.endLabel = '';
+        // ControlValueAccessor methods
+        this.onChange = () => { };
+        this.onTouch = () => { };
     }
-    changeDate(event) {
-        this.currentDate = new Date(new Date(event.startDate).setHours(0, 0, 0, 0));
-        this.dateSelected = new Date(new Date(new Date(event.startDate).setHours(0, 0, 0, 0)).getTime() +
-            parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
-            parseInt(this.currentMinutes, 0) * 60000);
+    set dateSelected(dateSelected) {
+        if (this.disabled) {
+            return;
+        }
+        this._dateSelected = dateSelected;
+        this.setCalendarDate();
+    }
+    get dateSelected() {
+        return this._dateSelected;
+    }
+    ngOnInit() {
+        this.setCalendarLabel();
+        this.setCalendarDate();
+    }
+    ngOnChanges(changes) {
+        if (changes.label || changes.type) {
+            this.setCalendarLabel();
+        }
+        if (changes.typeDate) {
+            this.typeDateChange();
+        }
+    }
+    writeValue(date) {
+        this.dateSelected = date;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onChangeDate(selectedDates) {
+        if (this.disabled) {
+            return;
+        }
+        this.currentDate = new Date(new Date(selectedDates.startDate).setHours(0, 0, 0, 0));
+        this.setDateSelected();
+    }
+    setDateSelected() {
+        const dateData = this.getDateData();
+        this.dateSelected = typeof this.dateSelected === 'string' ? dateData.toString() : dateData;
+        this.onChange(this.dateSelected);
+        this.dateSelectedChange.emit(this.dateSelected);
         this.triggerChange({
             startDate: this.dateSelected,
             endDate: this.dateSelected
@@ -1793,8 +1856,28 @@ class CalendarComponent {
         else {
             this.open = !this.open;
         }
+        this.onTouch();
     }
-    ngOnInit() {
+    setCalendarDate() {
+        let selectedDate = this.dateSelected;
+        if (typeof selectedDate === 'string') {
+            selectedDate = new Date(selectedDate);
+        }
+        this.currentHours = selectedDate.getHours() < 10 ? '0' + selectedDate.getHours() : selectedDate.getHours();
+        this.currentMinutes = selectedDate.getMinutes() < 10 ? '0' + selectedDate.getMinutes() : selectedDate.getMinutes();
+        this.currentDate = new Date(selectedDate.setHours(0, 0, 0, 0));
+        if (this.typeDate === 'date') {
+            this.currentHours = '00';
+            this.currentMinutes = '00';
+        }
+    }
+    typeDateChange() {
+        if (this.typeDate === 'date') {
+            this.currentHours = '00';
+            this.currentMinutes = '00';
+        }
+    }
+    setCalendarLabel() {
         if (this.type === 'edit' && this.label) {
             const splitLabel = this.label.split('{x}');
             if (splitLabel.length > 1) {
@@ -1805,17 +1888,6 @@ class CalendarComponent {
                 this.startLabel = this.label;
             }
         }
-        this.currentHours =
-            new Date(this.dateSelected).getHours() < 10 ? '0' + new Date(this.dateSelected).getHours() : new Date(this.dateSelected).getHours();
-        this.currentMinutes =
-            new Date(this.dateSelected).getMinutes() < 10
-                ? '0' + new Date(this.dateSelected).getMinutes()
-                : new Date(this.dateSelected).getMinutes();
-        this.currentDate = new Date(this.dateSelected).setHours(0, 0, 0, 0);
-        if (this.typeDate === 'date') {
-            this.currentHours = '00';
-            this.currentMinutes = '00';
-        }
     }
     verifKeyup(events) {
         events.target.value = events.target.value.replace(/\D+/g, '');
@@ -1823,26 +1895,12 @@ class CalendarComponent {
     verifHours(events) {
         const value = parseInt(events.target.value, 0);
         events.target.value = this.currentHours = value < 24 ? (value < 10 ? '0' + value : value) : 23;
-        const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
-            parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
-            parseInt(this.currentMinutes, 0) * 60000);
-        this.dateSelected = dateData;
-        this.triggerChange({
-            startDate: dateData,
-            endDate: dateData
-        });
+        this.setDateSelected();
     }
     verifMinutes(events) {
         const value = parseInt(events.target.value, 0);
         events.target.value = this.currentMinutes = value < 60 ? (value < 10 ? '0' + value : value) : 59;
-        const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
-            parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
-            parseInt(this.currentMinutes, 0) * 60000);
-        this.dateSelected = dateData;
-        this.triggerChange({
-            startDate: dateData,
-            endDate: dateData
-        });
+        this.setDateSelected();
     }
     addHours(target) {
         target.value = this.currentHours =
@@ -1853,14 +1911,7 @@ class CalendarComponent {
                 : parseInt(target.value, 0) < 10
                     ? '0' + parseInt(target.value, 0)
                     : parseInt(target.value, 0);
-        const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
-            parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
-            parseInt(this.currentMinutes, 0) * 60000);
-        this.dateSelected = dateData;
-        this.triggerChange({
-            startDate: dateData,
-            endDate: dateData
-        });
+        this.setDateSelected();
     }
     removeHours(target) {
         target.value = this.currentHours =
@@ -1871,14 +1922,7 @@ class CalendarComponent {
                 : parseInt(target.value, 0) < 10
                     ? '0' + parseInt(target.value, 0)
                     : parseInt(target.value, 0);
-        const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
-            parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
-            parseInt(this.currentMinutes, 0) * 60000);
-        this.dateSelected = dateData;
-        this.triggerChange({
-            startDate: dateData,
-            endDate: dateData
-        });
+        this.setDateSelected();
     }
     addMinutes(target) {
         target.value = this.currentMinutes =
@@ -1889,14 +1933,7 @@ class CalendarComponent {
                 : parseInt(target.value, 0) < 10
                     ? '0' + parseInt(target.value, 0)
                     : parseInt(target.value, 0);
-        const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
-            parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
-            parseInt(this.currentMinutes, 0) * 60000);
-        this.dateSelected = dateData;
-        this.triggerChange({
-            startDate: dateData,
-            endDate: dateData
-        });
+        this.setDateSelected();
     }
     removeMinutes(target) {
         target.value = this.currentMinutes =
@@ -1907,21 +1944,31 @@ class CalendarComponent {
                 : parseInt(target.value, 0) < 10
                     ? '0' + parseInt(target.value, 0)
                     : parseInt(target.value, 0);
-        const dateData = new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
+        this.setDateSelected();
+    }
+    getDateData() {
+        return new Date(new Date(new Date(this.currentDate).setHours(0, 0, 0, 0)).getTime() +
             parseInt(this.currentHours, 0) * 60 * 60 * 1000 +
             parseInt(this.currentMinutes, 0) * 60000);
-        this.dateSelected = dateData;
-        this.triggerChange({
-            startDate: dateData,
-            endDate: dateData
-        });
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CalendarComponent, selector: "wac-calendar", inputs: { label: "label", type: "type", options: "options", position: "position", dateSelected: "dateSelected", typeDate: "typeDate", noMargin: "noMargin" }, outputs: { selected: "selected", changeData: "changeData" }, ngImport: i0, template: "<div\n  class=\"wac-calendar\"\n  [ngClass]=\"{\n    'wac-calendar--input': type === 'input',\n    'wac-calendar--edit': type === 'edit',\n    'wac-calendar--select': type === 'select',\n    'wac-calendar--no-margin': noMargin,\n    'wac-calendar--open': open\n  }\"\n  [zIndexToggle]=\"open\"\n>\n  <p class=\"wac-calendar__label\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n  <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n  <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n    <div class=\"wac-calendar__wrapper\">\n      <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__input__icon\">\n          <i class=\"far fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__input__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy' }}\n        </div>\n        <div class=\"wac-calendar__wrapper__input__time\">\n          {{ dateSelected | date: 'HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__editInPlace__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__editInPlace__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__select__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__select__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"wac-calendar__absolute\"\n      [ngClass]=\"{\n        top: position === 'top',\n        bottom: position === 'bottom',\n        left: position === 'left',\n        right: position === 'right',\n        'right-top': position === 'right-top',\n        'right-bottom': position === 'right-bottom',\n        'left-top': position === 'left-top',\n        'left-bottom': position === 'left-bottom',\n        'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\n      }\"\n    >\n      <nwb-date-picker #datePicker (change)=\"changeDate($event)\" [options]=\"options\">\n        <input [nwbDatepickerStart]=\"datePicker\" type=\"date\" [value]=\"dateSelected\" />\n      </nwb-date-picker>\n      <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\n        <div class=\"wac-calendar__absolute__time__wrapper\">\n          <div class=\"wac-calendar__absolute__time__wrapper__hours\">\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"addHours(hours)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"removeHours(hours)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\n              <input #hours type=\"text\" value=\"{{ currentHours }}\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifHours($event)\" />\n            </div>\n          </div>\n          <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\n              <input #minutes type=\"text\" value=\"{{ currentMinutes }}\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifMinutes($event)\" />\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"addMinutes(minutes)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"removeMinutes(minutes)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.NwbDatePickerComponent, selector: "nwb-date-picker", inputs: ["options"], outputs: ["change", "clear"] }, { kind: "directive", type: i1$2.NwbDatePickerInputStartDirective, selector: "input[nwbDatepickerStart]", inputs: ["nwbDatepickerStart"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CalendarComponent, selector: "wac-calendar", inputs: { label: "label", type: "type", options: "options", position: "position", dateSelected: "dateSelected", typeDate: "typeDate", noMargin: "noMargin", disabled: "disabled" }, outputs: { dateSelectedChange: "dateSelectedChange", selected: "selected", changeData: "changeData" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: CalendarComponent,
+            multi: true
+        }
+    ], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"wac-calendar\"\n  [ngClass]=\"{\n    'wac-calendar--input': type === 'input',\n    'wac-calendar--edit': type === 'edit',\n    'wac-calendar--select': type === 'select',\n    'wac-calendar--no-margin': noMargin,\n    'wac-calendar--open': open\n  }\"\n  [zIndexToggle]=\"open\"\n>\n  <p class=\"wac-calendar__label\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n  <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n  <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n    <div class=\"wac-calendar__wrapper\">\n      <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__input__icon\">\n          <i class=\"far fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__input__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy' }}\n        </div>\n        <div class=\"wac-calendar__wrapper__input__time\">\n          {{ dateSelected | date: 'HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__editInPlace__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__editInPlace__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__select__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__select__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"wac-calendar__absolute\"\n      [ngClass]=\"{\n        top: position === 'top',\n        bottom: position === 'bottom',\n        left: position === 'left',\n        right: position === 'right',\n        'right-top': position === 'right-top',\n        'right-bottom': position === 'right-bottom',\n        'left-top': position === 'left-top',\n        'left-bottom': position === 'left-bottom',\n        'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\n      }\"\n    >\n      <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\n        <input [nwbDatepickerStart]=\"datePicker\" type=\"date\" [value]=\"dateSelected.toString()\" />\n      </nwb-date-picker>\n      <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\n        <div class=\"wac-calendar__absolute__time__wrapper\">\n          <div class=\"wac-calendar__absolute__time__wrapper__hours\">\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"addHours(hours)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"removeHours(hours)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\n              <input #hours type=\"text\" [value]=\"currentHours\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifHours($event)\" />\n            </div>\n          </div>\n          <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\n              <input #minutes type=\"text\" [value]=\"currentMinutes\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifMinutes($event)\" />\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"addMinutes(minutes)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"removeMinutes(minutes)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.NwbDatePickerComponent, selector: "nwb-date-picker", inputs: ["options"], outputs: ["change", "clear"] }, { kind: "directive", type: i1$2.NwbDatePickerInputStartDirective, selector: "input[nwbDatepickerStart]", inputs: ["nwbDatepickerStart"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-calendar', template: "<div\n  class=\"wac-calendar\"\n  [ngClass]=\"{\n    'wac-calendar--input': type === 'input',\n    'wac-calendar--edit': type === 'edit',\n    'wac-calendar--select': type === 'select',\n    'wac-calendar--no-margin': noMargin,\n    'wac-calendar--open': open\n  }\"\n  [zIndexToggle]=\"open\"\n>\n  <p class=\"wac-calendar__label\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n  <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n  <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n    <div class=\"wac-calendar__wrapper\">\n      <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__input__icon\">\n          <i class=\"far fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__input__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy' }}\n        </div>\n        <div class=\"wac-calendar__wrapper__input__time\">\n          {{ dateSelected | date: 'HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__editInPlace__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__editInPlace__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__select__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__select__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"wac-calendar__absolute\"\n      [ngClass]=\"{\n        top: position === 'top',\n        bottom: position === 'bottom',\n        left: position === 'left',\n        right: position === 'right',\n        'right-top': position === 'right-top',\n        'right-bottom': position === 'right-bottom',\n        'left-top': position === 'left-top',\n        'left-bottom': position === 'left-bottom',\n        'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\n      }\"\n    >\n      <nwb-date-picker #datePicker (change)=\"changeDate($event)\" [options]=\"options\">\n        <input [nwbDatepickerStart]=\"datePicker\" type=\"date\" [value]=\"dateSelected\" />\n      </nwb-date-picker>\n      <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\n        <div class=\"wac-calendar__absolute__time__wrapper\">\n          <div class=\"wac-calendar__absolute__time__wrapper__hours\">\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"addHours(hours)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"removeHours(hours)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\n              <input #hours type=\"text\" value=\"{{ currentHours }}\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifHours($event)\" />\n            </div>\n          </div>\n          <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\n              <input #minutes type=\"text\" value=\"{{ currentMinutes }}\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifMinutes($event)\" />\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"addMinutes(minutes)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"removeMinutes(minutes)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\n</div>\n" }]
+            args: [{ selector: 'wac-calendar', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: CalendarComponent,
+                            multi: true
+                        }
+                    ], template: "<div\n  class=\"wac-calendar\"\n  [ngClass]=\"{\n    'wac-calendar--input': type === 'input',\n    'wac-calendar--edit': type === 'edit',\n    'wac-calendar--select': type === 'select',\n    'wac-calendar--no-margin': noMargin,\n    'wac-calendar--open': open\n  }\"\n  [zIndexToggle]=\"open\"\n>\n  <p class=\"wac-calendar__label\" *ngIf=\"label && (type === 'input' || type === 'select')\" (click)=\"openCalendar()\">{{ label }}</p>\n  <p class=\"wac-calendar__startLabel\" *ngIf=\"type === 'edit'\">{{ startLabel }}</p>\n  <div class=\"wac-calendar__autoHide\" wzAutoHide (clickOutside)=\"openCalendar('close')\">\n    <div class=\"wac-calendar__wrapper\">\n      <div class=\"wac-calendar__wrapper__input\" *ngIf=\"type === 'input'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__input__icon\">\n          <i class=\"far fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__input__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy' }}\n        </div>\n        <div class=\"wac-calendar__wrapper__input__time\">\n          {{ dateSelected | date: 'HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__editInPlace\" *ngIf=\"type === 'edit'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__editInPlace__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__editInPlace__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n      <div class=\"wac-calendar__wrapper__select\" *ngIf=\"type === 'select'\" (click)=\"openCalendar()\">\n        <div class=\"wac-calendar__wrapper__select__icon\">\n          <i class=\"fal fa-calendar-alt\"></i>\n        </div>\n        <div class=\"wac-calendar__wrapper__select__date\">\n          {{ dateSelected | date: 'dd/MM/yyyy HH:mm' }}\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"wac-calendar__absolute\"\n      [ngClass]=\"{\n        top: position === 'top',\n        bottom: position === 'bottom',\n        left: position === 'left',\n        right: position === 'right',\n        'right-top': position === 'right-top',\n        'right-bottom': position === 'right-bottom',\n        'left-top': position === 'left-top',\n        'left-bottom': position === 'left-bottom',\n        'with-time': typeDate === 'datetime-local' || typeDate === 'datetime'\n      }\"\n    >\n      <nwb-date-picker #datePicker (change)=\"onChangeDate($event)\" [options]=\"options\">\n        <input [nwbDatepickerStart]=\"datePicker\" type=\"date\" [value]=\"dateSelected.toString()\" />\n      </nwb-date-picker>\n      <div class=\"wac-calendar__absolute__time\" *ngIf=\"typeDate === 'datetime-local' || typeDate === 'datetime'\">\n        <div class=\"wac-calendar__absolute__time__wrapper\">\n          <div class=\"wac-calendar__absolute__time__wrapper__hours\">\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__left\">\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"addHours(hours)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__hours__btn\" (click)=\"removeHours(hours)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__hours__right\">\n              <input #hours type=\"text\" [value]=\"currentHours\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifHours($event)\" />\n            </div>\n          </div>\n          <div class=\"wac-calendar__absolute__time__wrapper__minutes\">\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__left\">\n              <input #minutes type=\"text\" [value]=\"currentMinutes\" (keyup)=\"verifKeyup($event)\" (blur)=\"verifMinutes($event)\" />\n            </div>\n            <div class=\"wac-calendar__absolute__time__wrapper__minutes__right\">\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"addMinutes(minutes)\">\n                <i class=\"fas fa-plus\"></i>\n              </button>\n              <button class=\"wac-calendar__absolute__time__wrapper__minutes__btn\" (click)=\"removeMinutes(minutes)\">\n                <i class=\"fas fa-minus\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <p class=\"wac-calendar__endLabel\" *ngIf=\"type === 'edit'\">{{ endLabel }}</p>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }], type: [{
@@ -1932,10 +1979,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], dateSelected: [{
                 type: Input
+            }], dateSelectedChange: [{
+                type: Output
             }], typeDate: [{
                 type: Input
             }], noMargin: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], selected: [{
                 type: Output
             }], changeData: [{
@@ -4553,6 +4604,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 +4665,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 +4720,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 +4744,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 +4760,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: [{