@wizishop/angular-components 14.3.14 → 14.3.15

package/fesm2020/wizishop-angular-components.mjs

@@ -1,16 +1,17 @@
 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, NgModule, Inject, Pipe, ContentChildren, Attribute, Optional, ViewChild, ChangeDetectionStrategy, HostBinding, ContentChild } 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 * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
 import * as i4$1 from 'ngx-perfect-scrollbar';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-import { Subject, merge, fromEvent, ReplaySubject, interval, takeUntil as takeUntil$1, startWith as startWith$1, map as map$1 } from 'rxjs';
-import { takeUntil, debounceTime, distinctUntilChanged, tap, map, takeWhile, startWith } from 'rxjs/operators';
+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 { CdkTableModule } from '@angular/cdk/table';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { TagInputModule } from 'ngx-chips';
@@ -20,7 +21,6 @@ import * as i4 from 'ngx-autosize';
 import { AutosizeModule } from 'ngx-autosize';
 import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, hasModifierKey, ESCAPE, A, Z, ZERO, NINE } from '@angular/cdk/keycodes';
 import * as i2$2 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
 import * as i3 from 'ngx-scrollbar/reached-event';
@@ -362,7 +362,7 @@ class SelectOptionDirective {
             return;
         }
         this.selected = !this.selected;
-        this.selectedChange.emit(this.value);
+        this.selectedChange.emit(this.selected);
     }
     getValue() {
         return this.value;
@@ -375,7 +375,7 @@ class SelectOptionDirective {
     }
     setSelected(selected) {
         this.selected = selected;
-        this.selectedChange.emit(this.value);
+        this.selectedChange.emit(this.selected);
     }
     getContentRef() {
         return this.contentRef;
@@ -402,11 +402,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Output
             }] } });
 
-const directives$2 = [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective];
+class ValueChangeService {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.valueChange$ = new Subject();
+        this.indexSelectedOption = null;
+        this.resetListeners$ = new Subject();
+        this.indexOfMatchedOption = (option, index, letter) => {
+            const textOption = option.getContentRef().nativeElement.textContent.trim().toLowerCase();
+            return textOption.startsWith(letter) ? index : null;
+        };
+        this.isNotNull = (index) => {
+            return index !== null;
+        };
+        this.highestAndClosestIndex = (index) => {
+            if (isNaN(this.indexSelectedOption)) {
+                return true;
+            }
+            if (index > this.indexSelectedOption) {
+                return true;
+            }
+            return false;
+        };
+    }
+    set value(value) {
+        this._value = value;
+        this.handleValueChange();
+        this.valueChange$.next(value);
+    }
+    get value() {
+        return this._value;
+    }
+    handleSelectOptionsChange(optionChildren, value) {
+        this.resetListeners$.next();
+        this.optionChildren = optionChildren;
+        this._value = value;
+        this.indexSelectedOption = null;
+        this.handleInitialSelectedOption();
+        this.handleSelectedOptionsEvent();
+    }
+    assignValue(value) {
+        this._value = value;
+        this.handleValueChange();
+    }
+    handleValueChange() {
+        this.changeSelectedOption();
+        this.updateSelectPlaceholder();
+        this.changeDetectorRef.markForCheck();
+    }
+    selectNextOption() {
+        if (this.indexSelectedOption + 1 >= this.optionChildren.length) {
+            return;
+        }
+        if (this.indexSelectedOption === null) {
+            this.indexSelectedOption = 0;
+        }
+        else {
+            this.indexSelectedOption = this.indexSelectedOption + 1;
+        }
+        this.value = this.optionChildren.get(this.indexSelectedOption).value;
+    }
+    selectPreviousOption() {
+        if (!this.indexSelectedOption) {
+            this.indexSelectedOption = null;
+            this.assignValue(null);
+            return;
+        }
+        this.indexSelectedOption = this.indexSelectedOption - 1;
+        this.value = this.optionChildren.get(this.indexSelectedOption).value;
+    }
+    searchOptionByFirstLetter(letter) {
+        const matchedOptionsIndex = this.optionChildren
+            .map((option, index) => this.indexOfMatchedOption(option, index, letter))
+            .filter(this.isNotNull);
+        if (!matchedOptionsIndex.length) { // reset the selection
+            this.indexSelectedOption = null;
+            this.value = null;
+            return;
+        }
+        // find the next option after the current selected option, or the first option
+        const validOptionIndex = matchedOptionsIndex.find(this.highestAndClosestIndex);
+        this.indexSelectedOption = isNaN(validOptionIndex) ? matchedOptionsIndex[0] : validOptionIndex;
+        this.value = this.optionChildren.get(this.indexSelectedOption).value;
+    }
+    handleInitialSelectedOption() {
+        setTimeout(() => {
+            if (!this.value) {
+                this.findInitialSelectedOption();
+                return;
+            }
+            this.handleValueChange();
+        }, 0);
+    }
+    findInitialSelectedOption() {
+        const selectedOption = this.getSelectedOptionComponent();
+        if (!selectedOption) {
+            return;
+        }
+        this.value = selectedOption.value;
+    }
+    handleSelectedOptionsEvent() {
+        this.optionSelectedChangeListeners().subscribe((selectEvent) => {
+            this.value = selectEvent.value;
+        });
+    }
+    updateSelectPlaceholder() {
+        if (!this.value) {
+            this.selectedOptionContent = null;
+            return;
+        }
+        const selectedOption = this.getSelectedOptionComponent();
+        this.selectedOptionContent = selectedOption?.getContentRef().nativeElement.innerHTML || undefined;
+    }
+    getSelectedOptionComponent() {
+        return this.optionChildren.find((option) => option.selected);
+    }
+    optionSelectedChangeListeners() {
+        const selectedChange$ = this.optionChildren.map((option) => {
+            return option.selectedChange.pipe(map((value) => {
+                return {
+                    value
+                };
+            }));
+        });
+        return merge(...selectedChange$).pipe(takeUntil(this.resetListeners$));
+    }
+    changeSelectedOption() {
+        this.optionChildren.forEach((optionComponent, index) => {
+            optionComponent.selected = this.value == undefined ? false : optionComponent.value === this.value;
+            if (optionComponent.selected) {
+                this.indexSelectedOption = index;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.resetListeners$.next();
+        this.resetListeners$.complete();
+    }
+}
+ValueChangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
+ValueChangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class SelectDirective {
+    constructor(valueChangeService) {
+        this.valueChangeService = valueChangeService;
+        this.valueChange = new EventEmitter();
+        this.disabled = false;
+        this.isDestroyed$ = new Subject();
+        // ControlValueAccessor methods
+        this.onChange = () => { };
+        this.onTouch = () => { };
+    }
+    /** Handles all keydown events on the select. */
+    onKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        this.handleKeyboardAction(event);
+    }
+    set value(value) {
+        this._value = value;
+        if (!this.optionChildren) {
+            return;
+        }
+        this.valueChangeService.assignValue(value);
+    }
+    get value() {
+        return this._value;
+    }
+    ngOnInit() {
+        this.handleValueChange();
+    }
+    ngAfterViewInit() {
+        this.handleOptionChildren();
+    }
+    handleValueChange() {
+        this.valueChangeService.valueChange$.pipe(takeUntil$1(this.isDestroyed$)).subscribe(value => {
+            this._value = value;
+            this.valueChange.emit(this.value);
+            this.onChange(this.value);
+            this.onTouch(this.value);
+        });
+    }
+    handleOptionChildren() {
+        this.optionChildren.changes.pipe(takeUntil$1(this.isDestroyed$), startWith(this.optionChildren)).subscribe(optionChildren => {
+            this.valueChangeService.handleSelectOptionsChange(optionChildren, this.value);
+        });
+    }
+    /** Handles keyboard events when the selected is open. */
+    handleKeyboardAction(event) {
+        const keyCode = event.keyCode;
+        const isArrowKey = keyCode === DOWN_ARROW ||
+            keyCode === UP_ARROW ||
+            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) {
+            // select the next option on arrow key down
+            if (keyCode === DOWN_ARROW || keyCode === RIGHT_ARROW) {
+                this.valueChangeService.selectNextOption();
+                return;
+            }
+            this.valueChangeService.selectPreviousOption();
+            return;
+        }
+        if (isTyping) {
+            this.valueChangeService.searchOptionByFirstLetter(event.key);
+            return;
+        }
+    }
+    writeValue(value) {
+        if (typeof value === 'undefined') {
+            return;
+        }
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    ngOnDestroy() {
+        this.isDestroyed$.next();
+        this.isDestroyed$.complete();
+    }
+}
+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: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: SelectDirective, multi: true },
+        ValueChangeService
+    ], queries: [{ propertyName: "optionChildren", predicate: OPTION_SELECTION_HANDLER, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wacSelect]',
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: SelectDirective, multi: true },
+                        ValueChangeService
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: ValueChangeService }]; }, propDecorators: { onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], optionChildren: [{
+                type: ContentChildren,
+                args: [OPTION_SELECTION_HANDLER, { descendants: true }]
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
+
+const directives$2 = [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective, SelectDirective];
 class SharedDirectives {
 }
 SharedDirectives.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SharedDirectives, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedDirectives.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: SharedDirectives, declarations: [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective], imports: [CommonModule, FormsModule], exports: [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective] });
+SharedDirectives.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: SharedDirectives, declarations: [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective, SelectDirective], imports: [CommonModule, FormsModule], exports: [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective, SelectDirective] });
 SharedDirectives.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SharedDirectives, imports: [CommonModule, FormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SharedDirectives, decorators: [{
             type: NgModule,
@@ -4237,150 +4495,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }] } });
 
-class ValueChangeService {
-    constructor(changeDetectorRef) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.valueChange$ = new Subject();
-        this.indexSelectedOption = null;
-        this.resetListeners$ = new Subject();
-        this.indexOfMatchedOption = (option, index, letter) => {
-            const textOption = option.getContentRef().nativeElement.textContent.trim().toLowerCase();
-            return textOption.startsWith(letter) ? index : null;
-        };
-        this.isNotNull = (index) => {
-            return index !== null;
-        };
-        this.highestAndClosestIndex = (index) => {
-            if (isNaN(this.indexSelectedOption)) {
-                return true;
-            }
-            if (index > this.indexSelectedOption) {
-                return true;
-            }
-            return false;
-        };
-    }
-    set value(value) {
-        this._value = value;
-        this.handleValueChange();
-        this.valueChange$.next(value);
-    }
-    get value() {
-        return this._value;
-    }
-    handleSelectOptionsChange(optionChildren, value) {
-        this.resetListeners$.next();
-        this.optionChildren = optionChildren;
-        this._value = value;
-        this.indexSelectedOption = null;
-        this.handleInitialSelectedOption();
-        this.handleSelectedOptionsEvent();
-    }
-    assignValue(value) {
-        this._value = value;
-        this.handleValueChange();
-    }
-    handleValueChange() {
-        this.changeSelectedOption();
-        this.updateSelectPlaceholder();
-        this.changeDetectorRef.markForCheck();
-    }
-    selectNextOption() {
-        if (this.indexSelectedOption + 1 >= this.optionChildren.length) {
-            return;
-        }
-        if (this.indexSelectedOption === null) {
-            this.indexSelectedOption = 0;
-        }
-        else {
-            this.indexSelectedOption = this.indexSelectedOption + 1;
-        }
-        this.assignValue(this.optionChildren.get(this.indexSelectedOption).value);
-    }
-    selectPreviousOption() {
-        if (!this.indexSelectedOption) {
-            this.indexSelectedOption = null;
-            this.assignValue(null);
-            return;
-        }
-        this.indexSelectedOption = this.indexSelectedOption - 1;
-        this.assignValue(this.optionChildren.get(this.indexSelectedOption).value);
-    }
-    searchOptionByFirstLetter(letter) {
-        const matchedOptionsIndex = this.optionChildren
-            .map((option, index) => this.indexOfMatchedOption(option, index, letter))
-            .filter(this.isNotNull);
-        if (!matchedOptionsIndex.length) { // reset the selection
-            this.indexSelectedOption = null;
-            this.assignValue(null);
-            return;
-        }
-        // find the next option after the current selected option, or the first option
-        const validOptionIndex = matchedOptionsIndex.find(this.highestAndClosestIndex);
-        this.indexSelectedOption = isNaN(validOptionIndex) ? matchedOptionsIndex[0] : validOptionIndex;
-        this.assignValue(this.optionChildren.get(this.indexSelectedOption).value);
-    }
-    handleInitialSelectedOption() {
-        setTimeout(() => {
-            if (!this.value) {
-                this.findInitialSelectedOption();
-                return;
-            }
-            this.handleValueChange();
-        }, 0);
-    }
-    findInitialSelectedOption() {
-        const selectedOption = this.getSelectedOptionComponent();
-        if (!selectedOption) {
-            return;
-        }
-        this.value = selectedOption.value;
-    }
-    handleSelectedOptionsEvent() {
-        this.optionSelectedChangeListeners().subscribe((selectEvent) => {
-            this.value = selectEvent.value;
-        });
-    }
-    updateSelectPlaceholder() {
-        if (!this.value) {
-            this.selectedOptionContent = null;
-            return;
-        }
-        const selectedOption = this.getSelectedOptionComponent();
-        this.selectedOptionContent = selectedOption?.getContentRef().nativeElement.innerHTML || undefined;
-    }
-    getSelectedOptionComponent() {
-        return this.optionChildren.find((option) => option.selected);
-    }
-    optionSelectedChangeListeners() {
-        const selectedChange$ = this.optionChildren.map((option) => {
-            return option.selectedChange.pipe(map((value) => {
-                return {
-                    value
-                };
-            }));
-        });
-        return merge(...selectedChange$).pipe(takeUntil(this.resetListeners$));
-    }
-    changeSelectedOption() {
-        this.optionChildren.forEach((optionComponent, index) => {
-            optionComponent.selected = this.value == undefined ? false : optionComponent.value === this.value;
-            if (optionComponent.selected) {
-                this.indexSelectedOption = index;
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.resetListeners$.next();
-        this.resetListeners$.complete();
-    }
-}
-ValueChangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
-ValueChangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
-
 class SelectSearchTriggerComponent {
     constructor() {
         this.searchValue = '';
@@ -4429,31 +4543,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                     }, template: "<ng-content></ng-content>" }]
         }], ctorParameters: function () { return []; } });
 
-class SelectTestComponent {
+class SelectTestComponent extends SelectDirective {
     constructor(valueChangeService) {
+        super(valueChangeService);
         this.valueChangeService = valueChangeService;
         //! Refacto improve sroll on mobile, see with Pauline
         // angular material select https://github.com/angular/components/blob/main/src/material/select/select.ts
         this.role = 'combobox';
-        this.valueChange = new EventEmitter();
-        this.disabled = false;
         this._openPanel = false;
         this.openPanelChange = new EventEmitter();
         this.enableSearch = false;
         this.isDestroyed$ = new Subject();
-        // ControlValueAccessor methods
-        this.onChange = () => { };
-        this.onTouch = () => { }; // todo call it on blur and on close if not disable and opened
-    }
-    set value(value) {
-        this._value = value;
-        if (!this.optionChildren) {
-            return;
-        }
-        this.valueChangeService.assignValue(value);
-    }
-    get value() {
-        return this._value;
+        this.isKeyBoardAction = false;
+        this.skipIfTriggeredByKeyboardAction = () => {
+            if (!this.isKeyBoardAction) {
+                return true;
+            }
+            this.isKeyBoardAction = false;
+            return false;
+        };
+        this.onSelectTouch = () => { };
     }
     /** Whether the component is required. */
     get required() {
@@ -4480,31 +4589,21 @@ class SelectTestComponent {
             this.customSearchTrigger?.setFocus();
         }
         if (wasOpen) {
-            this.onTouch(this.value);
+            this.onSelectTouch(this.value);
         }
     }
     get openPanel() {
         return this._openPanel;
     }
     ngOnInit() {
-        this.handleValueChange();
+        super.ngOnInit();
+        this.closeTabOnValueChange();
     }
-    ngAfterViewInit() {
-        this.handleOptionChildren();
-    }
-    handleValueChange() {
-        this.valueChangeService.valueChange$.pipe(takeUntil(this.isDestroyed$)).subscribe(value => {
-            this._value = value;
-            this.valueChange.emit(this.value);
-            this.onChange(this.value);
+    closeTabOnValueChange() {
+        this.valueChangeService.valueChange$.pipe(takeUntil(this.isDestroyed$), filter(this.skipIfTriggeredByKeyboardAction)).subscribe(() => {
             this.onClosePanel();
         });
     }
-    handleOptionChildren() {
-        this.optionChildren.changes.pipe(takeUntil(this.isDestroyed$), startWith(this.optionChildren)).subscribe(optionChildren => {
-            this.valueChangeService.handleSelectOptionsChange(optionChildren, this.value);
-        });
-    }
     onTogglePanel() {
         this.openPanel = !this.openPanel;
         this.openPanelChange.emit(this.openPanel);
@@ -4513,12 +4612,17 @@ class SelectTestComponent {
         this.openPanel = false;
         this.openPanelChange.emit(this.openPanel);
     }
-    /** Handles all keydown events on the select. */
-    _handleKeydown(event) {
+    onKeydown(event) {
         if (this.disabled) {
             return;
         }
-        this.openPanel ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);
+        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);
     }
     /** Handles keyboard events while the select is closed. */
     _handleClosedKeydown(event) {
@@ -4531,20 +4635,10 @@ class SelectTestComponent {
         // Open the select on ALT + arrow key to match the native <select>
         if ((isOpenKey && !hasModifierKey(event)) ||
             (event.altKey && isArrowKey)) {
-            event.preventDefault(); // prevents the page from scrolling down when pressing space
             this.openPanel = true;
-            return;
-        }
-        if (!isArrowKey) {
-            return;
-        }
-        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();
-            return;
+            return true;
         }
-        this.valueChangeService.selectPreviousOption();
+        return false;
     }
     /** Handles keyboard events when the selected is open. */
     _handleOpenKeydown(event) {
@@ -4554,39 +4648,15 @@ class SelectTestComponent {
             keyCode === LEFT_ARROW ||
             keyCode === RIGHT_ARROW;
         const isEscapeKey = keyCode === ESCAPE || keyCode === ENTER || keyCode === SPACE;
-        const isTyping = (keyCode >= A && keyCode <= Z) || (keyCode >= ZERO && keyCode <= NINE);
         if ((isArrowKey && event.altKey) || isEscapeKey) {
             // Close the select on ALT + arrow key to match the native <select>
-            event.preventDefault();
             this.openPanel = false;
-            return;
-        }
-        else 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();
-                return;
-            }
-            this.valueChangeService.selectPreviousOption();
-            return;
-        }
-        if (isTyping && !this.customSearchTrigger) {
-            this.valueChangeService.searchOptionByFirstLetter(event.key);
-            return;
+            return true;
         }
-    }
-    writeValue(value) {
-        if (typeof value === 'undefined') {
-            return;
-        }
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
+        return false;
     }
     registerOnTouched(fn) {
-        this.onTouch = fn;
+        this.onSelectTouch = fn;
     }
     ngOnDestroy() {
         this.isDestroyed$.next();
@@ -4594,10 +4664,10 @@ class SelectTestComponent {
     }
 }
 SelectTestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectTestComponent, deps: [{ token: ValueChangeService }], target: i0.ɵɵFactoryTarget.Component });
-SelectTestComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectTestComponent, selector: "wac-select-test", inputs: { value: "value", required: "required", disabled: "disabled", keepPanelOpen: "keepPanelOpen", openPanel: "openPanel", enableSearch: "enableSearch" }, outputs: { valueChange: "valueChange", openPanelChange: "openPanelChange" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "attr.role": "this.role" } }, providers: [
+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 }, { propertyName: "optionChildren", predicate: OPTION_SELECTION_HANDLER, descendants: 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 }], 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectTestComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-select-test', providers: [
@@ -4607,23 +4677,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
         }], ctorParameters: function () { return [{ type: ValueChangeService }]; }, propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], optionChildren: [{
-                type: ContentChildren,
-                args: [OPTION_SELECTION_HANDLER, { descendants: true }]
             }], customSearchTrigger: [{
                 type: ContentChild,
                 args: [SelectSearchTriggerComponent]
             }], label: [{
                 type: ContentChild,
                 args: [LabelComponent]
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
             }], required: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], keepPanelOpen: [{
                 type: Input
             }], openPanel: [{
@@ -4632,9 +4693,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Output
             }], enableSearch: [{
                 type: Input
-            }], _handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
 class OptionComponent {
@@ -4658,7 +4716,7 @@ class OptionComponent {
             return;
         }
         this.selected = !this.selected;
-        this.selectedChange.emit(this.value);
+        this.selectedChange.emit(this.selected);
         this.changeDetectorRef.markForCheck();
     }
     getValue() {
@@ -4673,7 +4731,7 @@ class OptionComponent {
     }
     setSelected(selected) {
         this.selected = selected;
-        this.selectedChange.emit(this.value);
+        this.selectedChange.emit(this.selected);
     }
     getContentRef() {
         return this.contentRef;
@@ -5179,7 +5237,7 @@ class AccordionComponent {
     }
     ngAfterViewInit() {
         this.expansionItems.changes
-            .pipe(takeUntil$1(this.isDestroyed$), startWith$1(this.expansionItems))
+            .pipe(takeUntil$1(this.isDestroyed$), startWith(this.expansionItems))
             .subscribe(() => {
             this.resetListeners$.next();
             this.panelExpansionChanges().subscribe(expandedItem => {
@@ -5892,5 +5950,5 @@ class TableFiltersGroup extends NwbFilterGroup {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, DebounceKeyupDirective, DeleteComponent, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpansionExport, ExpansionModule, ExpansionPanelBase, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, GooglePreviewComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectTestComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective };
+export { ACCORDION_ITEM, AbstractDebounceDirective, AccordionComponent, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, BlockSeparatorComponent, BlockTitleLegacyComponent, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, DebounceKeyupDirective, DeleteComponent, DraganddropListComponent, DropdownComponent, EXPANSION_PANEL_HEADER, ExpansionExport, ExpansionModule, ExpansionPanelBase, ExpansionPanelComponent, ExpansionPanelDirective, ExpansionPanelHeaderComponent, ExpansionPanelHeaderDirective, FilterOptionsPipe, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, GooglePreviewComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectDirective, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectTestComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SummaryComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, ValueChangeService, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective };
 //# sourceMappingURL=wizishop-angular-components.mjs.map