@wizishop/angular-components 14.3.2 → 14.3.4

package/esm2020/lib/components/selects/select-test/value-change.service.mjs

@@ -3,10 +3,27 @@ import { merge, Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 export class ValueChangeService {
-    constructor() {
+    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;
@@ -31,6 +48,7 @@ export class ValueChangeService {
     handleValueChange() {
         this.changeSelectedOption();
         this.updateSelectPlaceholder();
+        this.changeDetectorRef.markForCheck();
     }
     selectNextOption() {
         if (this.indexSelectedOption + 1 >= this.optionChildren.length) {
@@ -53,6 +71,20 @@ export class ValueChangeService {
         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) {
@@ -108,9 +140,9 @@ export class ValueChangeService {
         this.resetListeners$.complete();
     }
 }
-ValueChangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+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 []; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUtY2hhbmdlLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3NlbGVjdHMvc2VsZWN0LXRlc3QvdmFsdWUtY2hhbmdlLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBd0IsTUFBTSxlQUFlLENBQUM7QUFDakUsT0FBTyxFQUFFLEtBQUssRUFBYyxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDbEQsT0FBTyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFRaEQsTUFBTSxPQUFPLGtCQUFrQjtJQXdCM0I7UUF0QkEsaUJBQVksR0FBaUIsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQWtCM0Msd0JBQW1CLEdBQVcsSUFBSSxDQUFDO1FBRW5DLG9CQUFlLEdBQWtCLElBQUksT0FBTyxFQUFFLENBQUM7SUFFL0IsQ0FBQztJQXBCakIsSUFBSSxLQUFLLENBQUMsS0FBVTtRQUNoQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztRQUN6QixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ0wsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3ZCLENBQUM7SUFjRCx5QkFBeUIsQ0FBQyxjQUEwQyxFQUFFLEtBQVU7UUFDNUUsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUU1QixJQUFJLENBQUMsY0FBYyxHQUFHLGNBQWMsQ0FBQztRQUNyQyxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsbUJBQW1CLEdBQUcsSUFBSSxD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OUQsQ0FBQztJQUVPLDZCQUE2QjtRQUVqQyxNQUFNLGVBQWUsR0FBSSxJQUFJLENBQUMsY0FBYyxDQUFDLEdBQUcsQ0FBQyxDQUFDLE1BQU0sRUFBRSxFQUFFO1lBQ3hELE9BQU8sTUFBTSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQzdCLEdBQUcsQ0FBQyxDQUFDLEtBQVUsRUFBRSxFQUFFO2dCQUNmLE9BQU87b0JBQ1AsS0FBSztpQkFDYSxDQUFBO1lBQ3RCLENBQUMsQ0FBQyxDQUNMLENBQUM7UUFDTixDQUFDLENBQUMsQ0FBQztRQUVILE9BQU8sS0FBSyxDQUFDLEdBQUcsZUFBZSxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQztJQUMzRSxDQUFDO0lBRU8sb0JBQW9CO1FBQ3hCLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUMsZUFBZSxFQUFFLEtBQUssRUFBRSxFQUFFO1lBQ25ELGVBQWUsQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssSUFBSSxTQUFTLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDO1lBRWxHLElBQUksZUFBZSxDQUFDLFFBQVEsRUFBRTtnQkFDMUIsSUFBSSxDQUFDLG1CQUFtQixHQUFHLEtBQUssQ0FBQzthQUNwQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzVCLElBQUksQ0FBQyxlQUFlLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDcEMsQ0FBQzs7K0dBNUlRLGtCQUFrQjttSEFBbEIsa0JBQWtCOzJGQUFsQixrQkFBa0I7a0JBRDlCLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlLCBPbkRlc3Ryb3ksIFF1ZXJ5TGlzdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgbWVyZ2UsIE9ic2VydmFibGUsIFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IG1hcCwgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgT3B0aW9uQ29tcG9uZW50IH0gZnJvbSAnLi4vb3B0aW9uL29wdGlvbi5jb21wb25lbnQnO1xuXG50eXBlIFNlbGVjdGVkRXZlbnQgPSB7XG4gICAgdmFsdWU6IGFueVxuICB9XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBWYWx1ZUNoYW5nZVNlcnZpY2UgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuXG4gICAgdmFsdWVDaGFuZ2UkOiBTdWJqZWN0PGFueT4gPSBuZXcgU3ViamVjdCgpO1xuXG4gICAgc2V0IHZhbHVlKHZhbHVlOiBhbnkpIHtcbiAgICAgICAgdGhpcy5fdmFsdWUgPSB2YWx1ZTtcbiAgICAgICAgdGhpcy5oYW5kbGVWYWx1ZUNoYW5nZSgpO1xuICAgICAgICB0aGlzLnZhbHVlQ2hhbmdlJC5uZXh0KHZhbHVlKTtcbiAgICB9XG5cbiAgICBnZXQgdmFsdWUoKTogYW55IHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3ZhbHVlO1xuICAgIH1cblxuICAgIHByaXZhdGUgX3ZhbHVlOiBhbnk7XG5cbiAgICBvcHRpb25DaGlsZHJlbjogUXVlcnlMaXN0PE9wdGlvbkNvbXBvbmVudD47XG5cbiAgICBzZWxlY3RlZE9wdGlvbkNvbnRlbnQ6IGFueTtcblxuICAgIGluZGV4U2VsZWN0ZWRPcHRpb246IG51bWJlciA9IG51bGw7XG5cbiAgICByZXNldExpc3RlbmVycyQ6IFN1YmplY3Q8dm9pZD4gPSBuZXcgU3ViamVjdCgpO1xuXG4gICAgY29uc3RydWN0b3IoKSB7IH1cblxuICAgIGhhbmRsZVNlbGVjdE9wdGlvbnNDaGFuZ2Uob3B0aW9uQ2hpbGRyZW46IFF1ZXJ5TGlzdDxPcHRpb25Db21wb25lbnQ+LCB2YWx1ZTogYW55KSB7XG4gICAgICAgIHRoaXMucmVzZXRMaXN0ZW5lcnMkLm5leHQoKTtcblxuICAgICAgICB0aGlzLm9wdGlvbkNoaWxkcmVuID0gb3B0aW9uQ2hpbGRyZW47XG4gICAgICAgIHRoaXMuX3ZhbHVlID0gdmFsdWU7XG4gICAgICAgIHRoaXMuaW5kZXhTZWxlY3RlZE9wdGlvbiA9IG51bGw7XG5cbiAgICAgICAgdGhpcy5oYW5kbGVJbml0aWFsU2VsZWN0ZWRPcHRpb24oKTtcbiAgICAgICAgdGhpcy5oYW5kbGVTZWxlY3RlZE9wdGlvbnNFdmVudCgpO1xuICAgIH1cblxuICAgIGFzc2lnblZhbHVlKHZhbHVlOiBhbnkpIHtcbiAgICAgICAgdGhpcy5fdmFsdWUgPSB2YWx1ZTtcbiAgICAgICAgdGhpcy5oYW5kbGVWYWx1ZUNoYW5nZSgpO1xuICAgIH1cblxuICAgIGhhbmRsZVZhbHVlQ2hhbmdlKCkge1xuICAgICAgICB0aGlzLmNoYW5nZVNlbGVjdGVkT3B0aW9uKCk7XG4gICAgICAgIHRoaXMudXBkYXRlU2VsZWN0UGxhY2Vob2xkZXIoKTtcbiAgICB9XG5cbiAgICBzZWxlY3ROZXh0T3B0aW9uKCkge1xuICAgICAgICBpZiAodGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uICsxID49IHRoaXMub3B0aW9uQ2hpbGRyZW4ubGVuZ3RoKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBpZiAodGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uID09PSBudWxsKSB7XG4gICAgICAgICAgICB0aGlzLmluZGV4U2VsZWN0ZWRPcHRpb24gPSAwO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uID0gdGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uICsgMTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuYXNzaWduVmFsdWUodGhpcy5vcHRpb25DaGlsZHJlbi5nZXQodGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uKS52YWx1ZSk7XG4gICAgfVxuXG4gICAgc2VsZWN0UHJldmlvdXNPcHRpb24oKSB7XG5cbiAgICAgICAgaWYgKCF0aGlzLmluZGV4U2VsZWN0ZWRPcHRpb24pIHtcbiAgICAgICAgICAgIHRoaXMuaW5kZXhTZWxlY3RlZE9wdGlvbiA9IG51bGw7XG4gICAgICAgICAgICB0aGlzLmFzc2lnblZhbHVlKG51bGwpO1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uID0gdGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uIC0gMTtcbiAgICAgICAgdGhpcy5hc3NpZ25WYWx1ZSh0aGlzLm9wdGlvbkNoaWxkcmVuLmdldCh0aGlzLmluZGV4U2VsZWN0ZWRPcHRpb24pLnZhbHVlKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGhhbmRsZUluaXRpYWxTZWxlY3RlZE9wdGlvbigpIHtcbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7IC8vICEgQXZvaWQgRXhwcmVzc2lvbiBoYXMgY2hhbmdlZC4uLlxuICAgICAgICAgICAgaWYgKCF0aGlzLnZhbHVlKSB7XG4gICAgICAgICAgICAgIHRoaXMuZmluZEluaXRpYWxTZWxlY3RlZE9wdGlvbigpO1xuICAgICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICB0aGlzLmhhbmRsZVZhbHVlQ2hhbmdlKCk7XG4gICAgICAgICAgfSwgMCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBmaW5kSW5pdGlhbFNlbGVjdGVkT3B0aW9uKCkge1xuICAgICAgICBjb25zdCBzZWxlY3RlZE9wdGlvbiA9IHRoaXMuZ2V0U2VsZWN0ZWRPcHRpb25Db21wb25lbnQoKTtcblxuICAgICAgICBpZiAoIXNlbGVjdGVkT3B0aW9uKSB7XG4gICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG4gICAgICAgIHRoaXMudmFsdWUgPSBzZWxlY3RlZE9wdGlvbi52YWx1ZTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGhhbmRsZVNlbGVjdGVkT3B0aW9uc0V2ZW50KCkge1xuICAgICAgICB0aGlzLm9wdGlvblNlbGVjdGVkQ2hhbmdlTGlzdGVuZXJzKCkuc3Vic2NyaWJlKChzZWxlY3RFdmVudCkgPT4ge1xuICAgICAgICAgIHRoaXMudmFsdWUgPSBzZWxlY3RFdmVudC52YWx1ZTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSB1cGRhdGVTZWxlY3RQbGFjZWhvbGRlcigpIHtcbiAgICAgICAgaWYgKCF0aGlzLnZhbHVlKSB7XG4gICAgICAgICAgICB0aGlzLnNlbGVjdGVkT3B0aW9uQ29udGVudCA9IG51bGw7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBjb25zdCBzZWxlY3RlZE9wdGlvbiA9IHRoaXMuZ2V0U2VsZWN0ZWRPcHRpb25Db21wb25lbnQoKTtcbiAgICAgICAgdGhpcy5zZWxlY3RlZE9wdGlvbkNvbnRlbnQgPSBzZWxlY3RlZE9wdGlvbj8uZ2V0Q29udGVudFJlZigpLm5hdGl2ZUVsZW1lbnQuaW5uZXJIVE1MIHx8IHVuZGVmaW5lZDtcbiAgICB9XG5cbiAgICBwcml2YXRlIGdldFNlbGVjdGVkT3B0aW9uQ29tcG9uZW50KCk6IE9wdGlvbkNvbXBvbmVudCB7XG4gICAgcmV0dXJuIHRoaXMub3B0aW9uQ2hpbGRyZW4uZmluZCgob3B0aW9uKSA9PiBvcHRpb24uc2VsZWN0ZWQgKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIG9wdGlvblNlbGVjdGVkQ2hhbmdlTGlzdGVuZXJzKCk6IE9ic2VydmFibGU8U2VsZWN0ZWRFdmVudD4ge1xuXG4gICAgICAgIGNvbnN0IHNlbGVjdGVkQ2hhbmdlJCA9ICB0aGlzLm9wdGlvbkNoaWxkcmVuLm1hcCgob3B0aW9uKSA9PiB7XG4gICAgICAgICAgICByZXR1cm4gb3B0aW9uLnNlbGVjdGVkQ2hhbmdlLnBpcGUoXG4gICAgICAgICAgICAgICAgbWFwKCh2YWx1ZTogYW55KSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICAgICAgICAgIHZhbHVlXG4gICAgICAgICAgICAgICAgICAgIH0gYXMgU2VsZWN0ZWRFdmVudFxuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICApO1xuICAgICAgICB9KTtcblxuICAgICAgICByZXR1cm4gbWVyZ2UoLi4uc2VsZWN0ZWRDaGFuZ2UkKS5waXBlKHRha2VVbnRpbCh0aGlzLnJlc2V0TGlzdGVuZXJzJCkpO1xuICAgIH1cblxuICAgIHByaXZhdGUgY2hhbmdlU2VsZWN0ZWRPcHRpb24oKSB7XG4gICAgICAgIHRoaXMub3B0aW9uQ2hpbGRyZW4uZm9yRWFjaCgob3B0aW9uQ29tcG9uZW50LCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgb3B0aW9uQ29tcG9uZW50LnNlbGVjdGVkID0gdGhpcy52YWx1ZSA9PSB1bmRlZmluZWQgPyBmYWxzZSA6IG9wdGlvbkNvbXBvbmVudC52YWx1ZSA9PT0gdGhpcy52YWx1ZTtcblxuICAgICAgICAgICAgaWYgKG9wdGlvbkNvbXBvbmVudC5zZWxlY3RlZCkge1xuICAgICAgICAgICAgICAgIHRoaXMuaW5kZXhTZWxlY3RlZE9wdGlvbiA9IGluZGV4O1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpIHtcbiAgICAgICAgdGhpcy5yZXNldExpc3RlbmVycyQubmV4dCgpO1xuICAgICAgICB0aGlzLnJlc2V0TGlzdGVuZXJzJC5jb21wbGV0ZSgpO1xuICAgIH1cbn0iXX0=
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUtY2hhbmdlLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3NlbGVjdHMvc2VsZWN0LXRlc3QvdmFsdWUtY2hhbmdlLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFxQixVQUFVLEVBQXdCLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxLQUFLLEVBQWMsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ2xELE9BQU8sRUFBRSxHQUFHLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBUWhELE1BQU0sT0FBTyxrQkFBa0I7SUF3QjNCLFlBQW9CLGlCQUFvQztRQUFwQyxzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO1FBdEJ4RCxpQkFBWSxHQUFpQixJQUFJLE9BQU8sRUFBRSxDQUFDO1FBa0IzQyx3QkFBbUIsR0FBVyxJQUFJLENBQUM7UUFFbkMsb0JBQWUsR0FBa0IsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQXVFdkMseUJBQW9CLEdBQUcsQ0FBQyxNQUF1QixFQUFFLEtBQWEsRUFBRSxNQUFjLEVBQUUsRUFBRTtZQUN0RixNQUFNLFVBQVUsR0FBRyxNQUFNLENBQUMsYUFBYSxFQUFFLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUN6RixPQUFPLFVBQVUsQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ3RELENBQUMsQ0FBQTtRQUVLLGNBQVMsR0FBRyxDQUFDLEtBQW9CLEVBQUUsRUFBRTtZQUN6QyxPQUFPLEtBQUssS0FBSyxJQUFJLENBQUM7UUFDMUIsQ0FBQyxDQUFBO1FBRU8sMkJBQXNCLEdBQUcs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QUssQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUMsS0FBSyxDQUFDO1lBRWxHLElBQUksZUFBZSxDQUFDLFFBQVEsRUFBRTtnQkFDMUIsSUFBSSxDQUFDLG1CQUFtQixHQUFHLEtBQUssQ0FBQzthQUNwQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzVCLElBQUksQ0FBQyxlQUFlLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDcEMsQ0FBQzs7K0dBcExRLGtCQUFrQjttSEFBbEIsa0JBQWtCOzJGQUFsQixrQkFBa0I7a0JBRDlCLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3RvclJlZiwgSW5qZWN0YWJsZSwgT25EZXN0cm95LCBRdWVyeUxpc3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IG1lcmdlLCBPYnNlcnZhYmxlLCBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBtYXAsIHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IE9wdGlvbkNvbXBvbmVudCB9IGZyb20gJy4uL29wdGlvbi9vcHRpb24uY29tcG9uZW50JztcblxudHlwZSBTZWxlY3RlZEV2ZW50ID0ge1xuICAgIHZhbHVlOiBhbnlcbiAgfVxuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgVmFsdWVDaGFuZ2VTZXJ2aWNlIGltcGxlbWVudHMgT25EZXN0cm95IHtcblxuICAgIHZhbHVlQ2hhbmdlJDogU3ViamVjdDxhbnk+ID0gbmV3IFN1YmplY3QoKTtcblxuICAgIHNldCB2YWx1ZSh2YWx1ZTogYW55KSB7XG4gICAgICAgIHRoaXMuX3ZhbHVlID0gdmFsdWU7XG4gICAgICAgIHRoaXMuaGFuZGxlVmFsdWVDaGFuZ2UoKTtcbiAgICAgICAgdGhpcy52YWx1ZUNoYW5nZSQubmV4dCh2YWx1ZSk7XG4gICAgfVxuXG4gICAgZ2V0IHZhbHVlKCk6IGFueSB7XG4gICAgICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgICB9XG5cbiAgICBwcml2YXRlIF92YWx1ZTogYW55O1xuXG4gICAgb3B0aW9uQ2hpbGRyZW46IFF1ZXJ5TGlzdDxPcHRpb25Db21wb25lbnQ+O1xuXG4gICAgc2VsZWN0ZWRPcHRpb25Db250ZW50OiBhbnk7XG5cbiAgICBpbmRleFNlbGVjdGVkT3B0aW9uOiBudW1iZXIgPSBudWxsO1xuXG4gICAgcmVzZXRMaXN0ZW5lcnMkOiBTdWJqZWN0PHZvaWQ+ID0gbmV3IFN1YmplY3QoKTtcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7IH1cblxuICAgIGhhbmRsZVNlbGVjdE9wdGlvbnNDaGFuZ2Uob3B0aW9uQ2hpbGRyZW46IFF1ZXJ5TGlzdDxPcHRpb25Db21wb25lbnQ+LCB2YWx1ZTogYW55KSB7XG4gICAgICAgIHRoaXMucmVzZXRMaXN0ZW5lcnMkLm5leHQoKTtcblxuICAgICAgICB0aGlzLm9wdGlvbkNoaWxkcmVuID0gb3B0aW9uQ2hpbGRyZW47XG4gICAgICAgIHRoaXMuX3ZhbHVlID0gdmFsdWU7XG4gICAgICAgIHRoaXMuaW5kZXhTZWxlY3RlZE9wdGlvbiA9IG51bGw7XG5cbiAgICAgICAgdGhpcy5oYW5kbGVJbml0aWFsU2VsZWN0ZWRPcHRpb24oKTtcbiAgICAgICAgdGhpcy5oYW5kbGVTZWxlY3RlZE9wdGlvbnNFdmVudCgpO1xuICAgIH1cblxuICAgIGFzc2lnblZhbHVlKHZhbHVlOiBhbnkpIHtcbiAgICAgICAgdGhpcy5fdmFsdWUgPSB2YWx1ZTtcbiAgICAgICAgdGhpcy5oYW5kbGVWYWx1ZUNoYW5nZSgpO1xuICAgIH1cblxuICAgIGhhbmRsZVZhbHVlQ2hhbmdlKCkge1xuICAgICAgICB0aGlzLmNoYW5nZVNlbGVjdGVkT3B0aW9uKCk7XG4gICAgICAgIHRoaXMudXBkYXRlU2VsZWN0UGxhY2Vob2xkZXIoKTtcbiAgICAgICAgdGhpcy5jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgICB9XG5cbiAgICBzZWxlY3ROZXh0T3B0aW9uKCkge1xuICAgICAgICBpZiAodGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uICsxID49IHRoaXMub3B0aW9uQ2hpbGRyZW4ubGVuZ3RoKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBpZiAodGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uID09PSBudWxsKSB7XG4gICAgICAgICAgICB0aGlzLmluZGV4U2VsZWN0ZWRPcHRpb24gPSAwO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uID0gdGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uICsgMTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuYXNzaWduVmFsdWUodGhpcy5vcHRpb25DaGlsZHJlbi5nZXQodGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uKS52YWx1ZSk7XG4gICAgfVxuXG4gICAgc2VsZWN0UHJldmlvdXNPcHRpb24oKSB7XG5cbiAgICAgICAgaWYgKCF0aGlzLmluZGV4U2VsZWN0ZWRPcHRpb24pIHtcbiAgICAgICAgICAgIHRoaXMuaW5kZXhTZWxlY3RlZE9wdGlvbiA9IG51bGw7XG4gICAgICAgICAgICB0aGlzLmFzc2lnblZhbHVlKG51bGwpO1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uID0gdGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uIC0gMTtcbiAgICAgICAgdGhpcy5hc3NpZ25WYWx1ZSh0aGlzLm9wdGlvbkNoaWxkcmVuLmdldCh0aGlzLmluZGV4U2VsZWN0ZWRPcHRpb24pLnZhbHVlKTtcbiAgICB9XG5cbiAgICBzZWFyY2hPcHRpb25CeUZpcnN0TGV0dGVyKGxldHRlcjogc3RyaW5nKSB7XG4gICAgICAgIGNvbnN0IG1hdGNoZWRPcHRpb25zSW5kZXggPSB0aGlzLm9wdGlvbkNoaWxkcmVuXG4gICAgICAgICAgICAubWFwKChvcHRpb24sIGluZGV4KSA9PiB0aGlzLmluZGV4T2ZNYXRjaGVkT3B0aW9uKG9wdGlvbiwgaW5kZXgsIGxldHRlcikpXG4gICAgICAgICAgICAuZmlsdGVyKHRoaXMuaXNOb3ROdWxsKTtcblxuICAgICAgICBpZiAoIW1hdGNoZWRPcHRpb25zSW5kZXgubGVuZ3RoKSB7IC8vIHJlc2V0IHRoZSBzZWxlY3Rpb25cbiAgICAgICAgICAgIHRoaXMuaW5kZXhTZWxlY3RlZE9wdGlvbiA9IG51bGw7XG4gICAgICAgICAgICB0aGlzLmFzc2lnblZhbHVlKG51bGwpO1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gZmluZCB0aGUgbmV4dCBvcHRpb24gYWZ0ZXIgdGhlIGN1cnJlbnQgc2VsZWN0ZWQgb3B0aW9uLCBvciB0aGUgZmlyc3Qgb3B0aW9uXG5cbiAgICAgICAgY29uc3QgdmFsaWRPcHRpb25JbmRleCA9IG1hdGNoZWRPcHRpb25zSW5kZXguZmluZCh0aGlzLmhpZ2hlc3RBbmRDbG9zZXN0SW5kZXgpO1xuXG4gICAgICAgIHRoaXMuaW5kZXhTZWxlY3RlZE9wdGlvbiA9IGlzTmFOKHZhbGlkT3B0aW9uSW5kZXgpID8gbWF0Y2hlZE9wdGlvbnNJbmRleFswXSA6IHZhbGlkT3B0aW9uSW5kZXg7XG4gICAgICAgIHRoaXMuYXNzaWduVmFsdWUodGhpcy5vcHRpb25DaGlsZHJlbi5nZXQodGhpcy5pbmRleFNlbGVjdGVkT3B0aW9uKS52YWx1ZSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBpbmRleE9mTWF0Y2hlZE9wdGlvbiA9IChvcHRpb246IE9wdGlvbkNvbXBvbmVudCwgaW5kZXg6IG51bWJlciwgbGV0dGVyOiBzdHJpbmcpID0+IHtcbiAgICAgICAgY29uc3QgdGV4dE9wdGlvbiA9IG9wdGlvbi5nZXRDb250ZW50UmVmKCkubmF0aXZlRWxlbWVudC50ZXh0Q29udGVudC50cmltKCkudG9Mb3dlckNhc2UoKTtcbiAgICAgICAgcmV0dXJuIHRleHRPcHRpb24uc3RhcnRzV2l0aChsZXR0ZXIpID8gaW5kZXggOiBudWxsO1xuICAgICAgfVxuXG4gICAgcHJpdmF0ZSBpc05vdE51bGwgPSAoaW5kZXg6IG51bWJlciB8IG51bGwpID0+IHtcbiAgICAgICAgcmV0dXJuIGluZGV4ICE9PSBudWxsO1xuICAgIH1cblxuICAgIHByaXZhdGUgaGlnaGVzdEFuZENsb3Nlc3RJbmRleCA9IChpbmRleDogbnVtYmVyKSA9PiB7XG4gICAgICAgIGlmIChpc05hTih0aGlzLmluZGV4U2VsZWN0ZWRPcHRpb24pKSB7XG4gICAgICAgICAgICByZXR1cm4gdHJ1ZTtcbiAgICAgICAgfVxuICAgICAgICBpZiAoaW5kZXggPiB0aGlzLmluZGV4U2VsZWN0ZWRPcHRpb24pIHtcbiAgICAgICAgICAgIHJldHVybiB0cnVlO1xuICAgICAgICB9XG5cbiAgICAgICAgcmV0dXJuIGZhbHNlO1xuICAgIH1cblxuICAgIHByaXZhdGUgaGFuZGxlSW5pdGlhbFNlbGVjdGVkT3B0aW9uKCkge1xuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHsgLy8gISBBdm9pZCBFeHByZXNzaW9uIGhhcyBjaGFuZ2VkLi4uXG4gICAgICAgICAgICBpZiAoIXRoaXMudmFsdWUpIHtcbiAgICAgICAgICAgICAgdGhpcy5maW5kSW5pdGlhbFNlbGVjdGVkT3B0aW9uKCk7XG4gICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIHRoaXMuaGFuZGxlVmFsdWVDaGFuZ2UoKTtcbiAgICAgICAgICB9LCAwKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGZpbmRJbml0aWFsU2VsZWN0ZWRPcHRpb24oKSB7XG4gICAgICAgIGNvbnN0IHNlbGVjdGVkT3B0aW9uID0gdGhpcy5nZXRTZWxlY3RlZE9wdGlvbkNvbXBvbmVudCgpO1xuXG4gICAgICAgIGlmICghc2VsZWN0ZWRPcHRpb24pIHtcbiAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cbiAgICAgICAgdGhpcy52YWx1ZSA9IHNlbGVjdGVkT3B0aW9uLnZhbHVlO1xuICAgIH1cblxuICAgIHByaXZhdGUgaGFuZGxlU2VsZWN0ZWRPcHRpb25zRXZlbnQoKSB7XG4gICAgICAgIHRoaXMub3B0aW9uU2VsZWN0ZWRDaGFuZ2VMaXN0ZW5lcnMoKS5zdWJzY3JpYmUoKHNlbGVjdEV2ZW50KSA9PiB7XG4gICAgICAgICAgdGhpcy52YWx1ZSA9IHNlbGVjdEV2ZW50LnZhbHVlO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBwcml2YXRlIHVwZGF0ZVNlbGVjdFBsYWNlaG9sZGVyKCkge1xuICAgICAgICBpZiAoIXRoaXMudmFsdWUpIHtcbiAgICAgICAgICAgIHRoaXMuc2VsZWN0ZWRPcHRpb25Db250ZW50ID0gbnVsbDtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IHNlbGVjdGVkT3B0aW9uID0gdGhpcy5nZXRTZWxlY3RlZE9wdGlvbkNvbXBvbmVudCgpO1xuICAgICAgICB0aGlzLnNlbGVjdGVkT3B0aW9uQ29udGVudCA9IHNlbGVjdGVkT3B0aW9uPy5nZXRDb250ZW50UmVmKCkubmF0aXZlRWxlbWVudC5pbm5lckhUTUwgfHwgdW5kZWZpbmVkO1xuICAgIH1cblxuICAgIHByaXZhdGUgZ2V0U2VsZWN0ZWRPcHRpb25Db21wb25lbnQoKTogT3B0aW9uQ29tcG9uZW50IHtcbiAgICAgICAgcmV0dXJuIHRoaXMub3B0aW9uQ2hpbGRyZW4uZmluZCgob3B0aW9uKSA9PiBvcHRpb24uc2VsZWN0ZWQgKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIG9wdGlvblNlbGVjdGVkQ2hhbmdlTGlzdGVuZXJzKCk6IE9ic2VydmFibGU8U2VsZWN0ZWRFdmVudD4ge1xuXG4gICAgICAgIGNvbnN0IHNlbGVjdGVkQ2hhbmdlJCA9ICB0aGlzLm9wdGlvbkNoaWxkcmVuLm1hcCgob3B0aW9uKSA9PiB7XG4gICAgICAgICAgICByZXR1cm4gb3B0aW9uLnNlbGVjdGVkQ2hhbmdlLnBpcGUoXG4gICAgICAgICAgICAgICAgbWFwKCh2YWx1ZTogYW55KSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICAgICAgICAgIHZhbHVlXG4gICAgICAgICAgICAgICAgICAgIH0gYXMgU2VsZWN0ZWRFdmVudFxuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICApO1xuICAgICAgICB9KTtcblxuICAgICAgICByZXR1cm4gbWVyZ2UoLi4uc2VsZWN0ZWRDaGFuZ2UkKS5waXBlKHRha2VVbnRpbCh0aGlzLnJlc2V0TGlzdGVuZXJzJCkpO1xuICAgIH1cblxuICAgIHByaXZhdGUgY2hhbmdlU2VsZWN0ZWRPcHRpb24oKSB7XG4gICAgICAgIHRoaXMub3B0aW9uQ2hpbGRyZW4uZm9yRWFjaCgob3B0aW9uQ29tcG9uZW50LCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgb3B0aW9uQ29tcG9uZW50LnNlbGVjdGVkID0gdGhpcy52YWx1ZSA9PSB1bmRlZmluZWQgPyBmYWxzZSA6IG9wdGlvbkNvbXBvbmVudC52YWx1ZSA9PT0gdGhpcy52YWx1ZTtcblxuICAgICAgICAgICAgaWYgKG9wdGlvbkNvbXBvbmVudC5zZWxlY3RlZCkge1xuICAgICAgICAgICAgICAgIHRoaXMuaW5kZXhTZWxlY3RlZE9wdGlvbiA9IGluZGV4O1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpIHtcbiAgICAgICAgdGhpcy5yZXNldExpc3RlbmVycyQubmV4dCgpO1xuICAgICAgICB0aGlzLnJlc2V0TGlzdGVuZXJzJC5jb21wbGV0ZSgpO1xuICAgIH1cbn0iXX0=

package/fesm2015/wizishop-angular-components.mjs

@@ -1,11 +1,11 @@
 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, ViewChild, ChangeDetectionStrategy, HostBinding, ContentChild } 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 * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } 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';
@@ -20,7 +20,7 @@ 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 } from '@angular/cdk/keycodes';
+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';
@@ -357,8 +357,6 @@ class SelectOptionDirective {
     onClick() {
         this.onSelectOption();
     }
-    ngOnInit() {
-    }
     onSelectOption() {
         if (this.disabled) {
             return;
@@ -384,11 +382,11 @@ 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: "[selectOption]", 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: "[wacSelectOption]", inputs: { disabled: "disabled", value: "value", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick()" } }, 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: '[selectOption]',
+                    selector: '[wacSelectOption]',
                     providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: SelectOptionDirective }]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onClick: [{
@@ -1105,7 +1103,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }] } });
 
 class ButtonComponent {
-    constructor() {
+    constructor(type, formGroup) {
+        this.type = type;
+        this.formGroup = formGroup;
         // todo add button type (ex: for submit and check if it works with template driven forms)
         this.extraClasses = 'is-info'; // todo make a list of existing class
         this.label = '';
@@ -1179,6 +1179,9 @@ class ButtonComponent {
         if (this.disabled) {
             return;
         }
+        if (this.type === 'submit' && this.formGroup) { // Maybe there is a better way to handle submit
+            this.formGroup.onSubmit(this.formGroup.value);
+        }
         if (this.hasLoader) {
             this.isLoading = false;
             setTimeout(() => {
@@ -1206,12 +1209,22 @@ class ButtonComponent {
         }, 1000);
     }
 }
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, deps: [{ token: 'type', attribute: true }, { token: FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: ButtonComponent, selector: "wac-button", inputs: { extraClasses: "extraClasses", label: "label", icon: "icon", iconNext: "iconNext", textcolor: "textcolor", widthAuto: "widthAuto", contentHorizontalPosition: "contentHorizontalPosition", iconFontSize: "iconFontSize", hasLoader: "hasLoader", disabled: "disabled", whiteSpaceNowrap: "whiteSpaceNowrap", opacity: "opacity", animation: "animation", animationRight: "animationRight", animationText: "animationText", confirmDelete: "confirmDelete", confirmDeleteText: "confirmDeleteText", coin: "coin", tooltip: "tooltip", tooltipWidth: "tooltipWidth", noPadding: "noPadding", tooltipPosition: "tooltipPosition", tooltipOneline: "tooltipOneline", confirmDeletePosition: "confirmDeletePosition", isLoading: "isLoading" }, outputs: { click: "click", isLoadingChange: "isLoadingChange" }, viewQueries: [{ propertyName: "calculWidth", first: true, predicate: ["calculWidth"], descendants: true }, { propertyName: "calculWidthDelete", first: true, predicate: ["calculWidthDelete"], descendants: true }], ngImport: i0, template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n  (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n  (mouseenter)=\"animation ? addMaxWidth() : '';\"\n  wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n  [ngClass]=\"[\n    label === '' ? 'alone' : '',\n    coin ? 'has-coin width-auto' : '',\n    animationRight ? 'animation-right' : '',\n    animation ? 'animationText' : '',\n    isLoading ? 'is-loading' : '',\n    opacity ? 'opacity' : '',\n    disabled ? 'disabled' : '',\n    widthAuto ? 'width-auto' : '',\n    noPadding ? 'no-padding' : '',\n    whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n    !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n    confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n    ]\"\n    [ngStyle]=\"{\n      'text-align': contentHorizontalPosition\n    }\"\n>\n  <span class=\"wac-button__wrapper\" [style.color]=\"textcolor ? textcolor : ''\">\n    <i *ngIf=\"icon\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n    {{ label }}\n    <i *ngIf=\"iconNext\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n  </span>\n  <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n    <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n  </span>\n  <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n    <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n  </span>\n  <span *ngIf=\"coin\" class=\"wac-button__coin\"><i class=\"fa-solid fa-coin-front\"></i><span [innerHTML]=\"coin\"></span></span>\n  <span\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading\"\n    [style.width]=\"currentLoading + '%'\"\n  >\n    <span *ngIf=\"extraClasses.includes('is-outlined')\">\n      <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n      {{ label }}\n      <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n    </span>\n  </span>\n  <span class=\"wac-button__tooltips {{ tooltipPosition }}\" [ngClass]=\"{'oneline': tooltipOneline}\" [style.minWidth]=\"tooltipWidth\" *ngIf=\"tooltip\">\n    {{ tooltip }}\n  </span>\n</a>\n", 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-button', template: "<a\n  [class]=\"'wac-button ' + extraClasses\"\n  (click)=\"confirmDelete && waitForConfirmDelete ? addMaxWidthDelete() : '';onButtonClick($event);\"\n  (mouseleave)=\"animation ? resetMaxWidth() : '';\"\n  (mouseenter)=\"animation ? addMaxWidth() : '';\"\n  wzAutoHide (clickOutside)=\"confirmDelete && !waitForConfirmDelete ? resetMaxWidthDelete() : ''\"\n  [ngClass]=\"[\n    label === '' ? 'alone' : '',\n    coin ? 'has-coin width-auto' : '',\n    animationRight ? 'animation-right' : '',\n    animation ? 'animationText' : '',\n    isLoading ? 'is-loading' : '',\n    opacity ? 'opacity' : '',\n    disabled ? 'disabled' : '',\n    widthAuto ? 'width-auto' : '',\n    noPadding ? 'no-padding' : '',\n    whiteSpaceNowrap ? 'white-space-no-wrap' : '',\n    !waitForConfirmDelete && confirmDelete ? 'step-delete' : '',\n    confirmDelete ? 'deletePosition-' + confirmDeletePosition : ''\n    ]\"\n    [ngStyle]=\"{\n      'text-align': contentHorizontalPosition\n    }\"\n>\n  <span class=\"wac-button__wrapper\" [style.color]=\"textcolor ? textcolor : ''\">\n    <i *ngIf=\"icon\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n    {{ label }}\n    <i *ngIf=\"iconNext\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n  </span>\n  <span class=\"wac-button__animation\" [style.maxWidth]=\"buttonMaxWidth\" [style.width]=\"buttonWidth + 'px'\">\n    <span #calculWidth class=\"wac-button__animation__text\" [innerHTML]=\"animationText\"></span>\n  </span>\n  <span class=\"wac-button__confirmDelete\" [style.maxWidth]=\"buttonMaxWidthDelete\" [style.width]=\"buttonWidthDelete + 'px'\">\n    <span #calculWidthDelete class=\"wac-button__confirmDelete__text\" [innerHTML]=\"confirmDeleteText\"></span>\n  </span>\n  <span *ngIf=\"coin\" class=\"wac-button__coin\"><i class=\"fa-solid fa-coin-front\"></i><span [innerHTML]=\"coin\"></span></span>\n  <span\n    class=\"wac-button__loader\"\n    [ngClass]=\"extraClasses.includes('is-outlined') ? 'outlined' : ''\"\n    *ngIf=\"isLoading\"\n    [style.width]=\"currentLoading + '%'\"\n  >\n    <span *ngIf=\"extraClasses.includes('is-outlined')\">\n      <i *ngIf=\"icon !== ''\" [ngClass]=\"icon\" [style.font-size.px]=\"iconFontSize\"></i>\n      {{ label }}\n      <i *ngIf=\"iconNext !== ''\" [ngClass]=\"iconNext\" [style.font-size.px]=\"iconFontSize\"></i>\n    </span>\n  </span>\n  <span class=\"wac-button__tooltips {{ tooltipPosition }}\" [ngClass]=\"{'oneline': tooltipOneline}\" [style.minWidth]=\"tooltipWidth\" *ngIf=\"tooltip\">\n    {{ tooltip }}\n  </span>\n</a>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { extraClasses: [{
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Attribute,
+                        args: ['type']
+                    }] }, { type: i2.FormGroupDirective, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [FormGroupDirective]
+                    }] }];
+    }, propDecorators: { extraClasses: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -4235,10 +4248,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }] } });
 
 class ValueChangeService {
-    constructor() {
+    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;
@@ -4263,6 +4293,7 @@ class ValueChangeService {
     handleValueChange() {
         this.changeSelectedOption();
         this.updateSelectPlaceholder();
+        this.changeDetectorRef.markForCheck();
     }
     selectNextOption() {
         if (this.indexSelectedOption + 1 >= this.optionChildren.length) {
@@ -4285,6 +4316,20 @@ class ValueChangeService {
         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) {
@@ -4340,11 +4385,11 @@ class ValueChangeService {
         this.resetListeners$.complete();
     }
 }
-ValueChangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ValueChangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+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 []; } });
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 class SelectSearchTriggerComponent {
     constructor() {
@@ -4398,7 +4443,8 @@ class SelectTestComponent {
     constructor(valueChangeService) {
         this.valueChangeService = valueChangeService;
         //! Refacto improve sroll on mobile, see with Pauline
-        // todo handle multiple selection ?
+        // todo handle when user search with first letter from keyboard event
+        // 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;
@@ -4521,22 +4567,27 @@ 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;
         }
-        if (!isArrowKey) {
+        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;
         }
-        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();
+        if (isTyping && !this.customSearchTrigger) {
+            this.valueChangeService.searchOptionByFirstLetter(event.key);
             return;
         }
-        this.valueChangeService.selectPreviousOption();
     }
     writeValue(value) {
         if (isNaN(value)) {
@@ -4559,13 +4610,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: { value: "value", required: "required", disabled: "disabled", keepPanelOpen: "keepPanelOpen", openPanel: "openPanel", enableSearch: "enableSearch" }, outputs: { valueChange: "valueChange", openPanelChange: "openPanelChange" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, 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" }], encapsulation: i0.ViewEncapsulation.None });
+    ], 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 });
 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, 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 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']
@@ -4600,33 +4651,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }] } });
 
 class OptionComponent {
-    constructor(renderer, elementRef) {
+    constructor(renderer, elementRef, changeDetectorRef) {
         this.renderer = renderer;
         this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
         this.disabled = false;
         this.selectedChange = new EventEmitter();
     }
     set selected(selected) {
         this._selected = selected;
         selected ? this.renderer.addClass(this.elementRef.nativeElement, 'selected') : this.renderer.removeClass(this.elementRef.nativeElement, 'selected');
+        this.changeDetectorRef.markForCheck();
     }
     get selected() {
         return this._selected;
     }
-    ngOnInit() {
-    }
     onSelectOption() {
         if (this.disabled) {
             return;
         }
         this.selected = !this.selected;
         this.selectedChange.emit(this.value);
+        this.changeDetectorRef.markForCheck();
     }
     getValue() {
         return this.value;
     }
     setValue(value) {
         this.value = value;
+        this.changeDetectorRef.markForCheck();
     }
     isSelected() {
         return this.selected;
@@ -4639,12 +4692,12 @@ class OptionComponent {
         return this.contentRef;
     }
 }
-OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: OptionComponent, selector: "wac-option", inputs: { disabled: "disabled", value: "value", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n    (click)=\"onSelectOption()\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: OptionComponent, selector: "wac-option", inputs: { disabled: "disabled", value: "value", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0, template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n    (click)=\"onSelectOption()\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-option', encapsulation: ViewEncapsulation.None, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n    (click)=\"onSelectOption()\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <ng-content></ng-content>\n    </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { contentRef: [{
+            args: [{ selector: 'wac-option', encapsulation: ViewEncapsulation.None, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n    (click)=\"onSelectOption()\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <ng-content></ng-content>\n    </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { contentRef: [{
                 type: ViewChild,
                 args: ['contentWrapper']
             }], disabled: [{