@wizishop/angular-components 14.1.1 → 14.1.2

package/fesm2020/wizishop-angular-components.mjs

@@ -1,7 +1,7 @@
 import * as i1$2 from '@wizishop/ng-wizi-bulma';
 import { NwbAllModule, NwbFilterGroup } from '@wizishop/ng-wizi-bulma';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, EventEmitter, Directive, Output, HostListener, Injectable, NgModule, Inject, Pipe, ContentChildren, ViewChild, ChangeDetectionStrategy } 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 * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -9,7 +9,7 @@ import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/fo
 import * as i4 from 'ngx-perfect-scrollbar';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { Subject, merge, fromEvent, ReplaySubject, interval } from 'rxjs';
-import { takeUntil, debounceTime, distinctUntilChanged, tap, map, takeWhile } from 'rxjs/operators';
+import { takeUntil, debounceTime, distinctUntilChanged, tap, map, takeWhile, startWith } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/overlay';
 import { CdkTableModule } from '@angular/cdk/table';
 import { trigger, transition, style, animate, state } from '@angular/animations';
@@ -18,6 +18,7 @@ import * as i1$3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 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';
 
 class LoaderComponent {
     constructor() {
@@ -335,11 +336,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Output
             }] } });
 
-const directives$1 = [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective];
+const OPTION_SELECTION_HANDLER = new InjectionToken('OPTION_SELECTION_HANDLER');
+
+// todo create a select module and in the select-option.directive.ts
+class SelectOptionDirective {
+    constructor(contentRef) {
+        this.contentRef = contentRef;
+        this.disabled = false;
+        this.selected = false;
+        this.selectedChange = new EventEmitter();
+    }
+    onClick() {
+        this.onSelectOption();
+    }
+    ngOnInit() {
+    }
+    onSelectOption() {
+        if (this.disabled) {
+            return;
+        }
+        this.selected = !this.selected;
+        this.selectedChange.emit(this.value);
+    }
+    getValue() {
+        return this.value;
+    }
+    setValue(value) {
+        this.value = value;
+    }
+    isSelected() {
+        return this.selected;
+    }
+    setSelected(selected) {
+        this.selected = selected;
+        this.selectedChange.emit(this.value);
+    }
+    getContentRef() {
+        return this.contentRef;
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[selectOption]',
+                    providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: SelectOptionDirective }]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
+const directives$1 = [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective, SelectOptionDirective];
 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], imports: [CommonModule, FormsModule], exports: [DebounceKeyupDirective, AbstractDebounceDirective, AutoHideDirective, ZindexToggleDirective, VarDirective, KeypressEnterDirective] });
+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.ɵ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,
@@ -366,8 +427,8 @@ class CheckboxComponent {
         this.label = '';
         this.alone = false;
         this.checked = false;
-        this.hasInput = false;
-        this.inputPlaceholder = '';
+        this.hasInput = false; // todo remove from it ! That is not a part of a checkbox
+        this.inputPlaceholder = ''; // todo remove from it ! That is not a part of a checkbox
         this.id = '';
         this.whiteSpace = true;
         this.disabled = false;
@@ -1032,6 +1093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
 
 class ButtonComponent {
     constructor() {
+        // 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 = '';
         this.icon = '';
@@ -1364,7 +1426,7 @@ const inOutX = trigger('inOutXAnimation', [
     ])
 ]);
 
-class LabelComponent {
+class TagLabelComponent {
     constructor() {
         this.index = 0;
         this.label = '';
@@ -1379,11 +1441,11 @@ class LabelComponent {
         });
     }
 }
-LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: LabelComponent, selector: "wac-label", inputs: { index: "index", label: "label", deleted: "deleted" }, outputs: { onDeleteLabel: "onDeleteLabel" }, ngImport: i0, template: "<div *ngIf=\"!deleted\" [@inOutXAnimation] class=\"wac-label\">\n  <div class=\"wac-label__wrapper\">\n    {{ label }}\n    <i class=\"far fa-times\" (click)=\"deleteLabel()\"></i>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [inOutX], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LabelComponent, decorators: [{
+TagLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TagLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TagLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TagLabelComponent, selector: "wac-tag-label", inputs: { index: "index", label: "label", deleted: "deleted" }, outputs: { onDeleteLabel: "onDeleteLabel" }, ngImport: i0, template: "<div *ngIf=\"!deleted\" [@inOutXAnimation] class=\"wac-tag-label\">\n  <div class=\"wac-label__wrapper\">\n    {{ label }}\n    <i class=\"far fa-times\" (click)=\"deleteLabel()\"></i>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [inOutX], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TagLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-label', encapsulation: ViewEncapsulation.None, animations: [inOutX], template: "<div *ngIf=\"!deleted\" [@inOutXAnimation] class=\"wac-label\">\n  <div class=\"wac-label__wrapper\">\n    {{ label }}\n    <i class=\"far fa-times\" (click)=\"deleteLabel()\"></i>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'wac-tag-label', encapsulation: ViewEncapsulation.None, animations: [inOutX], template: "<div *ngIf=\"!deleted\" [@inOutXAnimation] class=\"wac-tag-label\">\n  <div class=\"wac-label__wrapper\">\n    {{ label }}\n    <i class=\"far fa-times\" (click)=\"deleteLabel()\"></i>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { index: [{
                 type: Input
             }], label: [{
@@ -2899,8 +2961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
         }] });
 
 class SelectComponent {
-    constructor(translateService) {
-        this.translateService = translateService;
+    constructor() {
         this.search = false;
         this.searchValue = '';
         this.searchValueChange = new EventEmitter();
@@ -2928,8 +2989,6 @@ class SelectComponent {
     get callToAction() {
         return this._calllToAction;
     }
-    ngOnInit() {
-    }
     onClose() {
         this.openCategories = false;
     }
@@ -2984,12 +3043,12 @@ class SelectComponent {
         this.onTouch = fn;
     }
 }
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectComponent, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectComponent, selector: "wac-select", inputs: { items: "items", placeholder: "placeholder", label: "label", maxWidthItems: "maxWidthItems", search: "search", searchValue: "searchValue", type: "type", callToAction: "callToAction", maxWidth: "maxWidth", disabled: "disabled" }, outputs: { searchValueChange: "searchValueChange", selectValue: "selectValue", clickOnCallToAction: "clickOnCallToAction" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "searchElement", first: true, predicate: ["search"], descendants: true }], ngImport: i0, template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span [innerHTML]=\"indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n      <i class=\"far fa-search\"></i>\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" (ngModelChange)=\"onSearcheValueChange()\" (keypressEnter)=\"onClickCallToAction()\"/>\n    </div>\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n    <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n        <div (click)=\"onClickCallToAction()\">\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n          ><span>{{ callToAction?.name }}</span>\n        </div>\n      </div>\n\n      <div\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n        (click)=\"onClose()\"\n        class=\"wac-select__content__item\"\n        >\n          <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n          </div>\n      </div>\n\n    </perfect-scrollbar>\n\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "directive", type: KeypressEnterDirective, selector: "[keypressEnter]", outputs: ["keypressEnter"] }, { kind: "component", type: i4.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" }, { kind: "pipe", type: SelectFiltersPipe, name: "selectFilters" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span [innerHTML]=\"indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n      <i class=\"far fa-search\"></i>\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" (ngModelChange)=\"onSearcheValueChange()\" (keypressEnter)=\"onClickCallToAction()\"/>\n    </div>\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n    <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n        <div (click)=\"onClickCallToAction()\">\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n          ><span>{{ callToAction?.name }}</span>\n        </div>\n      </div>\n\n      <div\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n        (click)=\"onClose()\"\n        class=\"wac-select__content__item\"\n        >\n          <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n          </div>\n      </div>\n\n    </perfect-scrollbar>\n\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n      <span>{{'wac.datatable.noresult' | translate}}</span>\n    </div>\n\n  </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i1$3.TranslateService }]; }, propDecorators: { items: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { items: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -3910,7 +3969,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 }]
         }] });
 
-const exportedPipes = [FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe];
+class FilterOptionsPipe {
+    transform(options, searchValue, ...args) {
+        const regexp = new RegExp(searchValue, 'i');
+        return options.filter(option => {
+            return args.some(arg => regexp.test(option[arg]));
+        });
+    }
+}
+FilterOptionsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FilterOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FilterOptionsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: FilterOptionsPipe, name: "filterOptions" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FilterOptionsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterOptions'
+                }]
+        }] });
+
+const exportedPipes = [FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FilterOptionsPipe];
 const pipes = [
     SelectFiltersPipe,
     AreAllOptionsSelectedPipe
@@ -3918,8 +3994,8 @@ const pipes = [
 class SharedPipes {
 }
 SharedPipes.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SharedPipes, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedPipes.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: SharedPipes, declarations: [FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, SelectFiltersPipe,
-        AreAllOptionsSelectedPipe], imports: [CommonModule, FormsModule], exports: [FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, SelectFiltersPipe,
+SharedPipes.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: SharedPipes, declarations: [FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FilterOptionsPipe, SelectFiltersPipe,
+        AreAllOptionsSelectedPipe], imports: [CommonModule, FormsModule], exports: [FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FilterOptionsPipe, SelectFiltersPipe,
         AreAllOptionsSelectedPipe] });
 SharedPipes.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SharedPipes, imports: [CommonModule, FormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SharedPipes, decorators: [{
@@ -3968,6 +4044,448 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }] } });
 
+class ValueChangeService {
+    constructor() {
+        this.valueChange$ = new Subject();
+        this.indexSelectedOption = null;
+        this.resetListeners$ = new Subject();
+    }
+    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();
+    }
+    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);
+    }
+    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((selecteEvent) => {
+            this.value = selecteEvent.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: [], 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 []; } });
+
+class SelectSearchTriggerComponent {
+    constructor() {
+        this.searchValue = '';
+        this.searchValueChange = new EventEmitter();
+        this.searchInputKeyEnterPressed = new EventEmitter();
+    }
+    onSearchValueChange() {
+        this.searchValueChange.emit(this.searchValue);
+    }
+    onKeypressEnter() {
+        this.searchInputKeyEnterPressed.emit();
+    }
+    setFocus() {
+        setTimeout(() => {
+            this.searchInput.nativeElement.focus();
+        }, 0);
+    }
+}
+SelectSearchTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectSearchTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectSearchTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectSearchTriggerComponent, selector: "wac-select-search-trigger", inputs: { searchValue: "searchValue" }, outputs: { searchValueChange: "searchValueChange", searchInputKeyEnterPressed: "searchInputKeyEnterPressed" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div class=\"wac-select-seacrh-trigger\">\n  <i class=\"far fa-search\"></i>\n  <input #searchInput type=\"text\" (click)=\"$event.stopPropagation()\" [(ngModel)]=\"searchValue\" (ngModelChange)=\"onSearchValueChange()\" (keypressEnter)=\"onKeypressEnter()\"/>\n</div>", dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: KeypressEnterDirective, selector: "[keypressEnter]", outputs: ["keypressEnter"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectSearchTriggerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-select-search-trigger', encapsulation: ViewEncapsulation.None, template: "<div class=\"wac-select-seacrh-trigger\">\n  <i class=\"far fa-search\"></i>\n  <input #searchInput type=\"text\" (click)=\"$event.stopPropagation()\" [(ngModel)]=\"searchValue\" (ngModelChange)=\"onSearchValueChange()\" (keypressEnter)=\"onKeypressEnter()\"/>\n</div>" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { searchValue: [{
+                type: Input
+            }], searchValueChange: [{
+                type: Output
+            }], searchInputKeyEnterPressed: [{
+                type: Output
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }] } });
+
+class LabelComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: LabelComponent, selector: "wac-label", host: { classAttribute: "wac-label" }, ngImport: i0, template: "<ng-content></ng-content>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-label', host: {
+                        'class': 'wac-label'
+                    }, template: "<ng-content></ng-content>" }]
+        }], ctorParameters: function () { return []; } });
+
+class SelectTestComponent {
+    constructor(valueChangeService) {
+        this.valueChangeService = valueChangeService;
+        //! Refacto improve sroll on mobile, see with Pauline
+        // todo handle multiple selection ?
+        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;
+    }
+    /** Whether the component is required. */
+    get required() {
+        return this._required ?? false;
+    }
+    set required(value) {
+        this._required = value;
+    }
+    get selectedOptionContent() {
+        return this.valueChangeService.selectedOptionContent;
+    }
+    ;
+    set keepPanelOpen(keepPanelOpen) {
+        this.openPanel = keepPanelOpen;
+        this._keepPanelOpen = keepPanelOpen;
+    }
+    get keepPanelOpen() {
+        return this._keepPanelOpen;
+    }
+    set openPanel(openPanel) {
+        const wasOpen = this._openPanel;
+        this._openPanel = this.keepPanelOpen || openPanel;
+        if (openPanel) {
+            this.customSearchTrigger?.setFocus();
+        }
+        if (wasOpen) {
+            this.onTouch(this.value);
+        }
+    }
+    get openPanel() {
+        return this._openPanel;
+    }
+    ngOnInit() {
+        this.handleValueChange();
+    }
+    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);
+            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);
+    }
+    onClosePanel() {
+        this.openPanel = false;
+        this.openPanelChange.emit(this.openPanel);
+    }
+    /** Handles all keydown events on the select. */
+    _handleKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        this.openPanel ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);
+    }
+    /** Handles keyboard events while the select is closed. */
+    _handleClosedKeydown(event) {
+        const keyCode = event.keyCode;
+        const isArrowKey = keyCode === DOWN_ARROW ||
+            keyCode === UP_ARROW ||
+            keyCode === LEFT_ARROW ||
+            keyCode === RIGHT_ARROW;
+        const isOpenKey = keyCode === ENTER || keyCode === SPACE;
+        // 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;
+        }
+        this.valueChangeService.selectPreviousOption();
+    }
+    /** Handles keyboard events when the selected is open. */
+    _handleOpenKeydown(event) {
+        const keyCode = event.keyCode;
+        const isArrowKey = keyCode === DOWN_ARROW ||
+            keyCode === UP_ARROW ||
+            keyCode === LEFT_ARROW ||
+            keyCode === RIGHT_ARROW;
+        const isEscapeKey = keyCode === ESCAPE || keyCode === ENTER || keyCode === SPACE;
+        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) {
+            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;
+        }
+        this.valueChangeService.selectPreviousOption();
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    ngOnDestroy() {
+        this.isDestroyed$.next();
+        this.isDestroyed$.complete();
+    }
+}
+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: { "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.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 });
+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>" }]
+        }], 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: [{
+                type: Input
+            }], openPanelChange: [{
+                type: Output
+            }], enableSearch: [{
+                type: Input
+            }], _handleKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class OptionComponent {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        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');
+    }
+    get selected() {
+        return this._selected;
+    }
+    ngOnInit() {
+    }
+    onSelectOption() {
+        if (this.disabled) {
+            return;
+        }
+        this.selected = !this.selected;
+        this.selectedChange.emit(this.value);
+    }
+    getValue() {
+        return this.value;
+    }
+    setValue(value) {
+        this.value = value;
+    }
+    isSelected() {
+        return this.selected;
+    }
+    setSelected(selected) {
+        this.selected = selected;
+        this.selectedChange.emit(this.value);
+    }
+    getContentRef() {
+        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 });
+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: [{
+                type: ViewChild,
+                args: ['contentWrapper']
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
+class OptionCallToActionComponent {
+    constructor() { }
+}
+OptionCallToActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionCallToActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OptionCallToActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: OptionCallToActionComponent, selector: "wac-option-call-to-action", ngImport: i0, template: "\n<div class=\"wac-option-call-to-action\">\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionCallToActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-option-call-to-action', template: "\n<div class=\"wac-option-call-to-action\">\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class PlaceholderComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+PlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: PlaceholderComponent, selector: "wac-placeholder", host: { classAttribute: "wac-placeholder" }, ngImport: i0, template: "<ng-content></ng-content>" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: PlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-placeholder', host: {
+                        'class': 'wac-placeholder'
+                    }, template: "<ng-content></ng-content>" }]
+        }], ctorParameters: function () { return []; } });
+
 const components = [
     TagComponent,
     TabComponent,
@@ -3982,7 +4500,7 @@ const components = [
     LogoComponent,
     RadioComponent,
     StateComponent,
-    LabelComponent,
+    TagLabelComponent,
     CalendarComponent,
     WzEditInPlaceComponent,
     AlertComponent,
@@ -4010,7 +4528,13 @@ const components = [
     SnackbarComponent,
     SearchComponent,
     SelectedListComponent,
-    OptionalDisableContainerComponent
+    OptionalDisableContainerComponent,
+    SelectTestComponent,
+    OptionComponent,
+    OptionCallToActionComponent,
+    PlaceholderComponent,
+    LabelComponent,
+    SelectSearchTriggerComponent,
 ];
 const exportsFromModule = [
     PaginationComponent,
@@ -4043,7 +4567,7 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         LogoComponent,
         RadioComponent,
         StateComponent,
-        LabelComponent,
+        TagLabelComponent,
         CalendarComponent,
         WzEditInPlaceComponent,
         AlertComponent,
@@ -4071,7 +4595,13 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         SnackbarComponent,
         SearchComponent,
         SelectedListComponent,
-        OptionalDisableContainerComponent], imports: [CommonModule,
+        OptionalDisableContainerComponent,
+        SelectTestComponent,
+        OptionComponent,
+        OptionCallToActionComponent,
+        PlaceholderComponent,
+        LabelComponent,
+        SelectSearchTriggerComponent], imports: [CommonModule,
         FormsModule,
         NwbAllModule, i1$3.TranslateModule, ReactiveFormsModule,
         SharedDirectives,
@@ -4102,7 +4632,7 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         LogoComponent,
         RadioComponent,
         StateComponent,
-        LabelComponent,
+        TagLabelComponent,
         CalendarComponent,
         WzEditInPlaceComponent,
         AlertComponent,
@@ -4130,7 +4660,13 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         SnackbarComponent,
         SearchComponent,
         SelectedListComponent,
-        OptionalDisableContainerComponent, PaginationComponent,
+        OptionalDisableContainerComponent,
+        SelectTestComponent,
+        OptionComponent,
+        OptionCallToActionComponent,
+        PlaceholderComponent,
+        LabelComponent,
+        SelectSearchTriggerComponent, PaginationComponent,
         TableComponent,
         TableColumn,
         CheckBoxRow,
@@ -4239,5 +4775,5 @@ class TableFiltersGroup extends NwbFilterGroup {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDebounceDirective, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, ButtonComponent, CalendarComponent, CheckBoxRow, CheckboxComponent, DebounceKeyupDirective, DeleteComponent, DropdownComponent, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OptionalDisableContainerComponent, PaginationComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectFiltersPipe, SelectInTextComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TextAreaComponent, TextComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WzEditInPlaceComponent, ZindexToggleDirective };
+export { AbstractDebounceDirective, AlertComponent, AlertPopupComponent, AlertPopupModule, AlertPopupService, AreAllOptionsSelectedPipe, AutoHideDirective, BackComponent, BlockComponent, ButtonComponent, CalendarComponent, CheckBoxRow, CheckboxComponent, DebounceKeyupDirective, DeleteComponent, DropdownComponent, FilterOptionsPipe, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, 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, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WzEditInPlaceComponent, ZindexToggleDirective };
 //# sourceMappingURL=wizishop-angular-components.mjs.map