coer-elements 2.0.40 → 2.0.41

package/components/lib/coer-button/coer-button.component.d.ts

@@ -6,7 +6,7 @@ export declare class CoerButton implements AfterViewInit {
     protected _innerButton: HTMLElement;
     protected _innerButtonIcon: HTMLElement;
     id: import("@angular/core").InputSignal<string>;
-    color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "light">;
+    color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "dark" | "light" | "information">;
     type: import("@angular/core").InputSignal<"filled" | "outline" | "icon" | "icon-outline" | "icon-no-border">;
     typeBreakpoint: import("@angular/core").InputSignal<IButtonType>;
     icon: import("@angular/core").InputSignal<string | null | undefined>;

package/components/lib/coer-secretbox/coer-secretbox.component.d.ts

@@ -43,7 +43,7 @@ export declare class CoerSecretBox extends ControlValue implements AfterViewInit
     protected get _passwordType(): boolean;
     protected _isEnable: import("@angular/core").Signal<boolean>;
     protected _floatLabel: import("@angular/core").Signal<"auto" | "always">;
-    protected _paddingRight: import("@angular/core").Signal<"0px" | "18px" | "45px">;
+    protected _paddingRight: import("@angular/core").Signal<"0px" | "45px" | "18px">;
     /** */
     Focus(select?: boolean, delay?: number): void;
     /** */

package/components/lib/coer-selectbox/coer-selectbox.component.d.ts

@@ -16,7 +16,6 @@ export declare class CoerSelectbox<T> extends ControlValue implements AfterViewI
     protected readonly _effect: EffectRef;
     protected _textbox: HTMLInputElement;
     protected _dropDownMenu: HTMLElement;
-    protected _container: HTMLElement;
     id: import("@angular/core").InputSignal<string>;
     value: import("@angular/core").InputSignal<T | null | undefined>;
     label: import("@angular/core").InputSignal<string>;

package/components/lib/coer-textarea/coer-textarea.component.d.ts

@@ -1,13 +1,15 @@
-import { ElementRef, AfterViewInit } from '@angular/core';
+import { ElementRef, AfterViewInit, EffectRef, OnDestroy } from '@angular/core';
 import { ControlValue } from 'coer-elements/tools';
 import * as i0 from "@angular/core";
-export declare class CoerTextarea extends ControlValue implements AfterViewInit {
+export declare class CoerTextarea extends ControlValue implements AfterViewInit, OnDestroy {
     protected _coerTextBox: import("@angular/core").Signal<ElementRef<any>>;
     protected _value: string | number;
-    protected _id: string;
-    protected _isLoadingEvent: import("@angular/core").WritableSignal<boolean>;
+    protected readonly _effect: EffectRef;
+    protected readonly _id: string;
+    protected readonly _isLoadingEvent: import("@angular/core").WritableSignal<boolean>;
     protected _htmlElement: HTMLInputElement;
     id: import("@angular/core").InputSignal<string>;
+    value: import("@angular/core").InputSignal<string | number | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
     textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
@@ -29,21 +31,20 @@ export declare class CoerTextarea extends ControlValue implements AfterViewInit
     marginRight: import("@angular/core").InputSignal<string>;
     marginBottom: import("@angular/core").InputSignal<string>;
     marginLeft: import("@angular/core").InputSignal<string>;
-    set value(value: string | number | null | undefined);
     onInput: import("@angular/core").OutputEmitterRef<string>;
+    constructor();
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     protected get footer(): string;
     protected _isEnable: import("@angular/core").Signal<boolean>;
     protected _floatLabel: import("@angular/core").Signal<"auto" | "always">;
     protected _paddingRight: import("@angular/core").Signal<"0px" | "18px">;
     /** */
-    private _SetEvents;
-    /** */
     Focus(select?: boolean, delay?: number): void;
     /** */
     Blur(): void;
     /** */
     Clear(delay?: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CoerTextarea, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CoerTextarea, "coer-textarea", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "textPosition": { "alias": "textPosition"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; "isSignal": true; }; "isValid": { "alias": "isValid"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "onInput": "onInput"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerTextarea, "coer-textarea", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "textPosition": { "alias": "textPosition"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; "isSignal": true; }; "isValid": { "alias": "isValid"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; }, { "onInput": "onInput"; }, never, never, false, never>;
 }

package/fesm2022/coer-elements-components.mjs

@@ -1289,90 +1289,96 @@ class CoerSelectbox extends ControlValue {
     ngAfterViewInit() {
         Tools.Sleep().then(_ => {
             //Container
-            this._container = document.getElementById(`${this._id}-container`);
-            this._container.addEventListener('mouseenter', () => {
-                this._isOverMenu.set(true);
-            });
-            this._container.addEventListener('mouseleave', () => {
-                this._isOverMenu.set(false);
-            });
+            const container = document.getElementById(`${this._id}-container`);
+            if (container) {
+                container.addEventListener('mouseenter', () => {
+                    this._isOverMenu.set(true);
+                });
+                container.addEventListener('mouseleave', () => {
+                    this._isOverMenu.set(false);
+                });
+            }
             //DropDown
             this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
-            this._dropDownMenu.addEventListener('mouseenter', () => {
-                this._isOverMenu.set(true);
-            });
-            this._dropDownMenu.addEventListener('mouseleave', () => {
-                this._isOverMenu.set(false);
-            });
+            if (this._dropDownMenu) {
+                this._dropDownMenu.addEventListener('mouseenter', () => {
+                    this._isOverMenu.set(true);
+                });
+                this._dropDownMenu.addEventListener('mouseleave', () => {
+                    this._isOverMenu.set(false);
+                });
+            }
             //TextBox
             this._textbox = document.getElementById(this._id);
-            this._textbox.addEventListener('focus', () => {
-                if (this._isEnable())
-                    this.Focus();
-                else
-                    this.Blur();
-            });
-            this._textbox.addEventListener('keyup', (event) => {
-                const { key } = event;
-                if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
-                    if (key === 'ArrowUp') {
-                        const firstIndex = (this._dataSource().length <= 0) ? -1 : 0;
-                        if ((this._index() - 1) >= firstIndex) {
-                            this._index.update(index => index - 1);
-                            if (this._index() >= 3)
-                                this._scroll.update(scroll => scroll -= this._scrollByRow);
-                            else
+            if (this._textbox) {
+                this._textbox.addEventListener('focus', () => {
+                    if (this._isEnable())
+                        this.Focus();
+                    else
+                        this.Blur();
+                });
+                this._textbox.addEventListener('keyup', (event) => {
+                    const { key } = event;
+                    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+                        if (key === 'ArrowUp') {
+                            const firstIndex = (this._dataSource().length <= 0) ? -1 : 0;
+                            if ((this._index() - 1) >= firstIndex) {
+                                this._index.update(index => index - 1);
+                                if (this._index() >= 3)
+                                    this._scroll.update(scroll => scroll -= this._scrollByRow);
+                                else
+                                    this._scroll.set(0);
+                                this._dropDownMenu.scrollTo(0, this._scroll());
+                            }
+                            else {
                                 this._scroll.set(0);
+                                this._index.set(-1);
+                                this._textbox.focus();
+                                this._textbox.select();
+                            }
                             this._dropDownMenu.scrollTo(0, this._scroll());
                         }
-                        else {
-                            this._scroll.set(0);
-                            this._index.set(-1);
-                            this._textbox.focus();
-                            this._textbox.select();
+                        else if (key === 'ArrowDown') {
+                            const lastIndex = (this._dataSource().length - 1);
+                            if ((this._index() + 1) <= lastIndex) {
+                                this._index.update(index => index + 1);
+                                if (this._index() >= 3)
+                                    this._scroll.update(scroll => scroll += this._scrollByRow);
+                            }
+                            this._dropDownMenu.scrollTo(0, this._scroll());
                         }
-                        this._dropDownMenu.scrollTo(0, this._scroll());
-                    }
-                    else if (key === 'ArrowDown') {
-                        const lastIndex = (this._dataSource().length - 1);
-                        if ((this._index() + 1) <= lastIndex) {
-                            this._index.update(index => index + 1);
-                            if (this._index() >= 3)
-                                this._scroll.update(scroll => scroll += this._scrollByRow);
+                        else if (['ArrowLeft', 'ArrowRight'].includes(key)) {
+                            if (Tools.IsNotNull(this._value) && !this._isDirty()) {
+                                this._scroll.set(0);
+                                this._dropDownMenu.scrollTo(0, this._scroll());
+                                this._Search(this._displayed);
+                            }
+                            this._isDirty.set(true);
                         }
-                        this._dropDownMenu.scrollTo(0, this._scroll());
                     }
-                    else if (['ArrowLeft', 'ArrowRight'].includes(key)) {
-                        if (Tools.IsNotNull(this._value) && !this._isDirty()) {
-                            this._scroll.set(0);
-                            this._dropDownMenu.scrollTo(0, this._scroll());
-                            this._Search(this._displayed);
+                    else {
+                        if (key == 'Delete' && this._search() == '') {
+                            this.Unselect();
                         }
                         this._isDirty.set(true);
                     }
-                }
-                else {
-                    if (key == 'Delete' && this._search() == '') {
-                        this.Unselect();
-                    }
-                    this._isDirty.set(true);
-                }
-            });
-            this._textbox.addEventListener('keydown', () => {
-                if (!this._isOpen())
-                    this._Open();
-            });
-            this._textbox.addEventListener('mouseenter', () => {
-                this._isOverMenu.set(true);
-            });
-            this._textbox.addEventListener('mouseleave', () => {
-                this._isOverMenu.set(false);
-            });
-            this._textbox.addEventListener('paste', () => {
-                Tools.Sleep().then(_ => {
-                    this._search.update(search => search = search.toString().trim());
                 });
-            });
+                this._textbox.addEventListener('keydown', () => {
+                    if (!this._isOpen())
+                        this._Open();
+                });
+                this._textbox.addEventListener('mouseenter', () => {
+                    this._isOverMenu.set(true);
+                });
+                this._textbox.addEventListener('mouseleave', () => {
+                    this._isOverMenu.set(false);
+                });
+                this._textbox.addEventListener('paste', () => {
+                    Tools.Sleep().then(_ => {
+                        this._search.update(search => search = search.toString().trim());
+                    });
+                });
+            }
             //Document
             document.addEventListener('click', () => {
                 if (!this._isOverMenu())
@@ -3695,20 +3701,22 @@ class CoerDropdown extends ControlValue {
         Tools.Sleep().then(() => {
             //Container
             this._container = document.getElementById(`${this._id}-container`);
-            this._container.addEventListener('mouseenter', () => {
-                this._isOverMenu.set(true);
-            });
-            this._container.addEventListener('mouseleave', () => {
-                this._isOverMenu.set(false);
-            });
-            //DropDown
-            this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
-            this._dropDownMenu.addEventListener('mouseenter', () => {
-                this._isOverMenu.set(true);
-            });
-            this._dropDownMenu.addEventListener('mouseleave', () => {
-                this._isOverMenu.set(false);
-            });
+            if (this._container) {
+                this._container.addEventListener('mouseenter', () => {
+                    this._isOverMenu.set(true);
+                });
+                this._container.addEventListener('mouseleave', () => {
+                    this._isOverMenu.set(false);
+                });
+                //DropDown
+                this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
+                this._dropDownMenu.addEventListener('mouseenter', () => {
+                    this._isOverMenu.set(true);
+                });
+                this._dropDownMenu.addEventListener('mouseleave', () => {
+                    this._isOverMenu.set(false);
+                });
+            }
             //Document
             document.addEventListener('click', () => {
                 if (!this._isOverMenu())
@@ -3906,8 +3914,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
         }], ctorParameters: () => [] });
 
 class CoerTextarea extends ControlValue {
+    //Constructor
     constructor() {
-        super(...arguments);
+        super();
         //Elements 
         this._coerTextBox = viewChild.required('coerTextArea');
         //Variables 
@@ -3916,6 +3925,7 @@ class CoerTextarea extends ControlValue {
         this._isLoadingEvent = signal(false);
         //Inputs 
         this.id = input('');
+        this.value = input(null);
         this.label = input('');
         this.placeholder = input('');
         this.textPosition = input('left');
@@ -3952,22 +3962,12 @@ class CoerTextarea extends ControlValue {
             return this.isInvalid() || this.isValid()
                 ? '18px' : '0px';
         });
-    }
-    set value(value) {
-        if (Tools.IsNull(value))
-            value = '';
-        this.SetValue(value);
+        this._effect = effect(() => {
+            this.SetValue(Tools.IsNotNull(this.value()) ? this.value() : '');
+        });
     }
     //AfterViewInit
     ngAfterViewInit() {
-        this._SetEvents();
-    }
-    //getter
-    get footer() {
-        return `${Tools.IsNotNull(this._value) ? String(this._value).length : '0'} / ${this.maxLength()}`;
-    }
-    /** */
-    _SetEvents() {
         Tools.Sleep().then(() => {
             this._htmlElement = document.getElementById(this._id);
             if (this._htmlElement) {
@@ -3991,6 +3991,14 @@ class CoerTextarea extends ControlValue {
             }
         });
     }
+    //OnDestroy
+    ngOnDestroy() {
+        this._effect?.destroy();
+    }
+    //getter
+    get footer() {
+        return `${Tools.IsNotNull(this._value) ? String(this._value).length : '0'} / ${this.maxLength()}`;
+    }
     /** */
     Focus(select = false, delay = 0) {
         if (this._isLoadingEvent())
@@ -4029,15 +4037,13 @@ class CoerTextarea extends ControlValue {
         this.SetValue('');
         this.Focus(false, delay);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextarea, isStandalone: false, selector: "coer-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-textarea\">\r\n    <mat-form-field\r\n        [id]=\"_id + '-container'\"\r\n        [floatLabel]=\"_floatLabel()\"\r\n        [ngClass]=\"{\r\n            'readonly': isReadonly() && !isLoading()\r\n        }\"\r\n        [style]=\"{\r\n            'width': width(),\r\n            'min-width': minWidth(),\r\n            'max-width': maxWidth(),\r\n            'margin-top': marginTop(),\r\n            'margin-right': marginRight(),\r\n            'margin-bottom': marginBottom(),\r\n            'margin-left': marginLeft()\r\n        }\">\r\n        <mat-label>{{ label() }}</mat-label>\r\n\r\n        <textarea #coerTextArea matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextArea.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'cursor'       : isLoading() ? 'wait' : 'default',\r\n                'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align'   : textPosition(),\r\n                'resize'       : (!resize() || !_isEnable()) ? 'none' : '',\r\n                'height'       : height()\r\n            }\"></textarea>\r\n\r\n        @if(isLoading()) {\r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n\r\n        <span ngClass=\"icon-container\">\r\n            @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n\r\n    @if(showFooter()) {\r\n        <footer> {{ footer }} </footer>\r\n    }\r\n</div>", styles: ["div.coer-textarea mat-form-field{position:relative!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;padding:0!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{font-weight:400!important;font-size:17px!important;color:var(--black)!important;min-height:80px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-textarea mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-textarea mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-textarea mat-form-field span.icon-container i{font-size:20px!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-textarea mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-textarea mat-form-field .placeholder,div.coer-textarea mat-form-field .placeholder *,div.coer-textarea mat-form-field .placeholder-glow,div.coer-textarea mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-textarea footer{padding-top:2px;text-align:right;font-size:10px;color:var(--gray)}div.coer-textarea mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextarea, isStandalone: false, selector: "coer-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onInput: "onInput" }, providers: [CONTROL_VALUE(CoerTextarea)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-textarea\">\r\n    <mat-form-field\r\n        [id]=\"_id + '-container'\"\r\n        [floatLabel]=\"_floatLabel()\"\r\n        [ngClass]=\"{\r\n            'readonly': isReadonly() && !isLoading()\r\n        }\"\r\n        [style]=\"{\r\n            'width': width(),\r\n            'min-width': minWidth(),\r\n            'max-width': maxWidth(),\r\n            'margin-top': marginTop(),\r\n            'margin-right': marginRight(),\r\n            'margin-bottom': marginBottom(),\r\n            'margin-left': marginLeft()\r\n        }\">\r\n        <mat-label>{{ label() }}</mat-label>\r\n\r\n        <textarea #coerTextArea matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextArea.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'cursor'       : isLoading() ? 'wait' : 'default',\r\n                'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align'   : textPosition(),\r\n                'resize'       : (!resize() || !_isEnable()) ? 'none' : '',\r\n                'height'       : height()\r\n            }\"></textarea>\r\n\r\n        @if(isLoading()) {\r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n\r\n        <span ngClass=\"icon-container\">\r\n            @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n\r\n    @if(showFooter()) {\r\n        <footer> {{ footer }} </footer>\r\n    }\r\n</div>", styles: ["div.coer-textarea mat-form-field{position:relative!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;padding:0!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{font-weight:400!important;font-size:17px!important;color:var(--black)!important;min-height:80px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-textarea mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-textarea mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-textarea mat-form-field span.icon-container i{font-size:20px!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-textarea mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-textarea mat-form-field .placeholder,div.coer-textarea mat-form-field .placeholder *,div.coer-textarea mat-form-field .placeholder-glow,div.coer-textarea mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-textarea footer{padding-top:2px;text-align:right;font-size:10px;color:var(--gray)}div.coer-textarea mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextarea, decorators: [{
             type: Component,
             args: [{ selector: 'coer-textarea', providers: [CONTROL_VALUE(CoerTextarea)], standalone: false, template: "<div class=\"coer-textarea\">\r\n    <mat-form-field\r\n        [id]=\"_id + '-container'\"\r\n        [floatLabel]=\"_floatLabel()\"\r\n        [ngClass]=\"{\r\n            'readonly': isReadonly() && !isLoading()\r\n        }\"\r\n        [style]=\"{\r\n            'width': width(),\r\n            'min-width': minWidth(),\r\n            'max-width': maxWidth(),\r\n            'margin-top': marginTop(),\r\n            'margin-right': marginRight(),\r\n            'margin-bottom': marginBottom(),\r\n            'margin-left': marginLeft()\r\n        }\">\r\n        <mat-label>{{ label() }}</mat-label>\r\n\r\n        <textarea #coerTextArea matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [placeholder]=\"placeholder()\"\r\n            [minLength]=\"minLength()\"\r\n            [maxLength]=\"maxLength()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            [value]=\"_value\"\r\n            (input)=\"SetValue(coerTextArea.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'cursor'       : isLoading() ? 'wait' : 'default',\r\n                'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight(),\r\n                'text-align'   : textPosition(),\r\n                'resize'       : (!resize() || !_isEnable()) ? 'none' : '',\r\n                'height'       : height()\r\n            }\"></textarea>\r\n\r\n        @if(isLoading()) {\r\n            <div class=\"placeholder-glow\">\r\n                <span class=\"placeholder\"></span>\r\n            </div>\r\n        }\r\n\r\n        <span ngClass=\"icon-container\">\r\n            @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n\r\n    @if(showFooter()) {\r\n        <footer> {{ footer }} </footer>\r\n    }\r\n</div>", styles: ["div.coer-textarea mat-form-field{position:relative!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{width:100%!important;padding:0!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label{overflow:visible!important;position:absolute!important;top:20px!important}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix textarea{font-weight:400!important;font-size:17px!important;color:var(--black)!important;min-height:80px}div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-textarea mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-textarea mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-textarea mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;width:30px;height:40px;display:flex;align-items:center;justify-content:center}div.coer-textarea mat-form-field span.icon-container i{font-size:20px!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-textarea mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-textarea mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:100%!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-textarea mat-form-field .placeholder,div.coer-textarea mat-form-field .placeholder *,div.coer-textarea mat-form-field .placeholder-glow,div.coer-textarea mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-textarea footer{padding-top:2px;text-align:right;font-size:10px;color:var(--gray)}div.coer-textarea mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class CoerToolbar {
     constructor() {