coer-elements 2.0.1 → 2.0.3

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

@@ -7,9 +7,9 @@ export declare class CoerButton implements OnInit, OnDestroy {
     private _tooltipElement;
     id: string;
     color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "dark">;
-    type: import("@angular/core").InputSignal<"filled" | "outline" | "icon" | "icon-outline" | "icon-no-border">;
+    type: import("@angular/core").InputSignal<"icon" | "filled" | "outline" | "icon-outline" | "icon-no-border">;
     icon: import("@angular/core").InputSignal<string>;
-    iconPosition: import("@angular/core").InputSignal<"left" | "right">;
+    iconPosition: import("@angular/core").InputSignal<"right" | "left">;
     path: import("@angular/core").InputSignal<string | (string | number)[]>;
     animation: import("@angular/core").InputSignal<boolean>;
     isLoading: import("@angular/core").InputSignal<boolean>;
@@ -25,7 +25,7 @@ export declare class CoerButton implements OnInit, OnDestroy {
     marginRight: import("@angular/core").InputSignal<string>;
     marginBottom: import("@angular/core").InputSignal<string>;
     marginLeft: import("@angular/core").InputSignal<string>;
-    tooltipPosition: import("@angular/core").InputSignal<"left" | "right" | "top" | "bottom">;
+    tooltipPosition: import("@angular/core").InputSignal<"top" | "right" | "bottom" | "left">;
     set tooltip(value: string);
     onClick: import("@angular/core").OutputEmitterRef<void>;
     protected _isEnable: import("@angular/core").Signal<boolean>;

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

@@ -17,7 +17,7 @@ export declare class CoerDateBox extends ControlValue implements OnInit {
     id: string;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
+    textPosition: import("@angular/core").InputSignal<"center" | "right" | "left">;
     isInvalid: import("@angular/core").InputSignal<boolean>;
     isValid: import("@angular/core").InputSignal<boolean>;
     isLoading: import("@angular/core").InputSignal<boolean>;

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

@@ -1,7 +1,7 @@
-import { ElementRef, OnInit } from '@angular/core';
+import { AfterViewInit, ElementRef } from '@angular/core';
 import { ControlValue } from 'coer-elements/tools';
 import * as i0 from "@angular/core";
-export declare class CoerDropdown<T> extends ControlValue implements OnInit {
+export declare class CoerDropdown<T> extends ControlValue implements AfterViewInit {
     protected _value: T | null;
     protected _coerTextBox: import("@angular/core").Signal<ElementRef<any>>;
     protected _id: string;
@@ -30,10 +30,10 @@ export declare class CoerDropdown<T> extends ControlValue implements OnInit {
     marginBottom: import("@angular/core").InputSignal<string>;
     marginLeft: import("@angular/core").InputSignal<string>;
     tooltip: import("@angular/core").InputSignal<string>;
-    tooltipPosition: import("@angular/core").InputSignal<"left" | "right" | "top" | "bottom">;
+    tooltipPosition: import("@angular/core").InputSignal<"top" | "right" | "bottom" | "left">;
     onSelected: import("@angular/core").OutputEmitterRef<T>;
     onUnselect: import("@angular/core").OutputEmitterRef<null>;
-    ngOnInit(): void;
+    ngAfterViewInit(): Promise<void>;
     get value(): T | null;
     protected get _label(): string;
     get icon(): string;

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

@@ -13,7 +13,7 @@ export declare class CoerModal implements OnInit {
     title: import("@angular/core").InputSignal<string>;
     icon: import("@angular/core").InputSignal<string>;
     showCloseButton: import("@angular/core").InputSignal<boolean>;
-    width: import("@angular/core").InputSignal<"small" | "auto" | "full">;
+    width: import("@angular/core").InputSignal<"auto" | "small" | "full">;
     height: import("@angular/core").InputSignal<string>;
     maxHeight: import("@angular/core").InputSignal<string>;
     get isOpen(): boolean;

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

@@ -14,7 +14,7 @@ export declare class CoerNumberBox extends ControlValue implements OnInit {
     id: string;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
+    textPosition: import("@angular/core").InputSignal<"center" | "right" | "left">;
     min: import("@angular/core").InputSignal<number>;
     max: import("@angular/core").InputSignal<number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

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

@@ -13,7 +13,7 @@ export declare class CoerSecretBox extends ControlValue implements OnInit {
     id: string;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
+    textPosition: import("@angular/core").InputSignal<"center" | "right" | "left">;
     minLength: import("@angular/core").InputSignal<string | number>;
     maxLength: import("@angular/core").InputSignal<string | number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

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

@@ -1,7 +1,7 @@
-import { ElementRef, OnInit } from '@angular/core';
+import { AfterViewInit, ElementRef } from '@angular/core';
 import { ControlValue } from 'coer-elements/tools';
 import * as i0 from "@angular/core";
-export declare class CoerSelectbox<T> extends ControlValue implements OnInit {
+export declare class CoerSelectbox<T> extends ControlValue implements AfterViewInit {
     protected _value: T | null;
     private readonly _scrollByRow;
     protected _coerTextBox: import("@angular/core").Signal<ElementRef<any>>;
@@ -16,7 +16,6 @@ export declare class CoerSelectbox<T> extends ControlValue implements OnInit {
     protected _textbox: HTMLInputElement;
     protected _dropDownMenu: HTMLElement;
     protected _container: HTMLElement;
-    protected _isReadyElement: boolean;
     set value(value: T | null | undefined);
     id: string;
     label: import("@angular/core").InputSignal<string>;
@@ -39,7 +38,7 @@ export declare class CoerSelectbox<T> extends ControlValue implements OnInit {
     marginLeft: import("@angular/core").InputSignal<string>;
     onSelected: import("@angular/core").OutputEmitterRef<T>;
     onUnselect: import("@angular/core").OutputEmitterRef<void>;
-    ngOnInit(): Promise<void>;
+    ngAfterViewInit(): Promise<void>;
     get value(): T | null | undefined;
     protected get _displayed(): string;
     protected get _placeholder(): string;

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

@@ -16,7 +16,7 @@ export declare class CoerSwitch extends ControlValue implements OnInit, OnDestro
     isDisabled: import("@angular/core").InputSignal<boolean>;
     isReadonly: import("@angular/core").InputSignal<boolean>;
     isInvisible: import("@angular/core").InputSignal<boolean>;
-    tooltipPosition: import("@angular/core").InputSignal<"left" | "right" | "top" | "bottom">;
+    tooltipPosition: import("@angular/core").InputSignal<"top" | "right" | "bottom" | "left">;
     set tooltip(value: string);
     onChange: import("@angular/core").OutputEmitterRef<boolean>;
     ngOnInit(): void;

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

@@ -12,7 +12,7 @@ export declare class CoerTextarea extends ControlValue implements OnInit {
     id: string;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
+    textPosition: import("@angular/core").InputSignal<"center" | "right" | "left">;
     minLength: import("@angular/core").InputSignal<string | number>;
     maxLength: import("@angular/core").InputSignal<string | number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;
@@ -26,6 +26,7 @@ export declare class CoerTextarea extends ControlValue implements OnInit {
     width: import("@angular/core").InputSignal<string>;
     minWidth: import("@angular/core").InputSignal<string>;
     maxWidth: import("@angular/core").InputSignal<string>;
+    height: import("@angular/core").InputSignal<string>;
     marginTop: import("@angular/core").InputSignal<string>;
     marginRight: import("@angular/core").InputSignal<string>;
     marginBottom: import("@angular/core").InputSignal<string>;
@@ -46,5 +47,5 @@ export declare class CoerTextarea extends ControlValue implements OnInit {
     /** */
     Clear(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CoerTextarea, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CoerTextarea, "coer-textarea", never, { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "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; }; "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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerTextarea, "coer-textarea", never, { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "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/components/lib/coer-textbox/coer-textbox.component.d.ts

@@ -13,7 +13,7 @@ export declare class CoerTextBox extends ControlValue implements OnInit {
     id: string;
     label: import("@angular/core").InputSignal<string>;
     placeholder: import("@angular/core").InputSignal<string>;
-    textPosition: import("@angular/core").InputSignal<"center" | "left" | "right">;
+    textPosition: import("@angular/core").InputSignal<"center" | "right" | "left">;
     minLength: import("@angular/core").InputSignal<string | number>;
     maxLength: import("@angular/core").InputSignal<string | number>;
     isInvalid: import("@angular/core").InputSignal<boolean>;

package/fesm2022/coer-elements-components.mjs

@@ -605,11 +605,11 @@ class CoerModal {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerModal, isStandalone: false, selector: "coer-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective }], ngImport: i0, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\" [ngStyle]=\"{ 'max-width': _width }\">\r\n        <div class=\"modal-content\">\r\n            @if(IsNull(header()) || (IsNotNull(header()) && header()?.show())) {\r\n                <header class=\"modal-header\">\r\n                    <h6 class=\"modal-title\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                        <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n                    </h6>\r\n\r\n                    @if(showCloseButton()) {\r\n                        <button type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{\r\n                    'height': height(),\r\n                    'max-height': maxHeight(),\r\n                    'overflow': maxHeight() === '' ? 'visible' : 'auto'\r\n                }\">\r\n                @if(IsNotNull(body()) && body()?.show()) {\r\n                    <ng-container [ngTemplateOutlet]=\"body()!.template\"></ng-container>\r\n                }\r\n\r\n                @else {\r\n                    <ng-content></ng-content>\r\n                }\r\n            </section>\r\n\r\n            @if(IsNotNull(footer())) {\r\n                <footer class=\"modal-footer\">\r\n                    @if(footer()?.show()) {\r\n                        <ng-container [ngTemplateOutlet]=\"footer()!.template\"></ng-container>\r\n                    }\r\n                </footer>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: [".modal-dialog{margin:auto!important;height:100vh}.modal-header{padding:8px 16px!important}.modal-title{font-weight:700!important;font-size:17px!important}.modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important}div.coer-filebox .modal-body{padding:0!important}.modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}.btn-close:focus{box-shadow:none!important}div.modal-backdrop{z-index:0!important}aside.modal div.backdrop{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0000005b;z-index:1500}div.modal-content{z-index:1501;overflow:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerModal, isStandalone: false, selector: "coer-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpen: "onOpen", onClose: "onClose" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective }], ngImport: i0, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n    <div class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\" [ngStyle]=\"{ 'max-width': _width }\">\r\n        <div class=\"modal-content\">\r\n            @if(IsNull(header()) || (IsNotNull(header()) && header()?.show())) {\r\n                <header class=\"modal-header\">\r\n                    <h6 class=\"modal-title\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                        <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n                    </h6>\r\n\r\n                    @if(showCloseButton()) {\r\n                        <button type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{\r\n                    'height': height(),\r\n                    'max-height': maxHeight(),\r\n                    'overflow': maxHeight() === '' ? 'visible' : 'auto'\r\n                }\">\r\n                @if(IsNotNull(body()) && body()?.show()) {\r\n                    <ng-container [ngTemplateOutlet]=\"body()!.template\"></ng-container>\r\n                }\r\n\r\n                @else {\r\n                    <ng-content></ng-content>\r\n                }\r\n            </section>\r\n\r\n            @if(IsNotNull(footer())) {\r\n                <footer class=\"modal-footer\">\r\n                    @if(footer()?.show()) {\r\n                        <ng-container [ngTemplateOutlet]=\"footer()!.template\"></ng-container>\r\n                    }\r\n                </footer>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: [".modal-dialog{margin:auto!important;height:100vh}.modal-header{padding:8px 16px!important}.modal-title{font-weight:700!important;font-size:17px!important}.modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important}div.coer-filebox .modal-body{padding:0!important}.modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}.btn-close:focus{box-shadow:none!important}div.modal-backdrop{z-index:0!important}aside.modal div.backdrop{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0000005b;z-index:1500}div.modal-content{z-index:1501;overflow:auto!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerModal, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-modal', standalone: false, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\" [ngStyle]=\"{ 'max-width': _width }\">\r\n        <div class=\"modal-content\">\r\n            @if(IsNull(header()) || (IsNotNull(header()) && header()?.show())) {\r\n                <header class=\"modal-header\">\r\n                    <h6 class=\"modal-title\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                        <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n                    </h6>\r\n\r\n                    @if(showCloseButton()) {\r\n                        <button type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{\r\n                    'height': height(),\r\n                    'max-height': maxHeight(),\r\n                    'overflow': maxHeight() === '' ? 'visible' : 'auto'\r\n                }\">\r\n                @if(IsNotNull(body()) && body()?.show()) {\r\n                    <ng-container [ngTemplateOutlet]=\"body()!.template\"></ng-container>\r\n                }\r\n\r\n                @else {\r\n                    <ng-content></ng-content>\r\n                }\r\n            </section>\r\n\r\n            @if(IsNotNull(footer())) {\r\n                <footer class=\"modal-footer\">\r\n                    @if(footer()?.show()) {\r\n                        <ng-container [ngTemplateOutlet]=\"footer()!.template\"></ng-container>\r\n                    }\r\n                </footer>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: [".modal-dialog{margin:auto!important;height:100vh}.modal-header{padding:8px 16px!important}.modal-title{font-weight:700!important;font-size:17px!important}.modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important}div.coer-filebox .modal-body{padding:0!important}.modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}.btn-close:focus{box-shadow:none!important}div.modal-backdrop{z-index:0!important}aside.modal div.backdrop{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0000005b;z-index:1500}div.modal-content{z-index:1501;overflow:auto!important}\n"] }]
+            args: [{ selector: 'coer-modal', standalone: false, template: "<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n    <div class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\" [ngStyle]=\"{ 'max-width': _width }\">\r\n        <div class=\"modal-content\">\r\n            @if(IsNull(header()) || (IsNotNull(header()) && header()?.show())) {\r\n                <header class=\"modal-header\">\r\n                    <h6 class=\"modal-title\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                        <span [ngClass]=\"{ 'ms-1': _icon().length > 0 }\"> {{ _title() }} </span>\r\n                    </h6>\r\n\r\n                    @if(showCloseButton()) {\r\n                        <button type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{\r\n                    'height': height(),\r\n                    'max-height': maxHeight(),\r\n                    'overflow': maxHeight() === '' ? 'visible' : 'auto'\r\n                }\">\r\n                @if(IsNotNull(body()) && body()?.show()) {\r\n                    <ng-container [ngTemplateOutlet]=\"body()!.template\"></ng-container>\r\n                }\r\n\r\n                @else {\r\n                    <ng-content></ng-content>\r\n                }\r\n            </section>\r\n\r\n            @if(IsNotNull(footer())) {\r\n                <footer class=\"modal-footer\">\r\n                    @if(footer()?.show()) {\r\n                        <ng-container [ngTemplateOutlet]=\"footer()!.template\"></ng-container>\r\n                    }\r\n                </footer>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{ 'backdrop': _isModalOpen() }\"></div>\r\n</aside>", styles: [".modal-dialog{margin:auto!important;height:100vh}.modal-header{padding:8px 16px!important}.modal-title{font-weight:700!important;font-size:17px!important}.modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important}div.coer-filebox .modal-body{padding:0!important}.modal-footer{border:none!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;max-height:64px!important;min-height:64px!important;gap:10px!important}.btn-close:focus{box-shadow:none!important}div.modal-backdrop{z-index:0!important}aside.modal div.backdrop{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:#0000005b;z-index:1500}div.modal-content{z-index:1501;overflow:auto!important}\n"] }]
         }], propDecorators: { contentRef: [{
                 type: ContentChildren,
                 args: [CoerRefDirective]
@@ -1081,7 +1081,6 @@ class CoerSelectbox extends ControlValue {
         this._isOverMenu = signal(false);
         this._isLoadingEvent = signal(false);
         this._scroll = signal(0);
-        this._isReadyElement = false;
         this.id = '';
         this.label = input('');
         this.placeholder = input('-- Select --');
@@ -1141,9 +1140,8 @@ class CoerSelectbox extends ControlValue {
             value = null;
         this.SetValue(value);
     }
-    async ngOnInit() {
+    async ngAfterViewInit() {
         await Tools.Sleep();
-        this._isReadyElement = true;
         this.SetEvents();
     }
     //getter
@@ -3562,7 +3560,8 @@ class CoerDropdown extends ControlValue {
             value = null;
         this.SetValue(value);
     }
-    ngOnInit() {
+    async ngAfterViewInit() {
+        await Tools.Sleep();
         this.SetEvents();
     }
     //getter
@@ -3689,11 +3688,11 @@ class CoerDropdown extends ControlValue {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDropdown, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDropdown, isStandalone: false, selector: "coer-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", 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 }, 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerDropdown)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-dropdown\">\r\n    <div [id]=\"_id + '-container'\">\r\n        <div [ngClass]=\"{ 'd-none': isInvisible() }\">\r\n            <coer-button\r\n                [color]=\"color()\"\r\n                [type]=\"type()\"\r\n                [icon]=\"icon\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\" \r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n                [tooltip]=\"tooltip()\"\r\n                [tooltipPosition]=\"tooltipPosition()\"\r\n                (onClick)=\"Toggle()\"\r\n            > {{ _label }} </coer-button>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{ 'd-none': !isInvisible(), 'invisible': true  }\">\r\n            <coer-button\r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n            ></coer-button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" class=\"dropdown-menu\">\r\n            @if(_dataSource().length <= 0) {\r\n                <li class=\"no-options\">\r\n                    <div [id]=\"id + '-dropdown-option-' + -1\" class='dropdown-item cursor-pointer no-options'\r\n                    > -- No Options -- </div>\r\n                </li>\r\n            }\r\n\r\n            @for(item of _dataSource(); track GetIndexRow(item)) {\r\n                <li (click)=\"SelectItem(item)\">\r\n                    <a [routerLink]=\"GetPath(item)\" class=\"text-decoration-none\">\r\n                        <div [id]=\"id + '-dropdown-option-' + GetIndexRow(item)\"\r\n                            [ngClass]=\"{\r\n                                'dropdown-item': true,\r\n                                'cursor-pointer': true,\r\n                                'gap-2': true,\r\n                                'dropdown-item-focus': _index() == GetIndexRow(item)\r\n                            }\"> \r\n\r\n                            @if (GetIcon(item).length > 0) {\r\n                                <i [class]=\"GetIcon(item)\"></i>\r\n                            }\r\n                            <span> {{ GetDisplay(item) }} </span>\r\n                        </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                    </a>\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>  ", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}div.coer-dropdown{position:relative!important;width:fit-content!important;display:inline-block!important}div.coer-dropdown .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-dropdown ul.dropdown-menu{background-color:#fff!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%;overflow:auto!important;padding:0!important}div.coer-dropdown .dropdown-divider{margin:0!important;background-color:#fff!important}div.coer-dropdown ul.dropdown-menu li:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:#000!important;background-color:#f1f6ff!important}div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-dropdown ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-dropdown ul.dropdown-menu li.no-options *{color:#d3d3d3!important}div.coer-dropdown div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-dropdown 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: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDropdown, isStandalone: false, selector: "coer-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, propDisplay: { classPropertyName: "propDisplay", publicName: "propDisplay", isSignal: true, isRequired: false, transformFunction: null }, rowsByPage: { classPropertyName: "rowsByPage", publicName: "rowsByPage", 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 }, 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerDropdown)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-dropdown\">\r\n    <div [id]=\"_id + '-container'\">\r\n        <div [ngClass]=\"{ 'd-none': isInvisible() }\">\r\n            <coer-button\r\n                [color]=\"color()\"\r\n                [type]=\"type()\"\r\n                [icon]=\"icon\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\" \r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n                [tooltip]=\"tooltip()\"\r\n                [tooltipPosition]=\"tooltipPosition()\"\r\n                (onClick)=\"Toggle()\"\r\n            > {{ _label }} </coer-button>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{ 'd-none': !isInvisible(), 'invisible': true  }\">\r\n            <coer-button\r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n            ></coer-button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" \r\n            class=\"dropdown-menu\"\r\n            [ngStyle]=\"{\r\n                width: minWidth()\r\n            }\">\r\n\r\n            @if(_dataSource().length <= 0) {\r\n                <li class=\"no-options\">\r\n                    <div [id]=\"id + '-dropdown-option-' + -1\" class='dropdown-item cursor-pointer no-options'\r\n                    > -- No Options -- </div>\r\n                </li>\r\n            }\r\n\r\n            @for(item of _dataSource(); track GetIndexRow(item)) {\r\n                <li (click)=\"SelectItem(item)\">\r\n                    <a [routerLink]=\"GetPath(item)\" class=\"text-decoration-none\">\r\n                        <div [id]=\"id + '-dropdown-option-' + GetIndexRow(item)\"\r\n                            [ngClass]=\"{\r\n                                'dropdown-item': true,\r\n                                'cursor-pointer': true,\r\n                                'gap-2': true,\r\n                                'dropdown-item-focus': _index() == GetIndexRow(item)\r\n                            }\"> \r\n\r\n                            @if (GetIcon(item).length > 0) {\r\n                                <i [class]=\"GetIcon(item)\"></i>\r\n                            }\r\n                            <span> {{ GetDisplay(item) }} </span>\r\n                        </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                    </a>\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>  ", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}div.coer-dropdown{position:relative!important;width:fit-content!important;display:inline-block!important}div.coer-dropdown .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-dropdown ul.dropdown-menu{background-color:#fff!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%;overflow:auto!important;padding:0!important}div.coer-dropdown .dropdown-divider{margin:0!important;background-color:#fff!important}div.coer-dropdown ul.dropdown-menu li:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:#000!important;background-color:#f1f6ff!important}div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-dropdown ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-dropdown ul.dropdown-menu li.no-options *{color:#d3d3d3!important}div.coer-dropdown div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-dropdown 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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "icon", "iconPosition", "path", "animation", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltipPosition", "tooltip"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDropdown, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-dropdown', providers: [CONTROL_VALUE(CoerDropdown)], standalone: false, template: "<div class=\"coer-dropdown\">\r\n    <div [id]=\"_id + '-container'\">\r\n        <div [ngClass]=\"{ 'd-none': isInvisible() }\">\r\n            <coer-button\r\n                [color]=\"color()\"\r\n                [type]=\"type()\"\r\n                [icon]=\"icon\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\" \r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n                [tooltip]=\"tooltip()\"\r\n                [tooltipPosition]=\"tooltipPosition()\"\r\n                (onClick)=\"Toggle()\"\r\n            > {{ _label }} </coer-button>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{ 'd-none': !isInvisible(), 'invisible': true  }\">\r\n            <coer-button\r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n            ></coer-button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" class=\"dropdown-menu\">\r\n            @if(_dataSource().length <= 0) {\r\n                <li class=\"no-options\">\r\n                    <div [id]=\"id + '-dropdown-option-' + -1\" class='dropdown-item cursor-pointer no-options'\r\n                    > -- No Options -- </div>\r\n                </li>\r\n            }\r\n\r\n            @for(item of _dataSource(); track GetIndexRow(item)) {\r\n                <li (click)=\"SelectItem(item)\">\r\n                    <a [routerLink]=\"GetPath(item)\" class=\"text-decoration-none\">\r\n                        <div [id]=\"id + '-dropdown-option-' + GetIndexRow(item)\"\r\n                            [ngClass]=\"{\r\n                                'dropdown-item': true,\r\n                                'cursor-pointer': true,\r\n                                'gap-2': true,\r\n                                'dropdown-item-focus': _index() == GetIndexRow(item)\r\n                            }\"> \r\n\r\n                            @if (GetIcon(item).length > 0) {\r\n                                <i [class]=\"GetIcon(item)\"></i>\r\n                            }\r\n                            <span> {{ GetDisplay(item) }} </span>\r\n                        </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                    </a>\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>  ", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}div.coer-dropdown{position:relative!important;width:fit-content!important;display:inline-block!important}div.coer-dropdown .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-dropdown ul.dropdown-menu{background-color:#fff!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%;overflow:auto!important;padding:0!important}div.coer-dropdown .dropdown-divider{margin:0!important;background-color:#fff!important}div.coer-dropdown ul.dropdown-menu li:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:#000!important;background-color:#f1f6ff!important}div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-dropdown ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-dropdown ul.dropdown-menu li.no-options *{color:#d3d3d3!important}div.coer-dropdown div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-dropdown mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"] }]
+            args: [{ selector: 'coer-dropdown', providers: [CONTROL_VALUE(CoerDropdown)], standalone: false, template: "<div class=\"coer-dropdown\">\r\n    <div [id]=\"_id + '-container'\">\r\n        <div [ngClass]=\"{ 'd-none': isInvisible() }\">\r\n            <coer-button\r\n                [color]=\"color()\"\r\n                [type]=\"type()\"\r\n                [icon]=\"icon\"\r\n                [isLoading]=\"isLoading()\"\r\n                [isDisabled]=\"isDisabled()\" \r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n                [tooltip]=\"tooltip()\"\r\n                [tooltipPosition]=\"tooltipPosition()\"\r\n                (onClick)=\"Toggle()\"\r\n            > {{ _label }} </coer-button>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{ 'd-none': !isInvisible(), 'invisible': true  }\">\r\n            <coer-button\r\n                [width]=\"width()\"\r\n                [minWidth]=\"minWidth()\"\r\n                [maxWidth]=\"maxWidth()\"\r\n                [marginTop]=\"marginTop()\"\r\n                [marginRight]=\"marginRight()\"\r\n                [marginBottom]=\"marginBottom()\"\r\n                [marginLeft]=\"marginLeft()\"\r\n            ></coer-button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" \r\n            class=\"dropdown-menu\"\r\n            [ngStyle]=\"{\r\n                width: minWidth()\r\n            }\">\r\n\r\n            @if(_dataSource().length <= 0) {\r\n                <li class=\"no-options\">\r\n                    <div [id]=\"id + '-dropdown-option-' + -1\" class='dropdown-item cursor-pointer no-options'\r\n                    > -- No Options -- </div>\r\n                </li>\r\n            }\r\n\r\n            @for(item of _dataSource(); track GetIndexRow(item)) {\r\n                <li (click)=\"SelectItem(item)\">\r\n                    <a [routerLink]=\"GetPath(item)\" class=\"text-decoration-none\">\r\n                        <div [id]=\"id + '-dropdown-option-' + GetIndexRow(item)\"\r\n                            [ngClass]=\"{\r\n                                'dropdown-item': true,\r\n                                'cursor-pointer': true,\r\n                                'gap-2': true,\r\n                                'dropdown-item-focus': _index() == GetIndexRow(item)\r\n                            }\"> \r\n\r\n                            @if (GetIcon(item).length > 0) {\r\n                                <i [class]=\"GetIcon(item)\"></i>\r\n                            }\r\n                            <span> {{ GetDisplay(item) }} </span>\r\n                        </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                    </a>\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>  ", styles: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}div.coer-dropdown{position:relative!important;width:fit-content!important;display:inline-block!important}div.coer-dropdown .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-dropdown ul.dropdown-menu{background-color:#fff!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;width:100%;overflow:auto!important;padding:0!important}div.coer-dropdown .dropdown-divider{margin:0!important;background-color:#fff!important}div.coer-dropdown ul.dropdown-menu li:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.no-options):hover,div.coer-dropdown ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-dropdown ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:#000!important;background-color:#f1f6ff!important}div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-dropdown ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-dropdown ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-dropdown ul.dropdown-menu li.no-options *{color:#d3d3d3!important}div.coer-dropdown div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-dropdown mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], id: [{
@@ -3841,6 +3840,7 @@ class CoerTextarea extends ControlValue {
         this.width = input('100%');
         this.minWidth = input('190px');
         this.maxWidth = input('100%');
+        this.height = input('80px');
         this.marginTop = input('0px');
         this.marginRight = input('0px');
         this.marginBottom = input('0px');
@@ -3942,11 +3942,11 @@ class CoerTextarea extends ControlValue {
         this.Focus();
     }
     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: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, 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 }, 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: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { 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' : null,\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            }\"></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: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}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(--orange);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(--orange)!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$2.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextarea, isStandalone: false, selector: "coer-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, 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: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { 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' : null,\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: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}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(--orange);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(--orange)!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$2.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' : null,\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            }\"></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: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}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(--orange);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(--orange)!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"] }]
+            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' : null,\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: [":root{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031;--purple: #a615bc}.text-blue{color:var(--blue)!important}.text-blue-bold{color:var(--blue)!important;font-weight:700!important}.background-blue{background-color:var(--blue)!important}.background-border-blue{background-color:var(--blue)!important;border-color:var(--blue)!important}.border-blue{border-color:var(--blue)!important}.text-gray{color:var(--gray)!important}.text-gray-bold{color:var(--gray)!important;font-weight:700!important}.background-gray{background-color:var(--gray)!important}.background-border-gray{background-color:var(--gray)!important;border-color:var(--gray)!important}.border-gray{border-color:var(--gray)!important}.text-green{color:var(--green)!important}.text-green-bold{color:var(--green)!important;font-weight:700!important}.background-green{background-color:var(--green)!important}.background-border-green{background-color:var(--green)!important;border-color:var(--green)!important}.border-green{border-color:var(--green)!important}.text-yellow{color:var(--yellow)!important}.text-yellow-bold{color:var(--yellow)!important;font-weight:700!important}.background-yellow{background-color:var(--yellow)!important}.background-border-yellow{background-color:var(--yellow)!important;border-color:var(--yellow)!important}.border-yellow{border-color:var(--yellow)!important}.text-red{color:var(--red)!important}.text-red-bold{color:var(--red)!important;font-weight:700!important}.background-red{background-color:var(--red)!important}.background-border-red{background-color:var(--red)!important;border-color:var(--red)!important}.border-red{border-color:var(--red)!important}.text-white{color:var(--white)!important}.text-white-bold{color:var(--white)!important;font-weight:700!important}.background-white{background-color:var(--white)!important}.background-border-white{background-color:var(--white)!important;border-color:var(--white)!important}.border-white{border-color:var(--white)!important}.text-black{color:var(--black)!important}.text-black-bold{color:var(--black)!important;font-weight:700!important}.background-black{background-color:var(--black)!important}.background-border-black{background-color:var(--black)!important;border-color:var(--black)!important}.border-black{border-color:var(--black)!important}.text-orange{color:var(--orange)!important}.text-orange-bold{color:var(--orange)!important;font-weight:700!important}.background-orange{background-color:var(--orange)!important}.background-border-orange{background-color:var(--orange)!important;border-color:var(--orange)!important}.border-orange{border-color:var(--orange)!important}.text-transparent{color:transparent!important}.background-transparent{background-color:transparent!important}.border-transparent{border-color:transparent!important}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(--orange);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(--orange)!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
             }], id: [{