coer-elements 2.0.45 → 2.0.49

package/components/lib/coer-grid/coer-grid.extension.d.ts

@@ -25,7 +25,6 @@ export declare class CoerGridExtension<T> extends ControlValue implements AfterV
     protected _enableAnimations: boolean;
     protected _indexFocus: import("@angular/core").WritableSignal<number>;
     protected GetNumericFormat: typeof Numbers.GetNumericFormat;
-    protected GetElementWidth: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
     protected GetElementHeight: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
     saveButton: IGridHeaderButton;
     addButton: IGridHeaderButton;

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

@@ -3,10 +3,10 @@ import { ICoerRef } from 'coer-elements/interfaces';
 import { Modal } from 'bootstrap';
 import * as i0 from "@angular/core";
 export declare class CoerModal implements AfterViewInit {
-    contentRef: any;
+    contentRef: import("@angular/core").Signal<readonly any[]>;
     protected readonly _id: string;
     protected readonly _isModalOpen: WritableSignal<boolean>;
-    protected _windowWidth: number;
+    protected _windowWidth: WritableSignal<number>;
     protected _isOpen: boolean;
     protected _modal: Modal;
     id: import("@angular/core").InputSignal<string>;
@@ -23,7 +23,7 @@ export declare class CoerModal implements AfterViewInit {
     ngAfterViewInit(): void;
     get isOpen(): boolean;
     get isClose(): boolean;
-    protected get _width(): string;
+    protected _width: import("@angular/core").Signal<string>;
     protected _contentList: import("@angular/core").Signal<ICoerRef[]>;
     protected _header: import("@angular/core").Signal<ICoerRef | null>;
     protected _body: import("@angular/core").Signal<ICoerRef | null>;

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

@@ -8,6 +8,7 @@ export declare class CoerTab implements AfterViewInit, OnDestroy {
     protected readonly _matTabGroup: import("@angular/core").Signal<MatTabGroup>;
     protected readonly _id: string;
     protected readonly _selectedIndex: import("@angular/core").WritableSignal<number>;
+    protected readonly _isLoading: import("@angular/core").WritableSignal<boolean>;
     protected readonly _effectSelectedIndex: EffectRef;
     protected readonly _effectAlignTabs: EffectRef;
     protected _htmlElement: HTMLElement;

package/fesm2022/coer-elements-components.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { viewChild, input, output, Component, computed, effect, signal, ContentChildren, inject, viewChildren, Input, contentChildren, NgModule } from '@angular/core';
+import { viewChild, input, output, Component, computed, effect, signal, contentChildren, inject, viewChildren, Input, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/router';
 import { Router, RouterModule } from '@angular/router';
 import * as i2$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from 'coer-elements/directives';
 import { CoerRefDirective, DirectivesModule } from 'coer-elements/directives';
 import * as i9 from 'coer-elements/pipes';
 import { PipesModule } from 'coer-elements/pipes';
@@ -570,10 +571,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
 
 class CoerModal {
     constructor() {
+        //Content 
+        this.contentRef = contentChildren(CoerRefDirective);
         //Variables
         this._id = Tools.GetGuid('coer-modal');
         this._isModalOpen = isModalOpenSIGNAL;
-        this._windowWidth = Screen.WINDOW_WIDTH;
+        this._windowWidth = signal(Screen.WINDOW_WIDTH);
         this._isOpen = false;
         //Inputs 
         this.id = input('');
@@ -589,8 +592,19 @@ class CoerModal {
         //Generic Tools
         this.IsNull = Tools.IsNull;
         this.IsNotNull = Tools.IsNotNull;
-        //Computed
-        this._contentList = computed(() => Array.from(this.contentRef._results));
+        //computed
+        this._width = computed(() => {
+            switch (this.width()) {
+                case 'small': return '450px';
+                case 'full': return `${this._windowWidth() - 50}px`;
+                case 'auto': return 'fit-content';
+                default: return this.width();
+            }
+        });
+        //getter
+        this._contentList = computed(() => {
+            return this.contentRef();
+        });
         //Computed
         this._header = computed(() => {
             const header = this._contentList().find(x => x.coerRef() === 'header');
@@ -622,7 +636,7 @@ class CoerModal {
         Tools.Sleep().then(() => {
             this._modal = new Modal(document.getElementById(this._id));
             Screen.Resize.subscribe((response) => {
-                this._windowWidth = response.width;
+                this._windowWidth.set(response.width);
             });
         });
     }
@@ -634,15 +648,6 @@ class CoerModal {
     get isClose() {
         return !this._isOpen;
     }
-    //getter
-    get _width() {
-        switch (this.width()) {
-            case 'small': return '450px';
-            case 'full': return `${this._windowWidth - 50}px`;
-            case 'auto': return 'fit-content';
-            default: return this.width();
-        }
-    }
     /** */
     Open() {
         this._modal?.show();
@@ -663,15 +668,12 @@ 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: true, 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 [id]=\"_id + '-button-close'\" 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;margin:15px!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: true, 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, isSignal: true }], 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 [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{ 'height': height(), 'max-height': maxHeight() }\">\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: ["aside.modal div.backdrop{width:100vw;height:100vh;position:relative;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:100vh}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!important;margin:15px!important}aside.modal .modal-dialog div.modal-content .modal-header{padding:8px 16px!important}aside.modal .modal-dialog div.modal-content .modal-header .modal-title{font-weight:700!important;font-size:17px!important}aside.modal .modal-dialog div.modal-content .modal-header .btn-close:focus{box-shadow:none!important}aside.modal .modal-dialog div.modal-content .modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important;overflow:visible!important}aside.modal .modal-dialog div.modal-content .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}div.modal-backdrop{z-index:0!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\">\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 [id]=\"_id + '-button-close'\" 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;margin:15px!important}\n"] }]
-        }], propDecorators: { contentRef: [{
-                type: ContentChildren,
-                args: [CoerRefDirective]
-            }] } });
+            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 [id]=\"_id + '-button-close'\" type=\"button\" class=\"btn-close\" (click)=\"Close()\"></button>\r\n                    }\r\n                </header>\r\n            }\r\n\r\n            <section class=\"modal-body\" [ngStyle]=\"{ 'height': height(), 'max-height': maxHeight() }\">\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: ["aside.modal div.backdrop{width:100vw;height:100vh;position:relative;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:100vh}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!important;margin:15px!important}aside.modal .modal-dialog div.modal-content .modal-header{padding:8px 16px!important}aside.modal .modal-dialog div.modal-content .modal-header .modal-title{font-weight:700!important;font-size:17px!important}aside.modal .modal-dialog div.modal-content .modal-header .btn-close:focus{box-shadow:none!important}aside.modal .modal-dialog div.modal-content .modal-body{padding-top:16px!important;padding-bottom:0!important;min-width:60px!important;overflow:visible!important}aside.modal .modal-dialog div.modal-content .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}div.modal-backdrop{z-index:0!important}\n"] }]
+        }] });
 
 class CoerFileboxImage {
     //Constructor
@@ -1258,7 +1260,7 @@ class CoerSelectbox extends ControlValue {
         this.onUnselect = output();
         //computed
         this._isEnable = computed(() => {
-            return !this.isDisabled() && !this.isLoading() && !this.isReadonly();
+            return !this.isDisabled() && !this.isLoading() && !this.isReadonly() && !this.isInvisible();
         });
         //computed
         this._floatLabel = computed(() => {
@@ -1295,20 +1297,12 @@ class CoerSelectbox extends ControlValue {
         Tools.Sleep().then(_ => {
             //Container
             const container = document.getElementById(`${this._id}-container`);
-            container?.addEventListener('mouseenter', () => {
-                this._isOverMenu.set(true);
-            });
-            container?.addEventListener('mouseleave', () => {
-                this._isOverMenu.set(false);
-            });
+            container?.addEventListener('mouseenter', () => this._isOverMenu.set(true));
+            container?.addEventListener('mouseleave', () => this._isOverMenu.set(false));
             //DropDown
             this._dropDownMenu = document.getElementById(`${this._id}-dropdown-menu`);
-            this._dropDownMenu?.addEventListener('mouseenter', () => {
-                this._isOverMenu.set(true);
-            });
-            this._dropDownMenu?.addEventListener('mouseleave', () => {
-                this._isOverMenu.set(false);
-            });
+            this._dropDownMenu?.addEventListener('mouseenter', () => this._isOverMenu.set(true));
+            this._dropDownMenu?.addEventListener('mouseleave', () => this._isOverMenu.set(false));
             //TextBox
             this._textbox = document.getElementById(this._id);
             this._textbox?.addEventListener('focus', () => {
@@ -1367,12 +1361,8 @@ class CoerSelectbox extends ControlValue {
                 if (!this._isOpen())
                     this._Open();
             });
-            this._textbox.addEventListener('mouseenter', () => {
-                this._isOverMenu.set(true);
-            });
-            this._textbox.addEventListener('mouseleave', () => {
-                this._isOverMenu.set(false);
-            });
+            this._textbox.addEventListener('mouseenter', () => this._isOverMenu.set(true));
+            this._textbox.addEventListener('mouseleave', () => this._isOverMenu.set(false));
             this._textbox.addEventListener('paste', () => {
                 Tools.Sleep().then(_ => {
                     this._search.update(search => search = search.toString().trim());
@@ -1516,16 +1506,14 @@ class CoerSelectbox extends ControlValue {
     }
     /** */
     _Open() {
-        if (!this._dropDownMenu?.classList.contains('show')) {
-            this._dropDownMenu?.classList.add('show');
-        }
+        HTMLElements.RemoveClass(this._dropDownMenu, 'display-none');
+        HTMLElements.AddClass(`#${this._id}-coer-select-box div.mdc-line-ripple`, 'dropdown-open');
         this._isOpen.set(true);
     }
     /** */
     _Close() {
-        if (this._dropDownMenu?.classList.contains('show')) {
-            this._dropDownMenu?.classList.remove('show');
-        }
+        HTMLElements.AddClass(this._dropDownMenu, 'display-none');
+        HTMLElements.RemoveClass(`#${this._id}-coer-select-box div.mdc-line-ripple`, 'dropdown-open');
         this._isOpen.set(false);
     }
     /** */
@@ -1546,11 +1534,11 @@ class CoerSelectbox extends ControlValue {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSelectbox, isStandalone: false, selector: "coer-selectbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", 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 } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerSelectbox)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-select-box\">\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        <input #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [value]=\"_search()\"\r\n            [placeholder]=\"_placeholder\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (input)=\"_Search(coerTextBox.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            }\">\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 class=\"icon-container\" [style]=\"{ 'width': _widthIcons }\">\r\n            @if(_showCancel && _isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-xmark text-secondary\" (click)=\"Unselect()\"></i>\r\n            }\r\n\r\n            @else if(isInvalid() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n\r\n            @if(_isOpen() && _isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-caret-up cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n            }\r\n\r\n            @else if(_isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-caret-down cursor-pointer text-secondary\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" class=\"dropdown-menu\">\r\n            @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li (click)=\"_SelectItem(item)\">\r\n                    <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n                        [ngClass]=\"{\r\n                            'dropdown-item': true,\r\n                            'cursor-pointer': true,\r\n                            'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n                        }\"\r\n                    >{{ _GetDisplay(item) }} </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field{position:relative!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-select-box 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;height:40px!important;padding:0!important}div.coer-select-box 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-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-select-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;height:40px;display:flex;align-items:center;justify-content:center;gap:5px}div.coer-select-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark{font-size:22px!important;padding:2px!important}div.coer-select-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-select-box mat-form-field .placeholder,div.coer-select-box mat-form-field .placeholder *,div.coer-select-box mat-form-field .placeholder-glow,div.coer-select-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-select-box .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-select-box ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;overflow:auto!important;padding:0!important;width:inherit!important}div.coer-select-box .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-select-box ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-select-box ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-select-box ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-select-box div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-select-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box .btn-group{top:28px!important}aside.modal .modal-content ul.dropdown-menu{position:fixed!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSelectbox, isStandalone: false, selector: "coer-selectbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", 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 } }, outputs: { onSelected: "onSelected", onUnselect: "onUnselect" }, providers: [CONTROL_VALUE(CoerSelectbox)], viewQueries: [{ propertyName: "_coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-select-box\">\r\n    <mat-form-field\r\n        [id]=\"_id + '-container'\" \r\n        [floatLabel]=\"_floatLabel()\"\r\n        [ngClass]=\"{\r\n            'readonly'    : isReadonly()  && !isLoading(),\r\n            'display-none': isInvisible() || 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        <!-- Input -->\r\n        <input #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [value]=\"_search()\"\r\n            [placeholder]=\"_placeholder\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (input)=\"_Search(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight\r\n            }\"> \r\n\r\n        <!-- Icons Container -->\r\n        <span class=\"icon-container\" [style]=\"{ 'width': _widthIcons }\">\r\n            @if(_showCancel && _isEnable() && !isLoading()) {\r\n                <i class=\"icon-x text-secondary\" (click)=\"Unselect()\"></i>\r\n            }\r\n\r\n            @else if(isInvalid() && !isLoading()) {\r\n                <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isLoading()) {\r\n                <i class=\"icon-circle-check text-green icon-fill\"></i>\r\n            }\r\n\r\n            @if(_isOpen() && _isEnable() && !isLoading()) {\r\n                <i class=\"icon-caret-up icon-fill cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n            }\r\n\r\n            @else if(_isEnable() && !isLoading()) {\r\n                <i class=\"icon-caret-down icon-fill cursor-pointer text-secondary\"></i>\r\n            }\r\n        </span>     \r\n    </mat-form-field>  \r\n\r\n    <!-- Loading || Invisible -->\r\n    @if(isLoading() || isInvisible()) {\r\n        <div [ngClass]=\"{ \r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\" \r\n            [style]=\"{\r\n                'height'       : '40px',\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        > {{ isInvisible() ? '' : _search() }} </div>\r\n    }\r\n\r\n    <!-- Options -->\r\n    <div [id]=\"_id + '-dropdown-menu'\" class=\"dropdown-options display-none\">\r\n        @if(_isEnable()) {\r\n            <ul>\r\n                @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                    <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n                        <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\">\r\n                            {{ _GetDisplay(item) }} \r\n                        </div> \r\n                    </li>\r\n                }\r\n            </ul>\r\n        }\r\n    </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:var(--inputs-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-select-box 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;height:40px!important;padding:0!important}div.coer-select-box 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-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner)!important;font-weight:700!important;position:relative!important;left:-10px!important;top:2px!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--inputs-text-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.dropdown-open:before{border:1px solid var(--primary-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-select-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}div.coer-select-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-select-box mat-form-field span.icon-container i.icon-circle-check.icon-fill{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.icon-circle-exclamation.icon-fill{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.icon-x{padding:2px!important;font-size:22px!important;cursor:pointer!important;color:color-mix(in srgb,var(--inputs-icons-inner),var(--white) 60%)!important}div.coer-select-box mat-form-field span.icon-container i.icon-x:hover{color:color-mix(in srgb,var(--inputs-icons-inner),var(--white) 40%)!important}div.coer-select-box div.loading{padding:0 16px!important;display:flex!important;align-items:center!important;border-top-left-radius:4px!important;border-top-right-radius:4px!important}div.coer-select-box div.dropdown-options{position:absolute!important;top:40px!important;left:0!important;right:0!important;border:1px solid var(--inputs-inner)!important;border-top:none!important;border-radius:0 0 10px 10px!important;padding:0!important;overflow-y:auto!important;z-index:2!important}div.coer-select-box div.dropdown-options ul{background-color:var(--containers-inner)!important;overflow:auto!important;max-height:205px!important}div.coer-select-box div.dropdown-options ul li{padding:0 10px!important;cursor:pointer!important}div.coer-select-box div.dropdown-options ul li div{display:flex!important;align-items:center!important;height:40px!important;color:var(--black)!important;border-bottom:1px ridge lightgray!important}div.coer-select-box div.dropdown-options ul li:last-child div{border-bottom:none!important}div.coer-select-box div.dropdown-options ul li::marker{content:\"\"!important;display:none!important}div.coer-select-box div.dropdown-options ul li:not(.dropdown-item-focus):hover,div.coer-select-box div.dropdown-options ul li:not(.dropdown-item-focus)>div:hover{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 95%)!important}div.coer-select-box div.dropdown-options ul li.dropdown-item-focus,div.coer-select-box div.dropdown-options ul li.dropdown-item-focus>div{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 65%)!important}div.coer-select-box mat-form-field.readonly{border-top-left-radius:4px!important;border-top-right-radius:4px!important}div.coer-select-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:inherit!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSelectbox, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-selectbox', providers: [CONTROL_VALUE(CoerSelectbox)], standalone: false, template: "<div class=\"coer-select-box\">\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        <input #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [value]=\"_search()\"\r\n            [placeholder]=\"_placeholder\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (input)=\"_Search(coerTextBox.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            }\">\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 class=\"icon-container\" [style]=\"{ 'width': _widthIcons }\">\r\n            @if(_showCancel && _isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-xmark text-secondary\" (click)=\"Unselect()\"></i>\r\n            }\r\n\r\n            @else if(isInvalid() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-exclamation\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isLoading()) {\r\n                <i class=\"fa-solid fa-circle-check text-green\"></i>\r\n            }\r\n\r\n            @if(_isOpen() && _isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-caret-up cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n            }\r\n\r\n            @else if(_isEnable() && !isLoading()) {\r\n                <i class=\"fa-solid fa-caret-down cursor-pointer text-secondary\"></i>\r\n            }\r\n        </span>\r\n    </mat-form-field>\r\n\r\n    <!-- Options Container -->\r\n    <div class=\"btn-group\">\r\n        <ul [id]=\"_id + '-dropdown-menu'\" class=\"dropdown-menu\">\r\n            @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li (click)=\"_SelectItem(item)\">\r\n                    <div [id]=\"id + '-dropdown-option-' + _GetIndexRow(item)\"\r\n                        [ngClass]=\"{\r\n                            'dropdown-item': true,\r\n                            'cursor-pointer': true,\r\n                            'dropdown-item-focus': _index() == _GetIndexRow(item)\r\n                        }\"\r\n                    >{{ _GetDisplay(item) }} </div>\r\n                    <hr class=\"dropdown-divider\">\r\n                </li>\r\n            }\r\n        </ul>\r\n    </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field{position:relative!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-select-box 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;height:40px!important;padding:0!important}div.coer-select-box 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-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner);font-weight:700;position:relative;left:-10px;top:2px}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--black)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-select-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;height:40px;display:flex;align-items:center;justify-content:center;gap:5px}div.coer-select-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass{color:#caced1!important;cursor:pointer!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark:hover,div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-magnifying-glass:hover{color:#6c757d!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-check{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-circle-exclamation{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.fa-solid.fa-xmark{font-size:22px!important;padding:2px!important}div.coer-select-box mat-form-field span.placeholder{width:calc(100% + 32px)!important;height:40px!important;position:absolute!important;z-index:1!important;top:0!important;left:-16px!important;cursor:wait!important}div.coer-select-box mat-form-field .placeholder,div.coer-select-box mat-form-field .placeholder *,div.coer-select-box mat-form-field .placeholder-glow,div.coer-select-box mat-form-field .placeholder-glow *{cursor:wait!important}div.coer-select-box .btn-group{position:absolute!important;top:40px;left:0!important;width:100%!important}div.coer-select-box ul.dropdown-menu{background-color:var(--white)!important;border-top-left-radius:0!important;border-top-right-radius:0!important;max-height:205px!important;overflow:auto!important;padding:0!important;width:inherit!important}div.coer-select-box .dropdown-divider{margin:0!important;background-color:var(--white)!important}div.coer-select-box ul.dropdown-menu li:not(.dropdown-item-focus):hover,div.coer-select-box ul.dropdown-menu li>div:not(.dropdown-item-focus):hover{color:var(--black)!important;background-color:#f1f6ff!important}div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider,div.coer-select-box ul.dropdown-menu li:last-child hr.dropdown-divider:hover{width:0px!important;border:none!important}div.coer-select-box ul.dropdown-menu li div{display:flex!important;align-items:center!important;height:40px!important}div.coer-select-box div.dropdown-item-focus{background-color:#cde1ff!important}div.coer-select-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:#bbbbbb83!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box .btn-group{top:28px!important}aside.modal .modal-content ul.dropdown-menu{position:fixed!important}\n"] }]
+            args: [{ selector: 'coer-selectbox', providers: [CONTROL_VALUE(CoerSelectbox)], standalone: false, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-select-box\">\r\n    <mat-form-field\r\n        [id]=\"_id + '-container'\" \r\n        [floatLabel]=\"_floatLabel()\"\r\n        [ngClass]=\"{\r\n            'readonly'    : isReadonly()  && !isLoading(),\r\n            'display-none': isInvisible() || 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        <!-- Input -->\r\n        <input #coerTextBox matInput\r\n            [id]=\"_id\"\r\n            type=\"text\"\r\n            [value]=\"_search()\"\r\n            [placeholder]=\"_placeholder\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (input)=\"_Search(coerTextBox.value)\"\r\n            (blur)=\"SetTouched(true)\"\r\n            [style]=\"{\r\n                'margin-top': (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                'padding-right': _paddingRight\r\n            }\"> \r\n\r\n        <!-- Icons Container -->\r\n        <span class=\"icon-container\" [style]=\"{ 'width': _widthIcons }\">\r\n            @if(_showCancel && _isEnable() && !isLoading()) {\r\n                <i class=\"icon-x text-secondary\" (click)=\"Unselect()\"></i>\r\n            }\r\n\r\n            @else if(isInvalid() && !isLoading()) {\r\n                <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n            }\r\n\r\n            @else if(isValid() && !isLoading()) {\r\n                <i class=\"icon-circle-check text-green icon-fill\"></i>\r\n            }\r\n\r\n            @if(_isOpen() && _isEnable() && !isLoading()) {\r\n                <i class=\"icon-caret-up icon-fill cursor-pointer text-primary\" (click)=\"Blur()\"></i>\r\n            }\r\n\r\n            @else if(_isEnable() && !isLoading()) {\r\n                <i class=\"icon-caret-down icon-fill cursor-pointer text-secondary\"></i>\r\n            }\r\n        </span>     \r\n    </mat-form-field>  \r\n\r\n    <!-- Loading || Invisible -->\r\n    @if(isLoading() || isInvisible()) {\r\n        <div [ngClass]=\"{ \r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\" \r\n            [style]=\"{\r\n                'height'       : '40px',\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        > {{ isInvisible() ? '' : _search() }} </div>\r\n    }\r\n\r\n    <!-- Options -->\r\n    <div [id]=\"_id + '-dropdown-menu'\" class=\"dropdown-options display-none\">\r\n        @if(_isEnable()) {\r\n            <ul>\r\n                @for(item of _dataSource(); track _GetIndexRow(item)) {\r\n                    <li [ngClass]=\"{ 'dropdown-item-focus': _index() == _GetIndexRow(item) }\" (click)=\"_SelectItem(item)\">\r\n                        <div [id]=\"_id + '-dropdown-option-' + _GetIndexRow(item)\">\r\n                            {{ _GetDisplay(item) }} \r\n                        </div> \r\n                    </li>\r\n                }\r\n            </ul>\r\n        }\r\n    </div>\r\n</div>", styles: ["div.coer-select-box{position:relative!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:var(--inputs-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:40px!important}div.coer-select-box 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;height:40px!important;padding:0!important}div.coer-select-box 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-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix label.mdc-floating-label--float-above mat-label{color:var(--primary-inner)!important;font-weight:700!important;position:relative!important;left:-10px!important;top:2px!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{font-weight:400!important;font-size:17px!important;color:var(--inputs-text-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:before,div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.mdc-line-ripple--active:after{border-bottom-color:var(--primary-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple.dropdown-open:before{border:1px solid var(--primary-inner)!important}div.coer-select-box mat-form-field div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align{height:0px!important}div.coer-select-box mat-form-field span.icon-container{position:absolute!important;top:1px!important;right:-14px!important;z-index:5!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}div.coer-select-box mat-form-field span.icon-container i{font-size:20px!important}div.coer-select-box mat-form-field span.icon-container i.icon-circle-check.icon-fill{color:var(--green)!important}div.coer-select-box mat-form-field span.icon-container i.icon-circle-exclamation.icon-fill{color:var(--red)!important}div.coer-select-box mat-form-field span.icon-container i.icon-x{padding:2px!important;font-size:22px!important;cursor:pointer!important;color:color-mix(in srgb,var(--inputs-icons-inner),var(--white) 60%)!important}div.coer-select-box mat-form-field span.icon-container i.icon-x:hover{color:color-mix(in srgb,var(--inputs-icons-inner),var(--white) 40%)!important}div.coer-select-box div.loading{padding:0 16px!important;display:flex!important;align-items:center!important;border-top-left-radius:4px!important;border-top-right-radius:4px!important}div.coer-select-box div.dropdown-options{position:absolute!important;top:40px!important;left:0!important;right:0!important;border:1px solid var(--inputs-inner)!important;border-top:none!important;border-radius:0 0 10px 10px!important;padding:0!important;overflow-y:auto!important;z-index:2!important}div.coer-select-box div.dropdown-options ul{background-color:var(--containers-inner)!important;overflow:auto!important;max-height:205px!important}div.coer-select-box div.dropdown-options ul li{padding:0 10px!important;cursor:pointer!important}div.coer-select-box div.dropdown-options ul li div{display:flex!important;align-items:center!important;height:40px!important;color:var(--black)!important;border-bottom:1px ridge lightgray!important}div.coer-select-box div.dropdown-options ul li:last-child div{border-bottom:none!important}div.coer-select-box div.dropdown-options ul li::marker{content:\"\"!important;display:none!important}div.coer-select-box div.dropdown-options ul li:not(.dropdown-item-focus):hover,div.coer-select-box div.dropdown-options ul li:not(.dropdown-item-focus)>div:hover{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 95%)!important}div.coer-select-box div.dropdown-options ul li.dropdown-item-focus,div.coer-select-box div.dropdown-options ul li.dropdown-item-focus>div{background-color:color-mix(in srgb,var(--inputs-items-inner),var(--white) 65%)!important}div.coer-select-box mat-form-field.readonly{border-top-left-radius:4px!important;border-top-right-radius:4px!important}div.coer-select-box mat-form-field.readonly div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:inherit!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field{background-color:transparent!important;padding-left:9px!important;padding-right:9px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:before,coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mdc-line-ripple:after{border-bottom-color:transparent!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix{height:28px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field div.mat-mdc-text-field-wrapper.mdc-text-field div.mat-mdc-form-field-flex div.mat-mdc-form-field-infix input{margin-top:3px!important;font-size:14px!important}coer-grid table tbody tr td.coer-selectbox div.coer-select-box mat-form-field span.icon-container{transform:translate(-5px,-6px)!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class CoerTextBox extends ControlValue {
@@ -1781,7 +1769,6 @@ class CoerGridExtension extends ControlValue {
         this._indexFocus = signal(0);
         //Generic Tools
         this.GetNumericFormat = Numbers.GetNumericFormat;
-        this.GetElementWidth = HTMLElements.GetElementWidth;
         this.GetElementHeight = HTMLElements.GetElementHeight;
         //Inputs
         this.saveButton = { show: false };
@@ -3834,6 +3821,7 @@ class CoerTab {
         //Variables
         this._id = Tools.GetGuid('coer-tab');
         this._selectedIndex = signal(0);
+        this._isLoading = signal(false);
         this._tooltipList = [];
         //Inputs
         this.height = input('auto');
@@ -3878,6 +3866,7 @@ class CoerTab {
     //AfterViewInit
     ngAfterViewInit() {
         this._htmlElement = this._matTabGroup()._elementRef.nativeElement;
+        Tools.Sleep(1000).then(_ => this._isLoading.set(false));
     }
     //OnDestroy
     ngOnDestroy() {
@@ -3886,6 +3875,7 @@ class CoerTab {
     }
     /** */
     _SelectedIndexChange(selectedIndex) {
+        this._isLoading.set(true);
         this._selectedIndex.set(selectedIndex);
         this.onSelectedTab.emit(this._contentList()[selectedIndex]);
     }
@@ -3905,11 +3895,11 @@ class CoerTab {
             this._selectedIndex.set(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTab, isStandalone: false, selector: "coer-tab", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectedTab: "onSelectedTab" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective, isSignal: true }], viewQueries: [{ propertyName: "_matTabGroup", first: true, predicate: ["matTabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        [id]=\"_id\"\r\n        [mat-stretch-tabs]=\"stretchTabs()\"\r\n        [selectedIndex]=\"_selectedIndex()\"\r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList(); track tab.coerRef()) { \r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span class=\"tab\"\r\n                            [matTooltip]=\"_SetToolTip(tab)\"\r\n                            matTooltipPosition=\"above\"\r\n                            [matTooltipDisabled]=\"false\"\r\n                            [matTooltipHideDelay]=\"0\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n                                          \r\n                    <ng-template matTabContent>  \r\n                        @if(tab.coerRef() == selectedTab().coerRef()) {\r\n                            <div class=\"tab-content\"\r\n                                [ngStyle]=\"{\r\n                                    'height': height(),\r\n                                    'min-height': minHeight(),\r\n                                    'max-height': maxHeight()\r\n                                }\"> \r\n                            \r\n                                <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                            </div>\r\n                        }\r\n                    </ng-template>  \r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--navigation-inner)!important;border-color:var(--navigation-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$4.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i3$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTab, isStandalone: false, selector: "coer-tab", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectedTab: "onSelectedTab" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective, isSignal: true }], viewQueries: [{ propertyName: "_matTabGroup", first: true, predicate: ["matTabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        [id]=\"_id\"\r\n        [mat-stretch-tabs]=\"stretchTabs()\"\r\n        [selectedIndex]=\"_selectedIndex()\" \r\n        (animationDone)=\"_isLoading.set(false)\"        \r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList(); track tab.coerRef()) { \r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled() || _isLoading()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span class=\"tab\"\r\n                            [matTooltip]=\"_SetToolTip(tab)\"\r\n                            matTooltipPosition=\"above\"\r\n                            [matTooltipDisabled]=\"false\"\r\n                            [matTooltipHideDelay]=\"0\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n                                          \r\n                    <ng-template matTabContent> \r\n                        <div lifeCycle  \r\n                            class=\"tab-content\"\r\n                            [ngStyle]=\"{\r\n                                'height': height(),\r\n                                'min-height': minHeight(),\r\n                                'max-height': maxHeight()\r\n                            }\"> \r\n                        \r\n                            <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                        </div>                         \r\n                    </ng-template>  \r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--navigation-inner)!important;border-color:var(--navigation-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$4.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i3$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i4.LifeCycleDirective, selector: "[lifeCycle]", outputs: ["onInit", "afterViewInit", "onReady", "onDestroy"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTab, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-tab', standalone: false, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        [id]=\"_id\"\r\n        [mat-stretch-tabs]=\"stretchTabs()\"\r\n        [selectedIndex]=\"_selectedIndex()\"\r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList(); track tab.coerRef()) { \r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span class=\"tab\"\r\n                            [matTooltip]=\"_SetToolTip(tab)\"\r\n                            matTooltipPosition=\"above\"\r\n                            [matTooltipDisabled]=\"false\"\r\n                            [matTooltipHideDelay]=\"0\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n                                          \r\n                    <ng-template matTabContent>  \r\n                        @if(tab.coerRef() == selectedTab().coerRef()) {\r\n                            <div class=\"tab-content\"\r\n                                [ngStyle]=\"{\r\n                                    'height': height(),\r\n                                    'min-height': minHeight(),\r\n                                    'max-height': maxHeight()\r\n                                }\"> \r\n                            \r\n                                <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                            </div>\r\n                        }\r\n                    </ng-template>  \r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--navigation-inner)!important;border-color:var(--navigation-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"] }]
+            args: [{ selector: 'coer-tab', standalone: false, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        [id]=\"_id\"\r\n        [mat-stretch-tabs]=\"stretchTabs()\"\r\n        [selectedIndex]=\"_selectedIndex()\" \r\n        (animationDone)=\"_isLoading.set(false)\"        \r\n        (selectedIndexChange)=\"_SelectedIndexChange($event)\">\r\n\r\n        @for(tab of _contentList(); track tab.coerRef()) { \r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled() || _isLoading()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span class=\"tab\"\r\n                            [matTooltip]=\"_SetToolTip(tab)\"\r\n                            matTooltipPosition=\"above\"\r\n                            [matTooltipDisabled]=\"false\"\r\n                            [matTooltipHideDelay]=\"0\">\r\n                            <i [class]=\"_GetIcon(tab)\"></i>\r\n                            <span [class]=\"_GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ _GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n                                          \r\n                    <ng-template matTabContent> \r\n                        <div lifeCycle  \r\n                            class=\"tab-content\"\r\n                            [ngStyle]=\"{\r\n                                'height': height(),\r\n                                'min-height': minHeight(),\r\n                                'max-height': maxHeight()\r\n                            }\"> \r\n                        \r\n                            <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                        </div>                         \r\n                    </ng-template>  \r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>  ", styles: ["div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid var(--smoke)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:var(--navigation-inner)!important;border-color:var(--navigation-inner)!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow-x:hidden!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow-x:auto!important;overflow-y:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"] }]
         }], ctorParameters: () => [] });
 
 class CoerTextarea extends ControlValue {