@wizishop/angular-components 15.1.68 → 15.1.70

package/fesm2020/wizishop-angular-components.mjs

@@ -8,7 +8,7 @@ import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
 import * as i4 from 'ngx-perfect-scrollbar';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-import { Subject, merge, takeUntil as takeUntil$1, startWith, fromEvent, ReplaySubject, interval, map as map$1, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1 } from 'rxjs';
+import { Subject, merge, takeUntil as takeUntil$1, startWith, fromEvent, ReplaySubject, BehaviorSubject, combineLatest, switchMap, distinctUntilChanged as distinctUntilChanged$1, delay, map as map$1, interval, tap as tap$1 } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged, tap, filter, map, takeWhile } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/overlay';
 import { TAB, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, A, Z, ZERO, NINE, ENTER, hasModifierKey, ESCAPE } from '@angular/cdk/keycodes';
@@ -1996,37 +1996,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
             }] } });
 
 class TabsComponent {
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    set selectedIndex(selectedIndex) {
-        if (this.disabled) {
-            return;
-        }
-        this.setIndex(null, selectedIndex);
-    }
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
-        this._selectedIndex = 0;
         this.disabled = false;
+        this.index$ = new BehaviorSubject(0);
+        this.tabList$ = new ReplaySubject(1);
+        this.listIsOpen$ = new BehaviorSubject(false);
+        this.onChange = (selectedIndex) => { };
+        this.onTouched = () => { };
+        this.viewModel$ = combineLatest({
+            index: this.index$,
+            tabList: this.tabList$.pipe(switchMap((tabList) => {
+                return tabList.changes.pipe(startWith(tabList));
+            })),
+            listIsOpen: this.listIsOpen$.pipe(distinctUntilChanged$1())
+        }).pipe(delay(0), map$1((data) => {
+            let selected = this.setIndex(data.index, data.tabList);
+            this.changeDetectorRef.markForCheck();
+            return { ...data, selected };
+        }));
         this.underline = false;
         this.button = false;
         this.right = false;
         this.marginBottom = '30px';
-        this.listIsOpen = false;
-        this.onTouched = () => { };
-        this.onChange = (selectedIndex) => { };
     }
     ngAfterViewInit() {
-        setTimeout(() => {
-            this.setIndex(null, this._selectedIndex);
-        }, 0);
+        this.tabList$.next(this.tabList);
     }
     writeValue(selectedIndex) {
         if (!selectedIndex) {
             return;
         }
-        this.selectedIndex = selectedIndex;
+        this.index$.next(selectedIndex);
     }
     registerOnChange(onChange) {
         this.onChange = onChange;
@@ -2041,31 +2042,33 @@ class TabsComponent {
         this.disabled = disabled;
         this.changeDetectorRef.markForCheck();
     }
-    setIndex($event, currentIndex) {
-        $event?.stopPropagation();
-        this._selectedIndex = currentIndex;
-        this.tabList?.forEach((tab, index) => {
+    setIndex(currentIndex, tabList) {
+        let selected = null;
+        tabList.forEach((tab, index) => {
             tab.selected = currentIndex === index;
-            this.selected = (currentIndex === index ? tab : this.selected);
+            selected = (currentIndex === index ? tab : selected);
         });
-        this.listIsOpen = false;
-        this.onChange(this._selectedIndex);
+        this.onChange(currentIndex);
+        return selected;
     }
     openList($event) {
         $event?.stopPropagation();
-        this.listIsOpen = !this.listIsOpen;
+        this.listIsOpen$.next(!this.listIsOpen$.getValue());
     }
 }
 TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: TabsComponent, isStandalone: true, selector: "wac-tabs", inputs: { underline: "underline", button: "button", right: "right", marginBottom: "marginBottom" }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: TabsComponent, multi: true },
-    ], queries: [{ propertyName: "tabList", predicate: TabComponent }], ngImport: i0, template: "<div class=\"wac-tabs\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen = false\"\n [triggerElement]=\"'wac-select__header__selection'\"\n> \n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === selectedIndex}\"\n      (click)=\"setIndex($event, i)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n</div>\n<ng-content></ng-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SharedDirectives }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "tabList", predicate: TabComponent }], ngImport: i0, template: "<div class=\"wac-tabs\"\n *ngIf=\"viewModel$ | async as viewModel\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen$.next(false)\"\n [triggerElement]=\"'wac-select__header__selection'\"\n> \n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n</div>\n<ng-content></ng-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SharedDirectives }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-tabs', encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, FormsModule, TabComponent, SharedDirectives], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: TabsComponent, multi: true },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-tabs\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen = false\"\n [triggerElement]=\"'wac-select__header__selection'\"\n> \n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === selectedIndex}\"\n      (click)=\"setIndex($event, i)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n</div>\n<ng-content></ng-content>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { underline: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wac-tabs\"\n *ngIf=\"viewModel$ | async as viewModel\"\n [ngClass]=\"{'wac-tabs--underline': underline, 'wac-tabs--button' : button, 'wac-tabs--right' : right}\"\n wzAutoHide\n (clickOutside)=\"listIsOpen$.next(false)\"\n [triggerElement]=\"'wac-select__header__selection'\"\n> \n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__mobile\" (click)=\"openList($event)\">\n    <div>{{ viewModel.selected?.label }}</div><i [class]=\"'fa-solid fa-caret-' + (viewModel.listIsOpen ? 'up' : 'down')\"></i>\n  </div>\n  <div *ngIf=\"tabList.length > 1\" class=\"wac-tabs__wrapper\" [ngClass]=\"{ 'open' : viewModel.listIsOpen }\" [ngStyle]=\"{'margin-bottom': marginBottom}\">\n    <a\n      *ngFor=\"let tab of tabList; let i = index\"\n      class=\"wac-tabs__wrapper__tab\"\n      [ngClass]=\"{'wac-tabs__wrapper__tab--selected': i === viewModel.index}\"\n      (click)=\"index$.next(i); listIsOpen$.next(false)\"\n    >\n    {{ tab.label }}\n    </a>\n  </div>\n</div>\n<ng-content></ng-content>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabList: [{
+                type: ContentChildren,
+                args: [TabComponent]
+            }], underline: [{
                 type: Input
             }], button: [{
                 type: Input
@@ -2073,9 +2076,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 type: Input
             }], marginBottom: [{
                 type: Input
-            }], tabList: [{
-                type: ContentChildren,
-                args: [TabComponent]
             }] } });
 
 class ButtonComponent {
@@ -2960,7 +2960,7 @@ class TextAreaComponent {
     }
 }
 TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: TextAreaComponent, 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"] }] });
+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", minHeight: "minHeight", 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          [style.minHeight]=\"minHeight\"\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: [
@@ -2968,7 +2968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                         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" }]
+                    ], 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          [style.minHeight]=\"minHeight\"\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: [{
@@ -2989,6 +2989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                 type: Input
             }], max: [{
                 type: Input
+            }], minHeight: [{
+                type: Input
             }], dynamicSize: [{
                 type: Input
             }], progressBar: [{