ecabs-components 0.0.1 → 0.0.2

package/fesm2020/ecabs-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, NgModule, EventEmitter, Output, Directive, HostListener } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, NgModule, EventEmitter, Output, Injectable, Directive, HostListener, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/material/button';
@@ -7,11 +7,19 @@ import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i3 from '@angular/forms';
-import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl } from '@angular/forms';
 import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatInputModule } from '@angular/material/input';
+import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7 from 'ngx-mat-select-search';
+import { MatSelectSearchComponent, NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import { ReplaySubject, Subscription, combineLatest, map, debounceTime } from 'rxjs';
+import * as i4$1 from '@angular/material/select';
+import { MatSelectModule, MAT_SELECT_SCROLL_STRATEGY } from '@angular/material/select';
+import * as i5$1 from '@angular/material/core';
+import { Overlay } from '@angular/cdk/overlay';
 
 class EcabsSpinnerComponent {
     constructor() {
@@ -233,101 +241,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }] } });
 
-class ValidationComponent {
+class EcabsComponentsService {
     constructor() {
+        this.config = {
+            errorMessages: [
+                { type: 'required', message: '[label] is required' },
+                { type: 'minlength', message: '[label] should be atleast [requiredLength] character' },
+                { type: 'maxLength', message: '[label] should be maximum [requiredLength] character' },
+                { type: 'min', message: '[label] should be minmum [min]' },
+                { type: 'max', message: '[label] should be maximum [max]' },
+                { type: 'minValue', message: '[label] should be minmum [requiredMin]' },
+                { type: 'maxValue', message: '[label] should be maximum [requiredMax]' },
+            ],
+        };
+    }
+    setConfig(c) {
+        this.config.errorMessages = c.errorMessages;
+    }
+    getConfig() {
+        return this.config;
+    }
+}
+EcabsComponentsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+EcabsComponentsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsComponentsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsComponentsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ValidationComponent {
+    constructor(ecabsService) {
+        this.ecabsService = ecabsService;
         this.showValidationOnNotTouched = false;
-        this.errorMessages = [];
         this._messages = {};
-        // this.errorMessages = [
-        //   {
-        //     type: 'required',
-        //     message: this.translateService.instant(
-        //       'FORMS.VALIDATION.LABEL_REQUIRED'
-        //     ),
-        //   },
-        //   {
-        //     type: 'minlength',
-        //     message: this.translateService.instant('FORMS.VALIDATION.MIN_LENGTH'),
-        //   },
-        //   {
-        //     type: 'maxlength',
-        //     message: this.translateService.instant('FORMS.VALIDATION.MAX_LENGTH'),
-        //   },
-        //   {
-        //     type: 'min',
-        //     message: this.translateService.instant('FORMS.VALIDATION.MIN'),
-        //   },
-        //   {
-        //     type: 'max',
-        //     message: this.translateService.instant('FORMS.VALIDATION.MAX'),
-        //   },
-        //   {
-        //     type: 'minValue',
-        //     message: this.translateService.instant('FORMS.VALIDATION.MIN_VALUE'),
-        //   },
-        //   {
-        //     type: 'maxValue',
-        //     message: this.translateService.instant('FORMS.VALIDATION.MAX_VALUE'),
-        //   },
-        //   {
-        //     type: 'validatePhoneNumber',
-        //     message: this.translateService.instant(
-        //       'FORMS.VALIDATION.VALIDATE_PHONE_NUMBER'
-        //     ),
-        //   },
-        //   {
-        //     type: 'pastDate',
-        //     message: this.translateService.instant('FORMS.VALIDATION.PAST_DATE'),
-        //   },
-        //   {
-        //     type: 'affectsError',
-        //     message: this.translateService.instant(
-        //       'FORMS.VALIDATION.AFFECTS_ERROR'
-        //     ),
-        //   },
-        //   {
-        //     type: 'moreThan',
-        //     message: this.translateService.instant('FORMS.VALIDATION.MORE_THAN'),
-        //   },
-        //   {
-        //     type: 'lessThan',
-        //     message: this.translateService.instant('FORMS.VALIDATION.LESS_THAN'),
-        //   },
-        //   {
-        //     type: 'iban',
-        //     message: this.translateService.instant('FORMS.VALIDATION.INVALID'),
-        //   },
-        //   {
-        //     type: 'email',
-        //     message: this.translateService.instant('FORMS.VALIDATION.EMAIL'),
-        //   },
-        //   {
-        //     type: 'numberMoreThan',
-        //     message: this.translateService.instant(
-        //       'FORMS.VALIDATION.VALUE_MORE_THAN'
-        //     ),
-        //   },
-        //   {
-        //     type: 'numberLessThan',
-        //     message: this.translateService.instant(
-        //       'FORMS.VALIDATION.VALUE_LESS_THAN'
-        //     ),
-        //   },
-        //   {
-        //     type: 'outOfRange',
-        //     message: this.translateService.instant('FORMS.VALIDATION.OUT_OF_RANGE'),
-        //   },
-        //   {
-        //     type: 'iban',
-        //     message: this.translateService.instant('FORMS.VALIDATION.IBAN'),
-        //   },
-        //   {
-        //     type: 'timeIsAfter',
-        //     message: this.translateService.instant(
-        //       'FORMS.VALIDATION.LESS_THAN_TIME'
-        //     ),
-        //   },
-        // ];
     }
     get messages() {
         if (this.element) {
@@ -344,6 +292,12 @@ class ValidationComponent {
     set messages(m) {
         this._messages = m;
     }
+    ngOnInit() {
+        this.config = this.ecabsService.getConfig();
+        for (let error of this.config.errorMessages) {
+            this.messages[error.type] = this.replaceTokens(error.message);
+        }
+    }
     ngOnChanges(changes) {
         const { updatedErrors } = changes;
         if (updatedErrors &&
@@ -354,11 +308,6 @@ class ValidationComponent {
             }
         }
     }
-    ngOnInit() {
-        for (const error of this.errorMessages) {
-            this.messages[error.type] = this.replaceTokens(error.message);
-        }
-    }
     replaceTokens(message) {
         let retMessage;
         if (this.label) {
@@ -373,12 +322,12 @@ class ValidationComponent {
         return this.messages[key];
     }
 }
-ValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValidationComponent, deps: [{ token: EcabsComponentsService }], target: i0.ɵɵFactoryTarget.Component });
 ValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ValidationComponent, selector: "app-validations-messages", inputs: { element: "element", label: "label", showValidationOnNotTouched: "showValidationOnNotTouched", updatedErrors: "updatedErrors" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"form-field__validation\"\r\n  *ngIf=\"element && (element?.touched || showValidationOnNotTouched) && element?.invalid\"\r\n>\r\n  <div class=\"form-field__validation__item\" *ngFor=\"let item of element?.errors | keyvalue\">\r\n    {{ getMessageDetail(item.key) }}\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValidationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-validations-messages', template: "<div\r\n  class=\"form-field__validation\"\r\n  *ngIf=\"element && (element?.touched || showValidationOnNotTouched) && element?.invalid\"\r\n>\r\n  <div class=\"form-field__validation__item\" *ngFor=\"let item of element?.errors | keyvalue\">\r\n    {{ getMessageDetail(item.key) }}\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { element: [{
+        }], ctorParameters: function () { return [{ type: EcabsComponentsService }]; }, propDecorators: { element: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -734,9 +683,320 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
+class EcabsSelectComponent extends ElementBaseComponent {
+    constructor(injector) {
+        super();
+        this.injector = injector;
+        this.multiple = false;
+        this.useNoneOption = false;
+        this.useOnlyDisabledClass = false;
+        this.searchFieldPlaceholder = 'Search';
+        this.useSearchOption = false;
+        this.useSelectAllOption = false;
+        this.setAllOptionAfterChosenAllItems = true;
+        this.selectAllValue = 0;
+        this.noEntriesFoundLabel = 'SELECT.NO_MATCHING_FOUND';
+        this.updateFilterItems = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.filteredItems$ = new ReplaySubject(1);
+        this.itemFilterCtrl = new UntypedFormControl();
+        this.isClearAll = false;
+        this.subscriptions = new Subscription();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouch = () => { };
+    }
+    get value() {
+        return this.val;
+    }
+    set value(val) {
+        if (this.val !== val) {
+            this.val = val;
+            this.onChange(val);
+            this.onTouch(val);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['items'] && changes['items'].currentValue) {
+            this.filteredItems$.next(changes['items'].currentValue.slice());
+            this.filterItems();
+            if (this.multiple &&
+                this.useSelectAllOption &&
+                this.allSelected?.selected) {
+                setTimeout(() => {
+                    this.control.patchValue([
+                        ...this.items.map((item) => item.value),
+                        this.selectAllValue,
+                    ]);
+                }, 100);
+            }
+        }
+    }
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+        }
+        if (this.matSelectSearchComponent) {
+            this.matSelectSearchComponent._showNoEntriesFound$ = combineLatest([
+                this.itemFilterCtrl.valueChanges,
+                this.filteredItems$,
+            ]).pipe(map(([value, items]) => this.matSelectSearchComponent.noEntriesFoundLabel &&
+                value &&
+                items.length === 0));
+        }
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.itemFilterCtrl.valueChanges
+            .pipe(debounceTime(200))
+            .subscribe((value) => {
+            this.filterItems();
+            this.updateFilterItems.emit(value);
+            if (this.isClearAll) {
+                this.control.patchValue([]);
+                this.isClearAll = false;
+            }
+        }));
+    }
+    toggleAllSelection() {
+        if (this.allSelected.selected) {
+            this.control.patchValue([
+                ...this.items.map((item) => item.value),
+                this.selectAllValue,
+            ]);
+        }
+        else {
+            this.control.patchValue([]);
+            this.isClearAll = true;
+        }
+    }
+    togglePerOne() {
+        if (this.allSelected) {
+            if (this.allSelected.selected) {
+                this.allSelected.deselect();
+            }
+            if (this.setAllOptionAfterChosenAllItems &&
+                this.control.value.length === this.items.length) {
+                this.allSelected.select();
+            }
+        }
+        this.isClearAll = false;
+    }
+    getAllSelectedChecked() {
+        return this.allSelected !== undefined && this.allSelected.selected;
+    }
+    getLabel(val) {
+        if (this.useSelectAllOption &&
+            this.allSelected?.selected &&
+            this.items &&
+            this.items.length > 0) {
+            return this.items[0].label;
+        }
+        if (val !== undefined && this.items && this.items.length > 0) {
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            const item = this.items.find((item) => item.value === val);
+            return item ? item.label : '';
+        }
+        return '';
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    onSelectionChanged($event) {
+        this.selectionChange.emit($event);
+    }
+    filterItems() {
+        if (!this.items) {
+            return;
+        }
+        // get the search keyword
+        let search = this.itemFilterCtrl.value;
+        if (!search || search === '') {
+            this.filteredItems$.next(this.items.slice());
+            return;
+        }
+        search = search.toLowerCase();
+        this.filteredItems$.next(this.items && this.items.length > 0
+            ? this.items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()))
+            : []);
+    }
+}
+EcabsSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsSelectComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+EcabsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: EcabsSelectComponent, selector: "ecabs-select", inputs: { items: "items", multiple: "multiple", useNoneOption: "useNoneOption", useOnlyDisabledClass: "useOnlyDisabledClass", searchFieldPlaceholder: "searchFieldPlaceholder", useSearchOption: "useSearchOption", useSelectAllOption: "useSelectAllOption", setAllOptionAfterChosenAllItems: "setAllOptionAfterChosenAllItems", selectAllValue: "selectAllValue", noEntriesFoundLabel: "noEntriesFoundLabel" }, outputs: { updateFilterItems: "updateFilterItems", selectionChange: "selectionChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: EcabsSelectComponent,
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }, { propertyName: "matSelectSearchComponent", first: true, predicate: MatSelectSearchComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field floatLabel=\"always\" [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select\r\n      [(ngModel)]=\"value\"\r\n      (closed)=\"onTouch()\"\r\n      appearance=\"outline\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"placeholder\"\r\n      (selectionChange)=\"onSelectionChanged($event)\"\r\n    >\r\n      <mat-select-trigger>\r\n        <span *ngIf=\"getAllSelectedChecked()\">{{ 'All' }}</span>\r\n        <span *ngIf=\"!getAllSelectedChecked()\"\r\n          >{{ val && multiple ? getLabel(val[0]) : getLabel(val) }}\r\n          <span *ngIf=\"multiple && value?.length > 1\" class=\"additional-selection\">\r\n            (+{{ useSelectAllOption && this.allSelected?.selected ? value?.length - 2 : value?.length - 1 }}\r\n            {{ (value?.length === 2 ? 'Other' : 'Others') }})\r\n          </span>\r\n        </span>\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        [formControl]=\"itemFilterCtrl\"\r\n        <ngx-mat-select-search\r\n          [placeholderLabel]=\"searchFieldPlaceholder\"\r\n          [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\r\n        ></ngx-mat-select-search>\r\n      </mat-option>\r\n      <mat-option *ngIf=\"useNoneOption\">{{ 'None' }}</mat-option>\r\n      <mat-option #allSelected *ngIf=\"useSelectAllOption\" (click)=\"toggleAllSelection()\" [value]=\"selectAllValue\">{{\r\n        'All'\r\n      }}</mat-option>\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\" [value]=\"item.value\" (click)=\"togglePerOne()\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</app-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-select', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: EcabsSelectComponent,
+                            multi: true,
+                        },
+                    ], template: "<app-element-wrapper [data]=\"getData()\">\r\n  <mat-form-field floatLabel=\"always\" [ngClass]=\"{ disabled: useOnlyDisabledClass }\">\r\n    <mat-select\r\n      [(ngModel)]=\"value\"\r\n      (closed)=\"onTouch()\"\r\n      appearance=\"outline\"\r\n      [multiple]=\"multiple\"\r\n      [disabled]=\"disabled\"\r\n      [placeholder]=\"placeholder\"\r\n      (selectionChange)=\"onSelectionChanged($event)\"\r\n    >\r\n      <mat-select-trigger>\r\n        <span *ngIf=\"getAllSelectedChecked()\">{{ 'All' }}</span>\r\n        <span *ngIf=\"!getAllSelectedChecked()\"\r\n          >{{ val && multiple ? getLabel(val[0]) : getLabel(val) }}\r\n          <span *ngIf=\"multiple && value?.length > 1\" class=\"additional-selection\">\r\n            (+{{ useSelectAllOption && this.allSelected?.selected ? value?.length - 2 : value?.length - 1 }}\r\n            {{ (value?.length === 2 ? 'Other' : 'Others') }})\r\n          </span>\r\n        </span>\r\n      </mat-select-trigger>\r\n      <mat-option *ngIf=\"useSearchOption\">\r\n        [formControl]=\"itemFilterCtrl\"\r\n        <ngx-mat-select-search\r\n          [placeholderLabel]=\"searchFieldPlaceholder\"\r\n          [noEntriesFoundLabel]=\"noEntriesFoundLabel\"\r\n        ></ngx-mat-select-search>\r\n      </mat-option>\r\n      <mat-option *ngIf=\"useNoneOption\">{{ 'None' }}</mat-option>\r\n      <mat-option #allSelected *ngIf=\"useSelectAllOption\" (click)=\"toggleAllSelection()\" [value]=\"selectAllValue\">{{\r\n        'All'\r\n      }}</mat-option>\r\n      <mat-option *ngFor=\"let item of filteredItems$ | async\" [value]=\"item.value\" (click)=\"togglePerOne()\">\r\n        {{ item.label }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</app-element-wrapper>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { items: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], useNoneOption: [{
+                type: Input
+            }], useOnlyDisabledClass: [{
+                type: Input
+            }], searchFieldPlaceholder: [{
+                type: Input
+            }], useSearchOption: [{
+                type: Input
+            }], useSelectAllOption: [{
+                type: Input
+            }], setAllOptionAfterChosenAllItems: [{
+                type: Input
+            }], selectAllValue: [{
+                type: Input
+            }], noEntriesFoundLabel: [{
+                type: Input
+            }], updateFilterItems: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], allSelected: [{
+                type: ViewChild,
+                args: ['allSelected']
+            }], matSelectSearchComponent: [{
+                type: ViewChild,
+                args: [MatSelectSearchComponent]
+            }] } });
+
+class EcabsSelectModule {
+}
+EcabsSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EcabsSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: EcabsSelectModule, declarations: [EcabsSelectComponent], imports: [CommonModule,
+        ElementWrapperModule,
+        MatSelectModule,
+        FormsModule,
+        NgxMatSelectSearchModule], exports: [EcabsSelectComponent] });
+EcabsSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsSelectModule, providers: [
+        {
+            provide: MAT_SELECT_SCROLL_STRATEGY,
+            useFactory: scrollFactory,
+            deps: [Overlay],
+        },
+    ], imports: [CommonModule,
+        ElementWrapperModule,
+        MatSelectModule,
+        FormsModule,
+        NgxMatSelectSearchModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsSelectComponent],
+                    imports: [
+                        CommonModule,
+                        ElementWrapperModule,
+                        MatSelectModule,
+                        FormsModule,
+                        NgxMatSelectSearchModule,
+                    ],
+                    exports: [EcabsSelectComponent],
+                    providers: [
+                        {
+                            provide: MAT_SELECT_SCROLL_STRATEGY,
+                            useFactory: scrollFactory,
+                            deps: [Overlay],
+                        },
+                    ],
+                }]
+        }] });
+function scrollFactory(overlay) {
+    return () => overlay.scrollStrategies.block();
+}
+
+class EcabsTextareaComponent extends ElementBaseComponent {
+    constructor(injector) {
+        super();
+        this.injector = injector;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouch = () => { };
+    }
+    get value() {
+        return this.val;
+    }
+    set value(val) {
+        if (val !== undefined && this.val !== val) {
+            this.val = val;
+            this.onChange(val);
+            this.onTouch(val);
+        }
+    }
+    ngAfterViewInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = ngControl.control;
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+}
+EcabsTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsTextareaComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+EcabsTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: EcabsTextareaComponent, selector: "ecabs-textarea", inputs: { rows: "rows" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: EcabsTextareaComponent,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<app-element-wrapper [data]=\"getData()\">\r\n  <textarea\r\n    class=\"form-field__textarea\"\r\n    [id]=\"name\"\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    (blur)=\"onTouch()\"\r\n    [disabled]=\"disabled\"\r\n    [maxlength]=\"maxLength\"\r\n    [rows]=\"rows\"\r\n  >\r\n  </textarea>\r\n</app-element-wrapper>\r\n", dependencies: [{ kind: "component", type: ElementWrapperComponent, selector: "app-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecabs-textarea', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: EcabsTextareaComponent,
+                            multi: true,
+                        },
+                    ], template: "<app-element-wrapper [data]=\"getData()\">\r\n  <textarea\r\n    class=\"form-field__textarea\"\r\n    [id]=\"name\"\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder\"\r\n    (blur)=\"onTouch()\"\r\n    [disabled]=\"disabled\"\r\n    [maxlength]=\"maxLength\"\r\n    [rows]=\"rows\"\r\n  >\r\n  </textarea>\r\n</app-element-wrapper>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { rows: [{
+                type: Input
+            }] } });
+
+class EcabsTextAreaModule {
+}
+EcabsTextAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsTextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EcabsTextAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: EcabsTextAreaModule, declarations: [EcabsTextareaComponent], imports: [CommonModule, ElementWrapperModule, FormsModule], exports: [EcabsTextareaComponent] });
+EcabsTextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsTextAreaModule, imports: [CommonModule, ElementWrapperModule, FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EcabsTextAreaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EcabsTextareaComponent],
+                    imports: [CommonModule, ElementWrapperModule, FormsModule],
+                    exports: [EcabsTextareaComponent],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonsComponent, EcabsButtonsModule, EcabsInputComponent, EcabsInputModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsSpinnerComponent };
+export { ButtonsComponent, EcabsButtonsModule, EcabsInputComponent, EcabsInputModule, EcabsLoadingComponent, EcabsLoadingModule, EcabsSelectComponent, EcabsSelectModule, EcabsSpinnerComponent, EcabsTextAreaModule, EcabsTextareaComponent, scrollFactory };
 //# sourceMappingURL=ecabs-components.mjs.map