coer-elements 2.0.70 → 2.0.71

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

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

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

@@ -14,7 +14,7 @@ export declare class CoerDropdown<T> extends ControlValue implements AfterViewIn
     id: import("@angular/core").InputSignal<string>;
     value: import("@angular/core").InputSignal<string | null | undefined>;
     label: import("@angular/core").InputSignal<string>;
-    color: import("@angular/core").InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "default" | "light">;
+    color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "light">;
     type: import("@angular/core").InputSignal<"filled" | "outline">;
     dataSource: import("@angular/core").InputSignal<T[]>;
     displayProperty: import("@angular/core").InputSignal<string>;

package/components/lib/coer-grid/coer-grid-header/coer-grid-header.component.d.ts

@@ -43,7 +43,7 @@ export declare class CoerGridHeader<T> implements AfterViewInit {
     /** */
     protected _GetPath: (button: IGridHeaderExportButton) => string | (string | number)[];
     /** */
-    protected _ColorButton: (button: IGridHeaderButton | IGridHeaderImportButton | IGridHeaderExportButton) => "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "default" | "light";
+    protected _ColorButton: (button: IGridHeaderButton | IGridHeaderImportButton | IGridHeaderExportButton) => "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "information" | "dark" | "light";
     /** */
     protected _TooltipButton: (button: IGridHeaderButton | IGridHeaderImportButton | IGridHeaderExportButton, tooltip: string) => string;
     /** */

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

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

package/components/lib/components.module.d.ts

@@ -25,7 +25,7 @@ import * as i23 from "./coer-switch/coer-switch.component";
 import * as i24 from "./coer-tab/coer-tab.component";
 import * as i25 from "./coer-textarea/coer-textarea.component";
 import * as i26 from "./coer-textbox/coer-textbox.component";
-import * as i27 from "./coer-sidenav/coer-toolbar/coer-toolbar.component";
+import * as i27 from "./coer-toolbar/coer-toolbar.component";
 import * as i28 from "./coer-sidenav/coer-tree-accordion/coer-tree-accordion.component";
 import * as i29 from "@angular/common";
 import * as i30 from "@angular/cdk/drag-drop";

package/components/public-api.d.ts

@@ -15,7 +15,7 @@ export * from './lib/coer-secretbox/coer-secretbox.component';
 export * from './lib/coer-selectbox/coer-selectbox.component';
 export * from './lib/coer-dropdown/coer-dropdown.component';
 export * from './lib/coer-sidenav/coer-sidenav.component';
-export * from './lib/coer-sidenav/coer-toolbar/coer-toolbar.component';
+export * from './lib/coer-toolbar/coer-toolbar.component';
 export * from './lib/coer-sidenav/coer-tree-accordion/coer-tree-accordion.component';
 export * from './lib/coer-switch/coer-switch.component';
 export * from './lib/coer-tab/coer-tab.component';

package/fesm2022/coer-elements-components.mjs

@@ -667,14 +667,14 @@ class CoerDateBox extends ControlValue {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerDateBox, isStandalone: false, selector: "coer-datebox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, isWritable: { classPropertyName: "isWritable", publicName: "isWritable", 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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", 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: { onOpen: "onOpen", onClose: "onClose", onChangeValue: "onChangeValue", onClickExternalButton: "onClickExternalButton" }, providers: [
             provideNativeDateAdapter(),
             CONTROL_VALUE(CoerDateBox),
-        ], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_value\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\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                    '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                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { 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: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
+        ], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: ["datepicker"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_value\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$3.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { 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: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerDateBox, decorators: [{
             type: Component,
             args: [{ selector: 'coer-datebox', providers: [
                         provideNativeDateAdapter(),
                         CONTROL_VALUE(CoerDateBox),
-                    ], standalone: false, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_value\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\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                    '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                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> " }]
+                    ], standalone: false, template: "<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_value\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> " }]
         }], ctorParameters: () => [] });
 
 class CoerModal {
@@ -777,11 +777,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: 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 }, verticalPosition: { classPropertyName: "verticalPosition", publicName: "verticalPosition", 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 [ngClass]=\"{\r\n        'modal-dialog': true,\r\n        'modal-dialog-scrollable': true, \r\n        'modal-dialog-top'       : verticalPosition() == 'top',\r\n        'modal-dialog-middle'    : verticalPosition() == 'middle',\r\n        'modal-dialog-bottom'    : verticalPosition() == 'bottom',\r\n    }\" \r\n        [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{min-width:100vw;min-height:100vh;position:fixed;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:auto!important;min-height:100vh!important;display:flex!important}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!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}aside.modal .modal-dialog-top{align-items:flex-start!important}aside.modal .modal-dialog-middle{align-items:center!important}aside.modal .modal-dialog-bottom{align-items:flex-end!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"] }] }); }
+    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 }, verticalPosition: { classPropertyName: "verticalPosition", publicName: "verticalPosition", 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 [ngClass]=\"{\r\n        'modal-dialog': true,\r\n        'modal-dialog-scrollable': true, \r\n        'modal-dialog-top'       : verticalPosition() == 'top',\r\n        'modal-dialog-middle'    : verticalPosition() == 'middle',\r\n        'modal-dialog-bottom'    : verticalPosition() == 'bottom',\r\n    }\" \r\n        [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{min-width:100vw;min-height:100vh;position:fixed;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:auto!important;min-height:100vh!important;display:flex!important}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!important;margin-left:10px;margin-right:10px}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}aside.modal .modal-dialog-top{align-items:flex-start!important}aside.modal .modal-dialog-middle{align-items:center!important}aside.modal .modal-dialog-bottom{align-items:flex-end!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 [ngClass]=\"{\r\n        'modal-dialog': true,\r\n        'modal-dialog-scrollable': true, \r\n        'modal-dialog-top'       : verticalPosition() == 'top',\r\n        'modal-dialog-middle'    : verticalPosition() == 'middle',\r\n        'modal-dialog-bottom'    : verticalPosition() == 'bottom',\r\n    }\" \r\n        [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{min-width:100vw;min-height:100vh;position:fixed;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:auto!important;min-height:100vh!important;display:flex!important}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!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}aside.modal .modal-dialog-top{align-items:flex-start!important}aside.modal .modal-dialog-middle{align-items:center!important}aside.modal .modal-dialog-bottom{align-items:flex-end!important}div.modal-backdrop{z-index:0!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 [ngClass]=\"{\r\n        'modal-dialog': true,\r\n        'modal-dialog-scrollable': true, \r\n        'modal-dialog-top'       : verticalPosition() == 'top',\r\n        'modal-dialog-middle'    : verticalPosition() == 'middle',\r\n        'modal-dialog-bottom'    : verticalPosition() == 'bottom',\r\n    }\" \r\n        [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{min-width:100vw;min-height:100vh;position:fixed;inset:0;background-color:#0000005b;z-index:1500}aside.modal .modal-dialog{margin:auto!important;height:auto!important;min-height:100vh!important;display:flex!important}aside.modal .modal-dialog div.modal-content{z-index:1501;overflow:unset!important;margin-left:10px;margin-right:10px}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}aside.modal .modal-dialog-top{align-items:flex-start!important}aside.modal .modal-dialog-middle{align-items:center!important}aside.modal .modal-dialog-bottom{align-items:flex-end!important}div.modal-backdrop{z-index:0!important}\n"] }]
         }] });
 
 class CoerFileboxImage {
@@ -1510,11 +1510,11 @@ class CoerTextBox extends ControlValue {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextBox, isStandalone: false, selector: "coer-textbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", 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: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickSearch: "onClickSearch", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerTextBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{                 \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\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                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(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                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span class=\"icon-container\">\r\n                @if(_showSearchIcon) {\r\n                    <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n                }\r\n    \r\n                @else if(_showClearIcon) {\r\n                    <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></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                    '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                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerTextBox, isStandalone: false, selector: "coer-textbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, showSearchIcon: { classPropertyName: "showSearchIcon", publicName: "showSearchIcon", 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: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickSearch: "onClickSearch", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerTextBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{                 \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\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                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(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                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span class=\"icon-container\">\r\n                @if(_showSearchIcon) {\r\n                    <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n                }\r\n    \r\n                @else if(_showClearIcon) {\r\n                    <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></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                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerTextBox, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-textbox', providers: [CONTROL_VALUE(CoerTextBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{                 \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\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                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(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                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span class=\"icon-container\">\r\n                @if(_showSearchIcon) {\r\n                    <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n                }\r\n    \r\n                @else if(_showClearIcon) {\r\n                    <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></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                    '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                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> " }]
+            args: [{ selector: 'coer-textbox', providers: [CONTROL_VALUE(CoerTextBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{                 \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\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                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(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                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span class=\"icon-container\">\r\n                @if(_showSearchIcon) {\r\n                    <i class=\"icon-magnifying-glass cursor-pointer\" (click)=\"_ClickSearch()\"></i>\r\n                }\r\n    \r\n                @else if(_showClearIcon) {\r\n                    <i class=\"icon-x cursor-pointer\" (click)=\"Clear(); this.onClickClear.emit();\"></i>\r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></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                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div> " }]
         }], ctorParameters: () => [] });
 
 class CoerGridHeader {
@@ -1996,11 +1996,11 @@ class CoerNumberBox extends ControlValue {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerNumberBox, isStandalone: false, selector: "coer-numberbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", 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: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "_coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <input #coerNumberbox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerNumberbox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [ngClass]=\"{ 'caret-none': _hideCaret() }\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span ngClass=\"icon-container\">\r\n                @if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></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                    '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                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerNumberBox, isStandalone: false, selector: "coer-numberbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", 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: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerNumberBox)], viewQueries: [{ propertyName: "_coerNumberbox", first: true, predicate: ["coerNumberbox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <input #coerNumberbox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerNumberbox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [ngClass]=\"{ 'caret-none': _hideCaret() }\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span ngClass=\"icon-container\">\r\n                @if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></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                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerNumberBox, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-numberbox', providers: [CONTROL_VALUE(CoerNumberBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <input #coerNumberbox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerNumberbox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [ngClass]=\"{ 'caret-none': _hideCaret() }\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span ngClass=\"icon-container\">\r\n                @if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></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                    '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                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'coer-numberbox', providers: [CONTROL_VALUE(CoerNumberBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n    \r\n            <input #coerNumberbox matInput\r\n                [id]=\"_id\"\r\n                type=\"text\"\r\n                [placeholder]=\"placeholder()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(coerNumberbox.value)\"\r\n                (blur)=\"SetTouched(true)\"\r\n                [ngClass]=\"{ 'caret-none': _hideCaret() }\"\r\n                [style]=\"{\r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n    \r\n            <span ngClass=\"icon-container\">\r\n                @if(isInvalid() && _isEnable()) {\r\n                    <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <i class=\"icon-circle-check icon-fill\"></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                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>" }]
         }], ctorParameters: () => [] });
 
 class CoerSelectbox extends ControlValue {
@@ -2362,11 +2362,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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", 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", onClickExternalButton: "onClickExternalButton" }, 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-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\" \r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly()  && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\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\">\r\n                @if(_showCancel && _isEnable()) {                \r\n                    <i class=\"icon-x margin-right-45px\" (click)=\"Unselect()\"></i>                 \r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-exclamation icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-check icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @if(_isOpen() && _isEnable()) {\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()) {\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                    '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                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _search() }} </div>\r\n        }\r\n    \r\n        <!-- Options -->\r\n        <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n            <ul [id]=\"_id + '-dropdown-menu'\">\r\n                @if(_isEnable()) {\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                }\r\n            </ul>\r\n        </div>\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
+    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 }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", 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", onClickExternalButton: "onClickExternalButton" }, 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-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\" \r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly()  && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\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\">\r\n                @if(_showCancel && _isEnable()) {                \r\n                    <i class=\"icon-x margin-right-45px\" (click)=\"Unselect()\"></i>                 \r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-exclamation icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-check icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @if(_isOpen() && _isEnable()) {\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()) {\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                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _search() }} </div>\r\n        }\r\n    \r\n        <!-- Options -->\r\n        <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n            <ul [id]=\"_id + '-dropdown-menu'\">\r\n                @if(_isEnable()) {\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                }\r\n            </ul>\r\n        </div>\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 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 [id]=\"_id + '-coer-select-box'\" class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\" \r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly()  && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\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\">\r\n                @if(_showCancel && _isEnable()) {                \r\n                    <i class=\"icon-x margin-right-45px\" (click)=\"Unselect()\"></i>                 \r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-exclamation icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-check icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @if(_isOpen() && _isEnable()) {\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()) {\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                    '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                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _search() }} </div>\r\n        }\r\n    \r\n        <!-- Options -->\r\n        <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n            <ul [id]=\"_id + '-dropdown-menu'\">\r\n                @if(_isEnable()) {\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                }\r\n            </ul>\r\n        </div>\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'coer-selectbox', providers: [CONTROL_VALUE(CoerSelectbox)], standalone: false, template: "<div [id]=\"_id + '-coer-select-box'\" class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\" \r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly()  && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\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\">\r\n                @if(_showCancel && _isEnable()) {                \r\n                    <i class=\"icon-x margin-right-45px\" (click)=\"Unselect()\"></i>                 \r\n                }\r\n    \r\n                @else if(isInvalid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-exclamation icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {                \r\n                    <i class=\"icon-circle-check icon-fill margin-right-45px\"></i>                 \r\n                }\r\n    \r\n                @if(_isOpen() && _isEnable()) {\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()) {\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                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _search() }} </div>\r\n        }\r\n    \r\n        <!-- Options -->\r\n        <div [id]=\"_id + '-dropdown-menu-container'\" class=\"dropdown-options display-none\">\r\n            <ul [id]=\"_id + '-dropdown-menu'\">\r\n                @if(_isEnable()) {\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                }\r\n            </ul>\r\n        </div>\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>" }]
         }], ctorParameters: () => [] });
 
 class CoerSwitch extends ControlValue {
@@ -3678,7 +3678,7 @@ class CoerSecretBox extends ControlValue {
     }
     //getter
     get _asterisks() {
-        return 'X'.repeat(String(this._value).length);
+        return '⁎'.repeat(String(this._value).length);
     }
     //getter
     get _showexternalButtonLeft() {
@@ -3746,11 +3746,11 @@ class CoerSecretBox extends ControlValue {
         this._passwordType.update(value => !value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSecretBox, isStandalone: false, selector: "coer-secretbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, showSecret: { classPropertyName: "showSecret", publicName: "showSecret", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", 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: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSecretBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{ \r\n                'margin-top'   : marginTop(),\r\n                'margin-right' : marginRight(),\r\n                'margin-bottom': marginBottom(),\r\n                'margin-left'  : marginLeft(),\r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n     \r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                [type]=\"_inputType()\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(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                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <span class=\"icon-container\"> \r\n                @if(isInvalid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    </span>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-check icon-fill\"></i> \r\n                    </span>\r\n                }\r\n    \r\n                @if(_showSecret()) {\r\n                    <i [ngClass]=\"{\r\n                        'cursor-pointer icon-fill': true, \r\n                        'icon-eye-slash': _passwordType(),\r\n                        'icon-eye': !_passwordType()\r\n                    }\"  \r\n                    (click)=\"_Toogle()\"></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                    '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                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _asterisks }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        } \r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerSecretBox, isStandalone: false, selector: "coer-secretbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: true, isRequired: false, transformFunction: null }, externalButton: { classPropertyName: "externalButton", publicName: "externalButton", isSignal: true, isRequired: false, transformFunction: null }, showSecret: { classPropertyName: "showSecret", publicName: "showSecret", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", 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: { onKeyupEnter: "onKeyupEnter", onInput: "onInput", onClickClear: "onClickClear", onClickExternalButton: "onClickExternalButton" }, providers: [CONTROL_VALUE(CoerSecretBox)], viewQueries: [{ propertyName: "matFormField", first: true, predicate: ["matFormField"], descendants: true, isSignal: true }, { propertyName: "coerTextBox", first: true, predicate: ["coerTextBox"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{ \r\n                'margin-top'   : marginTop(),\r\n                'margin-right' : marginRight(),\r\n                'margin-bottom': marginBottom(),\r\n                'margin-left'  : marginLeft(),\r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n     \r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                [type]=\"_inputType()\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(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                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <span class=\"icon-container\"> \r\n                @if(isInvalid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    </span>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-check icon-fill\"></i> \r\n                    </span>\r\n                }\r\n    \r\n                @if(_showSecret()) {\r\n                    <i [ngClass]=\"{\r\n                        'cursor-pointer icon-fill': true, \r\n                        'icon-eye-slash': _passwordType(),\r\n                        'icon-eye': !_passwordType()\r\n                    }\"  \r\n                    (click)=\"_Toogle()\"></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                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _asterisks }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        } \r\n    </div>\r\n</div> ", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: CoerButton, selector: "coer-button", inputs: ["id", "color", "type", "typeBreakpoint", "icon", "iconPosition", "path", "isLoading", "isDisabled", "isReadonly", "isInvisible", "isHidde", "width", "widthBreakpoint", "minWidth", "maxWidth", "height", "minHeight", "marginTop", "marginRight", "marginBottom", "marginLeft", "tooltip", "tooltipPosition"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerSecretBox, decorators: [{
             type: Component,
-            args: [{ selector: 'coer-secretbox', providers: [CONTROL_VALUE(CoerSecretBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{ \r\n                'margin-top'   : marginTop(),\r\n                'margin-right' : marginRight(),\r\n                'margin-bottom': marginBottom(),\r\n                'margin-left'  : marginLeft(),\r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n     \r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                [type]=\"_inputType()\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(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                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <span class=\"icon-container\"> \r\n                @if(isInvalid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    </span>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-check icon-fill\"></i> \r\n                    </span>\r\n                }\r\n    \r\n                @if(_showSecret()) {\r\n                    <i [ngClass]=\"{\r\n                        'cursor-pointer icon-fill': true, \r\n                        'icon-eye-slash': _passwordType(),\r\n                        'icon-eye': !_passwordType()\r\n                    }\"  \r\n                    (click)=\"_Toogle()\"></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                    '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                    'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                    'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n                }\"\r\n            > {{ isInvisible() ? '' : _asterisks }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        } \r\n    </div>\r\n</div> " }]
+            args: [{ selector: 'coer-secretbox', providers: [CONTROL_VALUE(CoerSecretBox)], standalone: false, template: "<div class=\"coer-form-field-component\">\r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \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    }\">\r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field\r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{ \r\n                'margin-top'   : marginTop(),\r\n                'margin-right' : marginRight(),\r\n                'margin-bottom': marginBottom(),\r\n                'margin-left'  : marginLeft(),\r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n            <mat-label>{{ label() }}</mat-label>\r\n     \r\n            <input #coerTextBox matInput\r\n                [id]=\"_id\"\r\n                [type]=\"_inputType()\"\r\n                [placeholder]=\"placeholder()\"\r\n                [minLength]=\"minLength()\"\r\n                [maxLength]=\"maxLength()\"\r\n                [disabled]=\"!_isEnable()\"\r\n                [value]=\"_value\"\r\n                (input)=\"SetValue(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                    'text-align'   : textPosition()\r\n                }\">\r\n            \r\n            <span class=\"icon-container\"> \r\n                @if(isInvalid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    </span>\r\n                }\r\n    \r\n                @else if(isValid() && _isEnable()) {\r\n                    <span [ngStyle]=\"{ 'margin-right': (showSecret() ? '50px' : '0px') }\">\r\n                        <i class=\"icon-circle-check icon-fill\"></i> \r\n                    </span>\r\n                }\r\n    \r\n                @if(_showSecret()) {\r\n                    <i [ngClass]=\"{\r\n                        'cursor-pointer icon-fill': true, \r\n                        'icon-eye-slash': _passwordType(),\r\n                        'icon-eye': !_passwordType()\r\n                    }\"  \r\n                    (click)=\"_Toogle()\"></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                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _asterisks }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        } \r\n    </div>\r\n</div> " }]
         }], ctorParameters: () => [] });
 
 class CoerPageTitle {