coer-elements 2.0.69 → 2.0.71

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 {
@@ -3363,8 +3363,6 @@ class CoerList {
         this.displayProperty = input('name');
         this.header = input('');
         this.headerIcon = input('');
-        this.showGoButtonByRow = input(false);
-        this.showBackButton = input(false);
         this.buttonsConfig = input({});
         this.isLoading = input(false);
         this.isDraggable = input(false);
@@ -3469,7 +3467,7 @@ class CoerList {
         this.onDrop.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showGoButtonByRow: { classPropertyName: "showGoButtonByRow", publicName: "showGoButtonByRow", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, buttonsConfig: { classPropertyName: "buttonsConfig", publicName: "buttonsConfig", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", 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: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n    'margin-top': marginTop(), \r\n    'margin-right': marginRight(), \r\n    'margin-bottom': marginBottom(), \r\n    'margin-left': marginLeft(), \r\n    }\">\r\n\r\n    <!-- Message -->\r\n    @if(isLoading()) {\r\n        <div class=\"loading\">\r\n            <i class=\"spinner-border\"></i>\r\n            <span class=\"fa-fade\">Loading</span>\r\n        </div>\r\n    }\r\n\r\n    @else if(dataSource().length <= 0) {\r\n        <div class=\"no-data\"> No Data </div>\r\n    }\r\n\r\n    <header [id]=\"_id + '-header'\" class=\"row\"> \r\n        @if(header().length > 0 || headerIcon().length > 0) {\r\n            <div class=\"col-auto me-auto\">\r\n                <h6>\r\n                    @if(headerIcon().length > 0) {\r\n                        <i [class]=\"headerIcon()\"></i> \r\n                    }\r\n\r\n                    @if(header().length > 0) {\r\n                        <span>{{ header() }}</span> \r\n                    }\r\n                </h6>        \r\n            </div>\r\n        }\r\n\r\n        @if(_buttonConfig(null, 'showBackButton')) {\r\n            <div class=\"col-auto padding-left-5px padding-right-0px padding-y-5px\">         \r\n                <coer-button\r\n                    type=\"icon-outline\"\r\n                    color=\"secondary\"\r\n                    icon=\"back\"\r\n                    tooltip=\"Back\" \r\n                    (onClick)=\"onClickBack.emit()\"\r\n                ></coer-button>       \r\n            </div>\r\n        }\r\n    \r\n        <!-- Search -->\r\n        @if(showSearch() && dataSource().length > 0) {\r\n            <div class=\"col-auto padding-right-0px padding-y-5px\">\r\n                <coer-textbox\r\n                    #inputSearch \r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    marginTop=\"5px\"\r\n                    marginBottom=\"5px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <div [ngStyle]=\"{ \r\n        'width': width(), \r\n        'min-Width': MinWidth(), \r\n        'max-Width': MaxWidth(), \r\n    }\">\r\n        <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n            [ngStyle]=\"{ \r\n                'height': _height, \r\n                'min-height': minHeight(), \r\n                'max-height': maxHeight(), \r\n                'display-none': dataSource().length <= 0  \r\n            }\">\r\n\r\n            @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li cdkDrag \r\n                    class=\"list-group-item coer-list-item\" \r\n                    cdkDragBoundary=\"ul.coer-list\"\r\n                    (click)=\"onClick.emit(item)\" \r\n                    (dblclick)=\"onDoubleClick.emit(item)\">\r\n                \r\n                    <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n\r\n                    <div class=\"coer-list-content\"> \r\n                        @if(_hasTemplate()) {\r\n                            <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n                        }\r\n                    \r\n                        @else {\r\n                            <div> {{ _GetDisplay(item) }} </div> \r\n                        }            \r\n\r\n                        <div class=\"coer-list-actions\">\r\n                            @if(_buttonConfig(item, 'showDeleteButtonByRow')) {\r\n                                <coer-button\r\n                                    type=\"icon-no-border\"\r\n                                    [color]=\"_ButtonByRowColorDelete()\"\r\n                                    icon=\"delete\"      \r\n                                    (onClick)=\"onClickDelete.emit(item)\"\r\n                                ></coer-button>\r\n                            } \r\n                        \r\n                            @if(_buttonConfig(item, 'showGoButtonByRow')) {\r\n                                <coer-button\r\n                                    type=\"icon-no-border\"\r\n                                    [color]=\"_ButtonByRowColorGo()\"\r\n                                    icon=\"go\"   \r\n                                    marginLeft=\"5px\"   \r\n                                    (onClick)=\"onClickGo.emit(item)\"\r\n                                ></coer-button>\r\n                            } \r\n\r\n                            <i cdkDragHandle [ngClass]=\"{ \r\n                                'icon-grip-vertical': true,\r\n                                'cursor-grab'       : true, \r\n                                'cursor-grabbing'   : false, \r\n                                'display-none'      : !_isDraggable()\r\n                            }\"></i>               \r\n                        </div>           \r\n                    </div>  \r\n                </li> \r\n            } \r\n        </ul>\r\n    </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list ul.coer-list li.coer-list-item{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content div.coer-list-actions{display:inherit;align-items:center}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content div.coer-list-actions i.icon-grip-vertical{color:var(--gray)!important;margin-left:6px!important}div.coer-list ul.coer-list .coer-list-item:last-child{border:none}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i5.HtmlPipe, name: "html" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoerList, isStandalone: false, selector: "coer-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, buttonsConfig: { classPropertyName: "buttonsConfig", publicName: "buttonsConfig", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDraggable: { classPropertyName: "isDraggable", publicName: "isDraggable", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, MinWidth: { classPropertyName: "MinWidth", publicName: "MinWidth", isSignal: true, isRequired: false, transformFunction: null }, MaxWidth: { classPropertyName: "MaxWidth", publicName: "MaxWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", 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: { onDrop: "onDrop", onSort: "onSort", onClick: "onClick", onDoubleClick: "onDoubleClick", onClickDelete: "onClickDelete", onClickGo: "onClickGo", onClickBack: "onClickBack" }, ngImport: i0, template: "<div [id]=\"_id\" class=\"coer-list\" [ngStyle]=\"{ \r\n    'margin-top': marginTop(), \r\n    'margin-right': marginRight(), \r\n    'margin-bottom': marginBottom(), \r\n    'margin-left': marginLeft(), \r\n    }\">\r\n\r\n    <!-- Message -->\r\n    @if(isLoading()) {\r\n        <div class=\"loading\">\r\n            <i class=\"spinner-border\"></i>\r\n            <span class=\"fa-fade\">Loading</span>\r\n        </div>\r\n    }\r\n\r\n    @else if(dataSource().length <= 0) {\r\n        <div class=\"no-data\"> No Data </div>\r\n    }\r\n\r\n    <header [id]=\"_id + '-header'\" class=\"row\"> \r\n        @if(header().length > 0 || headerIcon().length > 0) {\r\n            <div class=\"col-auto me-auto\">\r\n                <h6>\r\n                    @if(headerIcon().length > 0) {\r\n                        <i [class]=\"headerIcon()\"></i> \r\n                    }\r\n\r\n                    @if(header().length > 0) {\r\n                        <span>{{ header() }}</span> \r\n                    }\r\n                </h6>        \r\n            </div>\r\n        }\r\n\r\n        @if(_buttonConfig(null, 'showBackButton')) {\r\n            <div class=\"col-auto padding-left-5px padding-right-0px padding-y-5px\">         \r\n                <coer-button\r\n                    type=\"icon-outline\"\r\n                    color=\"secondary\"\r\n                    icon=\"back\"\r\n                    tooltip=\"Back\" \r\n                    (onClick)=\"onClickBack.emit()\"\r\n                ></coer-button>       \r\n            </div>\r\n        }\r\n    \r\n        <!-- Search -->\r\n        @if(showSearch() && dataSource().length > 0) {\r\n            <div class=\"col-auto padding-right-0px padding-y-5px\">\r\n                <coer-textbox\r\n                    #inputSearch \r\n                    placeholder=\"Search\"\r\n                    [isDisabled]=\"isLoading()\"\r\n                    [selectOnFocus]=\"true\"\r\n                    width=\"250px\"\r\n                    marginTop=\"5px\"\r\n                    marginBottom=\"5px\"\r\n                    [showSearchIcon]=\"true\"\r\n                    [showClearIcon]=\"true\"\r\n                ></coer-textbox>\r\n            </div>\r\n        }\r\n    </header>\r\n\r\n    <div [ngStyle]=\"{ \r\n        'width': width(), \r\n        'min-Width': MinWidth(), \r\n        'max-Width': MaxWidth(), \r\n    }\">\r\n        <ul cdkDropList (cdkDropListDropped)=\"_Drop($event)\" class='list-group coer-list'\r\n            [ngStyle]=\"{ \r\n                'height': _height, \r\n                'min-height': minHeight(), \r\n                'max-height': maxHeight(), \r\n                'display-none': dataSource().length <= 0  \r\n            }\">\r\n\r\n            @for (item of _dataSource(); track _GetIndexRow(item)) {\r\n                <li cdkDrag \r\n                    class=\"list-group-item coer-list-item\" \r\n                    cdkDragBoundary=\"ul.coer-list\"\r\n                    (click)=\"onClick.emit(item)\" \r\n                    (dblclick)=\"onDoubleClick.emit(item)\">\r\n                \r\n                    <div *cdkDragPlaceholder class=\"coer-list-placeholder cursor-grabbing\"></div>\r\n\r\n                    <div class=\"coer-list-content\"> \r\n                        @if(_hasTemplate()) {\r\n                            <div [innerHTML]=\"_GetTemplate(item) | html\" class=\"template\"></div>\r\n                        }\r\n                    \r\n                        @else {\r\n                            <div> {{ _GetDisplay(item) }} </div> \r\n                        }            \r\n\r\n                        <div class=\"coer-list-actions\">\r\n                            @if(_buttonConfig(item, 'showDeleteButtonByRow')) {\r\n                                <coer-button\r\n                                    type=\"icon-no-border\"\r\n                                    [color]=\"_ButtonByRowColorDelete()\"\r\n                                    icon=\"delete\"      \r\n                                    (onClick)=\"onClickDelete.emit(item)\"\r\n                                ></coer-button>\r\n                            } \r\n                        \r\n                            @if(_buttonConfig(item, 'showGoButtonByRow')) {\r\n                                <coer-button\r\n                                    type=\"icon-no-border\"\r\n                                    [color]=\"_ButtonByRowColorGo()\"\r\n                                    icon=\"go\"   \r\n                                    marginLeft=\"5px\"   \r\n                                    (onClick)=\"onClickGo.emit(item)\"\r\n                                ></coer-button>\r\n                            } \r\n\r\n                            <i cdkDragHandle [ngClass]=\"{ \r\n                                'icon-grip-vertical': true,\r\n                                'cursor-grab'       : true, \r\n                                'cursor-grabbing'   : false, \r\n                                'display-none'      : !_isDraggable()\r\n                            }\"></i>               \r\n                        </div>           \r\n                    </div>  \r\n                </li> \r\n            } \r\n        </ul>\r\n    </div>\r\n</div>", styles: ["div.coer-list header{align-items:center;justify-content:flex-end;padding-right:10px;margin:0}div.coer-list header h6{display:flex;align-items:center;gap:10px;min-height:40px;max-height:40px;margin-top:5px;margin-bottom:5px}div.coer-list header>div{display:flex;align-items:baseline;position:relative;z-index:1}div.coer-list ul.coer-list{width:100%;border:solid 1px #ccc;display:block;background:var(--white);border-radius:4px;overflow:auto}div.coer-list ul.coer-list li.coer-list-item{padding:10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:var(--white);font-size:14px}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content{width:100%;display:flex;align-items:center;justify-content:space-between}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content div.coer-list-actions{display:inherit;align-items:center}div.coer-list ul.coer-list li.coer-list-item div.coer-list-content div.coer-list-actions i.icon-grip-vertical{color:var(--gray)!important;margin-left:6px!important}div.coer-list ul.coer-list .coer-list-item:last-child{border:none}div.coer-list .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}div.coer-list .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list .coer-list.cdk-drop-list-dragging .coer-list-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.coer-list-placeholder{background:#ccc;border:dotted 3px #999;min-height:40px;transition:transform .25s cubic-bezier(0,0,.2,1)}div.coer-list div.cdk-drag-placeholder,div.coer-list ul.cdk-drop-list-dragging,div.coer-list ul.cdk-drop-list-dragging *{cursor:grabbing}div.coer-list div.loading,div.coer-list div.no-data{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:25px;color:var(--gray);z-index:1}div.coer-list div.loading{background-color:#bbbbbb83!important;flex-direction:column!important;gap:10px!important}div.coer-list div.loading span.fa-fade{position:relative!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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"] }, { kind: "component", type: CoerTextBox, selector: "coer-textbox", inputs: ["id", "value", "label", "placeholder", "textPosition", "minLength", "maxLength", "isInvalid", "isValid", "externalButton", "selectOnFocus", "showClearIcon", "showSearchIcon", "isLoading", "isDisabled", "isReadonly", "isInvisible", "width", "minWidth", "maxWidth", "marginTop", "marginRight", "marginBottom", "marginLeft"], outputs: ["onKeyupEnter", "onInput", "onClickClear", "onClickSearch", "onClickExternalButton"] }, { kind: "pipe", type: i5.HtmlPipe, name: "html" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerList, decorators: [{
             type: Component,
@@ -3680,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() {
@@ -3748,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 {