@wizishop/angular-components 15.1.28 → 15.1.31

package/fesm2015/wizishop-angular-components.mjs

@@ -6,24 +6,24 @@ import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, DatePipe } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
-import * as i4$1 from 'ngx-perfect-scrollbar';
+import * as i4 from 'ngx-perfect-scrollbar';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { Subject, merge, takeUntil as takeUntil$1, startWith, fromEvent, ReplaySubject, interval, map as map$1, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1 } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged, tap, filter, map, takeWhile } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/overlay';
 import { TAB, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, A, Z, ZERO, NINE, ENTER, hasModifierKey, ESCAPE } from '@angular/cdk/keycodes';
+import * as i1$2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { CdkTableModule } from '@angular/cdk/table';
 import { trigger, transition, style, animate, state, animation, query, stagger } from '@angular/animations';
 import { TagInputModule } from 'ngx-chips';
-import * as i1$2 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import * as i4 from 'ngx-autosize';
+import * as i3$1 from 'ngx-autosize';
 import { AutosizeModule } from 'ngx-autosize';
 import * as i1$3 from '@angular/router';
 import { NavigationStart, RouterModule } from '@angular/router';
 import * as i2$1 from 'ngx-scrollbar';
 import { NgScrollbarModule } from 'ngx-scrollbar';
-import * as i3$1 from 'ngx-scrollbar/reached-event';
+import * as i3$2 from 'ngx-scrollbar/reached-event';
 import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
 import * as i2$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
@@ -99,57 +99,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 args: ['keyup', ['$event']]
             }] } });
 
-class InputSearchComponent {
-    constructor() {
-        this.placeholder = '';
-        this.withoutgrey = false;
-        this.smallPadding = false; // todo Try to be more flexible like changing type : export type PaddingConfig = "default" | "small" | "big" | "no-padding";
-        this.innerValue = '';
-        this.changeDebounced = new EventEmitter(); // debounced
-        this.onTouchedCallback = () => { };
-        this.onChangeCallback = () => { };
-    }
-    get value() {
-        return this.innerValue;
-    }
-    set value(v) {
-        if (v !== this.innerValue) {
-            this.innerValue = v;
-            this.onChangeCallback(v);
-        }
-    }
-    writeValue(value) {
-        if (value !== this.innerValue) {
-            this.innerValue = value;
-        }
-    }
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    handleDebouncedKeyUp() {
-        this.changeDebounced.emit(this.value);
-    }
-}
-InputSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: InputSearchComponent, selector: "wac-input-search", inputs: { placeholder: "placeholder", withoutgrey: "withoutgrey", smallPadding: "smallPadding", id: "id" }, outputs: { changeDebounced: "changeDebounced" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputSearchComponent, multi: true }], ngImport: i0, template: "<div class=\"wac-field-input-search\" [ngClass]=\"{'small-padding' : smallPadding, 'no-grey': withoutgrey}\">\n  <p class=\"control has-icons-left has-icons-right\">\n    <input\n      [placeholder]=\"placeholder\"\n      value=\"\"\n      class=\"input\"\n      type=\"text\"\n      [attr.id]=\"id\"\n      [(ngModel)]=\"value\"\n      debounceKeyUp\n      [debounceTime]=\"1000\"\n      (onEventChange)=\"handleDebouncedKeyUp()\"\n    />\n    <i class=\"icon fal fa-search\"></i>\n  </p>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputSearchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wac-input-search', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputSearchComponent, multi: true }], template: "<div class=\"wac-field-input-search\" [ngClass]=\"{'small-padding' : smallPadding, 'no-grey': withoutgrey}\">\n  <p class=\"control has-icons-left has-icons-right\">\n    <input\n      [placeholder]=\"placeholder\"\n      value=\"\"\n      class=\"input\"\n      type=\"text\"\n      [attr.id]=\"id\"\n      [(ngModel)]=\"value\"\n      debounceKeyUp\n      [debounceTime]=\"1000\"\n      (onEventChange)=\"handleDebouncedKeyUp()\"\n    />\n    <i class=\"icon fal fa-search\"></i>\n  </p>\n</div>\n" }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], withoutgrey: [{
-                type: Input
-            }], smallPadding: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], changeDebounced: [{
-                type: Output
-            }] } });
-
 class DomService {
     constructor(componentFactoryResolver, appRef, injector, overlayContainer) {
         this.componentFactoryResolver = componentFactoryResolver;
@@ -1019,37 +968,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 }]
         }] });
 
-const inOutY = trigger('inOutYAnimation', [
-    transition(':enter', [
-        style({ transform: 'scaleY(0)', height: 0, opacity: 0 }),
-        animate('.3s ease-out', style({ transform: 'scaleY(1)', height: 'auto', opacity: 1 }))
-    ]),
-    transition(':leave', [
-        style({ transform: 'scaleY(1)', height: 'auto', opacity: 1 }),
-        animate('.3s ease-in', style({ transform: 'scaleY(0)', height: 0, opacity: 0 }))
-    ])
-]);
+class TooltipComponent {
+    constructor() {
+        this.tooltipText = '';
+        this.tooltipLink = '';
+        this.tooltipUrl = '#';
+    }
+    ngOnInit() {
+        if (this.tooltipIcon === '') {
+            this.tooltipIcon = 'fas fa-info-circle';
+        }
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: TooltipComponent, selector: "wac-tooltip", inputs: { tooltipIcon: "tooltipIcon", tooltipText: "tooltipText", tooltipLink: "tooltipLink", tooltipUrl: "tooltipUrl" }, ngImport: i0, template: "<span class=\"wac-tooltip\">\n  <i [class]=\"tooltipIcon\"></i>\n  <span class=\"tooltip-content\"\n    >{{ tooltipText }}\n    <span *ngIf=\"tooltipUrl\"\n      ><a [href]=\"tooltipUrl\" target=\"_blank\">{{ tooltipLink }}</a></span\n    >\n  </span>\n</span>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-tooltip', template: "<span class=\"wac-tooltip\">\n  <i [class]=\"tooltipIcon\"></i>\n  <span class=\"tooltip-content\"\n    >{{ tooltipText }}\n    <span *ngIf=\"tooltipUrl\"\n      ><a [href]=\"tooltipUrl\" target=\"_blank\">{{ tooltipLink }}</a></span\n    >\n  </span>\n</span>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { tooltipIcon: [{
+                type: Input
+            }], tooltipText: [{
+                type: Input
+            }], tooltipLink: [{
+                type: Input
+            }], tooltipUrl: [{
+                type: Input
+            }] } });
 
-class CheckboxComponent {
-    set value(value) {
-        this._value = value;
-        this._onChange(value);
-        this._onTouched();
+class TooltipModule {
+}
+TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent], imports: [CommonModule,
+        FormsModule], exports: [TooltipComponent] });
+TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TooltipModule, imports: [CommonModule,
+        FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule
+                    ],
+                    exports: [TooltipComponent],
+                    declarations: [TooltipComponent],
+                    providers: [],
+                }]
+        }] });
+
+class ProgressBarComponent {
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.valueLength = null;
+        this.min = null;
+        this.max = null;
     }
-    get value() {
-        return this._value;
+    progressBarClass(spanNumber = -1) {
+        const length = this.valueLength;
+        const min = this.min;
+        const max = this.max;
+        if (spanNumber === 1) {
+            return {
+                'is-danger': length > max,
+                'is-success': length >= min && length <= max
+            };
+        }
+        else if (spanNumber === 2) {
+            return {
+                'is-success': length === max,
+                'is-danger': length > max
+            };
+        }
+        else {
+            return {
+                'is-warning': length < min,
+                'is-danger': length > max,
+                'is-success': length >= min && length <= max
+            };
+        }
+    }
+    progressBarSpanPosition(index) {
+        const min = this.min;
+        const max = this.max;
+        const maxSize = this.progressBarGetMaxSize(max);
+        const successMin = (min / maxSize) * 100;
+        const successMax = (max / maxSize) * 100;
+        return index === 1 ? successMin : successMax;
+    }
+    progressBarGetMaxSize(max) {
+        return max + max / 4;
+    }
+    progressBarGetTextInfo() {
+        const length = this.valueLength;
+        const min = this.min;
+        const max = this.max;
+        if (length < min) {
+            return this.translateService.instant('wac.input.progressbar.information.too.short');
+        }
+        else if (length > max) {
+            return this.translateService.instant('wac.input.progressbar.information.too.long');
+        }
+        else {
+            return this.translateService.instant('wac.input.progressbar.information.good');
+        }
     }
+}
+ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: ProgressBarComponent, isStandalone: true, selector: "wac-progress-bar", inputs: { valueLength: "valueLength", min: "min", max: "max" }, ngImport: i0, template: "<div class=\"wac-progressBarContent\">\n  <div class=\"progressBar\">\n    <progress class=\"progress\" [ngClass]=\"progressBarClass()\" [max]=\"progressBarGetMaxSize(max)\" [value]=\"valueLength\"></progress>\n    <span [ngClass]=\"progressBarClass(1)\" [ngStyle]=\"{ 'left.%': progressBarSpanPosition(1) }\"></span>\n    <span [ngClass]=\"progressBarClass(2)\" [ngStyle]=\"{ 'left.%': progressBarSpanPosition(2) }\"></span>\n  </div>\n  <div class=\"size\">\n    <span class=\"is-size-7 wac-input__size\">\n      <span *ngIf=\"valueLength\">\n        <span [ngClass]=\"progressBarClass()\">{{ progressBarGetTextInfo() }}</span> -\n      </span>\n      <strong>{{ valueLength }}</strong> / {{ max }}\n    </span>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-progress-bar', standalone: true, imports: [CommonModule], template: "<div class=\"wac-progressBarContent\">\n  <div class=\"progressBar\">\n    <progress class=\"progress\" [ngClass]=\"progressBarClass()\" [max]=\"progressBarGetMaxSize(max)\" [value]=\"valueLength\"></progress>\n    <span [ngClass]=\"progressBarClass(1)\" [ngStyle]=\"{ 'left.%': progressBarSpanPosition(1) }\"></span>\n    <span [ngClass]=\"progressBarClass(2)\" [ngStyle]=\"{ 'left.%': progressBarSpanPosition(2) }\"></span>\n  </div>\n  <div class=\"size\">\n    <span class=\"is-size-7 wac-input__size\">\n      <span *ngIf=\"valueLength\">\n        <span [ngClass]=\"progressBarClass()\">{{ progressBarGetTextInfo() }}</span> -\n      </span>\n      <strong>{{ valueLength }}</strong> / {{ max }}\n    </span>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; }, propDecorators: { valueLength: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }] } });
+
+class InputComponent {
     constructor() {
         this.label = '';
-        this.type = 'checkbox';
-        this.alone = false;
-        this.checked = false;
-        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 = ''; // todo maybe create a static property for unique id
-        this.whiteSpace = true;
+        this.value = '';
+        this.type = 'text';
+        this.placeholder = ''; // todo could be handle with ng-content
+        this.textInfo = null; // todo should be handle with ng-content
+        this.textError = null; // todo should be handle with ng-content
+        this.size = null;
+        this.isNumber = null;
+        this.withoutBlock = false;
+        this.icon = '';
+        this.big = false;
+        this.medium = false;
+        this.boldLabel = 'false'; // todo refacto to boolean
+        this.min = null;
+        this.max = null;
+        this.disableMargin = false;
+        this.textPrepend = null; // todo should be handle with ng-content
+        this.textAppend = null; // todo should be handle with ng-content
+        this.progressBar = false;
+        this.extraClasses = '';
+        this.keyPreventDefault = [];
+        this.showTooltip = false;
+        this.textTooltip = '';
+        this.iconTooltip = '';
+        this.urlTooltip = '';
+        this.linkTooltip = '';
+        this.padding = false;
         this.disabled = false;
-        this.valueChange = new EventEmitter();
+        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();
+        this.KEYPRESS_ENTER = "Enter";
+        this.id = 'wz-input_' +
+            Math.random()
+                .toString(36)
+                .substr(2, 9);
         this._onChange = (value) => { };
         this._onTouched = () => { };
     }
@@ -1062,28 +1138,248 @@ class CheckboxComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    writeValue(isChecked) {
-        this._value = isChecked;
+    writeValue(obj) {
+        this.value = obj;
     }
     onChange(value) {
-        this._onChange(value);
+        if (this._onChange) {
+            this._onChange(value);
+        }
     }
-    inputClick($event) {
-        $event.stopPropagation();
+    onBlur() {
+        if (this._onTouched) {
+            this._onTouched();
+        }
+        this.blurred.next();
     }
-}
-CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: CheckboxComponent, selector: "wac-checkbox", inputs: { label: "label", value: "value", type: "type", alone: "alone", checked: "checked", hasInput: "hasInput", inputPlaceholder: "inputPlaceholder", id: "id", name: "name", whiteSpace: "whiteSpace", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], ngImport: i0, template: "<div class=\"wac-field-checkbox\" [ngClass]=\"{ 'disable-wt' : !whiteSpace, alone: alone }\">\n  <div class=\"wac-field-checkbox__row\">\n    <!-- TODO handle radio styles -->\n    <input\n      [type]=\"type\"\n      [id]=\"id\"\n      [class]=\"'is-checkradio' + (value ? ' checked' : '')\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"value = !value\"\n    />\n    <label [attr.for]=\"id\"><span [innerHTML]=\"label\"></span></label>\n  </div>\n  <input\n    *ngIf=\"hasInput && checked\"\n    [@inOutYAnimation]\n    type=\"text\"\n    [placeholder]=\"inputPlaceholder\"\n    (click)=\"inputClick($event)\"\n  />\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"] }], animations: [inOutY], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: CheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wac-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], animations: [inOutY], encapsulation: ViewEncapsulation.None, template: "<div class=\"wac-field-checkbox\" [ngClass]=\"{ 'disable-wt' : !whiteSpace, alone: alone }\">\n  <div class=\"wac-field-checkbox__row\">\n    <!-- TODO handle radio styles -->\n    <input\n      [type]=\"type\"\n      [id]=\"id\"\n      [class]=\"'is-checkradio' + (value ? ' checked' : '')\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"value = !value\"\n    />\n    <label [attr.for]=\"id\"><span [innerHTML]=\"label\"></span></label>\n  </div>\n  <input\n    *ngIf=\"hasInput && checked\"\n    [@inOutYAnimation]\n    type=\"text\"\n    [placeholder]=\"inputPlaceholder\"\n    (click)=\"inputClick($event)\"\n  />\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], alone: [{
+    checkNumberValue(value) {
+        if (this.min && this.min > value) {
+            this.value = this.min;
+        }
+        if (this.max && this.max < value) {
+            this.value = this.max;
+        }
+    }
+    onFocusOut() {
+        if (this.type === 'number') {
+            this.checkNumberValue(this.value);
+        }
+    }
+    keyPress(event) {
+        if (this.keyPreventDefault.includes(event.key)) {
+            event.preventDefault();
+        }
+        if (event.key === this.KEYPRESS_ENTER) {
+            this.keypressEnter.next(true);
+        }
+    }
+}
+InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: InputComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: SharedDirectives }, { kind: "ngmodule", type: TooltipModule }, { 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: "15.1.1", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-input', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        SharedDirectives,
+                        TooltipModule,
+                        ProgressBarComponent
+                    ], 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: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], textInfo: [{
+                type: Input
+            }], textError: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], isNumber: [{
+                type: Input
+            }], withoutBlock: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], big: [{
+                type: Input
+            }], medium: [{
+                type: Input
+            }], boldLabel: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], disableMargin: [{
+                type: Input
+            }], textPrepend: [{
+                type: Input
+            }], textAppend: [{
+                type: Input
+            }], progressBar: [{
+                type: Input
+            }], extraClasses: [{
+                type: Input
+            }], keyPreventDefault: [{
+                type: Input
+            }], showTooltip: [{
+                type: Input
+            }], textTooltip: [{
+                type: Input
+            }], iconTooltip: [{
+                type: Input
+            }], urlTooltip: [{
+                type: Input
+            }], linkTooltip: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], indication: [{
+                type: Input
+            }], success: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], indicationLeft: [{
+                type: Input
+            }], keypressEnter: [{
+                type: Output
+            }], blurred: [{
+                type: Output
+            }] } });
+
+class InputSearchComponent {
+    constructor() {
+        this.placeholder = '';
+        this.withoutgrey = false;
+        this.smallPadding = false; // todo Try to be more flexible like changing type : export type PaddingConfig = "default" | "small" | "big" | "no-padding";
+        this.innerValue = '';
+        this.changeDebounced = new EventEmitter(); // debounced
+        this.onTouchedCallback = () => { };
+        this.onChangeCallback = () => { };
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(v) {
+        if (v !== this.innerValue) {
+            this.innerValue = v;
+            this.onChangeCallback(v);
+        }
+    }
+    writeValue(value) {
+        if (value !== this.innerValue) {
+            this.innerValue = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    handleDebouncedKeyUp() {
+        this.changeDebounced.emit(this.value);
+    }
+}
+InputSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: InputSearchComponent, isStandalone: true, selector: "wac-input-search", inputs: { placeholder: "placeholder", withoutgrey: "withoutgrey", smallPadding: "smallPadding", id: "id" }, outputs: { changeDebounced: "changeDebounced" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputSearchComponent, multi: true }], ngImport: i0, template: "<div class=\"wac-field-input-search\" [ngClass]=\"{'small-padding' : smallPadding, 'no-grey': withoutgrey}\">\n  <p class=\"control has-icons-left has-icons-right\">\n    <input\n      [placeholder]=\"placeholder\"\n      value=\"\"\n      class=\"input\"\n      type=\"text\"\n      [attr.id]=\"id\"\n      [(ngModel)]=\"value\"\n      debounceKeyUp\n      [debounceTime]=\"1000\"\n      (onEventChange)=\"handleDebouncedKeyUp()\"\n    />\n    <i class=\"icon fal fa-search\"></i>\n  </p>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: SharedDirectives }, { kind: "directive", type: DebounceKeyupDirective, selector: "input[debounceKeyUp]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-input-search', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        InputComponent,
+                        SharedDirectives
+                    ], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: InputSearchComponent, multi: true }], template: "<div class=\"wac-field-input-search\" [ngClass]=\"{'small-padding' : smallPadding, 'no-grey': withoutgrey}\">\n  <p class=\"control has-icons-left has-icons-right\">\n    <input\n      [placeholder]=\"placeholder\"\n      value=\"\"\n      class=\"input\"\n      type=\"text\"\n      [attr.id]=\"id\"\n      [(ngModel)]=\"value\"\n      debounceKeyUp\n      [debounceTime]=\"1000\"\n      (onEventChange)=\"handleDebouncedKeyUp()\"\n    />\n    <i class=\"icon fal fa-search\"></i>\n  </p>\n</div>\n" }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], withoutgrey: [{
+                type: Input
+            }], smallPadding: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], changeDebounced: [{
+                type: Output
+            }] } });
+
+const inOutY = trigger('inOutYAnimation', [
+    transition(':enter', [
+        style({ transform: 'scaleY(0)', height: 0, opacity: 0 }),
+        animate('.3s ease-out', style({ transform: 'scaleY(1)', height: 'auto', opacity: 1 }))
+    ]),
+    transition(':leave', [
+        style({ transform: 'scaleY(1)', height: 'auto', opacity: 1 }),
+        animate('.3s ease-in', style({ transform: 'scaleY(0)', height: 0, opacity: 0 }))
+    ])
+]);
+
+class CheckboxComponent {
+    set value(value) {
+        this._value = value;
+        this._onChange(value);
+        this._onTouched();
+    }
+    get value() {
+        return this._value;
+    }
+    constructor() {
+        this.label = '';
+        this.type = 'checkbox';
+        this.alone = false;
+        this.checked = false;
+        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 = ''; // todo maybe create a static property for unique id
+        this.whiteSpace = true;
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+        this._onChange = (value) => { };
+        this._onTouched = () => { };
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(isChecked) {
+        this._value = isChecked;
+    }
+    onChange(value) {
+        this._onChange(value);
+    }
+    inputClick($event) {
+        $event.stopPropagation();
+    }
+}
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: CheckboxComponent, selector: "wac-checkbox", inputs: { label: "label", value: "value", type: "type", alone: "alone", checked: "checked", hasInput: "hasInput", inputPlaceholder: "inputPlaceholder", id: "id", name: "name", whiteSpace: "whiteSpace", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], ngImport: i0, template: "<div class=\"wac-field-checkbox\" [ngClass]=\"{ 'disable-wt' : !whiteSpace, alone: alone }\">\n  <div class=\"wac-field-checkbox__row\">\n    <!-- TODO handle radio styles -->\n    <input\n      [type]=\"type\"\n      [id]=\"id\"\n      [class]=\"'is-checkradio' + (value ? ' checked' : '')\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"value = !value\"\n    />\n    <label [attr.for]=\"id\"><span [innerHTML]=\"label\"></span></label>\n  </div>\n  <input\n    *ngIf=\"hasInput && checked\"\n    [@inOutYAnimation]\n    type=\"text\"\n    [placeholder]=\"inputPlaceholder\"\n    (click)=\"inputClick($event)\"\n  />\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"] }], animations: [inOutY], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], animations: [inOutY], encapsulation: ViewEncapsulation.None, template: "<div class=\"wac-field-checkbox\" [ngClass]=\"{ 'disable-wt' : !whiteSpace, alone: alone }\">\n  <div class=\"wac-field-checkbox__row\">\n    <!-- TODO handle radio styles -->\n    <input\n      [type]=\"type\"\n      [id]=\"id\"\n      [class]=\"'is-checkradio' + (value ? ' checked' : '')\"\n      [name]=\"name\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"value = !value\"\n    />\n    <label [attr.for]=\"id\"><span [innerHTML]=\"label\"></span></label>\n  </div>\n  <input\n    *ngIf=\"hasInput && checked\"\n    [@inOutYAnimation]\n    type=\"text\"\n    [placeholder]=\"inputPlaceholder\"\n    (click)=\"inputClick($event)\"\n  />\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], alone: [{
                 type: Input
             }], checked: [{
                 type: Input
@@ -2549,95 +2845,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 args: ['input']
             }] } });
 
-class ProgressBarComponent {
-    constructor(translateService) {
-        this.translateService = translateService;
-        this.valueLength = null;
+class TextAreaComponent {
+    constructor() {
+        // todo simplify and improve progress bar
+        this.label = '';
+        this.value = '';
+        this.placeholder = '';
+        this.textInfo = '';
+        this.textError = '';
+        this.size = null;
         this.min = null;
         this.max = null;
-    }
-    progressBarClass(spanNumber = -1) {
-        const length = this.valueLength;
-        const min = this.min;
-        const max = this.max;
-        if (spanNumber === 1) {
-            return {
-                'is-danger': length > max,
-                'is-success': length >= min && length <= max
-            };
-        }
-        else if (spanNumber === 2) {
-            return {
-                'is-success': length === max,
-                'is-danger': length > max
-            };
-        }
-        else {
-            return {
-                'is-warning': length < min,
-                'is-danger': length > max,
-                'is-success': length >= min && length <= max
-            };
-        }
-    }
-    progressBarSpanPosition(index) {
-        const min = this.min;
-        const max = this.max;
-        const maxSize = this.progressBarGetMaxSize(max);
-        const successMin = (min / maxSize) * 100;
-        const successMax = (max / maxSize) * 100;
-        return index === 1 ? successMin : successMax;
-    }
-    progressBarGetMaxSize(max) {
-        return max + max / 4;
-    }
-    progressBarGetTextInfo() {
-        const length = this.valueLength;
-        const min = this.min;
-        const max = this.max;
-        if (length < min) {
-            return this.translateService.instant('wac.input.progressbar.information.too.short');
-        }
-        else if (length > max) {
-            return this.translateService.instant('wac.input.progressbar.information.too.long');
-        }
-        else {
-            return this.translateService.instant('wac.input.progressbar.information.good');
-        }
-    }
-}
-ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: ProgressBarComponent, selector: "wac-progress-bar", inputs: { valueLength: "valueLength", min: "min", max: "max" }, ngImport: i0, template: "<div class=\"wac-progressBarContent\">\n  <div class=\"progressBar\">\n    <progress class=\"progress\" [ngClass]=\"progressBarClass()\" [max]=\"progressBarGetMaxSize(max)\" [value]=\"valueLength\"></progress>\n    <span [ngClass]=\"progressBarClass(1)\" [ngStyle]=\"{ 'left.%': progressBarSpanPosition(1) }\"></span>\n    <span [ngClass]=\"progressBarClass(2)\" [ngStyle]=\"{ 'left.%': progressBarSpanPosition(2) }\"></span>\n  </div>\n  <div class=\"size\">\n    <span class=\"is-size-7 wac-input__size\">\n      <span *ngIf=\"valueLength\">\n        <span [ngClass]=\"progressBarClass()\">{{ progressBarGetTextInfo() }}</span> -\n      </span>\n      <strong>{{ valueLength }}</strong> / {{ max }}\n    </span>\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wac-progress-bar', template: "<div class=\"wac-progressBarContent\">\n  <div class=\"progressBar\">\n    <progress class=\"progress\" [ngClass]=\"progressBarClass()\" [max]=\"progressBarGetMaxSize(max)\" [value]=\"valueLength\"></progress>\n    <span [ngClass]=\"progressBarClass(1)\" [ngStyle]=\"{ 'left.%': progressBarSpanPosition(1) }\"></span>\n    <span [ngClass]=\"progressBarClass(2)\" [ngStyle]=\"{ 'left.%': progressBarSpanPosition(2) }\"></span>\n  </div>\n  <div class=\"size\">\n    <span class=\"is-size-7 wac-input__size\">\n      <span *ngIf=\"valueLength\">\n        <span [ngClass]=\"progressBarClass()\">{{ progressBarGetTextInfo() }}</span> -\n      </span>\n      <strong>{{ valueLength }}</strong> / {{ max }}\n    </span>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }]; }, propDecorators: { valueLength: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }] } });
-
-class TextAreaComponent {
-    constructor() {
-        // todo simplify and improve progress bar
-        this.label = '';
-        this.value = '';
-        this.placeholder = '';
-        this.textInfo = '';
-        this.textError = '';
-        this.size = null;
-        this.min = null;
-        this.max = null;
-        this.dynamicSize = false;
-        this.progressBar = false;
-        this.disabled = false;
-        this.disableResize = false;
-        this.id = 'wac-textarea__' +
-            Math.random()
-                .toString(36)
-                .substr(2, 9);
+        this.dynamicSize = false;
+        this.progressBar = false;
+        this.disabled = false;
+        this.disableResize = false;
+        this.id = 'wac-textarea__' +
+            Math.random()
+                .toString(36)
+                .substr(2, 9);
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -2664,368 +2890,178 @@ class TextAreaComponent {
     }
 }
 TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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", disableResize: "disableResize" }, 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' + (disableResize ? ' no-resize' : '')\"\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"] }] });
+TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: TextAreaComponent, isStandalone: true, 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", disableResize: "disableResize" }, 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' + (disableResize ? ' no-resize' : '')\"\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: AutosizeModule }, { kind: "directive", type: i3$1.AutosizeDirective, selector: "[autosize]", inputs: ["minRows", "autosize", "maxRows", "onlyGrow", "useImportant"], outputs: ["resized"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", 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\" [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' + (disableResize ? ' no-resize' : '')\"\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: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], textInfo: [{
-                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
-            }], disableResize: [{
-                type: Input
-            }] } });
-
-class H1Component {
-    constructor() {
-        this.annotation = '';
-        this.withImg = false;
-        this.center = false;
-        this.color = null;
-    }
-}
-H1Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: H1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H1Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: H1Component, selector: "wac-h1", inputs: { annotation: "annotation", withImg: "withImg", center: "center", color: "color" }, ngImport: i0, template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\" [style.color]=\"color?color:''\"><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: "15.1.1", ngImport: i0, type: H1Component, decorators: [{
-            type: Component,
-            args: [{ selector: 'wac-h1', template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\" [style.color]=\"color?color:''\"><ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small></h1>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { annotation: [{
-                type: Input
-            }], withImg: [{
-                type: Input
-            }], center: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-
-class H2Component {
-    constructor() { }
-    ngOnInit() { }
-}
-H2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: H2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: H2Component, selector: "wac-h2", ngImport: i0, template: "<h2 class=\"wac-h2\"><ng-content></ng-content></h2>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: H2Component, decorators: [{
-            type: Component,
-            args: [{ selector: 'wac-h2', template: "<h2 class=\"wac-h2\"><ng-content></ng-content></h2>\n" }]
-        }], ctorParameters: function () { return []; } });
-
-class H3Component {
-    constructor() {
-        this.grey = false;
-    }
-    ngOnInit() { }
-}
-H3Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: H3Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-H3Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: H3Component, selector: "wac-h3", inputs: { grey: "grey" }, ngImport: i0, template: "<h3 class=\"wac-h3\" [ngClass]=\"{ grey: grey }\"><ng-content></ng-content></h3>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: H3Component, decorators: [{
-            type: Component,
-            args: [{ selector: 'wac-h3', template: "<h3 class=\"wac-h3\" [ngClass]=\"{ grey: grey }\"><ng-content></ng-content></h3>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { grey: [{
-                type: Input
-            }] } });
-
-class HistoryService {
-    constructor(router) {
-        this.router = router;
-        this.history = [];
-    }
-    registerHistory() {
-        this.router.events.subscribe((event) => {
-            if (event instanceof NavigationStart) {
-                if (this.history.length > 0 && this.history[this.history.length - 1] === event.url.split('?')[0]) {
-                    return;
-                }
-                this.history.push(event.url.split('?')[0]);
-            }
-        });
-    }
-    back(link) {
-        this.history.pop();
-        if (this.history.length > 0) {
-            const lastlink = this.history[this.history.length - 1];
-            this.router.navigate(lastlink.split('/'));
-        }
-        else {
-            this.redirect(link);
-        }
-    }
-    redirect(link) {
-        if (link[0].indexOf('http') !== -1) {
-            this.redirectToExternalLink(link);
-        }
-        else {
-            this.redirectToInternalLink(link);
-        }
-    }
-    redirectToExternalLink(link) {
-        window.location.href = link[0];
-    }
-    redirectToInternalLink(link) {
-        this.router.navigate(link);
-    }
-}
-HistoryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: HistoryService, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-HistoryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: HistoryService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: HistoryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$3.Router }]; } });
-
-class HeaderPageComponent {
-    constructor(historyService, location) {
-        this.historyService = historyService;
-        this.location = location;
-        this.withImg = false;
-        this.center = false;
-        this.useHistory = false;
-    }
-    back() {
-        if (!this.useHistory) {
-            this.historyService.redirect(this.linkBack);
-            return;
-        }
-        this.historyService.back(this.linkBack);
-    }
-}
-HeaderPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: HeaderPageComponent, deps: [{ token: HistoryService }, { token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
-HeaderPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: HeaderPageComponent, selector: "wac-header-page", inputs: { title: "title", linkBack: "linkBack", withImg: "withImg", center: "center", useHistory: "useHistory" }, 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\" (click)=\"back()\"><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: "component", type: H1Component, selector: "wac-h1", inputs: ["annotation", "withImg", "center", "color"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", 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\" [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\" (click)=\"back()\"><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 [{ type: HistoryService }, { type: i1.Location }]; }, propDecorators: { title: [{
-                type: Input
-            }], linkBack: [{
-                type: Input
-            }], withImg: [{
-                type: Input
-            }], center: [{
-                type: Input
-            }], useHistory: [{
-                type: Input
-            }] } });
-
-class TooltipComponent {
-    constructor() {
-        this.tooltipText = '';
-        this.tooltipLink = '';
-        this.tooltipUrl = '#';
-    }
-    ngOnInit() {
-        if (this.tooltipIcon === '') {
-            this.tooltipIcon = 'fas fa-info-circle';
-        }
-    }
-}
-TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: TooltipComponent, selector: "wac-tooltip", inputs: { tooltipIcon: "tooltipIcon", tooltipText: "tooltipText", tooltipLink: "tooltipLink", tooltipUrl: "tooltipUrl" }, ngImport: i0, template: "<span class=\"wac-tooltip\">\n  <i [class]=\"tooltipIcon\"></i>\n  <span class=\"tooltip-content\"\n    >{{ tooltipText }}\n    <span *ngIf=\"tooltipUrl\"\n      ><a [href]=\"tooltipUrl\" target=\"_blank\">{{ tooltipLink }}</a></span\n    >\n  </span>\n</span>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wac-tooltip', template: "<span class=\"wac-tooltip\">\n  <i [class]=\"tooltipIcon\"></i>\n  <span class=\"tooltip-content\"\n    >{{ tooltipText }}\n    <span *ngIf=\"tooltipUrl\"\n      ><a [href]=\"tooltipUrl\" target=\"_blank\">{{ tooltipLink }}</a></span\n    >\n  </span>\n</span>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { tooltipIcon: [{
-                type: Input
-            }], tooltipText: [{
-                type: Input
-            }], tooltipLink: [{
-                type: Input
-            }], tooltipUrl: [{
-                type: Input
-            }] } });
-
-class InputComponent {
-    constructor() {
-        this.label = '';
-        this.value = '';
-        this.type = 'text';
-        this.placeholder = ''; // todo could be handle with ng-content
-        this.textInfo = null; // todo should be handle with ng-content
-        this.textError = null; // todo should be handle with ng-content
-        this.size = null;
-        this.isNumber = null;
-        this.withoutBlock = false;
-        this.icon = '';
-        this.big = false;
-        this.medium = false;
-        this.boldLabel = 'false'; // todo refacto to boolean
-        this.min = null;
-        this.max = null;
-        this.disableMargin = false;
-        this.textPrepend = null; // todo should be handle with ng-content
-        this.textAppend = null; // todo should be handle with ng-content
-        this.progressBar = false;
-        this.extraClasses = '';
-        this.keyPreventDefault = [];
-        this.showTooltip = false;
-        this.textTooltip = '';
-        this.iconTooltip = '';
-        this.urlTooltip = '';
-        this.linkTooltip = '';
-        this.padding = false;
-        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();
-        this.KEYPRESS_ENTER = "Enter";
-        this.id = 'wz-input_' +
-            Math.random()
-                .toString(36)
-                .substr(2, 9);
-        this._onChange = (value) => { };
-        this._onTouched = () => { };
-    }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    writeValue(obj) {
-        this.value = obj;
-    }
-    onChange(value) {
-        if (this._onChange) {
-            this._onChange(value);
-        }
-    }
-    onBlur() {
-        if (this._onTouched) {
-            this._onTouched();
-        }
-        this.blurred.next();
-    }
-    checkNumberValue(value) {
-        if (this.min && this.min > value) {
-            this.value = this.min;
-        }
-        if (this.max && this.max < value) {
-            this.value = this.max;
-        }
-    }
-    onFocusOut() {
-        if (this.type === 'number') {
-            this.checkNumberValue(this.value);
-        }
-    }
-    keyPress(event) {
-        if (this.keyPreventDefault.includes(event.key)) {
-            event.preventDefault();
-        }
-        if (event.key === this.KEYPRESS_ENTER) {
-            this.keypressEnter.next(true);
-        }
-    }
-}
-InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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: "15.1.1", 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' : '', 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" }]
+            args: [{ selector: 'wac-text-area', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ProgressBarComponent,
+                        AutosizeModule
+                    ], 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' + (disableResize ? ' no-resize' : '')\"\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: [{
                 type: Input
-            }], type: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], textInfo: [{
-                type: Input
-            }], textError: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], isNumber: [{
+            }], placeholder: [{
                 type: Input
-            }], withoutBlock: [{
+            }], textInfo: [{
                 type: Input
-            }], icon: [{
+            }], textError: [{
                 type: Input
-            }], big: [{
+            }], error: [{
                 type: Input
-            }], medium: [{
+            }], success: [{
                 type: Input
-            }], boldLabel: [{
+            }], size: [{
                 type: Input
             }], min: [{
                 type: Input
             }], max: [{
                 type: Input
-            }], disableMargin: [{
-                type: Input
-            }], textPrepend: [{
-                type: Input
-            }], textAppend: [{
+            }], dynamicSize: [{
                 type: Input
             }], progressBar: [{
                 type: Input
-            }], extraClasses: [{
-                type: Input
-            }], keyPreventDefault: [{
+            }], disabled: [{
                 type: Input
-            }], showTooltip: [{
+            }], maxlength: [{
                 type: Input
-            }], textTooltip: [{
+            }], minlength: [{
                 type: Input
-            }], iconTooltip: [{
+            }], disableResize: [{
                 type: Input
-            }], urlTooltip: [{
+            }] } });
+
+class H1Component {
+    constructor() {
+        this.annotation = '';
+        this.withImg = false;
+        this.center = false;
+        this.color = null;
+    }
+}
+H1Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: H1Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+H1Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: H1Component, selector: "wac-h1", inputs: { annotation: "annotation", withImg: "withImg", center: "center", color: "color" }, ngImport: i0, template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\" [style.color]=\"color?color:''\"><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: "15.1.1", ngImport: i0, type: H1Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-h1', template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\" [style.color]=\"color?color:''\"><ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small></h1>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { annotation: [{
                 type: Input
-            }], linkTooltip: [{
+            }], withImg: [{
                 type: Input
-            }], padding: [{
+            }], center: [{
                 type: Input
-            }], disabled: [{
+            }], color: [{
                 type: Input
-            }], indication: [{
+            }] } });
+
+class H2Component {
+    constructor() { }
+    ngOnInit() { }
+}
+H2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: H2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+H2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: H2Component, selector: "wac-h2", ngImport: i0, template: "<h2 class=\"wac-h2\"><ng-content></ng-content></h2>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: H2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-h2', template: "<h2 class=\"wac-h2\"><ng-content></ng-content></h2>\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class H3Component {
+    constructor() {
+        this.grey = false;
+    }
+    ngOnInit() { }
+}
+H3Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: H3Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+H3Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: H3Component, selector: "wac-h3", inputs: { grey: "grey" }, ngImport: i0, template: "<h3 class=\"wac-h3\" [ngClass]=\"{ grey: grey }\"><ng-content></ng-content></h3>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: H3Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'wac-h3', template: "<h3 class=\"wac-h3\" [ngClass]=\"{ grey: grey }\"><ng-content></ng-content></h3>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { grey: [{
                 type: Input
-            }], success: [{
+            }] } });
+
+class HistoryService {
+    constructor(router) {
+        this.router = router;
+        this.history = [];
+    }
+    registerHistory() {
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationStart) {
+                if (this.history.length > 0 && this.history[this.history.length - 1] === event.url.split('?')[0]) {
+                    return;
+                }
+                this.history.push(event.url.split('?')[0]);
+            }
+        });
+    }
+    back(link) {
+        this.history.pop();
+        if (this.history.length > 0) {
+            const lastlink = this.history[this.history.length - 1];
+            this.router.navigate(lastlink.split('/'));
+        }
+        else {
+            this.redirect(link);
+        }
+    }
+    redirect(link) {
+        if (link[0].indexOf('http') !== -1) {
+            this.redirectToExternalLink(link);
+        }
+        else {
+            this.redirectToInternalLink(link);
+        }
+    }
+    redirectToExternalLink(link) {
+        window.location.href = link[0];
+    }
+    redirectToInternalLink(link) {
+        this.router.navigate(link);
+    }
+}
+HistoryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: HistoryService, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+HistoryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: HistoryService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: HistoryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.Router }]; } });
+
+class HeaderPageComponent {
+    constructor(historyService, location) {
+        this.historyService = historyService;
+        this.location = location;
+        this.withImg = false;
+        this.center = false;
+        this.useHistory = false;
+    }
+    back() {
+        if (!this.useHistory) {
+            this.historyService.redirect(this.linkBack);
+            return;
+        }
+        this.historyService.back(this.linkBack);
+    }
+}
+HeaderPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: HeaderPageComponent, deps: [{ token: HistoryService }, { token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
+HeaderPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: HeaderPageComponent, selector: "wac-header-page", inputs: { title: "title", linkBack: "linkBack", withImg: "withImg", center: "center", useHistory: "useHistory" }, 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\" (click)=\"back()\"><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: "component", type: H1Component, selector: "wac-h1", inputs: ["annotation", "withImg", "center", "color"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", 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\" [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\" (click)=\"back()\"><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 [{ type: HistoryService }, { type: i1.Location }]; }, propDecorators: { title: [{
                 type: Input
-            }], error: [{
+            }], linkBack: [{
                 type: Input
-            }], maxlength: [{
+            }], withImg: [{
                 type: Input
-            }], minlength: [{
+            }], center: [{
                 type: Input
-            }], indicationLeft: [{
+            }], useHistory: [{
                 type: Input
-            }], keypressEnter: [{
-                type: Output
-            }], blurred: [{
-                type: Output
             }] } });
 
 class LinkComponent {
@@ -3203,15 +3239,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
             }] } });
 
 class TextComponent {
-    constructor() { }
-    ngOnInit() { }
 }
 TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: TextComponent, selector: "wac-text", inputs: { textClass: "textClass" }, ngImport: i0, template: "<div class=\"wac-text\" [class]=\"textClass\">\n    <p><ng-content></ng-content></p>\n</div>\n" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-text', template: "<div class=\"wac-text\" [class]=\"textClass\">\n    <p><ng-content></ng-content></p>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { textClass: [{
+        }], propDecorators: { textClass: [{
                 type: Input
             }] } });
 
@@ -3259,101 +3293,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 }]
         }] });
 
-class ProgressBarModule {
-}
-ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent], imports: [CommonModule,
-        FormsModule], exports: [ProgressBarComponent] });
-ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ProgressBarModule, imports: [CommonModule,
-        FormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ProgressBarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                    ],
-                    exports: [ProgressBarComponent],
-                    declarations: [ProgressBarComponent],
-                    providers: [],
-                }]
-        }] });
-
-class TooltipModule {
-}
-TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: TooltipModule, declarations: [TooltipComponent], imports: [CommonModule,
-        FormsModule], exports: [TooltipComponent] });
-TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TooltipModule, imports: [CommonModule,
-        FormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TooltipModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule
-                    ],
-                    exports: [TooltipComponent],
-                    declarations: [TooltipComponent],
-                    providers: [],
-                }]
-        }] });
-
-class InputModule {
-}
-InputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: InputModule, declarations: [InputComponent], imports: [CommonModule,
-        FormsModule,
-        SharedDirectives,
-        TooltipModule,
-        ProgressBarModule], exports: [InputComponent] });
-InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputModule, imports: [CommonModule,
-        FormsModule,
-        SharedDirectives,
-        TooltipModule,
-        ProgressBarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        SharedDirectives,
-                        TooltipModule,
-                        ProgressBarModule
-                    ],
-                    exports: [InputComponent],
-                    declarations: [InputComponent],
-                    providers: [],
-                }]
-        }] });
-
-class InputSearchModule {
-}
-InputSearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputSearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: InputSearchModule, declarations: [InputSearchComponent], imports: [CommonModule,
-        FormsModule,
-        InputModule,
-        SharedDirectives], exports: [InputSearchComponent] });
-InputSearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputSearchModule, imports: [CommonModule,
-        FormsModule,
-        InputModule,
-        SharedDirectives] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputSearchModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        InputModule,
-                        SharedDirectives
-                    ],
-                    exports: [InputSearchComponent],
-                    declarations: [InputSearchComponent],
-                    providers: [],
-                }]
-        }] });
-
 class TableColumn {
     constructor(currentCell, renderer, document) {
         this.currentCell = currentCell;
@@ -3596,13 +3535,13 @@ class TableModule {
 TableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: TableModule, declarations: [TableComponent, TableColumn, CheckBoxRow, TableColumnHeader, TableRow], imports: [CommonModule,
         FormsModule,
-        InputSearchModule,
+        InputSearchComponent,
         LoaderComponent,
         CheckboxModule,
         PaginationModule], exports: [TableComponent, TableColumn, CheckBoxRow, TableColumnHeader, TableRow] });
 TableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TableModule, imports: [CommonModule,
         FormsModule,
-        InputSearchModule,
+        InputSearchComponent,
         LoaderComponent,
         CheckboxModule,
         PaginationModule] });
@@ -3612,7 +3551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                     imports: [
                         CommonModule,
                         FormsModule,
-                        InputSearchModule,
+                        InputSearchComponent,
                         LoaderComponent,
                         CheckboxModule,
                         PaginationModule
@@ -3738,7 +3677,7 @@ class SelectInTextComponent {
     }
 }
 SelectInTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SelectInTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectInTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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"] }] });
+SelectInTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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.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: "15.1.1", 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 }\" [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" }]
@@ -3979,10 +3918,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
 class InputWithSelectComponent {
 }
 InputWithSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputWithSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputWithSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: InputWithSelectComponent, selector: "wac-input-with-select", queries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], ngImport: i0, template: "<p *ngIf=\"!!label\" class=\"wac-select__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n<div class=\"wac-input-with-select\">\n  <div class=\"wac-input-with-select__wrapper\">\n    <div class=\"wac-input-with-select__wrapper__left\">\n      <ng-content select=\"input\"></ng-content>\n      <ng-content select=\"wac-select\"></ng-content>\n    </div>\n    <div class=\"wac-input-with-select__wrapper__right\">\n      <ng-content select=\"[text]\"></ng-content>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+InputWithSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: InputWithSelectComponent, isStandalone: true, selector: "wac-input-with-select", queries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], ngImport: i0, template: "<p *ngIf=\"!!label\" class=\"wac-select__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n<div class=\"wac-input-with-select\">\n  <div class=\"wac-input-with-select__wrapper\">\n    <div class=\"wac-input-with-select__wrapper__left\">\n      <ng-content select=\"input\"></ng-content>\n      <ng-content select=\"wac-select\"></ng-content>\n    </div>\n    <div class=\"wac-input-with-select__wrapper__right\">\n      <ng-content select=\"[text]\"></ng-content>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputWithSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-input-with-select', encapsulation: ViewEncapsulation.None, template: "<p *ngIf=\"!!label\" class=\"wac-select__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n<div class=\"wac-input-with-select\">\n  <div class=\"wac-input-with-select__wrapper\">\n    <div class=\"wac-input-with-select__wrapper__left\">\n      <ng-content select=\"input\"></ng-content>\n      <ng-content select=\"wac-select\"></ng-content>\n    </div>\n    <div class=\"wac-input-with-select__wrapper__right\">\n      <ng-content select=\"[text]\"></ng-content>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'wac-input-with-select', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<p *ngIf=\"!!label\" class=\"wac-select__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n<div class=\"wac-input-with-select\">\n  <div class=\"wac-input-with-select__wrapper\">\n    <div class=\"wac-input-with-select__wrapper__left\">\n      <ng-content select=\"input\"></ng-content>\n      <ng-content select=\"wac-select\"></ng-content>\n    </div>\n    <div class=\"wac-input-with-select__wrapper__right\">\n      <ng-content select=\"[text]\"></ng-content>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { label: [{
                 type: ContentChild,
                 args: [LabelComponent]
@@ -4024,7 +3963,7 @@ class PopinComponent {
     }
 }
 PopinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: PopinComponent, deps: [{ token: DomService }], target: i0.ɵɵFactoryTarget.Component });
-PopinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: PopinComponent, selector: "wac-popin", inputs: { title: "title", content: "content", imgSrc: "imgSrc", okButtonLabel: "okButtonLabel", koButtonLabel: "koButtonLabel", okButtonClass: "okButtonClass", koButtonClass: "koButtonClass", visible: "visible", background: "background", closeOnBackgroundClick: "closeOnBackgroundClick" }, outputs: { visibleChange: "visibleChange", response: "response" }, ngImport: i0, template: "<div class=\"wac-free\" *ngIf=\"visible\">\n  <div class=\"wac-free__wrapper\" wzAutoHide (clickOutside)=\"closePopin(true)\">\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"] }] });
+PopinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: PopinComponent, selector: "wac-popin", inputs: { title: "title", content: "content", imgSrc: "imgSrc", okButtonLabel: "okButtonLabel", koButtonLabel: "koButtonLabel", okButtonClass: "okButtonClass", koButtonClass: "koButtonClass", visible: "visible", background: "background", closeOnBackgroundClick: "closeOnBackgroundClick" }, outputs: { visibleChange: "visibleChange", response: "response" }, ngImport: i0, template: "<div class=\"wac-free\" *ngIf=\"visible\">\n  <div class=\"wac-free__wrapper\" wzAutoHide (clickOutside)=\"closePopin(true)\">\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.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: "15.1.1", 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(true)\">\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" }]
@@ -4091,7 +4030,7 @@ class FreePopinComponent {
     }
 }
 FreePopinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: FreePopinComponent, deps: [{ token: DomService }], target: i0.ɵɵFactoryTarget.Component });
-FreePopinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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"] }] });
+FreePopinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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", "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: "15.1.1", 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" }]
@@ -4534,7 +4473,7 @@ class SearchComponent {
     }
 }
 SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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"] }] });
+SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", 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" }]
@@ -5089,7 +5028,7 @@ SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: SelectComponent, selector: "wac-select", inputs: { required: "required", keepPanelOpen: "keepPanelOpen", openPanel: "openPanel" }, outputs: { openPanelChange: "openPanelChange" }, host: { properties: { "attr.role": "this.role" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true },
         ValueChangeService
-    ], queries: [{ propertyName: "customSearchTrigger", first: true, predicate: SelectSearchTriggerComponent, descendants: true }, { propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], viewQueries: [{ propertyName: "selectHeader", first: true, predicate: ["selectHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"!!label\" class=\"wac-select__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n<div\n  class=\"wac-select\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div #selectHeader class=\"wac-select__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__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__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select__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__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$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "customSearchTrigger", first: true, predicate: SelectSearchTriggerComponent, descendants: true }, { propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], viewQueries: [{ propertyName: "selectHeader", first: true, predicate: ["selectHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"!!label\" class=\"wac-select__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n<div\n  class=\"wac-select\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div #selectHeader class=\"wac-select__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__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__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select__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__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: i4.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-select', providers: [
@@ -5440,7 +5379,7 @@ class MosaicComponent {
     }
 }
 MosaicComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MosaicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MosaicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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$1.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$1.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$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MosaicComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", 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$1.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$2.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$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", 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" }]
@@ -6017,12 +5956,10 @@ const components = [
     H3Component,
     H4Component,
     TextComponent,
-    TextAreaComponent,
     UploadComponent,
     SelectInTextComponent,
     MultipleSearchComponent,
     MultipleSearchPlusComponent,
-    InputWithSelectComponent,
     PopinComponent,
     FreePopinComponent,
     BlockTitleLegacyComponent,
@@ -6062,12 +5999,9 @@ const exportsFromModule = [
     CheckBoxRow,
     TableColumnHeader,
     TableRow,
-    InputSearchComponent,
-    InputComponent,
     TooltipComponent,
     CheckboxComponent,
     LoaderComponent,
-    ProgressBarComponent,
     TreeComponent,
     ...ExpansionExport
 ];
@@ -6076,6 +6010,11 @@ const standaloneComponents = [
     SnackbarComponent,
     BlockComponent,
     LoaderComponent,
+    TextAreaComponent,
+    ProgressBarComponent,
+    InputComponent,
+    InputSearchComponent,
+    InputWithSelectComponent,
 ];
 class SharedComponentsModule {
 }
@@ -6104,12 +6043,10 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         H3Component,
         H4Component,
         TextComponent,
-        TextAreaComponent,
         UploadComponent,
         SelectInTextComponent,
         MultipleSearchComponent,
         MultipleSearchPlusComponent,
-        InputWithSelectComponent,
         PopinComponent,
         FreePopinComponent,
         BlockTitleLegacyComponent,
@@ -6150,11 +6087,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         DragDropModule,
         PaginationModule,
         TableModule,
-        InputSearchModule,
         TooltipModule,
         CheckboxModule,
-        InputModule,
-        ProgressBarModule,
         PerfectScrollbarModule,
         AlertPopupModule,
         RouterModule,
@@ -6165,7 +6099,12 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ExpansionModule, TabComponent,
         SnackbarComponent,
         BlockComponent,
-        LoaderComponent], exports: [TagComponent,
+        LoaderComponent,
+        TextAreaComponent,
+        ProgressBarComponent,
+        InputComponent,
+        InputSearchComponent,
+        InputWithSelectComponent], exports: [TagComponent,
         ButtonComponent,
         InfoComponent,
         SettingsComponent,
@@ -6189,12 +6128,10 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         H3Component,
         H4Component,
         TextComponent,
-        TextAreaComponent,
         UploadComponent,
         SelectInTextComponent,
         MultipleSearchComponent,
         MultipleSearchPlusComponent,
-        InputWithSelectComponent,
         PopinComponent,
         FreePopinComponent,
         BlockTitleLegacyComponent,
@@ -6231,16 +6168,18 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         CheckBoxRow,
         TableColumnHeader,
         TableRow,
-        InputSearchComponent,
-        InputComponent,
         TooltipComponent,
         CheckboxComponent,
         LoaderComponent,
-        ProgressBarComponent,
         TreeComponent, ExpansionPanelComponent, ExpansionPanelHeaderComponent, AccordionComponent, ExpansionPanelDirective, ExpansionPanelHeaderDirective, TabComponent,
         SnackbarComponent,
         BlockComponent,
-        LoaderComponent] });
+        LoaderComponent,
+        TextAreaComponent,
+        ProgressBarComponent,
+        InputComponent,
+        InputSearchComponent,
+        InputWithSelectComponent] });
 SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SharedComponentsModule, imports: [CommonModule,
         FormsModule,
         NwbAllModule,
@@ -6253,11 +6192,8 @@ SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         DragDropModule,
         PaginationModule,
         TableModule,
-        InputSearchModule,
         TooltipModule,
         CheckboxModule,
-        InputModule,
-        ProgressBarModule,
         PerfectScrollbarModule,
         AlertPopupModule,
         RouterModule,
@@ -6282,11 +6218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                         DragDropModule,
                         PaginationModule,
                         TableModule,
-                        InputSearchModule,
                         TooltipModule,
                         CheckboxModule,
-                        InputModule,
-                        ProgressBarModule,
                         PerfectScrollbarModule,
                         AlertPopupModule,
                         RouterModule,