@wizishop/angular-components 14.1.1 → 14.1.3

package/fesm2015/wizishop-angular-components.mjs

@@ -1,23 +1,32 @@
 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';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i4 from 'ngx-perfect-scrollbar';
+import * as i4$1 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';
 import { TagInputModule } from 'ngx-chips';
 import * as i1$3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+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 * as i2$2 from 'ngx-scrollbar';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import * as i3 from 'ngx-scrollbar/reached-event';
+import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
+import * as i2$3 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 
 class LoaderComponent {
     constructor() {
@@ -335,11 +344,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 +435,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;
@@ -1037,9 +1106,11 @@ 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 = '';
+        this.textcolor = null;
         this.widthAuto = false;
         this.contentHorizontalPosition = 'center';
         this.iconFontSize = 12;
@@ -1053,7 +1124,11 @@ class ButtonComponent {
         this.animationText = '';
         this.confirmDelete = false;
         this.confirmDeleteText = '';
+        this.noPadding = false;
+        this.tooltipPosition = 'top-center';
+        this.tooltipOneline = false;
         this.confirmDeletePosition = 'right';
+        // eslint-disable-next-line @angular-eslint/no-output-native
         this.click = new EventEmitter();
         this.isLoadingChange = new EventEmitter();
         this._isLoading = false;
@@ -1132,10 +1207,10 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ButtonComponent, deps: [], 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", widthAuto: "widthAuto", contentHorizontalPosition: "contentHorizontalPosition", iconFontSize: "iconFontSize", hasLoader: "hasLoader", disabled: "disabled", whiteSpaceNowrap: "whiteSpaceNowrap", opacity: "opacity", animation: "animation", animationRight: "animationRight", animationText: "animationText", confirmDelete: "confirmDelete", confirmDeleteText: "confirmDeleteText", 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    animationRight ? 'animation-right' : '',\n    animation ? 'animationText' : '',\n    isLoading ? 'is-loading' : '',\n    opacity ? 'opacity' : '',\n    disabled ? 'disabled' : '',\n    widthAuto ? 'width-auto' : '',\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\">\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\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\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"] }] });
+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    animationRight ? 'animation-right' : '',\n    animation ? 'animationText' : '',\n    isLoading ? 'is-loading' : '',\n    opacity ? 'opacity' : '',\n    disabled ? 'disabled' : '',\n    widthAuto ? 'width-auto' : '',\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\">\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\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\n  </span>\n</a>\n" }]
+            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: [{
                 type: Input
             }], label: [{
@@ -1144,6 +1219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], iconNext: [{
                 type: Input
+            }], textcolor: [{
+                type: Input
             }], widthAuto: [{
                 type: Input
             }], contentHorizontalPosition: [{
@@ -1168,6 +1245,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], confirmDeleteText: [{
                 type: Input
+            }], coin: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], tooltipWidth: [{
+                type: Input
+            }], noPadding: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
+            }], tooltipOneline: [{
+                type: Input
             }], confirmDeletePosition: [{
                 type: Input
             }], click: [{
@@ -1369,7 +1458,7 @@ const inOutX = trigger('inOutXAnimation', [
     ])
 ]);
 
-class LabelComponent {
+class TagLabelComponent {
     constructor() {
         this.index = 0;
         this.label = '';
@@ -1384,11 +1473,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: [{
@@ -1862,11 +1951,12 @@ class TextAreaComponent {
         this.label = '';
         this.value = '';
         this.placeholder = '';
-        this.textInfo = null;
-        this.textError = null;
+        this.textInfo = '';
+        this.textError = '';
         this.size = null;
         this.min = null;
         this.max = null;
+        this.dynamicSize = false;
         this.progressBar = false;
         this.disabled = false;
         this.id = 'wac-textarea__' +
@@ -1899,10 +1989,10 @@ class TextAreaComponent {
     }
 }
 TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TextAreaComponent, selector: "wac-text-area", inputs: { label: "label", value: "value", placeholder: "placeholder", textInfo: "textInfo", textError: "textError", size: "size", min: "min", max: "max", progressBar: "progressBar" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], ngImport: i0, template: "<div class=\"field wac-text-area\">\n  <div class=\"field-label is-normal has-text-left\">\n    <label class=\"label has-text-weight-normal\" [innerHTML]=\"label\" [for]=\"id\"></label>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p class=\"control\" [ngClass]=\"{ 'has-icons-right': textError }\">\n        <textarea\n          class=\"textarea\"\n          [id]=\"id\"\n          [ngClass]=\"{ 'is-danger': textError, 'has-help-text': textInfo != '' || size }\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n        ></textarea>\n\n        <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '')\"\n          class=\"is-size-7 wac-text-area__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n        <span *ngIf=\"textError\" class=\"is-size-7 wac-text-area__error has-text-danger\" [innerHtml]=\"textError\"></span>\n        <span\n          *ngIf=\"size && !progressBar\"\n          class=\"is-size-7 wac-text-area__size\"\n          [ngClass]=\"value && value.length > size ? 'has-text-danger' : ''\"\n          >{{ value ? value.length : 0 }}/{{ size }}</span\n        >\n      </p>\n      <wac-progress-bar *ngIf=\"progressBar && value\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: "component", type: ProgressBarComponent, selector: "wac-progress-bar", inputs: ["valueLength", "min", "max"] }] });
+TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TextAreaComponent, selector: "wac-text-area", inputs: { label: "label", value: "value", placeholder: "placeholder", textInfo: "textInfo", textError: "textError", error: "error", success: "success", size: "size", min: "min", max: "max", dynamicSize: "dynamicSize", progressBar: "progressBar", disabled: "disabled", maxlength: "maxlength", minlength: "minlength" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], ngImport: i0, template: "<div class=\"field wac-text-area\" [ngClass]=\"{'dynamic': dynamicSize}\">\n  <div class=\"field-label is-normal has-text-left\">\n    <label class=\"label has-text-weight-normal\" [innerHTML]=\"label\" [for]=\"id\"></label>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p class=\"control\" [ngClass]=\"{ 'has-icons-right': (textError || error || success) && !disabled }\">\n        <textarea\n          class=\"textarea\"\n          [id]=\"id\"\n          [ngClass]=\"{ 'is-danger': (textError || error) && !disabled, 'is-empty': value === '', 'is-success': success && !disabled, 'has-help-text': textInfo !== '' || size }\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          [autosize]=\"dynamicSize\"\n          [onlyGrow]=\"true\"\n          [maxlength]=\"maxlength ? maxlength : 524288\"\n          [minlength]=\"minlength ? minlength : 0\"\n        ></textarea>\n        <!-- Icon error -->\n        <span *ngIf=\"(textError || error) && !disabled\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n        <!-- Icon success -->\n        <span *ngIf=\"success && !disabled\" class=\"icon is-small is-right\">\n          <i class=\"fas fa-check has-text-success\"></i>\n        </span>\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '')\"\n          class=\"is-size-7 wac-text-area__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n        <span *ngIf=\"textError\" class=\"is-size-7 wac-text-area__error has-text-danger\" [innerHtml]=\"textError\"></span>\n        <span\n          *ngIf=\"size && !progressBar\"\n          class=\"is-size-7 wac-text-area__size\"\n          [ngClass]=\"value && value.length > size ? 'has-text-danger' : ''\"\n          ><strong>{{ value ? value.length : 0 }}</strong> / {{ size }}</span\n        >\n      </p>\n      <wac-progress-bar *ngIf=\"progressBar && value\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ProgressBarComponent, selector: "wac-progress-bar", inputs: ["valueLength", "min", "max"] }, { kind: "directive", type: i4.AutosizeDirective, selector: "[autosize]", inputs: ["minRows", "autosize", "maxRows", "onlyGrow", "useImportant"], outputs: ["resized"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-text-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], template: "<div class=\"field wac-text-area\">\n  <div class=\"field-label is-normal has-text-left\">\n    <label class=\"label has-text-weight-normal\" [innerHTML]=\"label\" [for]=\"id\"></label>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p class=\"control\" [ngClass]=\"{ 'has-icons-right': textError }\">\n        <textarea\n          class=\"textarea\"\n          [id]=\"id\"\n          [ngClass]=\"{ 'is-danger': textError, 'has-help-text': textInfo != '' || size }\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n        ></textarea>\n\n        <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '')\"\n          class=\"is-size-7 wac-text-area__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n        <span *ngIf=\"textError\" class=\"is-size-7 wac-text-area__error has-text-danger\" [innerHtml]=\"textError\"></span>\n        <span\n          *ngIf=\"size && !progressBar\"\n          class=\"is-size-7 wac-text-area__size\"\n          [ngClass]=\"value && value.length > size ? 'has-text-danger' : ''\"\n          >{{ value ? value.length : 0 }}/{{ size }}</span\n        >\n      </p>\n      <wac-progress-bar *ngIf=\"progressBar && value\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'wac-text-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], template: "<div class=\"field wac-text-area\" [ngClass]=\"{'dynamic': dynamicSize}\">\n  <div class=\"field-label is-normal has-text-left\">\n    <label class=\"label has-text-weight-normal\" [innerHTML]=\"label\" [for]=\"id\"></label>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p class=\"control\" [ngClass]=\"{ 'has-icons-right': (textError || error || success) && !disabled }\">\n        <textarea\n          class=\"textarea\"\n          [id]=\"id\"\n          [ngClass]=\"{ 'is-danger': (textError || error) && !disabled, 'is-empty': value === '', 'is-success': success && !disabled, 'has-help-text': textInfo !== '' || size }\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          [autosize]=\"dynamicSize\"\n          [onlyGrow]=\"true\"\n          [maxlength]=\"maxlength ? maxlength : 524288\"\n          [minlength]=\"minlength ? minlength : 0\"\n        ></textarea>\n        <!-- Icon error -->\n        <span *ngIf=\"(textError || error) && !disabled\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n        <!-- Icon success -->\n        <span *ngIf=\"success && !disabled\" class=\"icon is-small is-right\">\n          <i class=\"fas fa-check has-text-success\"></i>\n        </span>\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '')\"\n          class=\"is-size-7 wac-text-area__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n        <span *ngIf=\"textError\" class=\"is-size-7 wac-text-area__error has-text-danger\" [innerHtml]=\"textError\"></span>\n        <span\n          *ngIf=\"size && !progressBar\"\n          class=\"is-size-7 wac-text-area__size\"\n          [ngClass]=\"value && value.length > size ? 'has-text-danger' : ''\"\n          ><strong>{{ value ? value.length : 0 }}</strong> / {{ size }}</span\n        >\n      </p>\n      <wac-progress-bar *ngIf=\"progressBar && value\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -1913,28 +2003,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], textError: [{
                 type: Input
+            }], error: [{
+                type: Input
+            }], success: [{
+                type: Input
             }], size: [{
                 type: Input
             }], min: [{
                 type: Input
             }], max: [{
                 type: Input
+            }], dynamicSize: [{
+                type: Input
             }], progressBar: [{
                 type: Input
+            }], disabled: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
             }] } });
 
 class H1Component {
     constructor() {
+        this.annotation = '';
         this.withImg = false;
+        this.center = false;
     }
-    ngOnInit() { }
 }
 H1Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: H1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H1Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: H1Component, selector: "wac-h1", inputs: { withImg: "withImg" }, ngImport: i0, template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg}\"><ng-content></ng-content></h1>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+H1Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: H1Component, selector: "wac-h1", inputs: { annotation: "annotation", withImg: "withImg", center: "center" }, ngImport: i0, template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\"><ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small></h1>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: H1Component, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-h1', template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg}\"><ng-content></ng-content></h1>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { withImg: [{
+            args: [{ selector: 'wac-h1', template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\"><ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small></h1>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { annotation: [{
+                type: Input
+            }], withImg: [{
+                type: Input
+            }], center: [{
                 type: Input
             }] } });
 
@@ -1967,20 +2074,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
 class HeaderPageComponent {
     constructor() {
         this.withImg = false;
+        this.center = false;
     }
-    ngOnInit() { }
 }
 HeaderPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: HeaderPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeaderPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: HeaderPageComponent, selector: "wac-header-page", inputs: { title: "title", linkBack: "linkBack", withImg: "withImg" }, ngImport: i0, template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\">\n      <div class=\"wac-header-page__maxWidth__top__left\">\n        <!-- TODO Hard to use when only want a button and not a router link -->\n        <a *ngIf=\"linkBack\" [routerLink]=\"linkBack\"><i class=\"fas fa-chevron-left\"></i></a>\n        <wac-h1 [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: H1Component, selector: "wac-h1", inputs: ["withImg"] }] });
+HeaderPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: HeaderPageComponent, selector: "wac-header-page", inputs: { title: "title", linkBack: "linkBack", withImg: "withImg", center: "center" }, ngImport: i0, template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\n        <!-- TODO Hard to use when only want a button and not a router link -->\n        <div class=\"wac-header-page__maxWidth__top__left__nowrap\">\n          <a *ngIf=\"linkBack\" [routerLink]=\"linkBack\"><i class=\"fas fa-chevron-left\"></i></a>\n          <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n        </div>\n        <p class=\"subtitle\"><ng-content select=\"[role=subtitle]\"></ng-content></p>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "component", type: H1Component, selector: "wac-h1", inputs: ["annotation", "withImg", "center"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: HeaderPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-header-page', template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\">\n      <div class=\"wac-header-page__maxWidth__top__left\">\n        <!-- TODO Hard to use when only want a button and not a router link -->\n        <a *ngIf=\"linkBack\" [routerLink]=\"linkBack\"><i class=\"fas fa-chevron-left\"></i></a>\n        <wac-h1 [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'wac-header-page', template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\n        <!-- TODO Hard to use when only want a button and not a router link -->\n        <div class=\"wac-header-page__maxWidth__top__left__nowrap\">\n          <a *ngIf=\"linkBack\" [routerLink]=\"linkBack\"><i class=\"fas fa-chevron-left\"></i></a>\n          <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n        </div>\n        <p class=\"subtitle\"><ng-content select=\"[role=subtitle]\"></ng-content></p>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }], linkBack: [{
                 type: Input
             }], withImg: [{
                 type: Input
+            }], center: [{
+                type: Input
             }] } });
 
 class TooltipComponent {
@@ -2042,6 +2151,7 @@ class InputComponent {
         this.disabled = false;
         this.indication = ''; // todo should be handle with ng-content
         this.success = false;
+        this.error = false;
         this.indicationLeft = false;
         this.keypressEnter = new EventEmitter();
         this.blurred = new EventEmitter();
@@ -2099,10 +2209,10 @@ class InputComponent {
     }
 }
 InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: InputComponent, selector: "wac-input", inputs: { label: "label", value: "value", type: "type", placeholder: "placeholder", textInfo: "textInfo", textError: "textError", size: "size", isNumber: "isNumber", withoutBlock: "withoutBlock", icon: "icon", big: "big", medium: "medium", boldLabel: "boldLabel", min: "min", max: "max", disableMargin: "disableMargin", textPrepend: "textPrepend", textAppend: "textAppend", progressBar: "progressBar", extraClasses: "extraClasses", keyPreventDefault: "keyPreventDefault", showTooltip: "showTooltip", textTooltip: "textTooltip", iconTooltip: "iconTooltip", urlTooltip: "urlTooltip", linkTooltip: "linkTooltip", padding: "padding", disabled: "disabled", indication: "indication", success: "success", indicationLeft: "indicationLeft" }, outputs: { keypressEnter: "keypressEnter", blurred: "blurred" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }], ngImport: i0, template: "<div\n  class=\"field wac-input\"\n  [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n  <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n    <label\n      [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n      [innerHTML]=\"label\"\n      [for]=\"id\"\n    ></label>\n    <wac-tooltip\n      *ngIf=\"showTooltip\"\n      [tooltipIcon]=\"iconTooltip\"\n      [tooltipText]=\"textTooltip\"\n      [tooltipLink]=\"linkTooltip\"\n      [tooltipUrl]=\"urlTooltip\"\n    ></wac-tooltip>\n    <!-- Size -->\n    <span *ngIf=\"value && size && !progressBar\" class=\"is-size-7 wac-input__size\">\n      <strong>{{ value.toString().length }}</strong> / {{ size }}\n    </span>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p\n        class=\"control\"\n        [ngClass]=\"{ 'has-icons-right': textError || success, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n      >\n        <!-- Text Prepend -->\n        <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n          <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n          <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n            <i [class]=\"icon\"></i>\n          </span>\n        </span>\n\n        <!-- Input -->\n        <input\n          [class]=\"'input ' + extraClasses\"\n          [id]=\"id\"\n          [ngClass]=\"{\n            'is-danger': textError,\n            'is-large': big,\n            'is-number': isNumber,\n            'remove-margin': disableMargin,\n            'text-append': textAppend\n          }\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          (focusout)=\"onFocusOut()\"\n          [min]=\"min\"\n          [max]=\"max\"\n          (keypress)=\"keyPress($event)\"\n        />\n\n        <!-- Indication at the end of the input -->\n        <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n          <span [innerHTML]=\"indication\"></span>\n        </span>\n\n        <!-- Text Append -->\n        <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n          <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n          <!-- error if text append not empty -->\n          <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n            <i class=\"fal fa-times has-text-danger\"></i>\n          </span>\n        </span>\n\n        <!-- Icon Left -->\n        <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n          <i [class]=\"icon\"></i>\n        </span>\n\n        <!-- Icon error if textAppend empty -->\n        <span *ngIf=\"textError && !textAppend && !indicationLeft\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n\n        <!-- Icon success -->\n        <span *ngIf=\"success\" class=\"icon is-small is-right\">\n          <i class=\"fas fa-check has-text-success\"></i>\n        </span>\n\n        <!-- Text Info -->\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n          class=\"is-size-7 wac-input__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n\n        <!-- Text Error -->\n        <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n      </p>\n\n      <!-- Progress Bar -->\n      <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: "component", type: TooltipComponent, selector: "wac-tooltip", inputs: ["tooltipIcon", "tooltipText", "tooltipLink", "tooltipUrl"] }, { kind: "component", type: ProgressBarComponent, selector: "wac-progress-bar", inputs: ["valueLength", "min", "max"] }] });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: InputComponent, selector: "wac-input", inputs: { label: "label", value: "value", type: "type", placeholder: "placeholder", textInfo: "textInfo", textError: "textError", size: "size", isNumber: "isNumber", withoutBlock: "withoutBlock", icon: "icon", big: "big", medium: "medium", boldLabel: "boldLabel", min: "min", max: "max", disableMargin: "disableMargin", textPrepend: "textPrepend", textAppend: "textAppend", progressBar: "progressBar", extraClasses: "extraClasses", keyPreventDefault: "keyPreventDefault", showTooltip: "showTooltip", textTooltip: "textTooltip", iconTooltip: "iconTooltip", urlTooltip: "urlTooltip", linkTooltip: "linkTooltip", padding: "padding", disabled: "disabled", indication: "indication", success: "success", error: "error", maxlength: "maxlength", minlength: "minlength", indicationLeft: "indicationLeft" }, outputs: { keypressEnter: "keypressEnter", blurred: "blurred" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }], ngImport: i0, template: "<div\n  class=\"field wac-input\"\n  [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n  <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n    <label\n      [ngClass]=\"[boldLabel === 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '', size && !progressBar ? 'has-padding-right-mobile' : '']\"\n      [innerHTML]=\"label\"\n      [for]=\"id\"\n    ></label>\n    <wac-tooltip\n      *ngIf=\"showTooltip\"\n      [tooltipIcon]=\"iconTooltip\"\n      [tooltipText]=\"textTooltip\"\n      [tooltipLink]=\"linkTooltip\"\n      [tooltipUrl]=\"urlTooltip\"\n    ></wac-tooltip>\n    <!-- Size -->\n    <span *ngIf=\"size && !progressBar\" class=\"is-size-7 wac-input__size\">\n      <strong>{{ !value ? 0 : value.toString().length }}</strong> / {{ size }}\n    </span>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p\n        class=\"control\"\n        [ngClass]=\"{ 'has-icons-right': textError || success || error, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n      >\n        <!-- Text Prepend -->\n        <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n          <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n          <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n            <i [class]=\"icon\"></i>\n          </span>\n        </span>\n\n        <!-- Input -->\n        <input\n          [class]=\"'input ' + extraClasses\"\n          [id]=\"id\"\n          [ngClass]=\"{\n            'is-danger': (textError || error) && !disabled,\n            'is-empty': value === '',\n            'is-large': big,\n            'is-number': isNumber,\n            'remove-margin': disableMargin,\n            'text-append': textAppend\n          }\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          (focusout)=\"onFocusOut()\"\n          [min]=\"min\"\n          [max]=\"max\"\n          [maxlength]=\"maxlength ? maxlength : 524288\"\n          [minlength]=\"minlength ? minlength : 0\"\n          (keypress)=\"keyPress($event)\"\n        />\n\n        <!-- Indication at the end of the input -->\n        <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n          <span [innerHTML]=\"indication\"></span>\n        </span>\n\n        <!-- Text Append -->\n        <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n          <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n          <!-- error if text append not empty -->\n          <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n            <i class=\"fal fa-times has-text-danger\"></i>\n          </span>\n        </span>\n\n        <!-- Icon Left -->\n        <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n          <i [class]=\"icon\"></i>\n        </span>\n\n        <!-- Icon error if textAppend empty -->\n        <span *ngIf=\"(textError || error) && !textAppend && !indicationLeft  && !disabled\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n\n        <!-- Icon success -->\n        <span *ngIf=\"success && !disabled\" class=\"icon is-small is-right\">\n          <i class=\"fas fa-check has-text-success\"></i>\n        </span>\n\n        <!-- Text Info -->\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n          class=\"is-size-7 wac-input__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n\n        <!-- Text Error -->\n        <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n      </p>\n\n      <!-- Progress Bar -->\n      <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TooltipComponent, selector: "wac-tooltip", inputs: ["tooltipIcon", "tooltipText", "tooltipLink", "tooltipUrl"] }, { kind: "component", type: ProgressBarComponent, selector: "wac-progress-bar", inputs: ["valueLength", "min", "max"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }], template: "<div\n  class=\"field wac-input\"\n  [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n  <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n    <label\n      [ngClass]=\"[boldLabel == 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '']\"\n      [innerHTML]=\"label\"\n      [for]=\"id\"\n    ></label>\n    <wac-tooltip\n      *ngIf=\"showTooltip\"\n      [tooltipIcon]=\"iconTooltip\"\n      [tooltipText]=\"textTooltip\"\n      [tooltipLink]=\"linkTooltip\"\n      [tooltipUrl]=\"urlTooltip\"\n    ></wac-tooltip>\n    <!-- Size -->\n    <span *ngIf=\"value && size && !progressBar\" class=\"is-size-7 wac-input__size\">\n      <strong>{{ value.toString().length }}</strong> / {{ size }}\n    </span>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p\n        class=\"control\"\n        [ngClass]=\"{ 'has-icons-right': textError || success, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n      >\n        <!-- Text Prepend -->\n        <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n          <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n          <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n            <i [class]=\"icon\"></i>\n          </span>\n        </span>\n\n        <!-- Input -->\n        <input\n          [class]=\"'input ' + extraClasses\"\n          [id]=\"id\"\n          [ngClass]=\"{\n            'is-danger': textError,\n            'is-large': big,\n            'is-number': isNumber,\n            'remove-margin': disableMargin,\n            'text-append': textAppend\n          }\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          (focusout)=\"onFocusOut()\"\n          [min]=\"min\"\n          [max]=\"max\"\n          (keypress)=\"keyPress($event)\"\n        />\n\n        <!-- Indication at the end of the input -->\n        <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n          <span [innerHTML]=\"indication\"></span>\n        </span>\n\n        <!-- Text Append -->\n        <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n          <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n          <!-- error if text append not empty -->\n          <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n            <i class=\"fal fa-times has-text-danger\"></i>\n          </span>\n        </span>\n\n        <!-- Icon Left -->\n        <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n          <i [class]=\"icon\"></i>\n        </span>\n\n        <!-- Icon error if textAppend empty -->\n        <span *ngIf=\"textError && !textAppend && !indicationLeft\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n\n        <!-- Icon success -->\n        <span *ngIf=\"success\" class=\"icon is-small is-right\">\n          <i class=\"fas fa-check has-text-success\"></i>\n        </span>\n\n        <!-- Text Info -->\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n          class=\"is-size-7 wac-input__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n\n        <!-- Text Error -->\n        <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n      </p>\n\n      <!-- Progress Bar -->\n      <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'wac-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputComponent, multi: true }], template: "<div\n  class=\"field wac-input\"\n  [ngClass]=\"{ 'has-no-block': withoutBlock, 'is-big': big, 'is-medium': medium, 'with-padding': padding, 'indication-left': indicationLeft, 'with-progress-bar': progressBar }\"\n>\n  <div class=\"field-label is-normal has-text-left\" *ngIf=\"!withoutBlock\">\n    <label\n      [ngClass]=\"[boldLabel === 'true' ? 'label has-text-weight-bold' : 'label has-text-weight-normal', showTooltip ? 'label-inline' : '', size && !progressBar ? 'has-padding-right-mobile' : '']\"\n      [innerHTML]=\"label\"\n      [for]=\"id\"\n    ></label>\n    <wac-tooltip\n      *ngIf=\"showTooltip\"\n      [tooltipIcon]=\"iconTooltip\"\n      [tooltipText]=\"textTooltip\"\n      [tooltipLink]=\"linkTooltip\"\n      [tooltipUrl]=\"urlTooltip\"\n    ></wac-tooltip>\n    <!-- Size -->\n    <span *ngIf=\"size && !progressBar\" class=\"is-size-7 wac-input__size\">\n      <strong>{{ !value ? 0 : value.toString().length }}</strong> / {{ size }}\n    </span>\n  </div>\n  <div class=\"field-body\">\n    <div class=\"field\">\n      <p\n        class=\"control\"\n        [ngClass]=\"{ 'has-icons-right': textError || success || error, 'has-icons-left': icon !== '', 'has-input-group': textAppend || textPrepend }\"\n      >\n        <!-- Text Prepend -->\n        <span *ngIf=\"textPrepend\" class=\"has-input-group\">\n          <span class=\"has-input-group-text prepend\">{{ textPrepend }}</span>\n          <span *ngIf=\"icon !== ''\" class=\"icon is-small is-left\">\n            <i [class]=\"icon\"></i>\n          </span>\n        </span>\n\n        <!-- Input -->\n        <input\n          [class]=\"'input ' + extraClasses\"\n          [id]=\"id\"\n          [ngClass]=\"{\n            'is-danger': (textError || error) && !disabled,\n            'is-empty': value === '',\n            'is-large': big,\n            'is-number': isNumber,\n            'remove-margin': disableMargin,\n            'text-append': textAppend\n          }\"\n          [type]=\"type\"\n          [placeholder]=\"placeholder\"\n          [attr.size]=\"size\"\n          [(ngModel)]=\"value\"\n          (ngModelChange)=\"onChange($event)\"\n          (blur)=\"onBlur()\"\n          [disabled]=\"disabled\"\n          (focusout)=\"onFocusOut()\"\n          [min]=\"min\"\n          [max]=\"max\"\n          [maxlength]=\"maxlength ? maxlength : 524288\"\n          [minlength]=\"minlength ? minlength : 0\"\n          (keypress)=\"keyPress($event)\"\n        />\n\n        <!-- Indication at the end of the input -->\n        <span class=\"indication\" *ngIf=\"indication\" [ngClass]=\"{'reverse': indicationLeft}\">\n          <span [innerHTML]=\"indication\"></span>\n        </span>\n\n        <!-- Text Append -->\n        <span *ngIf=\"textAppend && !indicationLeft\" class=\"has-input-group\">\n          <span class=\"has-input-group-text append\">{{ textAppend }}</span>\n          <!-- error if text append not empty -->\n          <span *ngIf=\"textError\" class=\"icon is-small is-right\">\n            <i class=\"fal fa-times has-text-danger\"></i>\n          </span>\n        </span>\n\n        <!-- Icon Left -->\n        <span *ngIf=\"icon !== '' && !textPrepend && !indicationLeft\" class=\"icon is-small is-left\">\n          <i [class]=\"icon\"></i>\n        </span>\n\n        <!-- Icon error if textAppend empty -->\n        <span *ngIf=\"(textError || error) && !textAppend && !indicationLeft  && !disabled\" class=\"icon is-small is-right\">\n          <i class=\"fal fa-times has-text-danger\"></i>\n        </span>\n\n        <!-- Icon success -->\n        <span *ngIf=\"success && !disabled\" class=\"icon is-small is-right\">\n          <i class=\"fas fa-check has-text-success\"></i>\n        </span>\n\n        <!-- Text Info -->\n        <span\n          *ngIf=\"textInfo && (textError === null || textError === '') && !progressBar && !indicationLeft\"\n          class=\"is-size-7 wac-input__info text-info\"\n          [innerHtml]=\"textInfo\"\n        ></span>\n\n        <!-- Text Error -->\n        <span *ngIf=\"textError && !progressBar && !indicationLeft\" class=\"is-size-7 wac-input__error has-text-danger\" [innerHtml]=\"textError\"></span>\n      </p>\n\n      <!-- Progress Bar -->\n      <wac-progress-bar *ngIf=\"progressBar && !indicationLeft\" [min]=\"min\" [max]=\"max\" [valueLength]=\"value.length\"></wac-progress-bar>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -2163,6 +2273,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], success: [{
                 type: Input
+            }], error: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
             }], indicationLeft: [{
                 type: Input
             }], keypressEnter: [{
@@ -2175,6 +2291,7 @@ class LinkComponent {
     constructor(renderer2) {
         this.renderer2 = renderer2;
         this.target = '_self';
+        this.fontSize = '14px';
     }
     set href(link) {
         this._link = link;
@@ -2183,7 +2300,6 @@ class LinkComponent {
     get href() {
         return this._link;
     }
-    ngOnInit() { }
     ngAfterViewInit() {
         this.setAttributesLink();
     }
@@ -2202,10 +2318,10 @@ class LinkComponent {
     }
 }
 LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LinkComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: LinkComponent, selector: "wac-link", inputs: { href: "href", target: "target", id: "id", class: "class" }, viewQueries: [{ propertyName: "linkComponent", first: true, predicate: ["linkComponent"], descendants: true }], ngImport: i0, template: "<a #linkComponent class=\"wac-link\" [ngClass]=\"{ class: class }\" [id]=\"{ id: id }\"><ng-content></ng-content></a>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: LinkComponent, selector: "wac-link", inputs: { href: "href", target: "target", id: "id", class: "class", fontSize: "fontSize" }, viewQueries: [{ propertyName: "linkComponent", first: true, predicate: ["linkComponent"], descendants: true }], ngImport: i0, template: "<a #linkComponent class=\"wac-link\" [style.fontSize]=\"fontSize\" [ngClass]=\"{ class: class }\" [id]=\"{ id: id }\"><ng-content></ng-content></a>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-link', template: "<a #linkComponent class=\"wac-link\" [ngClass]=\"{ class: class }\" [id]=\"{ id: id }\"><ng-content></ng-content></a>\n" }]
+            args: [{ selector: 'wac-link', template: "<a #linkComponent class=\"wac-link\" [style.fontSize]=\"fontSize\" [ngClass]=\"{ class: class }\" [id]=\"{ id: id }\"><ng-content></ng-content></a>\n" }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { href: [{
                 type: Input
             }], target: [{
@@ -2214,40 +2330,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], class: [{
                 type: Input
+            }], fontSize: [{
+                type: Input
             }], linkComponent: [{
                 type: ViewChild,
                 args: ['linkComponent']
             }] } });
 
 class SwitchComponent {
-    constructor() {
-        // todo add ngmodel and review texts display (textState is mandaoty in order to display textStateEnable and textStateDisable)
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        // todo add ngmodel and review texts display (textState is mandatory in order to display textStateEnable and textStateDisable)
         this.value = false;
         this.textState = '';
         this.textStateEnable = '';
         this.textStateDisable = '';
-        this.showInput = false;
+        this.showInput = false; // todo should not be handle here, but in another component
         this.danger = false;
         this.whiteSpace = false;
         this.switchChange = new EventEmitter(); // todo set emitted type
-        this.changeInput = new EventEmitter(); // todo set emitted type
+        this.changeInput = new EventEmitter(); // todo set emitted type, should be removed
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
     }
     ngOnInit() {
         this.id = 'switch-' + Math.floor(Math.random() * Math.floor(1000));
     }
     changeValue(event) {
-        this.switchChange.emit(event.target.checked);
+        if (this.disabled) {
+            return;
+        }
+        this.value = event.target.checked;
+        this.switchChange.emit(this.value);
+        this.onChange(this.value);
     }
     triggerInput() {
         this.changeInput.emit(this.valueInput);
     }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+        this.changeDetectorRef.markForCheck();
+    }
 }
-SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SwitchComponent, selector: "wac-switch", inputs: { value: "value", textState: "textState", textStateEnable: "textStateEnable", textStateDisable: "textStateDisable", showInput: "showInput", placholderInput: "placholderInput", danger: "danger", whiteSpace: "whiteSpace" }, outputs: { switchChange: "switchChange", changeInput: "changeInput" }, ngImport: i0, template: "<div class=\"wac-switch\">\n  <input type=\"checkbox\" [checked]=\"value\" (change)=\"changeValue($event)\" [id]=\"id\" [ngClass]=\"{ danger: danger }\"/>\n  <label [for]=\"id\" class=\"wac-switch__label\">\n    <span class=\"wac-switch__label__text\"\n      ><ng-content></ng-content\n      ><span\n        *ngIf=\"textState\"\n        [ngStyle]=\"{'whiteSpace': whiteSpace ? 'nowrap' :'normal'}\"\n        >{{ textState }} <strong class=\"disable\" *ngIf=\"textStateDisable\">{{ textStateDisable }}</strong>\n        <strong class=\"enable\" *ngIf=\"textStateEnable\">{{ textStateEnable }}</strong></span\n      ></span\n    >\n  </label>\n</div>\n<div class=\"wac-show-input\" *ngIf=\"showInput && value\">\n  <input [placeholder]=\"placholderInput\" type=\"text\" [(ngModel)]=\"valueInput\" (blur)=\"triggerInput()\" />\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] });
+SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SwitchComponent, selector: "wac-switch", inputs: { value: "value", textState: "textState", textStateEnable: "textStateEnable", textStateDisable: "textStateDisable", showInput: "showInput", placholderInput: "placholderInput", danger: "danger", whiteSpace: "whiteSpace" }, outputs: { switchChange: "switchChange", changeInput: "changeInput" }, providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: SwitchComponent, multi: true },
+    ], ngImport: i0, template: "<div class=\"wac-switch\">\n  <input type=\"checkbox\" [checked]=\"value\" (change)=\"changeValue($event)\" [id]=\"id\" [ngClass]=\"{ danger: danger }\" [disabled]=\"disabled\"/>\n  <label [for]=\"id\" class=\"wac-switch__label\">\n    <span class=\"wac-switch__label__text\"\n      ><ng-content></ng-content\n      ><span\n        *ngIf=\"textState\"\n        [ngStyle]=\"{'whiteSpace': whiteSpace ? 'nowrap' :'normal'}\"\n        >{{ textState }} <strong class=\"disable\" *ngIf=\"textStateDisable\">{{ textStateDisable }}</strong>\n        <strong class=\"enable\" *ngIf=\"textStateEnable\">{{ textStateEnable }}</strong></span\n      ></span\n    >\n  </label>\n</div>\n<div class=\"wac-show-input\" *ngIf=\"showInput && value\">\n  <input [placeholder]=\"placholderInput\" type=\"text\" [(ngModel)]=\"valueInput\" (blur)=\"triggerInput()\" />\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-switch', template: "<div class=\"wac-switch\">\n  <input type=\"checkbox\" [checked]=\"value\" (change)=\"changeValue($event)\" [id]=\"id\" [ngClass]=\"{ danger: danger }\"/>\n  <label [for]=\"id\" class=\"wac-switch__label\">\n    <span class=\"wac-switch__label__text\"\n      ><ng-content></ng-content\n      ><span\n        *ngIf=\"textState\"\n        [ngStyle]=\"{'whiteSpace': whiteSpace ? 'nowrap' :'normal'}\"\n        >{{ textState }} <strong class=\"disable\" *ngIf=\"textStateDisable\">{{ textStateDisable }}</strong>\n        <strong class=\"enable\" *ngIf=\"textStateEnable\">{{ textStateEnable }}</strong></span\n      ></span\n    >\n  </label>\n</div>\n<div class=\"wac-show-input\" *ngIf=\"showInput && value\">\n  <input [placeholder]=\"placholderInput\" type=\"text\" [(ngModel)]=\"valueInput\" (blur)=\"triggerInput()\" />\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+            args: [{ selector: 'wac-switch', providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: SwitchComponent, multi: true },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-switch\">\n  <input type=\"checkbox\" [checked]=\"value\" (change)=\"changeValue($event)\" [id]=\"id\" [ngClass]=\"{ danger: danger }\" [disabled]=\"disabled\"/>\n  <label [for]=\"id\" class=\"wac-switch__label\">\n    <span class=\"wac-switch__label__text\"\n      ><ng-content></ng-content\n      ><span\n        *ngIf=\"textState\"\n        [ngStyle]=\"{'whiteSpace': whiteSpace ? 'nowrap' :'normal'}\"\n        >{{ textState }} <strong class=\"disable\" *ngIf=\"textStateDisable\">{{ textStateDisable }}</strong>\n        <strong class=\"enable\" *ngIf=\"textStateEnable\">{{ textStateEnable }}</strong></span\n      ></span\n    >\n  </label>\n</div>\n<div class=\"wac-show-input\" *ngIf=\"showInput && value\">\n  <input [placeholder]=\"placholderInput\" type=\"text\" [(ngModel)]=\"valueInput\" (blur)=\"triggerInput()\" />\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
                 type: Input
             }], textState: [{
                 type: Input
@@ -2860,10 +3006,10 @@ class SelectInTextComponent {
     }
 }
 SelectInTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectInTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectInTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectInTextComponent, selector: "wac-select-in-text", inputs: { items: "items", placeholder: "placeholder", label: "label", maxWidthItems: "maxWidthItems", type: "type", callToAction: "callToAction", preText: "preText", postText: "postText", alwaysOpen: "alwaysOpen", maxWidth: "maxWidth" }, outputs: { selectValue: "selectValue", clickOnCallToAction: "clickOnCallToAction" }, ngImport: i0, template: "<div class=\"wac-select-in-text\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\">\n  <div class=\"wac-select-in-text__prepend\" [innerHTML]=\"preText\" *ngIf=\"preText\"></div>\n  <div #current class=\"wac-select-in-text__current\" (click)=\"openCategories = !openCategories\">\n    <span>{{ currentLabel }}</span>\n    <div\n      class=\"wac-select-in-text__content\"\n      [ngClass]=\"{ hidden: !openCategories && !alwaysOpen, open: type === 'open' }\"\n      [ngStyle]=\"{ 'max-width': maxWidthItems }\"\n    >\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length > 0\">\n        <div class=\"wac-select-in-text__content__item\" *ngFor=\"let item of items; trackBy : customTB; let index = index;\">\n          <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(index)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n          </div>\n        </div>\n      </perfect-scrollbar>\n    </div>\n  </div>\n  <div class=\"wac-select-in-text__after\" [innerHTML]=\"postText\" *ngIf=\"postText\"></div>\n</div>\n", 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: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { 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"] }] });
+SelectInTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectInTextComponent, selector: "wac-select-in-text", inputs: { items: "items", placeholder: "placeholder", label: "label", maxWidthItems: "maxWidthItems", type: "type", callToAction: "callToAction", preText: "preText", postText: "postText", alwaysOpen: "alwaysOpen", maxWidth: "maxWidth" }, outputs: { selectValue: "selectValue", clickOnCallToAction: "clickOnCallToAction" }, ngImport: i0, template: "<div class=\"wac-select-in-text\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n  <div class=\"wac-select-in-text__prepend\" [innerHTML]=\"preText\" *ngIf=\"preText\"></div>\n  <div #current class=\"wac-select-in-text__current\" (click)=\"openCategories = !openCategories\">\n    <span>{{ currentLabel }}</span>\n    <div\n      class=\"wac-select-in-text__content\"\n      [ngClass]=\"{ hidden: !openCategories && !alwaysOpen, open: type === 'open' }\"\n      [ngStyle]=\"{ 'max-width': maxWidthItems }\"\n    >\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length > 0\">\n        <div class=\"wac-select-in-text__content__item\" *ngFor=\"let item of items; trackBy : customTB; let index = index;\">\n          <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(index)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n          </div>\n        </div>\n      </perfect-scrollbar>\n    </div>\n  </div>\n  <div class=\"wac-select-in-text__after\" [innerHTML]=\"postText\" *ngIf=\"postText\"></div>\n</div>\n", 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: 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectInTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-select-in-text', template: "<div class=\"wac-select-in-text\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\">\n  <div class=\"wac-select-in-text__prepend\" [innerHTML]=\"preText\" *ngIf=\"preText\"></div>\n  <div #current class=\"wac-select-in-text__current\" (click)=\"openCategories = !openCategories\">\n    <span>{{ currentLabel }}</span>\n    <div\n      class=\"wac-select-in-text__content\"\n      [ngClass]=\"{ hidden: !openCategories && !alwaysOpen, open: type === 'open' }\"\n      [ngStyle]=\"{ 'max-width': maxWidthItems }\"\n    >\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length > 0\">\n        <div class=\"wac-select-in-text__content__item\" *ngFor=\"let item of items; trackBy : customTB; let index = index;\">\n          <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(index)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n          </div>\n        </div>\n      </perfect-scrollbar>\n    </div>\n  </div>\n  <div class=\"wac-select-in-text__after\" [innerHTML]=\"postText\" *ngIf=\"postText\"></div>\n</div>\n" }]
+            args: [{ selector: 'wac-select-in-text', template: "<div class=\"wac-select-in-text\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n  <div class=\"wac-select-in-text__prepend\" [innerHTML]=\"preText\" *ngIf=\"preText\"></div>\n  <div #current class=\"wac-select-in-text__current\" (click)=\"openCategories = !openCategories\">\n    <span>{{ currentLabel }}</span>\n    <div\n      class=\"wac-select-in-text__content\"\n      [ngClass]=\"{ hidden: !openCategories && !alwaysOpen, open: type === 'open' }\"\n      [ngStyle]=\"{ 'max-width': maxWidthItems }\"\n    >\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"items.length > 0\">\n        <div class=\"wac-select-in-text__content__item\" *ngFor=\"let item of items; trackBy : customTB; let index = index;\">\n          <div [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(index)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name }}\n          </div>\n        </div>\n      </perfect-scrollbar>\n    </div>\n  </div>\n  <div class=\"wac-select-in-text__after\" [innerHTML]=\"postText\" *ngIf=\"postText\"></div>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { items: [{
                 type: Input
             }], placeholder: [{
@@ -2908,10 +3054,10 @@ 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.openUp = false;
         this.searchValueChange = new EventEmitter();
         this.type = 'default';
         this.maxWidth = '100%';
@@ -2937,8 +3083,6 @@ class SelectComponent {
     get callToAction() {
         return this._calllToAction;
     }
-    ngOnInit() {
-    }
     onClose() {
         this.openCategories = false;
     }
@@ -2994,12 +3138,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.ɵ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" }] });
+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", openUp: "openUp", 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 }\" [ngClass]=\"{'to-top': openUp}\" [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>\n", 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$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" }, { 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: [{
+            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 }\" [ngClass]=\"{'to-top': openUp}\" [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>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { items: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -3011,6 +3155,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], searchValue: [{
                 type: Input
+            }], openUp: [{
+                type: Input
             }], searchValueChange: [{
                 type: Output
             }], type: [{
@@ -3310,10 +3456,10 @@ class PopinComponent {
     }
 }
 PopinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: PopinComponent, deps: [{ token: DomService }], target: i0.ɵɵFactoryTarget.Component });
-PopinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: PopinComponent, selector: "wac-popin", inputs: { title: "title", content: "content", imgSrc: "imgSrc", okButtonLabel: "okButtonLabel", koButtonLabel: "koButtonLabel", okButtonClass: "okButtonClass", koButtonClass: "koButtonClass", visible: "visible", background: "background" }, outputs: { visibleChange: "visibleChange", response: "response" }, ngImport: i0, template: "<div class=\"wac-free\" *ngIf=\"visible\">\n  <div class=\"wac-free__wrapper\" wzAutoHide (clickOutside)=\"closePopin()\">\n    <a class=\"wac-free__wrapper__button-close\" (click)=\"closePopin()\">\n      <i class=\"fas fa-times\"></i>\n    </a>\n    <div class=\"wac-free__wrapper__content\">\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <img [src]=\"imgSrc\" alt=\"barre admin\" />\n\n        <h2 class=\"wac-popin__wrapper__title\" [innerHTML]=\"title\"></h2>\n\n        <p class=\"wac-popin__wrapper__text\" [innerHTML]=\"content\"></p>\n      </perfect-scrollbar>\n    </div>\n    <div class=\"wac-free__wrapper__buttons\">\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"okButtonLabel\">\n        <wac-button [extraClasses]=\"'is-success'\" [label]=\"okButtonLabel\" [hasLoader]=\"true\" (click)=\"validatePopin()\"></wac-button>\n      </div>\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"koButtonLabel\">\n        <wac-button [extraClasses]=\"'is-danger is-outlined'\" [label]=\"koButtonLabel\" [hasLoader]=\"true\" (click)=\"refusePopin()\"></wac-button>\n      </div>\n    </div>\n  </div>\n  <div class=\"wac-free__background\" *ngIf=\"background\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { 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: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }] });
+PopinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: PopinComponent, selector: "wac-popin", inputs: { title: "title", content: "content", imgSrc: "imgSrc", okButtonLabel: "okButtonLabel", koButtonLabel: "koButtonLabel", okButtonClass: "okButtonClass", koButtonClass: "koButtonClass", visible: "visible", background: "background" }, outputs: { visibleChange: "visibleChange", response: "response" }, ngImport: i0, template: "<div class=\"wac-free\" *ngIf=\"visible\">\n  <div class=\"wac-free__wrapper\" wzAutoHide (clickOutside)=\"closePopin()\">\n    <a class=\"wac-free__wrapper__button-close\" (click)=\"closePopin()\">\n      <i class=\"fas fa-times\"></i>\n    </a>\n    <div class=\"wac-free__wrapper__content\">\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <img *ngIf=\"imgSrc\" [src]=\"imgSrc\" alt=\"barre admin\" />\n\n        <h2 class=\"wac-popin__wrapper__title\" [innerHTML]=\"title\"></h2>\n\n        <p class=\"wac-popin__wrapper__text\" [innerHTML]=\"content\"></p>\n      </perfect-scrollbar>\n    </div>\n    <div class=\"wac-free__wrapper__buttons\">\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"okButtonLabel\">\n        <wac-button [extraClasses]=\"'is-success'\" [label]=\"okButtonLabel\" [hasLoader]=\"true\" (click)=\"validatePopin()\"></wac-button>\n      </div>\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"koButtonLabel\">\n        <wac-button [extraClasses]=\"'is-danger is-outlined'\" [label]=\"koButtonLabel\" [hasLoader]=\"true\" (click)=\"refusePopin()\"></wac-button>\n      </div>\n    </div>\n  </div>\n  <div class=\"wac-free__background\" *ngIf=\"background\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { 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: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: PopinComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-popin', template: "<div class=\"wac-free\" *ngIf=\"visible\">\n  <div class=\"wac-free__wrapper\" wzAutoHide (clickOutside)=\"closePopin()\">\n    <a class=\"wac-free__wrapper__button-close\" (click)=\"closePopin()\">\n      <i class=\"fas fa-times\"></i>\n    </a>\n    <div class=\"wac-free__wrapper__content\">\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <img [src]=\"imgSrc\" alt=\"barre admin\" />\n\n        <h2 class=\"wac-popin__wrapper__title\" [innerHTML]=\"title\"></h2>\n\n        <p class=\"wac-popin__wrapper__text\" [innerHTML]=\"content\"></p>\n      </perfect-scrollbar>\n    </div>\n    <div class=\"wac-free__wrapper__buttons\">\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"okButtonLabel\">\n        <wac-button [extraClasses]=\"'is-success'\" [label]=\"okButtonLabel\" [hasLoader]=\"true\" (click)=\"validatePopin()\"></wac-button>\n      </div>\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"koButtonLabel\">\n        <wac-button [extraClasses]=\"'is-danger is-outlined'\" [label]=\"koButtonLabel\" [hasLoader]=\"true\" (click)=\"refusePopin()\"></wac-button>\n      </div>\n    </div>\n  </div>\n  <div class=\"wac-free__background\" *ngIf=\"background\"></div>\n</div>\n" }]
+            args: [{ selector: 'wac-popin', template: "<div class=\"wac-free\" *ngIf=\"visible\">\n  <div class=\"wac-free__wrapper\" wzAutoHide (clickOutside)=\"closePopin()\">\n    <a class=\"wac-free__wrapper__button-close\" (click)=\"closePopin()\">\n      <i class=\"fas fa-times\"></i>\n    </a>\n    <div class=\"wac-free__wrapper__content\">\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <img *ngIf=\"imgSrc\" [src]=\"imgSrc\" alt=\"barre admin\" />\n\n        <h2 class=\"wac-popin__wrapper__title\" [innerHTML]=\"title\"></h2>\n\n        <p class=\"wac-popin__wrapper__text\" [innerHTML]=\"content\"></p>\n      </perfect-scrollbar>\n    </div>\n    <div class=\"wac-free__wrapper__buttons\">\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"okButtonLabel\">\n        <wac-button [extraClasses]=\"'is-success'\" [label]=\"okButtonLabel\" [hasLoader]=\"true\" (click)=\"validatePopin()\"></wac-button>\n      </div>\n      <div class=\"wac-free__wrapper__buttons__button\" *ngIf=\"koButtonLabel\">\n        <wac-button [extraClasses]=\"'is-danger is-outlined'\" [label]=\"koButtonLabel\" [hasLoader]=\"true\" (click)=\"refusePopin()\"></wac-button>\n      </div>\n    </div>\n  </div>\n  <div class=\"wac-free__background\" *ngIf=\"background\"></div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: DomService }]; }, propDecorators: { title: [{
                 type: Input
             }], content: [{
@@ -3372,7 +3518,7 @@ class FreePopinComponent {
     }
 }
 FreePopinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FreePopinComponent, deps: [{ token: DomService }], target: i0.ɵɵFactoryTarget.Component });
-FreePopinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: FreePopinComponent, selector: "wac-free-popin", inputs: { okButtonLabel: "okButtonLabel", koButtonLabel: "koButtonLabel", visible: "visible", disableCloseOutside: "disableCloseOutside", background: "background", zIndex: "zIndex" }, outputs: { visibleChange: "visibleChange", response: "response" }, ngImport: i0, template: "<div class=\"wac-free-popin\" *ngIf=\"visible\" [ngStyle]=\"{'z-index': zIndex}\">\n    <div class=\"wac-free-popin__wrapper\" wzAutoHide (clickOutside)=\"!disableCloseOutside ? closePopin() : ''\">\n      <a class=\"wac-free-popin__wrapper__button-close\" (click)=\"closePopin()\">\n        <i class=\"fas fa-times\"></i>\n      </a>\n      <div class=\"wac-free-popin__wrapper__content\">\n        <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n          <ng-content></ng-content>\n        </perfect-scrollbar>\n      </div>\n      <div class=\"wac-free-popin__wrapper__buttons\">\n        <div class=\"wac-free-popin__wrapper__buttons__button\" *ngIf=\"okButtonLabel\">\n          <wac-button [extraClasses]=\"'is-success'\" [label]=\"okButtonLabel\" [hasLoader]=\"true\" (click)=\"validatePopin()\"></wac-button>\n        </div>\n        <div class=\"wac-free-popin__wrapper__buttons__button\" *ngIf=\"koButtonLabel\">\n          <wac-button [extraClasses]=\"'is-danger is-outlined'\" [label]=\"koButtonLabel\" [hasLoader]=\"true\" (click)=\"refusePopin()\"></wac-button>\n        </div>\n      </div>\n    </div>\n  <div class=\"wac-free-popin__background\" *ngIf=\"background\"></div>\n</div>\n", dependencies: [{ 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"] }, { 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: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }] });
+FreePopinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: FreePopinComponent, selector: "wac-free-popin", inputs: { okButtonLabel: "okButtonLabel", koButtonLabel: "koButtonLabel", visible: "visible", disableCloseOutside: "disableCloseOutside", background: "background", zIndex: "zIndex" }, outputs: { visibleChange: "visibleChange", response: "response" }, ngImport: i0, template: "<div class=\"wac-free-popin\" *ngIf=\"visible\" [ngStyle]=\"{'z-index': zIndex}\">\n    <div class=\"wac-free-popin__wrapper\" wzAutoHide (clickOutside)=\"!disableCloseOutside ? closePopin() : ''\">\n      <a class=\"wac-free-popin__wrapper__button-close\" (click)=\"closePopin()\">\n        <i class=\"fas fa-times\"></i>\n      </a>\n      <div class=\"wac-free-popin__wrapper__content\">\n        <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n          <ng-content></ng-content>\n        </perfect-scrollbar>\n      </div>\n      <div class=\"wac-free-popin__wrapper__buttons\">\n        <div class=\"wac-free-popin__wrapper__buttons__button\" *ngIf=\"okButtonLabel\">\n          <wac-button [extraClasses]=\"'is-success'\" [label]=\"okButtonLabel\" [hasLoader]=\"true\" (click)=\"validatePopin()\"></wac-button>\n        </div>\n        <div class=\"wac-free-popin__wrapper__buttons__button\" *ngIf=\"koButtonLabel\">\n          <wac-button [extraClasses]=\"'is-danger is-outlined'\" [label]=\"koButtonLabel\" [hasLoader]=\"true\" (click)=\"refusePopin()\"></wac-button>\n        </div>\n      </div>\n    </div>\n  <div class=\"wac-free-popin__background\" *ngIf=\"background\"></div>\n</div>\n", dependencies: [{ 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"] }, { 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: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FreePopinComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-free-popin', template: "<div class=\"wac-free-popin\" *ngIf=\"visible\" [ngStyle]=\"{'z-index': zIndex}\">\n    <div class=\"wac-free-popin__wrapper\" wzAutoHide (clickOutside)=\"!disableCloseOutside ? closePopin() : ''\">\n      <a class=\"wac-free-popin__wrapper__button-close\" (click)=\"closePopin()\">\n        <i class=\"fas fa-times\"></i>\n      </a>\n      <div class=\"wac-free-popin__wrapper__content\">\n        <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n          <ng-content></ng-content>\n        </perfect-scrollbar>\n      </div>\n      <div class=\"wac-free-popin__wrapper__buttons\">\n        <div class=\"wac-free-popin__wrapper__buttons__button\" *ngIf=\"okButtonLabel\">\n          <wac-button [extraClasses]=\"'is-success'\" [label]=\"okButtonLabel\" [hasLoader]=\"true\" (click)=\"validatePopin()\"></wac-button>\n        </div>\n        <div class=\"wac-free-popin__wrapper__buttons__button\" *ngIf=\"koButtonLabel\">\n          <wac-button [extraClasses]=\"'is-danger is-outlined'\" [label]=\"koButtonLabel\" [hasLoader]=\"true\" (click)=\"refusePopin()\"></wac-button>\n        </div>\n      </div>\n    </div>\n  <div class=\"wac-free-popin__background\" *ngIf=\"background\"></div>\n</div>\n" }]
@@ -3719,7 +3865,7 @@ class SearchComponent {
     }
 }
 SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SearchComponent, selector: "wac-search", inputs: { placeholder: "placeholder", alwaysOpen: "alwaysOpen", label: "label", options: "options", disableSearchIn: "disableSearchIn", emptyResult: "emptyResult" }, outputs: { selectValue: "selectValue", searchKeyUp: "searchKeyUp", searchFocusOut: "searchFocusOut" }, ngImport: i0, template: "<div class=\"wac-search\" [ngClass]=\"{ open: openSelect || alwaysOpen }\" [zIndexToggle]=\"openSelect\" wzAutoHide (clickOutside)=\"closeSelect()\">\n  <div class=\"wac-search__wrapper\">\n    <button><i class=\"fal fa-search\"></i></button>\n    <input [value]=\"search\" type=\"text\" required [placeholder]=\"placeholder\" (focus)=\"openSelect = true;\" (focusout)=\"sendEventFocusOut()\" (keyup)=\"setSearchValueToQuery($event)\" />\n  </div>\n  <div class=\"wac-search__absolute\" *ngIf=\"triggerOptions\" [ngClass]=\"{'hidden': !openSelect}\">\n    <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"triggerOptions.length > 0\">\n      <div (click)=\"onClose()\" class=\"wac-select__content__item\" *ngFor=\"let item of triggerOptions; let index = index;\">\n        <div [ngClass]=\"{ selected: item.checked }\" (click)=\"onSelectItem(index, item.id, item.label)\">\n          {{ item.label }}\n        </div>\n      </div>\n    </perfect-scrollbar>\n    <div class=\"wac-select__content__empty\" *ngIf=\"triggerOptions.length === 0\">\n      <span *ngIf=\"emptyResult\">{{emptyResult}}</span>\n    </div>\n  </div>\n</div>\n", 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: 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"] }] });
+SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SearchComponent, selector: "wac-search", inputs: { placeholder: "placeholder", alwaysOpen: "alwaysOpen", label: "label", options: "options", disableSearchIn: "disableSearchIn", emptyResult: "emptyResult" }, outputs: { selectValue: "selectValue", searchKeyUp: "searchKeyUp", searchFocusOut: "searchFocusOut" }, ngImport: i0, template: "<div class=\"wac-search\" [ngClass]=\"{ open: openSelect || alwaysOpen }\" [zIndexToggle]=\"openSelect\" wzAutoHide (clickOutside)=\"closeSelect()\">\n  <div class=\"wac-search__wrapper\">\n    <button><i class=\"fal fa-search\"></i></button>\n    <input [value]=\"search\" type=\"text\" required [placeholder]=\"placeholder\" (focus)=\"openSelect = true;\" (focusout)=\"sendEventFocusOut()\" (keyup)=\"setSearchValueToQuery($event)\" />\n  </div>\n  <div class=\"wac-search__absolute\" *ngIf=\"triggerOptions\" [ngClass]=\"{'hidden': !openSelect}\">\n    <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"triggerOptions.length > 0\">\n      <div (click)=\"onClose()\" class=\"wac-select__content__item\" *ngFor=\"let item of triggerOptions; let index = index;\">\n        <div [ngClass]=\"{ selected: item.checked }\" (click)=\"onSelectItem(index, item.id, item.label)\">\n          {{ item.label }}\n        </div>\n      </div>\n    </perfect-scrollbar>\n    <div class=\"wac-select__content__empty\" *ngIf=\"triggerOptions.length === 0\">\n      <span *ngIf=\"emptyResult\">{{emptyResult}}</span>\n    </div>\n  </div>\n</div>\n", 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: 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-search', template: "<div class=\"wac-search\" [ngClass]=\"{ open: openSelect || alwaysOpen }\" [zIndexToggle]=\"openSelect\" wzAutoHide (clickOutside)=\"closeSelect()\">\n  <div class=\"wac-search__wrapper\">\n    <button><i class=\"fal fa-search\"></i></button>\n    <input [value]=\"search\" type=\"text\" required [placeholder]=\"placeholder\" (focus)=\"openSelect = true;\" (focusout)=\"sendEventFocusOut()\" (keyup)=\"setSearchValueToQuery($event)\" />\n  </div>\n  <div class=\"wac-search__absolute\" *ngIf=\"triggerOptions\" [ngClass]=\"{'hidden': !openSelect}\">\n    <perfect-scrollbar [config]=\"{ suppressScrollX: true }\" *ngIf=\"triggerOptions.length > 0\">\n      <div (click)=\"onClose()\" class=\"wac-select__content__item\" *ngFor=\"let item of triggerOptions; let index = index;\">\n        <div [ngClass]=\"{ selected: item.checked }\" (click)=\"onSelectItem(index, item.id, item.label)\">\n          {{ item.label }}\n        </div>\n      </div>\n    </perfect-scrollbar>\n    <div class=\"wac-select__content__empty\" *ngIf=\"triggerOptions.length === 0\">\n      <span *ngIf=\"emptyResult\">{{emptyResult}}</span>\n    </div>\n  </div>\n</div>\n" }]
@@ -3792,7 +3938,7 @@ class SelectedListComponent {
     }
 }
 SelectedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectedListComponent, selector: "wac-selected-list", inputs: { options: "options", label: "label", textSelectAll: "textSelectAll", textUnSelectAll: "textUnSelectAll", enableSelectAll: "enableSelectAll" }, outputs: { selectedItemsIndex: "selectedItemsIndex", selectedItemsAll: "selectedItemsAll", unSelectedItemsAll: "unSelectedItemsAll" }, ngImport: i0, template: "<div class=\"selected-list\">\n  <div class=\"selected-list__wrapper\">\n    <div class=\"selected-list__wrapper__head\">\n      <p *ngIf=\"label\" [innerHTML]=\"label\"></p>\n      <ng-container *ngVar=\"(options | areAllOptionsSelected) as areAllOptionsSelected\">\n        <ng-container *ngIf=\"textSelectAll && !areAllOptionsSelected\">\n\n          <div class=\"selected-list__wrapper__head__button\">\n\n            <div class=\"selected-list__wrapper__head__button__notMobile\">\n              <wac-button\n                [label]=\"textSelectAll\"\n                (click)=\"onSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n            <div class=\"selected-list__wrapper__head__button__mobile\">\n              <wac-button\n                [extraClasses]=\"'is-grey'\"\n                [icon]=\"'fad fa-check-double'\"\n                (click)=\"onSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n          </div>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"textUnSelectAll && areAllOptionsSelected\">\n\n          <div class=\"selected-list__wrapper__head__button\">\n\n            <div class=\"selected-list__wrapper__head__button__notMobile\">\n              <wac-button\n                [extraClasses]=\"'is-info'\"\n                [label]=\"textUnSelectAll\"\n                (click)=\"onUnSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n            <div class=\"selected-list__wrapper__head__button__mobile\">\n              <wac-button\n                [extraClasses]=\"'is-grey'\"\n                [icon]=\"'fad fa-check-double'\"\n                (click)=\"onUnSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n          </div>\n\n        </ng-container>\n\n      </ng-container>\n\n    </div>\n    <div class=\"selected-list__wrapper__content\">\n      <div class=\"selected-list__wrapper__content__item\" *ngFor=\"let item of options;let i = index;\" [ngClass]=\"{'active': item.checked}\" (click)=\"onSelectItem(i)\">\n        <span [innerHTML]=\"item.label\"></span>\n        <i class=\"fas fa-check\"></i>\n      </div>\n    </div>\n  </div>\n</div>\n", 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: VarDirective, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }, { kind: "pipe", type: AreAllOptionsSelectedPipe, name: "areAllOptionsSelected" }] });
+SelectedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectedListComponent, selector: "wac-selected-list", inputs: { options: "options", label: "label", textSelectAll: "textSelectAll", textUnSelectAll: "textUnSelectAll", enableSelectAll: "enableSelectAll" }, outputs: { selectedItemsIndex: "selectedItemsIndex", selectedItemsAll: "selectedItemsAll", unSelectedItemsAll: "unSelectedItemsAll" }, ngImport: i0, template: "<div class=\"selected-list\">\n  <div class=\"selected-list__wrapper\">\n    <div class=\"selected-list__wrapper__head\">\n      <p *ngIf=\"label\" [innerHTML]=\"label\"></p>\n      <ng-container *ngVar=\"(options | areAllOptionsSelected) as areAllOptionsSelected\">\n        <ng-container *ngIf=\"textSelectAll && !areAllOptionsSelected\">\n\n          <div class=\"selected-list__wrapper__head__button\">\n\n            <div class=\"selected-list__wrapper__head__button__notMobile\">\n              <wac-button\n                [label]=\"textSelectAll\"\n                (click)=\"onSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n            <div class=\"selected-list__wrapper__head__button__mobile\">\n              <wac-button\n                [extraClasses]=\"'is-grey'\"\n                [icon]=\"'fad fa-check-double'\"\n                (click)=\"onSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n          </div>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"textUnSelectAll && areAllOptionsSelected\">\n\n          <div class=\"selected-list__wrapper__head__button\">\n\n            <div class=\"selected-list__wrapper__head__button__notMobile\">\n              <wac-button\n                [extraClasses]=\"'is-info'\"\n                [label]=\"textUnSelectAll\"\n                (click)=\"onUnSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n            <div class=\"selected-list__wrapper__head__button__mobile\">\n              <wac-button\n                [extraClasses]=\"'is-grey'\"\n                [icon]=\"'fad fa-check-double'\"\n                (click)=\"onUnSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n          </div>\n\n        </ng-container>\n\n      </ng-container>\n\n    </div>\n    <div class=\"selected-list__wrapper__content\">\n      <div class=\"selected-list__wrapper__content__item\" *ngFor=\"let item of options;let i = index;\" [ngClass]=\"{'active': item.checked}\" (click)=\"onSelectItem(i)\">\n        <span [innerHTML]=\"item.label\"></span>\n        <i class=\"fas fa-check\"></i>\n      </div>\n    </div>\n  </div>\n</div>\n", 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: VarDirective, selector: "[ngVar]", inputs: ["ngVar"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }, { kind: "pipe", type: AreAllOptionsSelectedPipe, name: "areAllOptionsSelected" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectedListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-selected-list', template: "<div class=\"selected-list\">\n  <div class=\"selected-list__wrapper\">\n    <div class=\"selected-list__wrapper__head\">\n      <p *ngIf=\"label\" [innerHTML]=\"label\"></p>\n      <ng-container *ngVar=\"(options | areAllOptionsSelected) as areAllOptionsSelected\">\n        <ng-container *ngIf=\"textSelectAll && !areAllOptionsSelected\">\n\n          <div class=\"selected-list__wrapper__head__button\">\n\n            <div class=\"selected-list__wrapper__head__button__notMobile\">\n              <wac-button\n                [label]=\"textSelectAll\"\n                (click)=\"onSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n            <div class=\"selected-list__wrapper__head__button__mobile\">\n              <wac-button\n                [extraClasses]=\"'is-grey'\"\n                [icon]=\"'fad fa-check-double'\"\n                (click)=\"onSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n          </div>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"textUnSelectAll && areAllOptionsSelected\">\n\n          <div class=\"selected-list__wrapper__head__button\">\n\n            <div class=\"selected-list__wrapper__head__button__notMobile\">\n              <wac-button\n                [extraClasses]=\"'is-info'\"\n                [label]=\"textUnSelectAll\"\n                (click)=\"onUnSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n            <div class=\"selected-list__wrapper__head__button__mobile\">\n              <wac-button\n                [extraClasses]=\"'is-grey'\"\n                [icon]=\"'fad fa-check-double'\"\n                (click)=\"onUnSelectAll()\"\n              >\n              </wac-button>\n            </div>\n\n          </div>\n\n        </ng-container>\n\n      </ng-container>\n\n    </div>\n    <div class=\"selected-list__wrapper__content\">\n      <div class=\"selected-list__wrapper__content__item\" *ngFor=\"let item of options;let i = index;\" [ngClass]=\"{'active': item.checked}\" (click)=\"onSelectItem(i)\">\n        <span [innerHTML]=\"item.label\"></span>\n        <i class=\"fas fa-check\"></i>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
@@ -3920,7 +4066,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
@@ -3928,8 +4091,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: [{
@@ -3978,6 +4141,883 @@ 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 === null || selectedOption === void 0 ? void 0 : 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() {
+        var _a;
+        return (_a = this._required) !== null && _a !== void 0 ? _a : 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) {
+        var _a;
+        const wasOpen = this._openPanel;
+        this._openPanel = this.keepPanelOpen || openPanel;
+        if (openPanel) {
+            (_a = this.customSearchTrigger) === null || _a === void 0 ? void 0 : _a.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$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 });
+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 []; } });
+
+class WrapperSidebarComponent {
+    constructor() {
+        this.reverse = false;
+        this.hideBackground = false;
+        this.stickySidebar = false;
+    }
+}
+WrapperSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: WrapperSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WrapperSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: WrapperSidebarComponent, selector: "wac-wrapper-sidebar", inputs: { reverse: "reverse", hideBackground: "hideBackground", backgroundGrey: "backgroundGrey", backgroundWidth: "backgroundWidth", stickySidebar: "stickySidebar" }, ngImport: i0, template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n  <div class=\"wac-wrapper-sidebar__left\" [ngClass]=\"{'sticky': stickySidebar}\">\n    <ng-content select=\"[sidebar]\"></ng-content>\n  </div>\n  <div class=\"wac-wrapper-sidebar__right\" [style.backgroundImage]=\"!hideBackground && backgroundGrey !== '' ? 'url(' + backgroundGrey + ')' : ''\" [style.backgroundSize]=\"backgroundWidth\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: WrapperSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-wrapper-sidebar', template: "<div class=\"wac-wrapper-sidebar\" [ngClass]=\"{'reverse': reverse}\">\n  <div class=\"wac-wrapper-sidebar__left\" [ngClass]=\"{'sticky': stickySidebar}\">\n    <ng-content select=\"[sidebar]\"></ng-content>\n  </div>\n  <div class=\"wac-wrapper-sidebar__right\" [style.backgroundImage]=\"!hideBackground && backgroundGrey !== '' ? 'url(' + backgroundGrey + ')' : ''\" [style.backgroundSize]=\"backgroundWidth\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { reverse: [{
+                type: Input
+            }], hideBackground: [{
+                type: Input
+            }], backgroundGrey: [{
+                type: Input
+            }], backgroundWidth: [{
+                type: Input
+            }], stickySidebar: [{
+                type: Input
+            }] } });
+
+class BreadcrumbsComponent {
+    constructor() {
+        this.noResponsive = false;
+        this.index = 0;
+        this.indexChange = new EventEmitter();
+    }
+    valueChanged(i) {
+        this.index = i;
+        this.indexChange.emit(this.index);
+    }
+}
+BreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: BreadcrumbsComponent, selector: "wac-breadcrumbs", inputs: { breadcrumbs: "breadcrumbs", noResponsive: "noResponsive" }, outputs: { indexChange: "indexChange" }, ngImport: i0, template: "<div class=\"wac-breadcrumbs\" [ngClass]=\"{'no-responsive': noResponsive}\">\n  <div class=\"wac-breadcrumbs__wrapper\">\n    <div class=\"wac-breadcrumbs__item\" *ngFor=\"let b of breadcrumbs; let i = index;\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\" (click)=\"valueChanged(i)\">\n      <div class=\"round\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\"><span *ngIf=\"!b.valid\"><span *ngIf=\"i < 9\">0</span>{{ i + 1 }}</span><i class=\"fas fa-check\" *ngIf=\"b.valid\"></i></div>\n      <div class=\"name\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\">{{ b.name }}</div>\n    </div>\n  </div>\n</div>\n", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-breadcrumbs', template: "<div class=\"wac-breadcrumbs\" [ngClass]=\"{'no-responsive': noResponsive}\">\n  <div class=\"wac-breadcrumbs__wrapper\">\n    <div class=\"wac-breadcrumbs__item\" *ngFor=\"let b of breadcrumbs; let i = index;\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\" (click)=\"valueChanged(i)\">\n      <div class=\"round\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\"><span *ngIf=\"!b.valid\"><span *ngIf=\"i < 9\">0</span>{{ i + 1 }}</span><i class=\"fas fa-check\" *ngIf=\"b.valid\"></i></div>\n      <div class=\"name\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\">{{ b.name }}</div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { breadcrumbs: [{
+                type: Input
+            }], noResponsive: [{
+                type: Input
+            }], indexChange: [{
+                type: Output
+            }] } });
+
+class CardPriceComponent {
+    constructor() {
+        this.selected = false;
+        this.disabled = false;
+        this.btnTextcolor = '#ffffff';
+        this.extraClasses = 'is-success';
+        this.extraClassesSelected = 'is-success is-outlined';
+        this.hideButton = false;
+        this.confirm = new EventEmitter();
+        this.cancel = new EventEmitter();
+    }
+    triggerClick() {
+        this.confirm.emit(true);
+    }
+    removePackageTrigger() {
+        this.cancel.emit(true);
+    }
+}
+CardPriceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CardPriceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardPriceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CardPriceComponent, selector: "wac-card-price", inputs: { amount: "amount", title: "title", selected: "selected", btnLabelSelected: "btnLabelSelected", price: "price", currency: "currency", priceWording: "priceWording", subtitle: "subtitle", btnLabel: "btnLabel", packageSubtitle: "packageSubtitle", linkPackageLabel: "linkPackageLabel", disabled: "disabled", btnTextcolor: "btnTextcolor", extraClasses: "extraClasses", extraClassesSelected: "extraClassesSelected", hideButton: "hideButton" }, outputs: { confirm: "confirm", cancel: "cancel" }, ngImport: i0, template: "<div class=\"wac-card-price\" [ngClass]=\"{'selected': selected}\">\n  <strong>{{amount}}</strong>\n  <p>{{title}}</p>\n  <div class=\"price\">\n    <span class=\"amount\">{{price}} <span>{{currency}}</span></span><span class=\"month\">{{priceWording}}</span>\n  </div>\n  <div class=\"subtitle\">{{subtitle}}</div>\n  <div class=\"cta\" *ngIf=\"!selected && !hideButton\">\n    <wac-button [noPadding]=\"true\" [label]=\"btnLabel\" [extraClasses]=\"extraClasses\" (click)=\"triggerClick()\" [disabled]=\"disabled\" [whiteSpaceNowrap]=\"true\" [textcolor]=\"btnTextcolor\"></wac-button>\n  </div>\n  <div class=\"cta\" *ngIf=\"selected && !hideButton\">\n    <wac-button [noPadding]=\"true\" [icon]=\"'fa-solid fa-check'\" [label]=\"btnLabelSelected\" [extraClasses]=\"extraClassesSelected\" [whiteSpaceNowrap]=\"true\"></wac-button>\n  </div>\n  <div class=\"package-subtitle\" *ngIf=\"selected\">{{packageSubtitle}}</div>\n  <div class=\"link-bottom\" *ngIf=\"linkPackageLabel\">\n    <wac-link (click)=\"removePackageTrigger()\">{{linkPackageLabel}}</wac-link>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }, { kind: "component", type: LinkComponent, selector: "wac-link", inputs: ["href", "target", "id", "class", "fontSize"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CardPriceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-card-price', template: "<div class=\"wac-card-price\" [ngClass]=\"{'selected': selected}\">\n  <strong>{{amount}}</strong>\n  <p>{{title}}</p>\n  <div class=\"price\">\n    <span class=\"amount\">{{price}} <span>{{currency}}</span></span><span class=\"month\">{{priceWording}}</span>\n  </div>\n  <div class=\"subtitle\">{{subtitle}}</div>\n  <div class=\"cta\" *ngIf=\"!selected && !hideButton\">\n    <wac-button [noPadding]=\"true\" [label]=\"btnLabel\" [extraClasses]=\"extraClasses\" (click)=\"triggerClick()\" [disabled]=\"disabled\" [whiteSpaceNowrap]=\"true\" [textcolor]=\"btnTextcolor\"></wac-button>\n  </div>\n  <div class=\"cta\" *ngIf=\"selected && !hideButton\">\n    <wac-button [noPadding]=\"true\" [icon]=\"'fa-solid fa-check'\" [label]=\"btnLabelSelected\" [extraClasses]=\"extraClassesSelected\" [whiteSpaceNowrap]=\"true\"></wac-button>\n  </div>\n  <div class=\"package-subtitle\" *ngIf=\"selected\">{{packageSubtitle}}</div>\n  <div class=\"link-bottom\" *ngIf=\"linkPackageLabel\">\n    <wac-link (click)=\"removePackageTrigger()\">{{linkPackageLabel}}</wac-link>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { amount: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], btnLabelSelected: [{
+                type: Input
+            }], price: [{
+                type: Input
+            }], currency: [{
+                type: Input
+            }], priceWording: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], btnLabel: [{
+                type: Input
+            }], packageSubtitle: [{
+                type: Input
+            }], linkPackageLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], btnTextcolor: [{
+                type: Input
+            }], extraClasses: [{
+                type: Input
+            }], extraClassesSelected: [{
+                type: Input
+            }], hideButton: [{
+                type: Input
+            }], confirm: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+class TokenCheckComponent {
+    constructor() {
+        this.warning = false;
+    }
+}
+TokenCheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TokenCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TokenCheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TokenCheckComponent, selector: "wac-token-check", inputs: { label: "label", value: "value", max: "max" }, ngImport: i0, template: "<div class=\"wac-token-check\">\n  <span [innerHTML]=\"label\"></span> : <span [innerHTML]=\"value\" [ngClass]=\"{'warning': value > max}\"></span>/<strong [innerHTML]=\"max\"></strong>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TokenCheckComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-token-check', template: "<div class=\"wac-token-check\">\n  <span [innerHTML]=\"label\"></span> : <span [innerHTML]=\"value\" [ngClass]=\"{'warning': value > max}\"></span>/<strong [innerHTML]=\"max\"></strong>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }] } });
+
+class BlockWithCheckboxComponent {
+    constructor() {
+        this.selected = false;
+        this.disabled = false;
+        this.checkboxAction = new EventEmitter();
+        this.nameRadio = 'wacBlockCheckboxRadio';
+        this.isFirst = false;
+        this.opacity = '.45';
+    }
+    ngOnInit() {
+        this.randomLabelName = 'radioBlock' + Math.random() * (900 - 700) + 700;
+    }
+    eventSelected(event) {
+        if (!this.disabled) {
+            this.selected = event.target.checked;
+            this.checkboxAction.emit(this.selected);
+            this.isFirst = false;
+        }
+    }
+    removeFirstClass() {
+        if (typeof document.querySelectorAll('.firstWacRadioBLock')[0] !== typeof undefined) {
+            document.querySelectorAll('.firstWacRadioBLock')[0].classList.remove('firstWacRadioBLock');
+        }
+    }
+}
+BlockWithCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BlockWithCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BlockWithCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: BlockWithCheckboxComponent, selector: "wac-block-with-checkbox", inputs: { selected: "selected", disabled: "disabled", nameRadio: "nameRadio", isFirst: "isFirst", opacity: "opacity" }, outputs: { checkboxAction: "checkboxAction" }, ngImport: i0, template: "<div class=\"block-with-checkbox\" (click)=\"disabled ? $event.preventDefault() : ''\" [ngClass]=\"{'selected': inputRadioA.checked || selected, 'firstWacRadioBLock': isFirst, 'disabled': disabled}\" [style.opacity]=\"opacity\" (mouseover)=\"removeFirstClass()\">\n  <div class=\"block-with-checkbox__left\" (click)=\"inputRadioA.click()\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input #inputRadioA [name]=\"nameRadio\" type=\"radio\" [checked]=\"selected\" [value]=\"selected\" (change)=\"eventSelected($event)\" [id]=\"randomLabelName\">\n        <label [for]=\"randomLabelName\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\" (click)=\"$event.target['className'] !== 'wac-link' ? inputRadioA.click() : ''\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: BlockWithCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-block-with-checkbox', template: "<div class=\"block-with-checkbox\" (click)=\"disabled ? $event.preventDefault() : ''\" [ngClass]=\"{'selected': inputRadioA.checked || selected, 'firstWacRadioBLock': isFirst, 'disabled': disabled}\" [style.opacity]=\"opacity\" (mouseover)=\"removeFirstClass()\">\n  <div class=\"block-with-checkbox__left\" (click)=\"inputRadioA.click()\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input #inputRadioA [name]=\"nameRadio\" type=\"radio\" [checked]=\"selected\" [value]=\"selected\" (change)=\"eventSelected($event)\" [id]=\"randomLabelName\">\n        <label [for]=\"randomLabelName\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\" (click)=\"$event.target['className'] !== 'wac-link' ? inputRadioA.click() : ''\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], checkboxAction: [{
+                type: Output
+            }], nameRadio: [{
+                type: Input
+            }], isFirst: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }] } });
+
+class ConfirmDeleteComponent {
+    constructor() {
+        this.open = false;
+        this.confirm = new EventEmitter();
+        this.backgroundColor = '#fff';
+        this.borderRadius = '0px';
+        this.hideText = false;
+    }
+    eventCancel(event) {
+        this.confirm.emit(false);
+        this.open = false;
+    }
+    eventConfirm(event) {
+        this.confirm.emit(true);
+        this.open = false;
+    }
+    responsiveControl(size) {
+        if (size < 342) {
+            this.hideText = true;
+        }
+        else {
+            this.hideText = false;
+        }
+    }
+    onResize() {
+        this.responsiveControl(this.container.nativeElement.offsetWidth);
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.responsiveControl(this.container.nativeElement.offsetWidth);
+        }, 100);
+    }
+}
+ConfirmDeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ConfirmDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ConfirmDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: ConfirmDeleteComponent, selector: "wac-confirm-delete", inputs: { open: "open", label: "label", labelCancel: "labelCancel", labelConfirm: "labelConfirm", backgroundColor: "backgroundColor", borderRadius: "borderRadius" }, outputs: { confirm: "confirm" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"wac-confirm-delete\" #container [ngClass]=\"{'is-open': open, 'hide-text': hideText}\" [style.backgroundColor]=\"backgroundColor\" [style.borderRadius]=\"borderRadius\">\n  <div>\n    <span [innerHTML]=\"label\"></span>\n  </div>\n  <div>\n    <div><wac-button [label]=\"labelCancel\" [extraClasses]=\"'is-outlined is-grey'\" (click)=\"eventCancel($event)\"></wac-button></div>\n    <div><wac-button [label]=\"labelConfirm\" [extraClasses]=\"'is-danger'\" (click)=\"eventConfirm($event)\"></wac-button></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ConfirmDeleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-confirm-delete', template: "<div class=\"wac-confirm-delete\" #container [ngClass]=\"{'is-open': open, 'hide-text': hideText}\" [style.backgroundColor]=\"backgroundColor\" [style.borderRadius]=\"borderRadius\">\n  <div>\n    <span [innerHTML]=\"label\"></span>\n  </div>\n  <div>\n    <div><wac-button [label]=\"labelCancel\" [extraClasses]=\"'is-outlined is-grey'\" (click)=\"eventCancel($event)\"></wac-button></div>\n    <div><wac-button [label]=\"labelConfirm\" [extraClasses]=\"'is-danger'\" (click)=\"eventConfirm($event)\"></wac-button></div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { open: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelCancel: [{
+                type: Input
+            }], labelConfirm: [{
+                type: Input
+            }], confirm: [{
+                type: Output
+            }], backgroundColor: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class MosaicComponent {
+    constructor() {
+        this.imagesList = [];
+        this.isLoading = false;
+        this.numberOfColumn = 3;
+        this.importImageSrc = new EventEmitter();
+        this.loadMoreImages = new EventEmitter();
+    }
+    trackColumn(index) {
+        return index;
+    }
+    trackImage(index, image) {
+        return image.src;
+    }
+    ngOnChanges(changes) {
+        const isNumberOfColumnChange = changes.numberOfColumn && (changes.numberOfColumn.currentValue !== changes.numberOfColumn.previousValue);
+        if (changes.imagesList) {
+            this.generateColumns(changes.imagesList.previousValue, changes.imagesList.currentValue, isNumberOfColumnChange);
+            return;
+        }
+        if (isNumberOfColumnChange) {
+            this.generateColumns(null, this.imagesList, isNumberOfColumnChange);
+        }
+    }
+    generateColumns(previousList, currentList, isNumberOfColumnChange) {
+        const isNewListSmaller = (currentList && previousList) && (currentList.length < previousList.length);
+        const resetColumns = isNumberOfColumnChange || isNewListSmaller;
+        const isPreviousListExisting = previousList === null || previousList === void 0 ? void 0 : previousList.length;
+        const newImagesToDisplay = !isPreviousListExisting || resetColumns ? currentList : currentList.slice(previousList.length);
+        let columns = this.separateImagesIntoColumns(newImagesToDisplay);
+        if (isPreviousListExisting && !resetColumns) {
+            const existingColumns = this.columns;
+            columns = this.concatColumns(existingColumns, columns);
+        }
+        this.columns = columns;
+    }
+    separateImagesIntoColumns(newImagesToDisplay) {
+        const columns = [];
+        const numberOfImagePerColumn = Math.floor(newImagesToDisplay.length / this.numberOfColumn);
+        for (let i = 0; i < newImagesToDisplay.length; i += numberOfImagePerColumn) {
+            const chunk = newImagesToDisplay.slice(i, i + numberOfImagePerColumn);
+            columns.push(chunk);
+        }
+        return columns;
+    }
+    concatColumns(oldColumns, newColumns) {
+        return oldColumns.map((oldColumn, columnIndex) => [...oldColumn, ...newColumns[columnIndex]]);
+    }
+    onBottomReached() {
+        this.loadMoreImages.emit();
+    }
+    onImportImage(src) {
+        this.importImageSrc.emit(src);
+    }
+}
+MosaicComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: MosaicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MosaicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: MosaicComponent, selector: "wac-mosaic", inputs: { imagesList: "imagesList", isLoading: "isLoading", numberOfColumn: "numberOfColumn", hoverImageTemplate: "hoverImageTemplate" }, outputs: { importImageSrc: "importImageSrc", loadMoreImages: "loadMoreImages" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wac-mosaic\"  [ngClass]=\"{'is-loading': isLoading}\">\n  <ng-scrollbar (reachedBottom)=\"onBottomReached()\" [reachedOffset]=\"200\" class=\"wac-mosaic__wrapper__scrollbar\">\n    <div class=\"wac-mosaic__wrapper\">\n      <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n        <div class=\"wac-mosaic__wrapper__column__image\" *ngFor=\"let image of column; let i = index; trackBy : trackImage\">\n          <img [src]=\"image.src\" [alt]=\"image.alt\"/>\n          <div class=\"hover\">\n            <ng-container\n              [ngTemplateOutlet]=\"hoverImageTemplate || defaultImportButton\"\n              [ngTemplateOutletContext]=\"{ $implicit: image }\"\n            >\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-mosaic__wrapper load\">\n      <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n        <div class=\"load-img\">\n        </div>\n      </div>\n    </div>\n  </ng-scrollbar>\n</div>\n\n<ng-template #defaultImportButton let-image>\n  <wac-button [icon]=\"'fa-solid fa-image'\" [label]=\"'wac.MosaicComponent.import' | translate\" [extraClasses]=\"'is-success'\" (click)=\"onImportImage(image.src)\"></wac-button>\n</ng-template>\n", 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i3.NgScrollbarReachedBottom, selector: "[reachedBottom], [reached-bottom]", outputs: ["reachedBottom"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }, { 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: MosaicComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-mosaic', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-mosaic\"  [ngClass]=\"{'is-loading': isLoading}\">\n  <ng-scrollbar (reachedBottom)=\"onBottomReached()\" [reachedOffset]=\"200\" class=\"wac-mosaic__wrapper__scrollbar\">\n    <div class=\"wac-mosaic__wrapper\">\n      <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n        <div class=\"wac-mosaic__wrapper__column__image\" *ngFor=\"let image of column; let i = index; trackBy : trackImage\">\n          <img [src]=\"image.src\" [alt]=\"image.alt\"/>\n          <div class=\"hover\">\n            <ng-container\n              [ngTemplateOutlet]=\"hoverImageTemplate || defaultImportButton\"\n              [ngTemplateOutletContext]=\"{ $implicit: image }\"\n            >\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-mosaic__wrapper load\">\n      <div class=\"wac-mosaic__wrapper__column\" *ngFor=\"let column of columns; trackBy : trackColumn;\">\n        <div class=\"load-img\">\n        </div>\n      </div>\n    </div>\n  </ng-scrollbar>\n</div>\n\n<ng-template #defaultImportButton let-image>\n  <wac-button [icon]=\"'fa-solid fa-image'\" [label]=\"'wac.MosaicComponent.import' | translate\" [extraClasses]=\"'is-success'\" (click)=\"onImportImage(image.src)\"></wac-button>\n</ng-template>\n" }]
+        }], propDecorators: { imagesList: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], numberOfColumn: [{
+                type: Input
+            }], hoverImageTemplate: [{
+                type: Input
+            }], importImageSrc: [{
+                type: Output
+            }], loadMoreImages: [{
+                type: Output
+            }] } });
+
+class ContentWithButtonsComponent {
+    constructor() {
+        this.iconCopy = 'fa-duotone fa-copy';
+        this.iconTranslate = 'fa-regular fa-globe';
+        this.tooltipCopy = '';
+        this.tooltipTranslate = '';
+        this.count = true;
+        this.countCharacterLabel = 'caractères';
+        this.countWordsLabel = 'mots';
+        this.copyAction = new EventEmitter();
+        this.reportAction = new EventEmitter();
+        this.translateAction = new EventEmitter();
+        this.countIsReady = false;
+    }
+    ngOnInit() {
+        this.randomLabelName = 'content-' + Math.random() * (900 - 700) + 700;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const content = document.getElementById(this.randomLabelName).innerHTML.replace(/(<([^>]+)>)/gi, '').replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, '');
+            this.countCharacter = content.trim().split(' ').join('').length;
+            this.countWords = content.trim().split(' ').length;
+            this.countIsReady = true;
+        });
+    }
+    eventCopy() {
+        this.copyAction.emit(true);
+    }
+    eventTranslate() {
+        this.translateAction.emit(true);
+    }
+    eventReport() {
+        this.reportAction.emit(true);
+    }
+}
+ContentWithButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ContentWithButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ContentWithButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: ContentWithButtonsComponent, selector: "wac-content-with-buttons", inputs: { iconCopy: "iconCopy", iconTranslate: "iconTranslate", tooltipCopy: "tooltipCopy", tooltipTranslate: "tooltipTranslate", count: "count", countCharacterLabel: "countCharacterLabel", countWordsLabel: "countWordsLabel", reportLabel: "reportLabel" }, outputs: { copyAction: "copyAction", reportAction: "reportAction", translateAction: "translateAction" }, ngImport: i0, template: "<div class=\"wac-content-with-buttons\">\n  <div class=\"wac-content-with-buttons__text\">\n    <div id=\"{{randomLabelName}}\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"wac-content-with-buttons__text__count\" *ngIf=\"count && countIsReady\">\n      <span>{{ countWords }} {{ countWordsLabel }} - {{ countCharacter }} {{ countCharacterLabel }}</span>\n      <span><wac-link (click)=\"$event.preventDefault();\" (mousedown)=\"$event.preventDefault();eventReport();\" fontSize=\"12px\">{{ reportLabel }}</wac-link></span>\n    </div>\n  </div>\n  <div class=\"wac-content-with-buttons__cta\">\n    <div><wac-button extraClasses=\"is-blue opacity static-width\"  [iconFontSize]=\"18\" [icon]=\"iconCopy\" (click)=\"eventCopy()\" [tooltip]=\"tooltipCopy\" [tooltipPosition]=\"'top-center'\" [tooltipWidth]=\"'150px'\"></wac-button></div>\n    <div><wac-button extraClasses=\"is-green opacity static-width\" [iconFontSize]=\"18\" [icon]=\"iconTranslate\" [tooltip]=\"tooltipTranslate\" [tooltipPosition]=\"'top-center'\" [tooltipWidth]=\"'150px'\" (click)=\"eventTranslate()\"></wac-button></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }, { kind: "component", type: LinkComponent, selector: "wac-link", inputs: ["href", "target", "id", "class", "fontSize"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ContentWithButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-content-with-buttons', template: "<div class=\"wac-content-with-buttons\">\n  <div class=\"wac-content-with-buttons__text\">\n    <div id=\"{{randomLabelName}}\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"wac-content-with-buttons__text__count\" *ngIf=\"count && countIsReady\">\n      <span>{{ countWords }} {{ countWordsLabel }} - {{ countCharacter }} {{ countCharacterLabel }}</span>\n      <span><wac-link (click)=\"$event.preventDefault();\" (mousedown)=\"$event.preventDefault();eventReport();\" fontSize=\"12px\">{{ reportLabel }}</wac-link></span>\n    </div>\n  </div>\n  <div class=\"wac-content-with-buttons__cta\">\n    <div><wac-button extraClasses=\"is-blue opacity static-width\"  [iconFontSize]=\"18\" [icon]=\"iconCopy\" (click)=\"eventCopy()\" [tooltip]=\"tooltipCopy\" [tooltipPosition]=\"'top-center'\" [tooltipWidth]=\"'150px'\"></wac-button></div>\n    <div><wac-button extraClasses=\"is-green opacity static-width\" [iconFontSize]=\"18\" [icon]=\"iconTranslate\" [tooltip]=\"tooltipTranslate\" [tooltipPosition]=\"'top-center'\" [tooltipWidth]=\"'150px'\" (click)=\"eventTranslate()\"></wac-button></div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { iconCopy: [{
+                type: Input
+            }], iconTranslate: [{
+                type: Input
+            }], tooltipCopy: [{
+                type: Input
+            }], tooltipTranslate: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }], countCharacterLabel: [{
+                type: Input
+            }], countWordsLabel: [{
+                type: Input
+            }], reportLabel: [{
+                type: Input
+            }], copyAction: [{
+                type: Output
+            }], reportAction: [{
+                type: Output
+            }], translateAction: [{
+                type: Output
+            }] } });
+
+class WrapperMultipleBlockComponent {
+    constructor() { }
+}
+WrapperMultipleBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: WrapperMultipleBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WrapperMultipleBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: WrapperMultipleBlockComponent, selector: "wac-wrapper-multiple-block", ngImport: i0, template: "<div class=\"wac-wrapper-multiple-block\">\n  <div class=\"wac-wrapper-multiple-block__sidebar\">\n    <ng-content select=\"[sidebar]\"></ng-content>\n  </div>\n  <div class=\"wac-wrapper-multiple-block__content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: WrapperMultipleBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-wrapper-multiple-block', template: "<div class=\"wac-wrapper-multiple-block\">\n  <div class=\"wac-wrapper-multiple-block__sidebar\">\n    <ng-content select=\"[sidebar]\"></ng-content>\n  </div>\n  <div class=\"wac-wrapper-multiple-block__content\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class DraganddropListComponent {
+    constructor() {
+        this.label = '';
+        this.disabled = false;
+        this.backgroundColor = '#fff';
+        this.showTriggerSave = false;
+        this.itemsChange = new EventEmitter();
+    }
+    drop(event) {
+        if (!this.disabled) {
+            moveItemInArray(this.items, event.previousIndex, event.currentIndex);
+            this.itemsChange.emit(Object.values(this.items));
+        }
+    }
+    delete(index) {
+        if (!this.disabled) {
+            this.items = this.items.filter((value, i) => i !== index);
+            this.itemsChange.emit(Object.values(this.items));
+        }
+    }
+    saveFieldEnd(index, event) {
+        this.items[index] = event.target.value;
+        this.itemsChange.emit(Object.values(this.items));
+    }
+    addField() {
+        this.showTriggerSave = true;
+    }
+    saveNewField(event) {
+        this.items.push(event.target.value);
+        this.itemsChange.emit(Object.values(this.items));
+        this.showTriggerSave = false;
+    }
+}
+DraganddropListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DraganddropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DraganddropListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: DraganddropListComponent, selector: "wac-draganddrop-list", inputs: { label: "label", items: "items", disabled: "disabled", max: "max", labelBtnAdd: "labelBtnAdd", backgroundColor: "backgroundColor" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disabled\" [style.backgroundColor]=\"backgroundColor\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\" [cdkDropListLockAxis]=\"'y'\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" [style.backgroundColor]=\"backgroundColor\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span (mousedown)=\"$event.stopPropagation()\" class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [value]=\"item\" [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveFieldEnd(i, $event)\" (focusout)=\"saveFieldEnd(i, $event)\"></wac-input>\n        </span>\n      </div>\n      <div (mousedown)=\"$event.stopPropagation()\">\n        <div>\n          <wac-button [iconFontSize]=\"14\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n        </div>\n        <div *ngIf=\"i === (items.length - 1) && max > items.length && !showTriggerSave\">\n          <wac-button [extraClasses]=\"'is-info'\" [iconFontSize]=\"18\" [opacity]=\"true\" [icon]=\"'fa-regular fa-plus'\" (click)=\"addField()\"></wac-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-draganddrop-list__wrapper__item wac-draganddrop-list__wrapper__item--trigger\" *ngIf=\"showTriggerSave\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveNewField($event)\" (focusout)=\"saveNewField($event)\"></wac-input>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disabled\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ 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: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: InputComponent, selector: "wac-input", inputs: ["label", "value", "type", "placeholder", "textInfo", "textError", "size", "isNumber", "withoutBlock", "icon", "big", "medium", "boldLabel", "min", "max", "disableMargin", "textPrepend", "textAppend", "progressBar", "extraClasses", "keyPreventDefault", "showTooltip", "textTooltip", "iconTooltip", "urlTooltip", "linkTooltip", "padding", "disabled", "indication", "success", "error", "maxlength", "minlength", "indicationLeft"], outputs: ["keypressEnter", "blurred"] }, { kind: "component", type: ButtonComponent, selector: "wac-button", inputs: ["extraClasses", "label", "icon", "iconNext", "textcolor", "widthAuto", "contentHorizontalPosition", "iconFontSize", "hasLoader", "disabled", "whiteSpaceNowrap", "opacity", "animation", "animationRight", "animationText", "confirmDelete", "confirmDeleteText", "coin", "tooltip", "tooltipWidth", "noPadding", "tooltipPosition", "tooltipOneline", "confirmDeletePosition", "isLoading"], outputs: ["click", "isLoadingChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: DraganddropListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-draganddrop-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-draganddrop-list\" *ngIf=\"!disabled\" [style.backgroundColor]=\"backgroundColor\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\" [cdkDropListLockAxis]=\"'y'\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" [style.backgroundColor]=\"backgroundColor\" *ngFor=\"let item of items;let i = index;\" cdkDrag>\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span (mousedown)=\"$event.stopPropagation()\" class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [value]=\"item\" [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveFieldEnd(i, $event)\" (focusout)=\"saveFieldEnd(i, $event)\"></wac-input>\n        </span>\n      </div>\n      <div (mousedown)=\"$event.stopPropagation()\">\n        <div>\n          <wac-button [iconFontSize]=\"14\" [opacity]=\"true\" [icon]=\"'fa-regular fa-trash-can'\" [extraClasses]=\"'is-danger'\" (click)=\"delete(i)\"></wac-button>\n        </div>\n        <div *ngIf=\"i === (items.length - 1) && max > items.length && !showTriggerSave\">\n          <wac-button [extraClasses]=\"'is-info'\" [iconFontSize]=\"18\" [opacity]=\"true\" [icon]=\"'fa-regular fa-plus'\" (click)=\"addField()\"></wac-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"wac-draganddrop-list__wrapper__item wac-draganddrop-list__wrapper__item--trigger\" *ngIf=\"showTriggerSave\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__icon\">\n          <span></span>\n        </span>\n        <span class=\"wac-draganddrop-list__wrapper__item__input\">\n          <wac-input [extraClasses]=\"'transparent'\" (keyup.enter)=\"saveNewField($event)\" (focusout)=\"saveNewField($event)\"></wac-input>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"wac-draganddrop-list wac-draganddrop-list--disabled\" *ngIf=\"disabled\">\n  <div class=\"wac-draganddrop-list__label\" *ngIf=\"label\"><span [innerHTML]=\"label\"></span></div>\n  <div class=\"wac-draganddrop-list__wrapper\">\n    <div class=\"wac-draganddrop-list__wrapper__item\" *ngFor=\"let item of items;let i = index;\">\n      <div>\n        <span class=\"wac-draganddrop-list__wrapper__item__label\" [innerHTML]=\"item\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], labelBtnAdd: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], itemsChange: [{
+                type: Output
+            }] } });
+
 const components = [
     TagComponent,
     TabComponent,
@@ -3992,7 +5032,7 @@ const components = [
     LogoComponent,
     RadioComponent,
     StateComponent,
-    LabelComponent,
+    TagLabelComponent,
     CalendarComponent,
     WzEditInPlaceComponent,
     AlertComponent,
@@ -4020,7 +5060,23 @@ const components = [
     SnackbarComponent,
     SearchComponent,
     SelectedListComponent,
-    OptionalDisableContainerComponent
+    OptionalDisableContainerComponent,
+    SelectTestComponent,
+    OptionComponent,
+    OptionCallToActionComponent,
+    PlaceholderComponent,
+    LabelComponent,
+    SelectSearchTriggerComponent,
+    WrapperSidebarComponent,
+    BreadcrumbsComponent,
+    CardPriceComponent,
+    TokenCheckComponent,
+    BlockWithCheckboxComponent,
+    ConfirmDeleteComponent,
+    MosaicComponent,
+    ContentWithButtonsComponent,
+    WrapperMultipleBlockComponent,
+    DraganddropListComponent
 ];
 const exportsFromModule = [
     PaginationComponent,
@@ -4053,7 +5109,7 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         LogoComponent,
         RadioComponent,
         StateComponent,
-        LabelComponent,
+        TagLabelComponent,
         CalendarComponent,
         WzEditInPlaceComponent,
         AlertComponent,
@@ -4081,13 +5137,30 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         SnackbarComponent,
         SearchComponent,
         SelectedListComponent,
-        OptionalDisableContainerComponent], imports: [CommonModule,
+        OptionalDisableContainerComponent,
+        SelectTestComponent,
+        OptionComponent,
+        OptionCallToActionComponent,
+        PlaceholderComponent,
+        LabelComponent,
+        SelectSearchTriggerComponent,
+        WrapperSidebarComponent,
+        BreadcrumbsComponent,
+        CardPriceComponent,
+        TokenCheckComponent,
+        BlockWithCheckboxComponent,
+        ConfirmDeleteComponent,
+        MosaicComponent,
+        ContentWithButtonsComponent,
+        WrapperMultipleBlockComponent,
+        DraganddropListComponent], imports: [CommonModule,
         FormsModule,
         NwbAllModule, i1$3.TranslateModule, ReactiveFormsModule,
         SharedDirectives,
         SharedPipes,
         CdkTableModule,
         TagInputModule,
+        DragDropModule,
         PaginationModule,
         TableModule,
         InputSearchModule,
@@ -4099,6 +5172,9 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         PerfectScrollbarModule,
         AlertPopupModule,
         RouterModule,
+        AutosizeModule,
+        NgScrollbarModule,
+        NgScrollbarReachedModule,
         TreeModule], exports: [TagComponent,
         TabComponent,
         ButtonComponent,
@@ -4112,7 +5188,7 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         LogoComponent,
         RadioComponent,
         StateComponent,
-        LabelComponent,
+        TagLabelComponent,
         CalendarComponent,
         WzEditInPlaceComponent,
         AlertComponent,
@@ -4140,7 +5216,23 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         SnackbarComponent,
         SearchComponent,
         SelectedListComponent,
-        OptionalDisableContainerComponent, PaginationComponent,
+        OptionalDisableContainerComponent,
+        SelectTestComponent,
+        OptionComponent,
+        OptionCallToActionComponent,
+        PlaceholderComponent,
+        LabelComponent,
+        SelectSearchTriggerComponent,
+        WrapperSidebarComponent,
+        BreadcrumbsComponent,
+        CardPriceComponent,
+        TokenCheckComponent,
+        BlockWithCheckboxComponent,
+        ConfirmDeleteComponent,
+        MosaicComponent,
+        ContentWithButtonsComponent,
+        WrapperMultipleBlockComponent,
+        DraganddropListComponent, PaginationComponent,
         TableComponent,
         TableColumn,
         CheckBoxRow,
@@ -4162,6 +5254,7 @@ SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         SharedPipes,
         CdkTableModule,
         TagInputModule,
+        DragDropModule,
         PaginationModule,
         TableModule,
         InputSearchModule,
@@ -4173,6 +5266,9 @@ SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         PerfectScrollbarModule,
         AlertPopupModule,
         RouterModule,
+        AutosizeModule,
+        NgScrollbarModule,
+        NgScrollbarReachedModule,
         TreeModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SharedComponentsModule, decorators: [{
             type: NgModule,
@@ -4187,6 +5283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                         SharedPipes,
                         CdkTableModule,
                         TagInputModule,
+                        DragDropModule,
                         PaginationModule,
                         TableModule,
                         InputSearchModule,
@@ -4198,6 +5295,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                         PerfectScrollbarModule,
                         AlertPopupModule,
                         RouterModule,
+                        AutosizeModule,
+                        NgScrollbarModule,
+                        NgScrollbarReachedModule,
                         TreeModule
                     ],
                     declarations: components,
@@ -4249,5 +5349,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, BlockWithCheckboxComponent, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CardPriceComponent, CheckBoxRow, CheckboxComponent, ConfirmDeleteComponent, ContentWithButtonsComponent, DebounceKeyupDirective, DeleteComponent, DraganddropListComponent, DropdownComponent, FilterOptionsPipe, FiltersComponent, FiltersTableService, FormatObjectToRecursifTreePipe, FormatObjectToSimpleTreePipe, FreePopinComponent, H1Component, H2Component, H3Component, H4Component, HeaderPageComponent, HtmlContainer, ImageComponent, InfoComponent, InputComponent, InputSearchComponent, InputWithSelectComponent, KeypressEnterDirective, LabelComponent, LinkComponent, LoaderComponent, LogoComponent, MosaicComponent, MultipleSearchComponent, MultipleSearchPlusComponent, OptionCallToActionComponent, OptionComponent, OptionalDisableContainerComponent, PaginationComponent, PlaceholderComponent, PopinComponent, ProgressBarComponent, RadioComponent, SearchComponent, SelectComponent, SelectFiltersPipe, SelectInTextComponent, SelectOptionDirective, SelectSearchTriggerComponent, SelectTestComponent, SelectedListComponent, SeparatorComponent, SettingsComponent, SharedComponentsModule, SharedDirectives, SharedPipes, SnackbarComponent, StateComponent, SwitchComponent, TabComponent, TableColumn, TableColumnHeader, TableComponent, TableFiltersGroup, TableRow, TagComponent, TagLabelComponent, TextAreaComponent, TextComponent, TokenCheckComponent, TooltipComponent, TreeComponent, TreeModule, UploadComponent, VarDirective, WiziComponentsModule, WrapperBlocsComponent, WrapperComponent, WrapperMultipleBlockComponent, WrapperSidebarComponent, WzEditInPlaceComponent, ZindexToggleDirective };
 //# sourceMappingURL=wizishop-angular-components.mjs.map