@wizishop/angular-components 15.1.29 → 15.1.31

package/fesm2015/wizishop-angular-components.mjs

@@ -12,11 +12,11 @@ import { Subject, merge, takeUntil as takeUntil$1, startWith, fromEvent, ReplayS
 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 i3$1 from 'ngx-autosize';
 import { AutosizeModule } from 'ngx-autosize';
 import * as i1$3 from '@angular/router';
@@ -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,26 +1138,246 @@ 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: [{
+    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
@@ -2549,365 +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, 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 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);
-    }
-    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);
-            this.writeValue(value);
-        }
-    }
-    onBlur() {
-        if (this._onTouched) {
-            this._onTouched();
-        }
-    }
-}
-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, 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', 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
-            }], 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 = () => { };
+        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;
@@ -2924,113 +2880,188 @@ class InputComponent {
     onChange(value) {
         if (this._onChange) {
             this._onChange(value);
+            this.writeValue(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);
+    onBlur() {
+        if (this._onTouched) {
+            this._onTouched();
         }
     }
 }
-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: [{
+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, 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-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: [{
-                type: Input
-            }], withoutBlock: [{
-                type: Input
-            }], icon: [{
-                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 {
@@ -3262,81 +3293,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 }]
         }] });
 
-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,
-        ProgressBarComponent], exports: [InputComponent] });
-InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputModule, imports: [CommonModule,
-        FormsModule,
-        SharedDirectives,
-        TooltipModule,
-        ProgressBarComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: InputModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        SharedDirectives,
-                        TooltipModule,
-                        ProgressBarComponent
-                    ],
-                    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;
@@ -3579,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] });
@@ -3595,7 +3551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                     imports: [
                         CommonModule,
                         FormsModule,
-                        InputSearchModule,
+                        InputSearchComponent,
                         LoaderComponent,
                         CheckboxModule,
                         PaginationModule
@@ -3962,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]
@@ -6004,7 +5960,6 @@ const components = [
     SelectInTextComponent,
     MultipleSearchComponent,
     MultipleSearchPlusComponent,
-    InputWithSelectComponent,
     PopinComponent,
     FreePopinComponent,
     BlockTitleLegacyComponent,
@@ -6044,8 +5999,6 @@ const exportsFromModule = [
     CheckBoxRow,
     TableColumnHeader,
     TableRow,
-    InputSearchComponent,
-    InputComponent,
     TooltipComponent,
     CheckboxComponent,
     LoaderComponent,
@@ -6059,6 +6012,9 @@ const standaloneComponents = [
     LoaderComponent,
     TextAreaComponent,
     ProgressBarComponent,
+    InputComponent,
+    InputSearchComponent,
+    InputWithSelectComponent,
 ];
 class SharedComponentsModule {
 }
@@ -6091,7 +6047,6 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         SelectInTextComponent,
         MultipleSearchComponent,
         MultipleSearchPlusComponent,
-        InputWithSelectComponent,
         PopinComponent,
         FreePopinComponent,
         BlockTitleLegacyComponent,
@@ -6132,10 +6087,8 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         DragDropModule,
         PaginationModule,
         TableModule,
-        InputSearchModule,
         TooltipModule,
         CheckboxModule,
-        InputModule,
         PerfectScrollbarModule,
         AlertPopupModule,
         RouterModule,
@@ -6148,7 +6101,10 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         BlockComponent,
         LoaderComponent,
         TextAreaComponent,
-        ProgressBarComponent], exports: [TagComponent,
+        ProgressBarComponent,
+        InputComponent,
+        InputSearchComponent,
+        InputWithSelectComponent], exports: [TagComponent,
         ButtonComponent,
         InfoComponent,
         SettingsComponent,
@@ -6176,7 +6132,6 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         SelectInTextComponent,
         MultipleSearchComponent,
         MultipleSearchPlusComponent,
-        InputWithSelectComponent,
         PopinComponent,
         FreePopinComponent,
         BlockTitleLegacyComponent,
@@ -6213,8 +6168,6 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         CheckBoxRow,
         TableColumnHeader,
         TableRow,
-        InputSearchComponent,
-        InputComponent,
         TooltipComponent,
         CheckboxComponent,
         LoaderComponent,
@@ -6223,7 +6176,10 @@ SharedComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         BlockComponent,
         LoaderComponent,
         TextAreaComponent,
-        ProgressBarComponent] });
+        ProgressBarComponent,
+        InputComponent,
+        InputSearchComponent,
+        InputWithSelectComponent] });
 SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SharedComponentsModule, imports: [CommonModule,
         FormsModule,
         NwbAllModule,
@@ -6236,10 +6192,8 @@ SharedComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         DragDropModule,
         PaginationModule,
         TableModule,
-        InputSearchModule,
         TooltipModule,
         CheckboxModule,
-        InputModule,
         PerfectScrollbarModule,
         AlertPopupModule,
         RouterModule,
@@ -6264,10 +6218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                         DragDropModule,
                         PaginationModule,
                         TableModule,
-                        InputSearchModule,
                         TooltipModule,
                         CheckboxModule,
-                        InputModule,
                         PerfectScrollbarModule,
                         AlertPopupModule,
                         RouterModule,