ng-tailwind 7.0.3 → 7.0.5

package/fesm2022/ng-tailwind.mjs

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Input, Directive, NgModule, ElementRef, ViewChild, ViewEncapsulation, Component, input, Optional, ChangeDetectionStrategy, EventEmitter, Output, Host, output, signal, computed, effect, SkipSelf, Self, forwardRef, TemplateRef, ContentChild, HostBinding, HostListener, Injectable, untracked } from '@angular/core';
 import * as i2 from '@angular/forms';
-import { ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR, NgForm, ControlContainer, Validators, FormsModule, TouchedChangeEvent } from '@angular/forms';
+import { ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR, NgForm, ControlContainer, Validators, FormsModule, TouchedChangeEvent, ValueChangeEvent } from '@angular/forms';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1 from 'angular-svg-icon';
@@ -1907,7 +1907,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class NgtControlValueAccessor {
     constructor() {
-        this.onValueChangeEvent = new EventEmitter;
         this.touched = signal(false);
         this.ignore = '{{{{INITIAL_VALUE_IGNORE}}}}';
         this._value = signal(this.ignore);
@@ -1926,7 +1925,7 @@ class NgtControlValueAccessor {
     }
     ;
     set value(v) {
-        if (!this.hasValueChanges(v, this._value())) {
+        if (this.hasValueChanges(v, this._value())) {
             this._value.set(v);
             this.onChange(v);
             if (!this.formControl) {
@@ -1937,7 +1936,7 @@ class NgtControlValueAccessor {
         }
     }
     writeValue(value) {
-        if (value == this.ignore || this.hasValueChanges(value, this._value())) {
+        if (value == this.ignore || !this.hasValueChanges(value, this._value())) {
             return;
         }
         this._value.set(value);
@@ -1958,9 +1957,6 @@ class NgtControlValueAccessor {
     }
     change(value) { }
     ;
-    onValueChange() {
-        return this.onValueChangeEvent;
-    }
     isValid() {
         if (!this.formControl) {
             this.formControl = this.getControl();
@@ -1981,13 +1977,7 @@ class NgtControlValueAccessor {
         }
     }
     hasValueChanges(value1, value2) {
-        if (Array.isArray(value1)) {
-            value1 = JSON.stringify(value1);
-        }
-        if (Array.isArray(value2)) {
-            value2 = JSON.stringify(value2);
-        }
-        return value1 === value2;
+        return JSON.stringify(value1) != JSON.stringify(value2);
     }
 }
 function NgtValueAccessorProvider(component) {
@@ -2433,6 +2423,7 @@ class NgtInputComponent extends NgtControlValueAccessor {
         this.onClickLeftIcon = new EventEmitter();
         this.onClickRightIcon = new EventEmitter();
         this.validatePhoneResult = new EventEmitter();
+        this.onValueChange = new EventEmitter();
         this.inputProperties = {};
         this.subscriptions = [];
         if (this.ngtFormComponent) {
@@ -2526,7 +2517,7 @@ class NgtInputComponent extends NgtControlValueAccessor {
             }
         }
         if (this.componentReady) {
-            this.onValueChangeEvent.emit(this.value);
+            this.onValueChange.emit(this.value);
         }
         if (this.ngtResourceService && this.findExistingResource && this.value) {
             this.searchExistingResource();
@@ -3026,7 +3017,7 @@ class NgtInputComponent extends NgtControlValueAccessor {
         this.subscriptions = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtInputComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtHttpValidationService, optional: true, skipSelf: true }, { token: NgtHttpResourceService, optional: true, skipSelf: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: i0.Injector }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtInputComponent, isStandalone: false, selector: "ngt-input", inputs: { label: "label", placeholder: "placeholder", shining: "shining", loading: "loading", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText", innerLeftIcon: "innerLeftIcon", innerLeftIconColor: "innerLeftIconColor", innerRightIcon: "innerRightIcon", innerRightIconColor: "innerRightIconColor", decimalMaskPrecision: "decimalMaskPrecision", showCharactersLength: "showCharactersLength", uppercase: "uppercase", customInnerContentTemplate: "customInnerContentTemplate", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse", isDisabled: "isDisabled", isReadonly: "isReadonly", showRoundedIcon: "showRoundedIcon", type: "type", name: "name", mask: "mask", focus: "focus", allowClear: "allowClear", jit: "jit", useInputEvent: "useInputEvent", findExistingResource: "findExistingResource", allowPhoneValidation: "allowPhoneValidation", validatePassword: "validatePassword", passwordableId: "passwordableId", passwordPolicyId: "passwordPolicyId", isRequired: "isRequired", uniqueResource: "uniqueResource", minValue: "minValue", maxValue: "maxValue", maxLength: "maxLength", minLength: "minLength", match: "match", multipleOf: "multipleOf", validateMinValueOnMask: "validateMinValueOnMask", externalServerDependency: "externalServerDependency", customValidator: "customValidator" }, outputs: { onClickLeftIcon: "onClickLeftIcon", onClickRightIcon: "onClickRightIcon", validatePhoneResult: "validatePhoneResult" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtInputComponent, isStandalone: false, selector: "ngt-input", inputs: { label: "label", placeholder: "placeholder", shining: "shining", loading: "loading", helpTitle: "helpTitle", helpTextColor: "helpTextColor", helpText: "helpText", innerLeftIcon: "innerLeftIcon", innerLeftIconColor: "innerLeftIconColor", innerRightIcon: "innerRightIcon", innerRightIconColor: "innerRightIconColor", decimalMaskPrecision: "decimalMaskPrecision", showCharactersLength: "showCharactersLength", uppercase: "uppercase", customInnerContentTemplate: "customInnerContentTemplate", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse", isDisabled: "isDisabled", isReadonly: "isReadonly", showRoundedIcon: "showRoundedIcon", type: "type", name: "name", mask: "mask", focus: "focus", allowClear: "allowClear", jit: "jit", useInputEvent: "useInputEvent", findExistingResource: "findExistingResource", allowPhoneValidation: "allowPhoneValidation", validatePassword: "validatePassword", passwordableId: "passwordableId", passwordPolicyId: "passwordPolicyId", isRequired: "isRequired", uniqueResource: "uniqueResource", minValue: "minValue", maxValue: "maxValue", maxLength: "maxLength", minLength: "minLength", match: "match", multipleOf: "multipleOf", validateMinValueOnMask: "validateMinValueOnMask", externalServerDependency: "externalServerDependency", customValidator: "customValidator" }, outputs: { onClickLeftIcon: "onClickLeftIcon", onClickRightIcon: "onClickRightIcon", validatePhoneResult: "validatePhoneResult", onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtInputComponent),
         ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label\" class=\"mb-2 flex {{ ngtStyle.compile(['color.text', 'text', 'font']) }}\" [hidden]='shining'>\n    <span class=\"truncate\" [title]=\"label\">\n        {{ label }}:\n    </span>\n\n    <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-md ml-1\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        <span [innerHtml]=\"helpText\"></span>\n    </ngt-helper>\n</label>\n\n<div class=\"{{ shining ? 'hidden' : 'flex relative'}}\">\n    <input autocomplete=\"new-password\"\n        class=\"flex border appearance-none focus:outline-none leading-tight w-full {{ getInputPaddings() }} {{ ngtStyle.compile(['h', 'text', 'color.border', 'color.bg', 'color.text', 'rounded', 'cursor']) }}\"\n        [disabled]=\"disabled()\" [readonly]=\"isReadonly || loading\" [placeholder]=\"placeholder\"\n        [style]=\"uppercase ? 'text-transform: uppercase!important':''\"\n        [ngClass]=\"{'input-has-error border-red-700': formControl?.errors && (formControl?.dirty || (formContainer && formContainer['submitted']))}\"\n        [attr.type]=\"inputProperties.htmlType\" (mouseleave)=\"restorePlaceholder()\" (focusout)=\"restorePlaceholder()\"\n        (input)=\"useInputEvent ? onNativeChange() : null\" (change)=\"!useInputEvent ? onNativeChange() : null\" #element>\n    <span *ngIf=\"innerLeftIcon\"\n        class=\"absolute self-center px-2 {{ innerLeftIconColor }} {{ onClickLeftIcon ? 'cursor-pointer' : '' }}\"\n        (click)=\"onClickLeftIcon.emit()\">\n\n        <ngt-svg *ngIf=\"!showRoundedIcon\" class=\"text-xs fill-current\" [src]='innerLeftIcon'></ngt-svg>\n        <img *ngIf=\"showRoundedIcon\" class=\"rounded-full h-4\" [src]='innerLeftIcon'>\n    </span>\n\n    <div *ngIf=\"customInnerContentTemplate\" class=\"absolute self-center px-2\">\n        <ng-container [ngTemplateOutlet]=\"customInnerContentTemplate\"></ng-container>\n    </div>\n\n    <div class=\"flex absolute h-full justify-end right-0 w-auto\">\n        <span *ngIf=\"!disabled() && allowClear && value && !loading\"\n            class=\"self-center right-0 px-2 text-red-400 cursor-pointer\" (click)='clearInput($event)'>\n            <svg class=\"fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z\" />\n            </svg>\n        </span>\n\n        <span *ngIf=\"loading\" class=\"self-center right-0 px-2 text-gray-500\">\n            <div class=\"div-loader\"></div>\n        </span>\n\n        <span *ngIf=\"type == 'password' && value\" class=\"self-center px-2 cursor-pointer\">\n            <svg *ngIf=\"element.type == 'password'\" class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\" (click)='showPassword()'>\n                <path\n                    d=\"M.2 10a11 11 0 0 1 19.6 0A11 11 0 0 1 .2 10zm9.8 4a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z\" />\n            </svg>\n\n            <svg *ngIf=\"element.type == 'text'\" class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\" (click)='hidePassword()'>\n                <path\n                    d=\"M12.81 4.36l-1.77 1.78a4 4 0 0 0-4.9 4.9l-2.76 2.75C2.06 12.79.96 11.49.2 10a11 11 0 0 1 12.6-5.64zm3.8 1.85c1.33 1 2.43 2.3 3.2 3.79a11 11 0 0 1-12.62 5.64l1.77-1.78a4 4 0 0 0 4.9-4.9l2.76-2.75zm-.25-3.99l1.42 1.42L3.64 17.78l-1.42-1.42L16.36 2.22z\" />\n            </svg>\n        </span>\n\n        <span *ngIf=\"innerRightIcon && type != 'password'\"\n            class=\"self-center px-2 {{ innerRightIconColor }}  {{ onClickRightIcon ? 'cursor-pointer' : '' }}\"\n            (click)=\"onClickRightIcon.emit()\">\n            <ngt-svg class=\"text-xxs fill-current\" [src]='innerRightIcon'></ngt-svg>\n        </span>\n    </div>\n</div>\n\n<ng-container *ngIf=\"showCharactersLength && maxTotalCharsCount && !shining\">\n    <p class=\"text-xxs mt-1\">\n        {{ ngtTranslateService.ngtTextAreaRemainingCharacters }}:\n        <span class=\"font-semibold\">{{ getRemainingCharacters() }}</span>\n    </p>\n</ng-container>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"{{ ngtStyle.compile(['h']) }} w-full\"></ngt-shining>\n    </div>\n</ng-container>\n\n<input *ngIf='componentReady' type=\"hidden\" [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">\n\n<ng-content></ng-content>\n\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\" [minValue]='minValue' [minLength]='minLength'>\n</ngt-validation>\n", styles: [".div-loader{width:20px;height:20px;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], viewProviders: [
             { provide: ControlContainer, useExisting: NgForm }
@@ -3168,6 +3159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], validatePhoneResult: [{
                 type: Output
+            }], onValueChange: [{
+                type: Output
             }] } });
 
 class NgtInputModule {
@@ -4555,7 +4548,7 @@ class NgtDatatableComponent {
         this.data = response;
     }
     initSearchWithInput() {
-        this.subscriptions.push(this.inputSearch.onValueChange().subscribe((value) => {
+        this.subscriptions.push(this.inputSearch.onValueChange.subscribe((value) => {
             if (this.currentState.filters.defaultFilters['term']) {
                 if (!value) {
                     this.removeFilter('term');
@@ -5180,7 +5173,7 @@ class NgtThComponent {
         this.subscriptions = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtThComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtDatatableComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtThComponent, isStandalone: false, selector: "[ngt-th]", inputs: { reference: "reference", sortReference: "sortReference", modalWidth: "modalWidth", searchModalOverflow: "searchModalOverflow", sortable: "sortable", searchable: "searchable", hasCustomSearch: "hasCustomSearch", searchLabel: "searchLabel", searchIcon: "searchIcon", sortableTooltip: "sortableTooltip" }, outputs: { onEnableSearch: "onEnableSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n    [class.cursor-pointer]='sortable'>\n    <ng-content></ng-content>\n    <ng-container *ngIf='sortable && isCurrentSort'>\n        <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n        </svg>\n\n        <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n        </svg>\n    </ng-container>\n\n    <ng-container *ngIf='searchable'>\n        <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n            <ngt-action class=\"text-lg\" h='h-6' w='w-6' [forceEnable]=\"true\" ngt-stylizable>\n                <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n                </svg>\n            </ngt-action>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #modal>\n    <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n        [ngtStyle]=\"filterModalHeaderStyle\" (onClose)=\"ngtDataTable.searchModal.close()\">\n        <ngt-svg *ngIf=\"searchIcon\" [src]=\"searchIcon\" class=\"text-sm\">\n        </ngt-svg>\n\n        <svg *ngIf=\"!searchIcon\" class=\"fill-current self-center text-sm\" viewBox=\"0 0 12 12\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M7.0042 6.84417L11.8042 2.04417V-0.355835H-0.195801V2.04417L4.6042 6.84417V11.6442L7.0042 9.24417V6.84417Z\" />\n        </svg>\n\n        <span *ngIf=\"searchLabel\" class=\"font-semibold text-sm ml-2\">\n            {{ searchLabel }}\n        </span>\n\n        <ng-content select='[customSearchHeader]'></ng-content>\n    </ngt-modal-header>\n\n    <ngt-modal-body [isDisabled]=\"false\" [ngtStyle]=\"filterModalBodyStyle\">\n        <ngt-input *ngIf=\"!hasCustomSearch\" jit='true' [(ngModel)]='searchTerm' (ngModelChange)='search($event)'\n            placeholder='Pesquisar...' name='{{ reference }}_filter' #searchInput>\n        </ngt-input>\n\n        <div [hidden]='!hasCustomSearch'>\n            <ng-content select='[customSearch]'></ng-content>\n        </div>\n    </ngt-modal-body>\n</ng-template>", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "helperReverseYPosition", "helperAutoXReverse", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "useInputEvent", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "customValidator"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses", "ngtStyle"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body", inputs: ["ngtStyle", "isDisabled"] }, { kind: "component", type: NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled", "forceEnable"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtThComponent, isStandalone: false, selector: "[ngt-th]", inputs: { reference: "reference", sortReference: "sortReference", modalWidth: "modalWidth", searchModalOverflow: "searchModalOverflow", sortable: "sortable", searchable: "searchable", hasCustomSearch: "hasCustomSearch", searchLabel: "searchLabel", searchIcon: "searchIcon", sortableTooltip: "sortableTooltip" }, outputs: { onEnableSearch: "onEnableSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex items-center w-full {{ ngtStyle.compile(['justifyContent']) }}\" [title]=\"getTooltip()\" (click)='sort()'\n    [class.cursor-pointer]='sortable'>\n    <ng-content></ng-content>\n    <ng-container *ngIf='sortable && isCurrentSort'>\n        <svg *ngIf=\"sortDirection == 'asc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z\" />\n        </svg>\n\n        <svg *ngIf=\"sortDirection == 'desc'\" class=\"fill-current self-center cursor-pointer ml-1\"\n            xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n            <path d=\"M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z\" />\n        </svg>\n    </ng-container>\n\n    <ng-container *ngIf='searchable'>\n        <div (click)='enableSearch($event)' class=\"float-right ml-2\" title=\"Filtrar\">\n            <ngt-action class=\"text-lg\" h='h-6' w='w-6' [forceEnable]=\"true\" ngt-stylizable>\n                <svg class=\"fill-current self-center\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                        d=\"M1595 295q17 41-14 70l-493 493v742q0 42-39 59-13 5-25 5-27 0-45-19l-256-256q-19-19-19-45V858L211 365q-31-29-14-70 17-39 59-39h1280q42 0 59 39z\" />\n                </svg>\n            </ngt-action>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #modal>\n    <ngt-modal-header [disableDefaultCloses]=\"ngtDataTable.searchModal.disableDefaultCloses\"\n        [ngtStyle]=\"filterModalHeaderStyle\" (onClose)=\"ngtDataTable.searchModal.close()\">\n        <ngt-svg *ngIf=\"searchIcon\" [src]=\"searchIcon\" class=\"text-sm\">\n        </ngt-svg>\n\n        <svg *ngIf=\"!searchIcon\" class=\"fill-current self-center text-sm\" viewBox=\"0 0 12 12\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n                d=\"M7.0042 6.84417L11.8042 2.04417V-0.355835H-0.195801V2.04417L4.6042 6.84417V11.6442L7.0042 9.24417V6.84417Z\" />\n        </svg>\n\n        <span *ngIf=\"searchLabel\" class=\"font-semibold text-sm ml-2\">\n            {{ searchLabel }}\n        </span>\n\n        <ng-content select='[customSearchHeader]'></ng-content>\n    </ngt-modal-header>\n\n    <ngt-modal-body [isDisabled]=\"false\" [ngtStyle]=\"filterModalBodyStyle\">\n        <ngt-input *ngIf=\"!hasCustomSearch\" jit='true' [(ngModel)]='searchTerm' (ngModelChange)='search($event)'\n            placeholder='Pesquisar...' name='{{ reference }}_filter' #searchInput>\n        </ngt-input>\n\n        <div [hidden]='!hasCustomSearch'>\n            <ng-content select='[customSearch]'></ng-content>\n        </div>\n    </ngt-modal-body>\n</ng-template>", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "helperReverseYPosition", "helperAutoXReverse", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "useInputEvent", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "customValidator"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult", "onValueChange"] }, { kind: "component", type: NgtModalHeaderComponent, selector: "ngt-modal-header", inputs: ["disableDefaultCloses", "ngtStyle"] }, { kind: "component", type: NgtModalBodyComponent, selector: "ngt-modal-body", inputs: ["ngtStyle", "isDisabled"] }, { kind: "component", type: NgtActionComponent, selector: "ngt-action", inputs: ["href", "icon", "ngtStyle", "isDisabled", "forceEnable"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtThComponent, decorators: [{
             type: Component,
@@ -6819,6 +6812,7 @@ class NgtTextareaComponent extends NgtControlValueAccessor {
         // Validation
         this.isRequired = false;
         this.maxLength = 300;
+        this.onValueChange = output();
         this.componentReady = false;
         this.subscriptions = [];
         if (this.ngtFormComponent) {
@@ -6880,7 +6874,7 @@ class NgtTextareaComponent extends NgtControlValueAccessor {
         let nativeValue = this.getNativeValue();
         let ngModelValue = value ? value : '';
         if (this.componentReady) {
-            this.onValueChangeEvent.emit(this.value);
+            this.onValueChange.emit(this.value);
         }
         if (this.value != nativeValue) {
             this.element.nativeElement.value = ngModelValue;
@@ -6959,7 +6953,7 @@ class NgtTextareaComponent extends NgtControlValueAccessor {
         this.subscriptions = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtTextareaComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtTextareaComponent, isStandalone: false, selector: "ngt-textarea", inputs: { label: "label", placeholder: "placeholder", rows: "rows", showCharactersLength: "showCharactersLength", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", name: "name", isDisabled: "isDisabled", isReadonly: "isReadonly", jit: "jit", focus: "focus", isRequired: "isRequired", maxLength: "maxLength" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtTextareaComponent, isStandalone: false, selector: "ngt-textarea", inputs: { label: "label", placeholder: "placeholder", rows: "rows", showCharactersLength: "showCharactersLength", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", name: "name", isDisabled: "isDisabled", isReadonly: "isReadonly", jit: "jit", focus: "focus", isRequired: "isRequired", maxLength: "maxLength" }, outputs: { onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtTextareaComponent),
         ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"{{ shining ? '' : 'block' }} mb-2 flex {{ ngtStyle.compile(['text', 'font', 'color.text']) }}\"\n    *ngIf=\"label\" [hidden]='shining'>\n    <span class=\"truncate\" [title]=\"label\">\n        {{ label }}:\n    </span>\n\n    <span class=\"text-red-500 font-bold text-md ml-1\" *ngIf=\"isRequired\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<div class=\"flex flex-col\">\n    <div class=\"{{ shining ? '' : 'flex'}}\" [hidden]='shining'>\n        <textarea [rows]='rows' autocomplete=\"new-password\" attr.type=\"text\"\n            class=\"appearance-none block border focus:outline-none leading-tight text-xs px-3 py-3 rounded w-full {{ ngtStyle.compile(['h', 'color.border', 'color.bg', 'color.text']) }}\"\n            [disabled]=\"isDisabled\" [readonly]=\"isReadonly\" placeholder=\"{{ placeholder ? placeholder : ''}}\"\n            [ngClass]=\"{'textarea-has-error border-red-700': formControl?.errors && (formControl?.dirty || (formContainer && formContainer['submitted']))}\"\n            #element>\n        </textarea>\n    </div>\n\n    <ng-container *ngIf=\"showCharactersLength && !shining\">\n        <p class=\"text-xxs mt-1\">\n            {{ ngtTranslateService.ngtTextAreaRemainingCharacters }}: <span class=\"font-semibold\">\n                {{ getRemainingCharacters() }}\n            </span>\n        </p>\n    </ng-container>\n</div>\n\n<ng-container *ngIf='shining'>\n    <div class=\"flex\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n</ng-container>\n\n<input *ngIf='componentReady' class=\"text-xs\" type=\"hidden\" [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">\n\n<ng-content></ng-content>\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\"></ngt-validation>\n", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], viewProviders: [
             { provide: ControlContainer, useExisting: NgForm }
@@ -7093,6 +7087,7 @@ class NgtDateComponent extends NgtControlValueAccessor {
         this.allowClear = true;
         // Validation
         this.isRequired = false;
+        this.onValueChange = output();
         this.componentReady = false;
         this.nativeName = uuid();
         this.inputProperties = {};
@@ -7173,7 +7168,7 @@ class NgtDateComponent extends NgtControlValueAccessor {
     }
     change(value) {
         if (this.componentReady) {
-            this.onValueChangeEvent.emit(this.value);
+            this.onValueChange.emit(this.value);
         }
         if (!value || (value instanceof Object && !Object.keys(value).length)) {
             return this.clearInput();
@@ -7381,7 +7376,7 @@ class NgtDateComponent extends NgtControlValueAccessor {
         this.subscriptions = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtDateComponent, deps: [{ token: i2.ControlContainer, host: true, optional: true }, { token: NgtStylizableDirective, optional: true, self: true }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtDateComponent, isStandalone: false, selector: "ngt-date", inputs: { label: "label", placeholder: "placeholder", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", dateFormat: "dateFormat", dateFormatNgModel: "dateFormatNgModel", showCalendarIcon: "showCalendarIcon", helperReverseYPosition: "helperReverseYPosition", name: "name", isDisabled: "isDisabled", isReadonly: "isReadonly", mode: "mode", time_24hr: "time_24hr", enableTime: "enableTime", noCalendar: "noCalendar", minuteIncrement: "minuteIncrement", allowInput: "allowInput", locale: "locale", allowClear: "allowClear", minDate: "minDate", maxDate: "maxDate", defaultDate: "defaultDate", isRequired: "isRequired" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtDateComponent, isStandalone: false, selector: "ngt-date", inputs: { label: "label", placeholder: "placeholder", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", dateFormat: "dateFormat", dateFormatNgModel: "dateFormatNgModel", showCalendarIcon: "showCalendarIcon", helperReverseYPosition: "helperReverseYPosition", name: "name", isDisabled: "isDisabled", isReadonly: "isReadonly", mode: "mode", time_24hr: "time_24hr", enableTime: "enableTime", noCalendar: "noCalendar", minuteIncrement: "minuteIncrement", allowInput: "allowInput", locale: "locale", allowClear: "allowClear", minDate: "minDate", maxDate: "maxDate", defaultDate: "defaultDate", isRequired: "isRequired" }, outputs: { onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtDateComponent),
         ], viewQueries: [{ propertyName: "evDatePicker", first: true, predicate: ["evDatePicker"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label\" class=\"{{ shining ? '' : 'block' }} mb-2 {{ngtStyle.compile(['text', 'fontCase'])}} flex\"\n    [hidden]='shining'>\n    <span class=\"truncate\" [title]=\"label\">\n        {{ label }}:\n    </span>\n\n    <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-xxs ml-1\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" class=\"ml-1\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n        [helperReverseYPosition]=\"helperReverseYPosition\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<div [hidden]=\"shining || disabled() || isReadonly\" class=\"relative\">\n    <div class=\"overflow-hidden border {{ ngtStyle.compile(['h', 'color.text', 'px', 'py', 'text', 'rounded', 'color.text', 'color.bg', 'color.border']) }}\"\n        [class.border-error]=\"hasErrors()\">\n        <ev-date-picker class=\"block h-full w-full\" [config]=\"dateConfig\" disabled=\"true\" [placeholder]=\"placeholder\"\n            #evDatePicker>\n        </ev-date-picker>\n\n        <div *ngIf=\"allowClear && value\"\n            class=\"flex h-full absolute items-center right-0 top-0 w-auto cursor-pointer {{ showCalendarIcon ? 'mr-5' : 'mr-2' }}\"\n            (click)=\"clearInput(true)\">\n            <svg class=\"fill-current text-red-400\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z\" />\n            </svg>\n        </div>\n\n        <div *ngIf=\"showCalendarIcon\"\n            class=\"flex h-full absolute items-center right-0 top-0 w-auto cursor-pointer mr-2\">\n            <svg class=\"fill-current text-sm\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                <path\n                    d=\"M19,4H17V3a1,1,0,0,0-2,0V4H9V3A1,1,0,0,0,7,3V4H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm1,15a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V12H20Zm0-9H4V7A1,1,0,0,1,5,6H7V7A1,1,0,0,0,9,7V6h6V7a1,1,0,0,0,2,0V6h2a1,1,0,0,1,1,1Z\" />\n            </svg>\n        </div>\n    </div>\n</div>\n\n<ng-container *ngIf=\"shining\">\n    <div class=\"flex\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"disabled() || isReadonly\">\n    <div\n        class=\"{{disabled() ? 'disabledDiv' : ''}} {{ngtStyle.compile(['h'])}} w-full text-xs px-4 rounded appearance-none flex items-center border border-gray-400\">\n        {{ getFormattedNativeValue() }}\n    </div>\n</ng-container>\n\n<input *ngIf=\"componentReady\" type=\"hidden\" [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">\n\n<ng-content></ng-content>\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\"></ngt-validation>", styles: [".flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:auto;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,.08);box-shadow:1px 0 #e6e6e6,-1px 0 #e6e6e6,0 1px #e6e6e6,0 -1px #e6e6e6,0 3px 13px #00000014}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown .3s cubic-bezier(.23,1,.32,1);animation:fpFadeInDown .3s cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none!important;box-shadow:none!important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 #e6e6e6,5px 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:30px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:\"\";height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.rightMost:after{left:auto;right:22px}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:#000000e6;fill:#000000e6;height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:#000000e6;fill:#000000e6}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:#0000001a}.numInputWrapper span:active{background:#0003}.numInputWrapper span:after{display:block;content:\"\";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:#00000080}.numInputWrapper:hover{background:#0000000d}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:#0000000d}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\\fffd;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:#000000e6}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:#000000e6}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:#00000080;background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:#0000000d}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:#0000008a;line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 #e6e6e6,5px 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:#3939394d;background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:#3939391a}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 #569ff7,5px 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:#3939394d;background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:30px;line-height:30px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-top:1px solid #e6e6e6}.flatpickr-time:after{content:\"\";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:30px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:12px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:700}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:700;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fpFadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.border-error{border:solid #c53030 1px;background-color:unset!important;border-radius:.25rem}.border-normal{border:solid #cbd5e0 1px;background-color:unset!important;border-radius:.25rem}.ng2-flatpickr-input:focus{outline:none}.ng2-flatpickr-input{border:0;width:100%;height:100%;padding-left:.8rem;font-size:.75rem}.ng2-flatpickr-input-container{height:100%!important}.disabledDiv{background-color:#fafafa}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.EvDatePickerComponent, selector: "ev-date-picker", inputs: ["config", "placeholder", "addClass", "setDate", "tabindex", "hideButton"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], viewProviders: [
             { provide: ControlContainer, useExisting: NgForm }
@@ -8065,7 +8060,7 @@ class NgtMultiSelectComponent extends NgtControlValueAccessor {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtMultiSelectComponent, deps: [{ token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtStylizableDirective, optional: true, self: true }, { token: i0.Injector }, { token: i2.ControlContainer, host: true, optional: true }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgtMultiSelectComponent, isStandalone: false, selector: "ngt-multi-select", inputs: { customOptionTemplate: "customOptionTemplate", customHeaderTemplate: "customHeaderTemplate", label: "label", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse", shining: "shining", loading: "loading", bindLabel: "bindLabel", bindSearch: "bindSearch", itemsPerPage: "itemsPerPage", name: "name", remoteResource: "remoteResource", items: "items", searchable: "searchable", allowOriginalItemsUnselect: "allowOriginalItemsUnselect", allowSelectAll: "allowSelectAll", allowDisplayOnlySelected: "allowDisplayOnlySelected", autoSelectUniqueOption: "autoSelectUniqueOption", isRequired: "isRequired", isDisabled: "isDisabled" }, outputs: { onDataChange: "onDataChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [
             NgtValueAccessorProvider(NgtMultiSelectComponent)
-        ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "elementCheckboxTemplate", first: true, predicate: ["elementCheckboxTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label && !shining\" class=\"flex text-xs\" [class.mb-2]='!hasValidationErrors()'>\n    <span class=\"truncate\" [title]=\"label\">\n        {{ label }}:\n    </span>\n\n    <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-xs ml-1\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<ngt-validation [hidden]='shining' class=\"block mb-1\" [control]='formControl' [container]='formContainer'>\n</ngt-validation>\n\n<div class=\"{{ shining ? 'hidden' : 'flex flex-col' }} border w-full rounded {{ ngtStyle.compile(['h']) }}\"\n    style=\"min-height: 13rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='disabled()'>\n    <div class=\"flex items-center w-full p-2 border-b\">\n        <ngt-checkbox *ngIf=\"allowSelectAll\" class=\"flex\" title=\"Selecionar todos\" [isDisabled]='loading || disabled()'\n            [label]=\"!searchable ? 'Selecionar todos' : ''\" [(ngModel)]=\"selectAllCheckbox\"\n            [name]=\"selectAllCheckboxName\" [isClickDisabled]='true' h='h-4' w='w-4' (click)='selectAll()'\n            ngt-stylizable>\n        </ngt-checkbox>\n\n        <ngt-input *ngIf=\"searchable\" class=\"block w-full\" [class.pl-2]=\"allowSelectAll\" [name]='searchInputName'\n            [(ngModel)]='searchTerm' placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10'\n            (ngModelChange)='search($event)' [loading]='loading' [isDisabled]='disabled()' ngt-stylizable #inputSearch>\n        </ngt-input>\n    </div>\n\n    <div *ngIf=\"loading\" class=\"flex flex-col gap-3 px-3 h-full w-full cursor-wait\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n\n    <div class=\"w-full overflow-y-auto text-xs {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n        #containerRef>\n        <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n        </ng-container>\n\n        <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n            <div class=\"flex w-full items-center hover:bg-gray-200 {{ disabled() ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n                [class.p-2]='!customOptionTemplate' (click)='toggleItem(element, $event)'>\n                <ng-template let-element #elementCheckboxTemplate>\n                    <ngt-checkbox class=\"flex pr-2\" [name]='element.uuid' [(ngModel)]=\"element.isSelected\"\n                        (ngModelChange)='onNativeChange(element)' [isClickDisabled]='true'\n                        [isDisabled]='!canSelectItem(element)' h='h-5' w='w-5' (click)='toggleItem(element, $event)'\n                        ngt-stylizable>\n                    </ngt-checkbox>\n                </ng-template>\n\n                <ng-template let-element #defaultOptionTemplate>\n                    {{ getSelectableElementValue(element) }}\n                </ng-template>\n\n                <ng-container *ngIf=\"!customOptionTemplate\" [ngTemplateOutlet]=\"elementCheckboxTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: element }\">\n                </ng-container>\n\n                <ng-container [ngTemplateOutlet]=\"customOptionTemplate || defaultOptionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: element, index: i }\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <p *ngIf=\"!getSelectableElements()?.length\" class=\"text-center mt-4\">\n            {{ ngtTranslateService.ngtMultiSelectNoDataFound }}\n        </p>\n    </div>\n</div>\n\n<div *ngIf=\"allowDisplayOnlySelected\" class=\"{{ shining ? 'hidden' : 'flex' }} w-full items-center mt-2\">\n    <span class=\"text-xs mr-4\">\n        {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n    </span>\n\n    <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n        [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading || disabled()' h='h-5' w='w-5' ngt-stylizable>\n    </ngt-checkbox>\n</div>\n\n<ngt-shining *ngIf='shining' class=\"block w-full {{ ngtStyle.compile(['h']) }}\" style=\"min-height: 16rem;\"\n    rounded='rounded' ngt-stylizable>\n</ngt-shining>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]='value' [name]='name' [value]='value'>\n", styles: [".disabled-background{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem!important;padding:1px!important}.div-loader{width:4rem;height:4rem;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "helperReverseYPosition", "helperAutoXReverse", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "useInputEvent", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "customValidator"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }], viewProviders: [
+        ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "elementCheckboxTemplate", first: true, predicate: ["elementCheckboxTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label && !shining\" class=\"flex text-xs\" [class.mb-2]='!hasValidationErrors()'>\n    <span class=\"truncate\" [title]=\"label\">\n        {{ label }}:\n    </span>\n\n    <span *ngIf=\"isRequired\" class=\"text-red-500 font-bold text-xs ml-1\">*</span>\n\n    <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n        [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n        {{ helpText }}\n    </ngt-helper>\n</label>\n\n<ngt-validation [hidden]='shining' class=\"block mb-1\" [control]='formControl' [container]='formContainer'>\n</ngt-validation>\n\n<div class=\"{{ shining ? 'hidden' : 'flex flex-col' }} border w-full rounded {{ ngtStyle.compile(['h']) }}\"\n    style=\"min-height: 13rem;\" [class.border-red-500]='hasValidationErrors()' [class.disabled-background]='disabled()'>\n    <div class=\"flex items-center w-full p-2 border-b\">\n        <ngt-checkbox *ngIf=\"allowSelectAll\" class=\"flex\" title=\"Selecionar todos\" [isDisabled]='loading || disabled()'\n            [label]=\"!searchable ? 'Selecionar todos' : ''\" [(ngModel)]=\"selectAllCheckbox\"\n            [name]=\"selectAllCheckboxName\" [isClickDisabled]='true' h='h-4' w='w-4' (click)='selectAll()'\n            ngt-stylizable>\n        </ngt-checkbox>\n\n        <ngt-input *ngIf=\"searchable\" class=\"block w-full\" [class.pl-2]=\"allowSelectAll\" [name]='searchInputName'\n            [(ngModel)]='searchTerm' placeholder='Buscar...' [allowClear]='true' [jit]='true' h='h-10'\n            (ngModelChange)='search($event)' [loading]='loading' [isDisabled]='disabled()' ngt-stylizable #inputSearch>\n        </ngt-input>\n    </div>\n\n    <div *ngIf=\"loading\" class=\"flex flex-col gap-3 px-3 h-full w-full cursor-wait\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n\n    <div class=\"w-full overflow-y-auto text-xs {{ loading ? 'hidden' : 'flex flex-col' }}\" (scroll)='onScroll($event)'\n        #containerRef>\n        <ng-container *ngIf=\"customHeaderTemplate\" [ngTemplateOutlet]=\"customHeaderTemplate\">\n        </ng-container>\n\n        <ng-container *ngFor=\"let element of getSelectableElements(); let i = index\">\n            <div class=\"flex w-full items-center hover:bg-gray-200 {{ disabled() ? 'cursor-not-allowed' : 'cursor-pointer' }}\"\n                [class.p-2]='!customOptionTemplate' (click)='toggleItem(element, $event)'>\n                <ng-template let-element #elementCheckboxTemplate>\n                    <ngt-checkbox class=\"flex pr-2\" [name]='element.uuid' [(ngModel)]=\"element.isSelected\"\n                        (ngModelChange)='onNativeChange(element)' [isClickDisabled]='true'\n                        [isDisabled]='!canSelectItem(element)' h='h-5' w='w-5' (click)='toggleItem(element, $event)'\n                        ngt-stylizable>\n                    </ngt-checkbox>\n                </ng-template>\n\n                <ng-template let-element #defaultOptionTemplate>\n                    {{ getSelectableElementValue(element) }}\n                </ng-template>\n\n                <ng-container *ngIf=\"!customOptionTemplate\" [ngTemplateOutlet]=\"elementCheckboxTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: element }\">\n                </ng-container>\n\n                <ng-container [ngTemplateOutlet]=\"customOptionTemplate || defaultOptionTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: element, index: i }\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <p *ngIf=\"!getSelectableElements()?.length\" class=\"text-center mt-4\">\n            {{ ngtTranslateService.ngtMultiSelectNoDataFound }}\n        </p>\n    </div>\n</div>\n\n<div *ngIf=\"allowDisplayOnlySelected\" class=\"{{ shining ? 'hidden' : 'flex' }} w-full items-center mt-2\">\n    <span class=\"text-xs mr-4\">\n        {{ selectedElements?.length || 0 }} / {{ itemsTotal || 0 }}\n    </span>\n\n    <ngt-checkbox class=\"flex\" label=\"Visualizar selecionados\" [name]='displayOnlySelectedName'\n        [(ngModel)]=\"displayOnlySelected\" [isDisabled]='loading || disabled()' h='h-5' w='w-5' ngt-stylizable>\n    </ngt-checkbox>\n</div>\n\n<ngt-shining *ngIf='shining' class=\"block w-full {{ ngtStyle.compile(['h']) }}\" style=\"min-height: 16rem;\"\n    rounded='rounded' ngt-stylizable>\n</ngt-shining>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]='value' [name]='name' [value]='value'>\n", styles: [".disabled-background{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem!important;padding:1px!important}.div-loader{width:4rem;height:4rem;border:3px solid #a0aec038;border-top-color:#a0aec0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }, { kind: "component", type: NgtInputComponent, selector: "ngt-input", inputs: ["label", "placeholder", "shining", "loading", "helpTitle", "helpTextColor", "helpText", "innerLeftIcon", "innerLeftIconColor", "innerRightIcon", "innerRightIconColor", "decimalMaskPrecision", "showCharactersLength", "uppercase", "customInnerContentTemplate", "helperReverseYPosition", "helperAutoXReverse", "isDisabled", "isReadonly", "showRoundedIcon", "type", "name", "mask", "focus", "allowClear", "jit", "useInputEvent", "findExistingResource", "allowPhoneValidation", "validatePassword", "passwordableId", "passwordPolicyId", "isRequired", "uniqueResource", "minValue", "maxValue", "maxLength", "minLength", "match", "multipleOf", "validateMinValueOnMask", "externalServerDependency", "customValidator"], outputs: ["onClickLeftIcon", "onClickRightIcon", "validatePhoneResult", "onValueChange"] }, { kind: "component", type: NgtCheckboxComponent, selector: "ngt-checkbox", inputs: ["label", "shining", "isDisabled", "isClickDisabled", "name", "mode", "helpTitle", "helpTextColor", "helpText", "helperAutoXReverse"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "gap", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }], viewProviders: [
             { provide: ControlContainer, useExisting: NgForm }
         ], encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -9364,6 +9359,7 @@ class NgtReactiveInputComponent extends NgtControlValueAccessor {
         this.onClickLeftIcon = output();
         this.onClickRightIcon = output();
         this.validatePhoneResult = output();
+        this.onValueChange = output();
         /** Computed Signals */
         this.isShining = computed(() => this.shining() || this.loaderService.shining() || this.ngtForm.shining());
         this.isLoading = computed(() => this.loading() || this.loaderService.loading());
@@ -9494,6 +9490,9 @@ class NgtReactiveInputComponent extends NgtControlValueAccessor {
                 if (event instanceof TouchedChangeEvent) {
                     this.touched.set(event.touched);
                 }
+                if (event instanceof ValueChangeEvent) {
+                    this.onValueChange.emit(event.value);
+                }
                 this.formControlHasErrors.set(!!this.formControl?.errors);
                 this.formControlIsDirty.set(this.formControl?.dirty);
             }));
@@ -9711,7 +9710,7 @@ class NgtReactiveInputComponent extends NgtControlValueAccessor {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveInputComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtHttpResourceService, optional: true, skipSelf: true }, { token: NgtTranslateService, optional: true }, { token: NgtReactiveFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtReactiveInputValidationService }, { token: NgtReactiveInputMaskService }, { token: NgtReactiveInputLoaderService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveInputComponent, isStandalone: true, selector: "ngt-reactive-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, innerLeftIcon: { classPropertyName: "innerLeftIcon", publicName: "innerLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, innerLeftIconColor: { classPropertyName: "innerLeftIconColor", publicName: "innerLeftIconColor", isSignal: true, isRequired: false, transformFunction: null }, innerRightIcon: { classPropertyName: "innerRightIcon", publicName: "innerRightIcon", isSignal: true, isRequired: false, transformFunction: null }, innerRightIconColor: { classPropertyName: "innerRightIconColor", publicName: "innerRightIconColor", isSignal: true, isRequired: false, transformFunction: null }, customInnerContentTemplate: { classPropertyName: "customInnerContentTemplate", publicName: "customInnerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, showCharactersLength: { classPropertyName: "showCharactersLength", publicName: "showCharactersLength", isSignal: true, isRequired: false, transformFunction: null }, helperReverseYPosition: { classPropertyName: "helperReverseYPosition", publicName: "helperReverseYPosition", isSignal: true, isRequired: false, transformFunction: null }, helperAutoXReverse: { classPropertyName: "helperAutoXReverse", publicName: "helperAutoXReverse", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, decimalMaskPrecision: { classPropertyName: "decimalMaskPrecision", publicName: "decimalMaskPrecision", 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 }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, roundedInnerIcon: { classPropertyName: "roundedInnerIcon", publicName: "roundedInnerIcon", isSignal: true, isRequired: false, transformFunction: null }, findExistingResource: { classPropertyName: "findExistingResource", publicName: "findExistingResource", isSignal: true, isRequired: false, transformFunction: null }, uniqueResource: { classPropertyName: "uniqueResource", publicName: "uniqueResource", isSignal: true, isRequired: false, transformFunction: null }, passwordableId: { classPropertyName: "passwordableId", publicName: "passwordableId", isSignal: true, isRequired: false, transformFunction: null }, passwordPolicyId: { classPropertyName: "passwordPolicyId", publicName: "passwordPolicyId", isSignal: true, isRequired: false, transformFunction: null }, match: { classPropertyName: "match", publicName: "match", isSignal: true, isRequired: false, transformFunction: null }, customSyncValidators: { classPropertyName: "customSyncValidators", publicName: "customSyncValidators", isSignal: true, isRequired: false, transformFunction: null }, customAsyncValidators: { classPropertyName: "customAsyncValidators", publicName: "customAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, validateMinValueOnMask: { classPropertyName: "validateMinValueOnMask", publicName: "validateMinValueOnMask", isSignal: true, isRequired: false, transformFunction: null }, allowPhoneValidation: { classPropertyName: "allowPhoneValidation", publicName: "allowPhoneValidation", isSignal: true, isRequired: false, transformFunction: null }, validatePassword: { classPropertyName: "validatePassword", publicName: "validatePassword", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickLeftIcon: "onClickLeftIcon", onClickRightIcon: "onClickRightIcon", validatePhoneResult: "validatePhoneResult" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveInputComponent, isStandalone: true, selector: "ngt-reactive-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, innerLeftIcon: { classPropertyName: "innerLeftIcon", publicName: "innerLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, innerLeftIconColor: { classPropertyName: "innerLeftIconColor", publicName: "innerLeftIconColor", isSignal: true, isRequired: false, transformFunction: null }, innerRightIcon: { classPropertyName: "innerRightIcon", publicName: "innerRightIcon", isSignal: true, isRequired: false, transformFunction: null }, innerRightIconColor: { classPropertyName: "innerRightIconColor", publicName: "innerRightIconColor", isSignal: true, isRequired: false, transformFunction: null }, customInnerContentTemplate: { classPropertyName: "customInnerContentTemplate", publicName: "customInnerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, showCharactersLength: { classPropertyName: "showCharactersLength", publicName: "showCharactersLength", isSignal: true, isRequired: false, transformFunction: null }, helperReverseYPosition: { classPropertyName: "helperReverseYPosition", publicName: "helperReverseYPosition", isSignal: true, isRequired: false, transformFunction: null }, helperAutoXReverse: { classPropertyName: "helperAutoXReverse", publicName: "helperAutoXReverse", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, decimalMaskPrecision: { classPropertyName: "decimalMaskPrecision", publicName: "decimalMaskPrecision", 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 }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, roundedInnerIcon: { classPropertyName: "roundedInnerIcon", publicName: "roundedInnerIcon", isSignal: true, isRequired: false, transformFunction: null }, findExistingResource: { classPropertyName: "findExistingResource", publicName: "findExistingResource", isSignal: true, isRequired: false, transformFunction: null }, uniqueResource: { classPropertyName: "uniqueResource", publicName: "uniqueResource", isSignal: true, isRequired: false, transformFunction: null }, passwordableId: { classPropertyName: "passwordableId", publicName: "passwordableId", isSignal: true, isRequired: false, transformFunction: null }, passwordPolicyId: { classPropertyName: "passwordPolicyId", publicName: "passwordPolicyId", isSignal: true, isRequired: false, transformFunction: null }, match: { classPropertyName: "match", publicName: "match", isSignal: true, isRequired: false, transformFunction: null }, customSyncValidators: { classPropertyName: "customSyncValidators", publicName: "customSyncValidators", isSignal: true, isRequired: false, transformFunction: null }, customAsyncValidators: { classPropertyName: "customAsyncValidators", publicName: "customAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, validateMinValueOnMask: { classPropertyName: "validateMinValueOnMask", publicName: "validateMinValueOnMask", isSignal: true, isRequired: false, transformFunction: null }, allowPhoneValidation: { classPropertyName: "allowPhoneValidation", publicName: "allowPhoneValidation", isSignal: true, isRequired: false, transformFunction: null }, validatePassword: { classPropertyName: "validatePassword", publicName: "validatePassword", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClickLeftIcon: "onClickLeftIcon", onClickRightIcon: "onClickRightIcon", validatePhoneResult: "validatePhoneResult", onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtReactiveInputComponent),
             NgtReactiveInputMaskService,
             NgtReactiveInputValidationService,
@@ -9814,6 +9813,8 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
         this.minLength = input();
         this.customSyncValidators = input();
         this.customAsyncValidators = input();
+        /** Outputs */
+        this.onValueChange = output();
         /** Computed Signals */
         this.isShining = computed(() => this.shining() || this.ngtReactiveForm?.shining());
         this.isDisabledByParent = computed(() => this.ngtReactiveForm?.isDisabledState() || this.ngtSection?.isDisabledState() || this.ngtModal?.isDisabledState());
@@ -9866,6 +9867,9 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
                 if (event instanceof TouchedChangeEvent) {
                     this.touched.set(event.touched);
                 }
+                if (event instanceof ValueChangeEvent) {
+                    this.onValueChange.emit(event.value);
+                }
                 this.formControlHasErrors.set(!!this.formControl?.errors);
                 this.formControlIsDirty.set(this.formControl?.dirty);
             }));
@@ -9933,7 +9937,7 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
         return this.textareaElement.nativeElement.value;
     }
     hasChangesBetweenValues() {
-        return this.getNativeValue() !== this.value;
+        return this.getNativeValue() != this.value;
     }
     getRemainingCharacters() {
         if (!this.showCharactersLength() || !this.maxLength()) {
@@ -9962,10 +9966,10 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
         this.listeners = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveTextareaComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtReactiveFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtTranslateService, optional: true }, { token: NgtReactiveTextareaValidationService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveTextareaComponent, isStandalone: true, selector: "ngt-reactive-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, showCharactersLength: { classPropertyName: "showCharactersLength", publicName: "showCharactersLength", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", 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 }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, customSyncValidators: { classPropertyName: "customSyncValidators", publicName: "customSyncValidators", isSignal: true, isRequired: false, transformFunction: null }, customAsyncValidators: { classPropertyName: "customAsyncValidators", publicName: "customAsyncValidators", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveTextareaComponent, isStandalone: true, selector: "ngt-reactive-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, showCharactersLength: { classPropertyName: "showCharactersLength", publicName: "showCharactersLength", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", 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 }, focus: { classPropertyName: "focus", publicName: "focus", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, customSyncValidators: { classPropertyName: "customSyncValidators", publicName: "customSyncValidators", isSignal: true, isRequired: false, transformFunction: null }, customAsyncValidators: { classPropertyName: "customAsyncValidators", publicName: "customAsyncValidators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtReactiveTextareaComponent),
             NgtReactiveTextareaValidationService,
-        ], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (label() && !isShining()) {\n    <label class=\"flex mb-2 {{ ngtStyle.compile(['text', 'font', 'color.text']) }}\">\n        <span class=\"truncate\" [title]=\"label()\">\n            {{ label() }}:\n        </span>\n\n        @if (isRequired()) {\n            <span class=\"text-red-500 font-bold text-md ml-1\">*</span>\n        }\n\n        @if (helpText()) {\n            <ngt-helper [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\" class=\"ml-1\">\n                {{ helpText() }}\n            </ngt-helper>\n        }\n    </label>\n}\n\n<div [class]=\"isShining() ? 'hidden' : 'flex flex-col'\">\n    <textarea [class]=\"textareaClasses()\" autocomplete=\"new-password\" [rows]=\"rows()\" [disabled]=\"isDisabledState()\"\n        [readonly]=\"isReadonly()\" [placeholder]=\"placeholder()\" (input)=\"onNativeChange()\" (blur)=\"onTouched()\"\n        #textareaElement>\n    </textarea>\n\n    @if (showCharactersLength() && remainingCharacters() !== null) {\n        <p class=\"text-xxs mt-1\">\n            {{ getTranslation('ngtTextAreaRemainingCharacters') }}:\n            <span class=\"font-semibold\">{{ remainingCharacters() }}</span>\n        </p>\n    }\n</div>\n\n@if (isShining()) {\n    <div class=\"flex\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n}\n\n<ng-content></ng-content>\n\n<ngt-validation [control]=\"formControl\" [minLength]=\"minLength()\"></ngt-validation>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgtShiningModule }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "ngmodule", type: NgtValidationModule }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (label() && !isShining()) {\n    <label class=\"flex mb-2 {{ ngtStyle.compile(['text', 'font', 'color.text']) }}\">\n        <span class=\"truncate\" [title]=\"label()\">\n            {{ label() }}:\n        </span>\n\n        @if (isRequired()) {\n            <span class=\"text-red-500 font-bold text-md ml-1\">*</span>\n        }\n\n        @if (helpText()) {\n            <ngt-helper [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\" class=\"ml-1\">\n                {{ helpText() }}\n            </ngt-helper>\n        }\n    </label>\n}\n\n<div [class]=\"isShining() ? 'hidden' : 'flex flex-col'\">\n    <textarea [class]=\"textareaClasses()\" autocomplete=\"new-password\" [rows]=\"rows()\" [disabled]=\"isDisabledState()\"\n        [readonly]=\"isReadonly()\" [placeholder]=\"placeholder()\" (input)=\"onNativeChange()\" (blur)=\"onTouched()\"\n        #textareaElement></textarea>\n\n    @if (showCharactersLength() && remainingCharacters() !== null) {\n        <p class=\"text-xxs mt-1\">\n            {{ getTranslation('ngtTextAreaRemainingCharacters') }}:\n            <span class=\"font-semibold\">{{ remainingCharacters() }}</span>\n        </p>\n    }\n</div>\n\n@if (isShining()) {\n    <div class=\"flex\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n}\n\n<ng-content></ng-content>\n\n<ngt-validation [control]=\"formControl\" [minLength]=\"minLength()\"></ngt-validation>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgtShiningModule }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "ngmodule", type: NgtValidationModule }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveTextareaComponent, decorators: [{
             type: Component,
@@ -9978,7 +9982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         NgtShiningModule,
                         NgtValidationModule,
                         NgtHelperComponent,
-                    ], template: "@if (label() && !isShining()) {\n    <label class=\"flex mb-2 {{ ngtStyle.compile(['text', 'font', 'color.text']) }}\">\n        <span class=\"truncate\" [title]=\"label()\">\n            {{ label() }}:\n        </span>\n\n        @if (isRequired()) {\n            <span class=\"text-red-500 font-bold text-md ml-1\">*</span>\n        }\n\n        @if (helpText()) {\n            <ngt-helper [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\" class=\"ml-1\">\n                {{ helpText() }}\n            </ngt-helper>\n        }\n    </label>\n}\n\n<div [class]=\"isShining() ? 'hidden' : 'flex flex-col'\">\n    <textarea [class]=\"textareaClasses()\" autocomplete=\"new-password\" [rows]=\"rows()\" [disabled]=\"isDisabledState()\"\n        [readonly]=\"isReadonly()\" [placeholder]=\"placeholder()\" (input)=\"onNativeChange()\" (blur)=\"onTouched()\"\n        #textareaElement>\n    </textarea>\n\n    @if (showCharactersLength() && remainingCharacters() !== null) {\n        <p class=\"text-xxs mt-1\">\n            {{ getTranslation('ngtTextAreaRemainingCharacters') }}:\n            <span class=\"font-semibold\">{{ remainingCharacters() }}</span>\n        </p>\n    }\n</div>\n\n@if (isShining()) {\n    <div class=\"flex\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n}\n\n<ng-content></ng-content>\n\n<ngt-validation [control]=\"formControl\" [minLength]=\"minLength()\"></ngt-validation>" }]
+                    ], template: "@if (label() && !isShining()) {\n    <label class=\"flex mb-2 {{ ngtStyle.compile(['text', 'font', 'color.text']) }}\">\n        <span class=\"truncate\" [title]=\"label()\">\n            {{ label() }}:\n        </span>\n\n        @if (isRequired()) {\n            <span class=\"text-red-500 font-bold text-md ml-1\">*</span>\n        }\n\n        @if (helpText()) {\n            <ngt-helper [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\" class=\"ml-1\">\n                {{ helpText() }}\n            </ngt-helper>\n        }\n    </label>\n}\n\n<div [class]=\"isShining() ? 'hidden' : 'flex flex-col'\">\n    <textarea [class]=\"textareaClasses()\" autocomplete=\"new-password\" [rows]=\"rows()\" [disabled]=\"isDisabledState()\"\n        [readonly]=\"isReadonly()\" [placeholder]=\"placeholder()\" (input)=\"onNativeChange()\" (blur)=\"onTouched()\"\n        #textareaElement></textarea>\n\n    @if (showCharactersLength() && remainingCharacters() !== null) {\n        <p class=\"text-xxs mt-1\">\n            {{ getTranslation('ngtTextAreaRemainingCharacters') }}:\n            <span class=\"font-semibold\">{{ remainingCharacters() }}</span>\n        </p>\n    }\n</div>\n\n@if (isShining()) {\n    <div class=\"flex\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n}\n\n<ng-content></ng-content>\n\n<ngt-validation [control]=\"formControl\" [minLength]=\"minLength()\"></ngt-validation>" }]
         }], ctorParameters: () => [{ type: NgtStylizableDirective, decorators: [{
                     type: Optional
                 }, {
@@ -10452,41 +10456,43 @@ class NgtReactiveSelectComponent extends NgtControlValueAccessor {
         this.helperReverseYPosition = input(false);
         this.helperAutoXReverse = input(true);
         /** Behavior Inputs */
+        this.remoteResource = input();
+        this.items = input([]);
+        this.bindLabel = input('name');
+        this.bindValue = input();
+        this.inputAttrs = input();
+        this.groupBy = input(null);
+        this.tabIndex = input();
+        this.groupValue = input();
+        this.trackByFn = input();
+        this.isAllowedToRemoveFn = input();
+        this.sortSelectedItemsFn = input();
         this.autoLoad = input(false);
         this.allowCreate = input(false);
         this.allowOriginalItemsUnselect = input(true);
         this.isDisabled = input(false);
         this.isReadonly = input(false);
-        this.remoteResource = input();
         this.hideSelected = input(false);
-        this.bindLabel = input('name');
-        this.bindValue = input();
-        this.items = input([]);
-        this.inputAttrs = input();
         this.closeOnSelect = input(true);
         this.clearable = input(true);
-        this.groupBy = input(null);
         this.multiple = input(false);
         this.searchable = input(true);
         this.clearSearchOnAdd = input(true);
         this.virtualScroll = input(true);
-        this.tabIndex = input();
         this.guessCompareWith = input(true);
         this.compareWith = input((a, b) => a === b);
         this.autoSelectUniqueOption = input(false);
-        this.groupValue = input();
-        this.trackByFn = input();
-        this.sortSelectedItemsFn = input();
-        this.isAllowedToRemoveFn = input();
+        this.valueAsArray = input(false);
         /** Validation Inputs */
         this.maxSelectedItems = input();
-        this.isRequired = input(false);
         this.customSyncValidators = input();
+        this.isRequired = input(false);
         /** Outputs */
         this.onLoadRemoteResource = output();
         this.onSelectedItemRemove = output();
         this.onClear = output();
         this.onClose = output();
+        this.onValueChange = output();
         /** Computed Signals */
         this.isShining = computed(() => this.shining() || this.ngtReactForm?.shining() || this.stateService.shining());
         this.isLoading = computed(() => this.loading() || this.stateService.loading());
@@ -10519,6 +10525,9 @@ class NgtReactiveSelectComponent extends NgtControlValueAccessor {
                 if (event instanceof TouchedChangeEvent) {
                     this.touched.set(event.touched);
                 }
+                if (event instanceof ValueChangeEvent) {
+                    this.onValueChange.emit(event.value);
+                }
                 this.stateService.updateFormControlState(this.formControl);
             }));
         }
@@ -10556,16 +10565,18 @@ class NgtReactiveSelectComponent extends NgtControlValueAccessor {
     onNativeChange(value) {
         if (this.hasChangesBetweenValues(this.value, value)) {
             value = this.sortSelectedItems(value);
+            if (this.valueAsArray() && !Array.isArray(value)) {
+                value = [value];
+            }
             this.nativeValue = value;
             this.value = value;
         }
     }
     change(value) {
-        if (this.formControl
-            && this.hasChangesBetweenValues(value, this.formControl.value)) {
-            this.formControl.setValue(value);
-        }
         if (this.hasChangesBetweenValues(value, this.nativeValue)) {
+            if (this.valueAsArray() && !Array.isArray(value)) {
+                value = [value];
+            }
             this.nativeValue = this.sortSelectedItems(value);
             this.changeDetector.detectChanges();
             this.ngSelectComponent.writeValue(this.nativeValue);
@@ -10749,7 +10760,7 @@ class NgtReactiveSelectComponent extends NgtControlValueAccessor {
         return this.ngSelectComponent.element.parentElement.parentElement.parentElement.title;
     }
     hasChangesBetweenValues(a, b) {
-        return JSON.stringify(a) !== JSON.stringify(b);
+        return JSON.stringify(a ?? null) !== JSON.stringify(b ?? null);
     }
     hadPreviousSelection(item) {
         const compareWithFn = this.getCompareWith();
@@ -10763,7 +10774,7 @@ class NgtReactiveSelectComponent extends NgtControlValueAccessor {
         this.subscriptions = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveSelectComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtTranslateService, optional: true }, { token: NgtReactiveFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtReactiveSelectValidationService }, { token: NgtReactiveSelectSearchService }, { token: NgtReactiveSelectItemsService }, { token: NgtReactiveSelectDropdownService }, { token: NgtReactiveSelectTagManagerService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: NgtReactiveSelectStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveSelectComponent, isStandalone: true, selector: "ngt-reactive-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: true, isRequired: false, transformFunction: null }, labelIconColor: { classPropertyName: "labelIconColor", publicName: "labelIconColor", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, clearAllTooltip: { classPropertyName: "clearAllTooltip", publicName: "clearAllTooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, createText: { classPropertyName: "createText", publicName: "createText", isSignal: true, isRequired: false, transformFunction: null }, labelForId: { classPropertyName: "labelForId", publicName: "labelForId", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelMinHeight: { classPropertyName: "dropdownPanelMinHeight", publicName: "dropdownPanelMinHeight", isSignal: true, isRequired: false, transformFunction: null }, helperReverseYPosition: { classPropertyName: "helperReverseYPosition", publicName: "helperReverseYPosition", isSignal: true, isRequired: false, transformFunction: null }, helperAutoXReverse: { classPropertyName: "helperAutoXReverse", publicName: "helperAutoXReverse", isSignal: true, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, allowOriginalItemsUnselect: { classPropertyName: "allowOriginalItemsUnselect", publicName: "allowOriginalItemsUnselect", 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 }, remoteResource: { classPropertyName: "remoteResource", publicName: "remoteResource", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnAdd: { classPropertyName: "clearSearchOnAdd", publicName: "clearSearchOnAdd", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, guessCompareWith: { classPropertyName: "guessCompareWith", publicName: "guessCompareWith", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, autoSelectUniqueOption: { classPropertyName: "autoSelectUniqueOption", publicName: "autoSelectUniqueOption", isSignal: true, isRequired: false, transformFunction: null }, groupValue: { classPropertyName: "groupValue", publicName: "groupValue", isSignal: true, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, sortSelectedItemsFn: { classPropertyName: "sortSelectedItemsFn", publicName: "sortSelectedItemsFn", isSignal: true, isRequired: false, transformFunction: null }, isAllowedToRemoveFn: { classPropertyName: "isAllowedToRemoveFn", publicName: "isAllowedToRemoveFn", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, customSyncValidators: { classPropertyName: "customSyncValidators", publicName: "customSyncValidators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLoadRemoteResource: "onLoadRemoteResource", onSelectedItemRemove: "onSelectedItemRemove", onClear: "onClear", onClose: "onClose" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveSelectComponent, isStandalone: true, selector: "ngt-reactive-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: true, isRequired: false, transformFunction: null }, labelIconColor: { classPropertyName: "labelIconColor", publicName: "labelIconColor", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, clearAllTooltip: { classPropertyName: "clearAllTooltip", publicName: "clearAllTooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, createText: { classPropertyName: "createText", publicName: "createText", isSignal: true, isRequired: false, transformFunction: null }, labelForId: { classPropertyName: "labelForId", publicName: "labelForId", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelMinHeight: { classPropertyName: "dropdownPanelMinHeight", publicName: "dropdownPanelMinHeight", isSignal: true, isRequired: false, transformFunction: null }, helperReverseYPosition: { classPropertyName: "helperReverseYPosition", publicName: "helperReverseYPosition", isSignal: true, isRequired: false, transformFunction: null }, helperAutoXReverse: { classPropertyName: "helperAutoXReverse", publicName: "helperAutoXReverse", isSignal: true, isRequired: false, transformFunction: null }, remoteResource: { classPropertyName: "remoteResource", publicName: "remoteResource", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, inputAttrs: { classPropertyName: "inputAttrs", publicName: "inputAttrs", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, groupValue: { classPropertyName: "groupValue", publicName: "groupValue", isSignal: true, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, isAllowedToRemoveFn: { classPropertyName: "isAllowedToRemoveFn", publicName: "isAllowedToRemoveFn", isSignal: true, isRequired: false, transformFunction: null }, sortSelectedItemsFn: { classPropertyName: "sortSelectedItemsFn", publicName: "sortSelectedItemsFn", isSignal: true, isRequired: false, transformFunction: null }, autoLoad: { classPropertyName: "autoLoad", publicName: "autoLoad", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, allowOriginalItemsUnselect: { classPropertyName: "allowOriginalItemsUnselect", publicName: "allowOriginalItemsUnselect", 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 }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnAdd: { classPropertyName: "clearSearchOnAdd", publicName: "clearSearchOnAdd", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, guessCompareWith: { classPropertyName: "guessCompareWith", publicName: "guessCompareWith", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, autoSelectUniqueOption: { classPropertyName: "autoSelectUniqueOption", publicName: "autoSelectUniqueOption", isSignal: true, isRequired: false, transformFunction: null }, valueAsArray: { classPropertyName: "valueAsArray", publicName: "valueAsArray", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, customSyncValidators: { classPropertyName: "customSyncValidators", publicName: "customSyncValidators", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLoadRemoteResource: "onLoadRemoteResource", onSelectedItemRemove: "onSelectedItemRemove", onClear: "onClear", onClose: "onClose", onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtReactiveSelectComponent),
             NgtReactiveSelectValidationService,
             NgtReactiveSelectSearchService,
@@ -10828,6 +10839,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: [NgtReactiveSelectHeaderTemplate, { read: TemplateRef }]
             }] } });
 
+class NgtReactiveSelectModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveSelectModule, imports: [NgtReactiveSelectComponent,
+            NgtReactiveSelectOptionTemplate,
+            NgtReactiveSelectOptionSelectedTemplate,
+            NgtReactiveSelectHeaderTemplate], exports: [NgtReactiveSelectComponent,
+            NgtReactiveSelectOptionTemplate,
+            NgtReactiveSelectOptionSelectedTemplate,
+            NgtReactiveSelectHeaderTemplate] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveSelectModule, imports: [NgtReactiveSelectComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        NgtReactiveSelectComponent,
+                        NgtReactiveSelectOptionTemplate,
+                        NgtReactiveSelectOptionSelectedTemplate,
+                        NgtReactiveSelectHeaderTemplate,
+                    ],
+                    exports: [
+                        NgtReactiveSelectComponent,
+                        NgtReactiveSelectOptionTemplate,
+                        NgtReactiveSelectOptionSelectedTemplate,
+                        NgtReactiveSelectHeaderTemplate,
+                    ],
+                }]
+        }] });
+
 class NgtReactiveDateFormatterService {
     formatToDisplay(value, enableTime, dateFormat, placeholder) {
         if (!value) {
@@ -10957,6 +10997,8 @@ class NgtReactiveDateComponent extends NgtControlValueAccessor {
         this.isReadonly = input(false);
         /** Validation Inputs */
         this.isRequired = input(false);
+        /** Outputs */
+        this.onValueChange = output();
         /** Computed Signals */
         this.isShining = computed(() => this.shining() || this.ngtForm?.shining());
         this.isDisabledByParent = computed(() => this.ngtForm?.isDisabledState() || this.ngtSection?.isDisabledState() || this.ngtModal?.isDisabledState());
@@ -11089,6 +11131,9 @@ class NgtReactiveDateComponent extends NgtControlValueAccessor {
                 if (event instanceof TouchedChangeEvent) {
                     this.touched.set(event.touched);
                 }
+                if (event instanceof ValueChangeEvent) {
+                    this.onValueChange.emit(event.value);
+                }
                 this.formControlHasErrors.set(!!this.formControl?.errors);
                 this.formControlIsDirty.set(this.formControl?.dirty);
             }));
@@ -11179,7 +11224,7 @@ class NgtReactiveDateComponent extends NgtControlValueAccessor {
         this.subscriptions = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveDateComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtReactiveFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtReactiveDateFormatterService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveDateComponent, isStandalone: true, selector: "ngt-reactive-date", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, internalDateFormat: { classPropertyName: "internalDateFormat", publicName: "internalDateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, helperReverseYPosition: { classPropertyName: "helperReverseYPosition", publicName: "helperReverseYPosition", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, minuteIncrement: { classPropertyName: "minuteIncrement", publicName: "minuteIncrement", isSignal: true, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowInput: { classPropertyName: "allowInput", publicName: "allowInput", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, enableTime: { classPropertyName: "enableTime", publicName: "enableTime", isSignal: true, isRequired: false, transformFunction: null }, time_24hr: { classPropertyName: "time_24hr", publicName: "time_24hr", isSignal: true, isRequired: false, transformFunction: null }, noCalendar: { classPropertyName: "noCalendar", publicName: "noCalendar", 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 }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveDateComponent, isStandalone: true, selector: "ngt-reactive-date", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, internalDateFormat: { classPropertyName: "internalDateFormat", publicName: "internalDateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, helperReverseYPosition: { classPropertyName: "helperReverseYPosition", publicName: "helperReverseYPosition", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, minuteIncrement: { classPropertyName: "minuteIncrement", publicName: "minuteIncrement", isSignal: true, isRequired: false, transformFunction: null }, defaultDate: { classPropertyName: "defaultDate", publicName: "defaultDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowInput: { classPropertyName: "allowInput", publicName: "allowInput", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, enableTime: { classPropertyName: "enableTime", publicName: "enableTime", isSignal: true, isRequired: false, transformFunction: null }, time_24hr: { classPropertyName: "time_24hr", publicName: "time_24hr", isSignal: true, isRequired: false, transformFunction: null }, noCalendar: { classPropertyName: "noCalendar", publicName: "noCalendar", 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 }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtReactiveDateComponent),
             NgtReactiveDateFormatterService,
         ], viewQueries: [{ propertyName: "evDatePicker", first: true, predicate: ["evDatePicker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (label() && !isShining()) {\n    <label class=\"flex mb-2 {{ ngtStyle.compile(['text', 'fontCase']) }}\">\n        <span class=\"truncate\" [title]=\"label()\">\n            {{ label() }}:\n        </span>\n\n        @if (isRequired()) {\n            <span class=\"text-red-500 font-bold text-xxs ml-1\">*</span>\n        }\n\n        @if (helpText()) {\n            <ngt-helper class=\"ml-1\" [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\"\n                [helperReverseYPosition]=\"helperReverseYPosition()\">\n                {{ helpText() }}\n            </ngt-helper>\n        }\n    </label>\n}\n\n<div [hidden]=\"isShining() || isReadonlyState()\" class=\"relative\">\n    <div [class]=\"containerClasses()\">\n        <ev-date-picker class=\"block h-full w-full\" [config]=\"dateConfig()\" [placeholder]=\"placeholder()\" #evDatePicker>\n        </ev-date-picker>\n\n        @if (shouldShowClearButton()) {\n            <div class=\"flex h-full absolute items-center right-0 top-0 w-auto cursor-pointer\"\n                [class.mr-5]=\"showCalendarIcon()\" [class.mr-2]=\"!showCalendarIcon()\" (click)=\"clearInput($event, true)\">\n                <svg class=\"fill-current text-red-400 w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                        d=\"M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z\" />\n                </svg>\n            </div>\n        }\n\n        @if (showCalendarIcon()) {\n            <div class=\"flex h-full absolute items-center right-0 top-0 w-auto cursor-pointer mr-2\">\n                <svg class=\"fill-current text-gray-600 w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                        d=\"M19,4H17V3a1,1,0,0,0-2,0V4H9V3A1,1,0,0,0,7,3V4H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm1,15a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V12H20Zm0-9H4V7A1,1,0,0,1,5,6H7V7A1,1,0,0,0,9,7V6h6V7a1,1,0,0,0,2,0V6h2a1,1,0,0,1,1,1Z\" />\n                </svg>\n            </div>\n        }\n    </div>\n</div>\n\n@if (isShining()) {\n    <div class=\"flex\">\n        <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n    </div>\n}\n\n@if (isReadonlyState()) {\n    <div class=\"w-full text-xs px-4 rounded appearance-none flex items-center border border-gray-400 {{ ngtStyle.compile(['h']) }}\"\n        [class.disabledDiv]=\"isDisabledState()\">\n        {{ formattedDisplayValue() }}\n    </div>\n}\n\n<ng-content></ng-content>\n\n<ngt-validation [control]=\"formControl\"></ngt-validation>", styles: [".flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:auto;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,.08);box-shadow:1px 0 #e6e6e6,-1px 0 #e6e6e6,0 1px #e6e6e6,0 -1px #e6e6e6,0 3px 13px #00000014}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown .3s cubic-bezier(.23,1,.32,1);animation:fpFadeInDown .3s cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none!important;box-shadow:none!important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 #e6e6e6,5px 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:30px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:\"\";height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.rightMost:after{left:auto;right:22px}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:#000000e6;fill:#000000e6;height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:#000000e6;fill:#000000e6}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:#0000001a}.numInputWrapper span:active{background:#0003}.numInputWrapper span:after{display:block;content:\"\";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:#00000080}.numInputWrapper:hover{background:#0000000d}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:#0000000d}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\\fffd;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:#000000e6}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:#000000e6}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:#00000080;background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:#0000000d}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:#0000008a;line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 #e6e6e6,5px 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:#3939394d;background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:#3939391a}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 #569ff7,5px 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:#3939394d;background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:30px;line-height:30px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-top:1px solid #e6e6e6}.flatpickr-time:after{content:\"\";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:30px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:12px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:700}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:700;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes fpFadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.border-error{border:solid #c53030 1px;background-color:unset!important;border-radius:.25rem}.border-normal{border:solid #cbd5e0 1px;background-color:unset!important;border-radius:.25rem}.ng2-flatpickr-input:focus{outline:none}.ng2-flatpickr-input{border:0;width:100%;height:100%;padding-left:.8rem;font-size:.75rem}.ng2-flatpickr-input-container{height:100%!important}.disabledDiv{background-color:#fafafa}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: EvDatePickerModule }, { kind: "component", type: i7.EvDatePickerComponent, selector: "ev-date-picker", inputs: ["config", "placeholder", "addClass", "setDate", "tabindex", "hideButton"] }, { kind: "ngmodule", type: NgtShiningModule }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "ngmodule", type: NgtValidationModule }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -11244,6 +11289,8 @@ class NgtReactiveCheckboxComponent extends NgtControlValueAccessor {
         this.mode = input(NgtReactiveCheckboxMode.DEFAULT);
         this.isDisabled = input(false);
         this.isClickDisabled = input(false);
+        /** Outputs */
+        this.onValueChange = output();
         /** Computed Signals */
         this.isDisabledByParent = computed(() => this.ngtForm?.isDisabledState() || this.ngtSection?.isDisabledState() || this.ngtModal?.isDisabledState());
         this.isDisabledState = computed(() => this.isDisabled() || this.isDisabledByParent());
@@ -11266,7 +11313,7 @@ class NgtReactiveCheckboxComponent extends NgtControlValueAccessor {
     onNativeChange() {
         if (this.hasChangeBetweenValues()) {
             this.value = this.getNativeValue();
-            this.formControl?.setValue(this.value);
+            this.onValueChange.emit(this.value);
         }
     }
     setupNgtStylizable() {
@@ -11295,7 +11342,7 @@ class NgtReactiveCheckboxComponent extends NgtControlValueAccessor {
         return this.getNativeValue() !== this.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveCheckboxComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtReactiveFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveCheckboxComponent, isStandalone: true, selector: "ngt-reactive-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helperAutoXReverse: { classPropertyName: "helperAutoXReverse", publicName: "helperAutoXReverse", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isClickDisabled: { classPropertyName: "isClickDisabled", publicName: "isClickDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveCheckboxComponent, isStandalone: true, selector: "ngt-reactive-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helperAutoXReverse: { classPropertyName: "helperAutoXReverse", publicName: "helperAutoXReverse", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isClickDisabled: { classPropertyName: "isClickDisabled", publicName: "isClickDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtReactiveCheckboxComponent)
         ], viewQueries: [{ propertyName: "checkboxElement", first: true, predicate: ["checkboxElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<label class=\"flex items-center {{ isDisabledState() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer' }}\"\n    [class.flex-col]='isToggleMode()' style=\"max-width: max-content;\">\n    <input class=\"hidden\" type=\"checkbox\" [disabled]=\"isDisabledState() || isClickDisabled()\"\n        (change)=\"onNativeChange()\" #checkboxElement>\n\n    @if (isToggleMode() && label()) {\n        <span class=\"flex\">\n            <span class=\"{{ ngtStyle.compile(['text', 'fontCase']) }} mb-2\">{{ label() }}</span>\n\n            @if (helpText()) {\n                <ngt-helper [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\" [autoXReverse]=\"helperAutoXReverse()\"\n                    class=\"ml-1\">\n                    {{ helpText() }}\n                </ngt-helper>\n            }\n        </span>\n    }\n\n    @if (isDefaultMode()) {\n        <div style=\"transition: background-color .2s ease-out\" class=\"{{ currentValue() ? ngtStyle.compile(['color.bg']) : 'bg-white' }}  {{ ngtStyle.compile(['h', 'w']) }}\n                        shadow rounded border border-gray-400 {{ !isShining() ? 'flex justify-center' : 'hidden' }}\">\n            <svg class=\"fill-current self-center text-white pointer-events-none\" xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\">\n                <path d=\"M0 11l2-2 5 5L18 3l2 2L7 18z\" />\n            </svg>\n        </div>\n    }\n\n    @if (isRadioMode()) {\n        <div style=\"transition: background-color .2s ease-out\"\n            class=\"{{ currentValue() ? ngtStyle.compile(['color.border', 'color.text']) : 'border-gray-500' }}\n                        shadow w-6 h-6 rounded-full border-2 border-gray-400 {{ !isShining() ? 'flex justify-center' : 'hidden' }}\">\n            @if (currentValue()) {\n                <svg class=\"fill-current self-center h-3\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 29.107 29.107\">\n                    <path\n                        d=\"M14.554 0C6.561 0 0 6.562 0 14.552c0 7.996 6.561 14.555 14.554 14.555 7.996 0 14.553-6.559 14.553-14.555C29.106 6.562 22.55 0 14.554 0z\" />\n                </svg>\n            }\n        </div>\n    }\n\n    @if (isToggleMode() || isSideToggleMode()) {\n        <div class=\"shadow w-14 h-7 rounded-full border border-gray-400 {{ isShining() ? 'hidden' : 'flex' }}\"\n            [class.justify-end]=\"currentValue()\" style=\"padding: 1px;\">\n            @if (currentValue()) {\n                <div class=\"flex text-sm text-white {{ ngtStyle.compile(['color.bg']) }} pointer-events-none rounded-full px-1.5 py-2\"\n                    @slideLeftToRight>\n                    <svg class=\"fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n                        <path d=\"M0 11l2-2 5 5L18 3l2 2L7 18z\" />\n                    </svg>\n                </div>\n            }\n\n            @if (!currentValue()) {\n                <div class=\"flex text-xl text-white bg-gray-300 pointer-events-none rounded-full px-1 py-3\" @slideRightToLeft>\n                    <svg class=\"fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                        <path class=\"heroicon-ui\"\n                            d=\"M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z\" />\n                    </svg>\n                </div>\n            }\n        </div>\n    }\n\n    @if (label() && !isShining() && !isToggleMode()) {\n        <span class=\"{{ ngtStyle.compile(['text', 'fontCase']) }} ml-2\">{{ label() }}</span>\n\n        @if (helpText()) {\n            <ngt-helper [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\" [autoXReverse]=\"helperAutoXReverse()\"\n                class=\"ml-1\">\n                {{ helpText() }}\n            </ngt-helper>\n        }\n    }\n</label>\n\n@if (isShining()) {\n    <div class=\"flex\">\n        <ngt-shining class=\"w-16 h-12\"></ngt-shining>\n    </div>\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgtShiningModule }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], animations: [
             trigger('slideLeftToRight', [
@@ -11392,8 +11439,11 @@ class NgtReactiveRadioButtonComponent extends NgtControlValueAccessor {
         this.helperReverseYPosition = input(false);
         this.helperAutoXReverse = input(true);
         /** Behavior Inputs */
+        this.id = input();
         this.isSelectable = input(true);
         this.isDisabled = input(false);
+        /** Outputs */
+        this.onValueChange = output();
         /** Computed Signals */
         this.isShining = computed(() => this.shining() || this.ngtForm?.shining());
         this.isDisabledByParent = computed(() => this.ngtForm?.isDisabledState() || this.ngtSection?.isDisabledState() || this.ngtModal?.isDisabledState());
@@ -11427,6 +11477,7 @@ class NgtReactiveRadioButtonComponent extends NgtControlValueAccessor {
         }
     }
     change(value) {
+        this.onValueChange.emit(value);
         if (this.getNativeValue() !== value) {
             this.setNativeValue(value);
         }
@@ -11501,7 +11552,7 @@ class NgtReactiveRadioButtonComponent extends NgtControlValueAccessor {
         this.subscriptions = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveRadioButtonComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: NgtReactiveFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtReactiveRadioButtonContainerComponent, optional: true, skipSelf: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveRadioButtonComponent, isStandalone: true, selector: "ngt-reactive-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, selectedHexColor: { classPropertyName: "selectedHexColor", publicName: "selectedHexColor", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helperReverseYPosition: { classPropertyName: "helperReverseYPosition", publicName: "helperReverseYPosition", isSignal: true, isRequired: false, transformFunction: null }, helperAutoXReverse: { classPropertyName: "helperAutoXReverse", publicName: "helperAutoXReverse", isSignal: true, isRequired: false, transformFunction: null }, isSelectable: { classPropertyName: "isSelectable", publicName: "isSelectable", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveRadioButtonComponent, isStandalone: true, selector: "ngt-reactive-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, selectedHexColor: { classPropertyName: "selectedHexColor", publicName: "selectedHexColor", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helperReverseYPosition: { classPropertyName: "helperReverseYPosition", publicName: "helperReverseYPosition", isSignal: true, isRequired: false, transformFunction: null }, helperAutoXReverse: { classPropertyName: "helperAutoXReverse", publicName: "helperAutoXReverse", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isSelectable: { classPropertyName: "isSelectable", publicName: "isSelectable", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtReactiveRadioButtonComponent),
         ], viewQueries: [{ propertyName: "radioBtnElement", first: true, predicate: ["radioBtnElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<label [class]=\"labelClasses()\">\n    <input class=\"hidden\" type=\"radio\" [disabled]='isDisabledState() || !isSelectable()' (change)=\"onNativeChange()\"\n        #radioBtnElement>\n\n    <div [class]=\"radioClasses()\" [style]=\"radioStyle()\">\n        <div style=\"width: 14px; height: 14px;\">\n            @if (currentValue()) {\n                <svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 29.107 29.107\">\n                    <path\n                        d=\"M14.554 0C6.561 0 0 6.562 0 14.552c0 7.996 6.561 14.555 14.554 14.555 7.996 0 14.553-6.559 14.553-14.555C29.106 6.562 22.55 0 14.554 0z\" />\n                </svg>\n            }\n        </div>\n    </div>\n\n    @if (label() && !isShining()) {\n        <span class=\"text-xs ml-2\" [class.line-through]='!isSelectable()'>\n            {{ label() }}\n        </span>\n    }\n\n    @if (helpText()) {\n        <ngt-helper class=\"ml-1\" [helpTitle]=\"helpTitle()\" [iconColor]=\"helpTextColor()\"\n            [autoXReverse]=\"helperAutoXReverse()\" [helperReverseYPosition]=\"helperReverseYPosition()\">\n            {{ helpText() }}\n        </ngt-helper>\n    }\n</label>\n\n@if (isShining()) {\n    <div class=\"flex\">\n        <ngt-shining class=\"w-16 h-12\"></ngt-shining>\n    </div>\n}", styles: ["label{margin-bottom:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgtShiningModule }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "ngmodule", type: NgtSvgModule }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -11830,6 +11881,7 @@ class NgtReactiveDropzoneComponent extends NgtControlValueAccessor {
         this.onFileUploadInit = output();
         this.onFileUploaded = output();
         this.onFilePreviewLoaded = output();
+        this.onValueChange = output();
         /** Computed Signals */
         this.isDisabledByParent = computed(() => this.ngtForm?.isDisabledState() || this.ngtSection?.isDisabledState() || this.ngtModal?.isDisabledState());
         this.isDisabledState = computed(() => this.isDisabled() || this.isDisabledByParent());
@@ -11917,6 +11969,7 @@ class NgtReactiveDropzoneComponent extends NgtControlValueAccessor {
         if (this.hasChangesBetweenValues(this.value, this.stateService.nativeValue())) {
             this.onTouched();
             this.value = this.stateService.nativeValue();
+            this.onValueChange.emit(value);
         }
     }
     change(value) {
@@ -11925,10 +11978,6 @@ class NgtReactiveDropzoneComponent extends NgtControlValueAccessor {
             if (this.hasChangesBetweenValues(this.value, this.stateService.nativeValue())) {
                 this.onNativeChange(value);
             }
-            if (this.formControl
-                && this.hasChangesBetweenValues(this.value, this.formControl.value)) {
-                this.formControl.setValue(value);
-            }
             if (this.stateService.componentReady()) {
                 this.loadFilePreview(value);
             }
@@ -12035,10 +12084,10 @@ class NgtReactiveDropzoneComponent extends NgtControlValueAccessor {
         }
     }
     hasChangesBetweenValues(a, b) {
-        return JSON.stringify(a) !== JSON.stringify(b);
+        return JSON.stringify(a ?? null) !== JSON.stringify(b ?? null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveDropzoneComponent, deps: [{ token: NgtReactiveFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: NgtReactiveDropzoneValidationService }, { token: NgtReactiveDropzoneFileService }, { token: NgtReactiveDropzoneErrorService }, { token: NgtReactiveDropzoneViewerService }, { token: NgtReactiveDropzoneStateService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveDropzoneComponent, isStandalone: true, selector: "ngt-reactive-dropzone", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, multipleSelection: { classPropertyName: "multipleSelection", publicName: "multipleSelection", isSignal: true, isRequired: false, transformFunction: null }, itemsLimit: { classPropertyName: "itemsLimit", publicName: "itemsLimit", isSignal: true, isRequired: false, transformFunction: null }, showFileName: { classPropertyName: "showFileName", publicName: "showFileName", isSignal: true, isRequired: false, transformFunction: null }, disableClick: { classPropertyName: "disableClick", publicName: "disableClick", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, canDownloadFile: { classPropertyName: "canDownloadFile", publicName: "canDownloadFile", isSignal: true, isRequired: false, transformFunction: null }, verticalExpandable: { classPropertyName: "verticalExpandable", publicName: "verticalExpandable", isSignal: true, isRequired: false, transformFunction: null }, hideNgxDropzone: { classPropertyName: "hideNgxDropzone", publicName: "hideNgxDropzone", isSignal: true, isRequired: false, transformFunction: null }, acceptedFiles: { classPropertyName: "acceptedFiles", publicName: "acceptedFiles", isSignal: true, isRequired: false, transformFunction: null }, unacceptedFiles: { classPropertyName: "unacceptedFiles", publicName: "unacceptedFiles", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, previewType: { classPropertyName: "previewType", publicName: "previewType", isSignal: true, isRequired: false, transformFunction: null }, remoteResource: { classPropertyName: "remoteResource", publicName: "remoteResource", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, customSyncValidators: { classPropertyName: "customSyncValidators", publicName: "customSyncValidators", isSignal: true, isRequired: false, transformFunction: null }, customAsyncValidators: { classPropertyName: "customAsyncValidators", publicName: "customAsyncValidators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFileSelected: "onFileSelected", onFileSelectError: "onFileSelectError", onFileUploadFail: "onFileUploadFail", onFileRemoved: "onFileRemoved", onFileUploadInit: "onFileUploadInit", onFileUploaded: "onFileUploaded", onFilePreviewLoaded: "onFilePreviewLoaded" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveDropzoneComponent, isStandalone: true, selector: "ngt-reactive-dropzone", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helpTextColor: { classPropertyName: "helpTextColor", publicName: "helpTextColor", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null }, multipleSelection: { classPropertyName: "multipleSelection", publicName: "multipleSelection", isSignal: true, isRequired: false, transformFunction: null }, itemsLimit: { classPropertyName: "itemsLimit", publicName: "itemsLimit", isSignal: true, isRequired: false, transformFunction: null }, showFileName: { classPropertyName: "showFileName", publicName: "showFileName", isSignal: true, isRequired: false, transformFunction: null }, disableClick: { classPropertyName: "disableClick", publicName: "disableClick", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, canDownloadFile: { classPropertyName: "canDownloadFile", publicName: "canDownloadFile", isSignal: true, isRequired: false, transformFunction: null }, verticalExpandable: { classPropertyName: "verticalExpandable", publicName: "verticalExpandable", isSignal: true, isRequired: false, transformFunction: null }, hideNgxDropzone: { classPropertyName: "hideNgxDropzone", publicName: "hideNgxDropzone", isSignal: true, isRequired: false, transformFunction: null }, acceptedFiles: { classPropertyName: "acceptedFiles", publicName: "acceptedFiles", isSignal: true, isRequired: false, transformFunction: null }, unacceptedFiles: { classPropertyName: "unacceptedFiles", publicName: "unacceptedFiles", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, previewType: { classPropertyName: "previewType", publicName: "previewType", isSignal: true, isRequired: false, transformFunction: null }, remoteResource: { classPropertyName: "remoteResource", publicName: "remoteResource", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, customSyncValidators: { classPropertyName: "customSyncValidators", publicName: "customSyncValidators", isSignal: true, isRequired: false, transformFunction: null }, customAsyncValidators: { classPropertyName: "customAsyncValidators", publicName: "customAsyncValidators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFileSelected: "onFileSelected", onFileSelectError: "onFileSelectError", onFileUploadFail: "onFileUploadFail", onFileRemoved: "onFileRemoved", onFileUploadInit: "onFileUploadInit", onFileUploaded: "onFileUploaded", onFilePreviewLoaded: "onFilePreviewLoaded", onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtReactiveDropzoneComponent),
             NgtReactiveDropzoneValidationService,
             NgtReactiveDropzoneFileService,
@@ -12113,6 +12162,8 @@ class NgtReactiveSliderComponent extends NgtControlValueAccessor {
         this.min = input(0);
         this.max = input(100);
         this.step = input(1);
+        /** Outputs */
+        this.onValueChange = output();
         /** Computed Signals */
         this.isShining = computed(() => this.shining() || this.ngtForm?.shining());
         this.isDisabledByParent = computed(() => this.ngtForm?.isDisabledState() || this.ngtSection?.isDisabledState() || this.ngtModal?.isDisabledState());
@@ -12128,6 +12179,7 @@ class NgtReactiveSliderComponent extends NgtControlValueAccessor {
         }
     }
     change(value) {
+        this.onValueChange.emit(value);
         if (this.hasChangesBetweenValues()) {
             this.formControl?.setValue(value ?? this.min());
             this.setNativeValue(value ?? this.min());
@@ -12153,7 +12205,7 @@ class NgtReactiveSliderComponent extends NgtControlValueAccessor {
         return this.getNativeValue() !== this.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveSliderComponent, deps: [{ token: NgtReactiveFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveSliderComponent, isStandalone: true, selector: "ngt-reactive-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, showPercentageSymbol: { classPropertyName: "showPercentageSymbol", publicName: "showPercentageSymbol", isSignal: true, isRequired: false, transformFunction: null }, colorByValue: { classPropertyName: "colorByValue", publicName: "colorByValue", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgtReactiveSliderComponent, isStandalone: true, selector: "ngt-reactive-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, shining: { classPropertyName: "shining", publicName: "shining", isSignal: true, isRequired: false, transformFunction: null }, showPercentageSymbol: { classPropertyName: "showPercentageSymbol", publicName: "showPercentageSymbol", isSignal: true, isRequired: false, transformFunction: null }, colorByValue: { classPropertyName: "colorByValue", publicName: "colorByValue", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, providers: [
             NgtValueAccessorProvider(NgtReactiveSliderComponent),
         ], viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n    <label class=\"flex mb-2 text-sm\" [hidden]='isShining()'>\n        <span class=\"truncate\" [title]=\"label()\">\n            {{ label() }}:\n        </span>\n    </label>\n}\n\n<div [class]=\"isShining() ? 'hidden' : 'flex items-center'\">\n    <input [class]=\"sliderClasses()\" type=\"range\" [min]='min()' [max]='max()' [step]='step()'\n        [disabled]=\"isDisabledState()\" (change)=\"onNativeChange()\" (blur)=\"onTouched()\" #sliderElement>\n\n    <span class=\"text-xs ml-2 font-semibold\">{{ value || min() }}</span>\n\n    @if (showPercentageSymbol()) {\n        <span class=\"text-xs font-semibold\">%</span>\n    }\n</div>\n\n@if (isShining()) {\n    <ngt-shining class=\"block w-full h-6\"></ngt-shining>\n}\n\n<ng-content></ng-content>", styles: ["@media screen and (-webkit-min-device-pixel-ratio: 0){input[type=range]{height:15px}input[type=range]::-webkit-slider-thumb{width:15px;-webkit-appearance:none;appearance:none;height:15px;cursor:pointer;background:#fff;border-radius:50%;position:relative}.primary::-webkit-slider-thumb{box-shadow:-100vw 0 0 100vw #4299e1}.success::-webkit-slider-thumb{box-shadow:-100vw 0 0 100vw #6c9f23}.warning::-webkit-slider-thumb{box-shadow:-100vw 0 0 100vw #ffb822}.danger::-webkit-slider-thumb{box-shadow:-100vw 0 0 100vw #f56565}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgtShiningModule }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -12193,5 +12245,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NgtAbilityValidationService, NgtActionComponent, NgtActionModule, NgtAttachmentHttpService, NgtButtonComponent, NgtButtonModule, NgtCheckboxComponent, NgtCheckboxMode, NgtCheckboxModule, NgtCheckedElement, NgtContentComponent, NgtContentModule, NgtContextMenuComponent, NgtContextMenuDirective, NgtContextMenuModule, NgtCustomFilter, NgtDatatableComponent, NgtDatatableModule, NgtDatatableParam, NgtDatatableSearchType, NgtDatatableType, NgtDateComponent, NgtDateLocale, NgtDateMode, NgtDateModule, NgtDropdownComponent, NgtDropdownContainerComponent, NgtDropdownOpenMethod, NgtDropzoneComponent, NgtDropzoneErrorType, NgtDropzoneFileTypeEnum, NgtDropzoneModule, NgtDropzonePreviewType, NgtFloatingButtonComponent, NgtFloatingButtonModule, NgtFloatingButtonType, NgtFormComponent, NgtFormModule, NgtFormState, NgtFormValidationMessageComponent, NgtHeaderNavComponent, NgtHeaderNavModule, NgtHelperComponent, NgtHttpFormService, NgtHttpResourceService, NgtHttpService, NgtHttpValidationService, NgtInputComponent, NgtInputModule, NgtModalBodyComponent, NgtModalComponent, NgtModalFooterComponent, NgtModalHeaderComponent, NgtModalModule, NgtMultiSelectComponent, NgtMultiSelectModule, NgtPaginationComponent, NgtPaginationModule, NgtPopoverComponent, NgtPopoverDirective, NgtPopoverModule, NgtPopoverOpenMethod, NgtPortletBodyComponent, NgtPortletComponent, NgtPortletFooterComponent, NgtPortletHeaderComponent, NgtPortletModule, NgtRadioButtonComponent, NgtRadioButtonContainerComponent, NgtRadioButtonModule, NgtReactFormState, NgtReactSelectDropdownPanelHeight, NgtReactiveCheckboxComponent, NgtReactiveCheckboxMode, NgtReactiveDateComponent, NgtReactiveDateLocale, NgtReactiveDateMode, NgtReactiveDropzoneComponent, NgtReactiveFormComponent, NgtReactiveInputComponent, NgtReactiveRadioButtonComponent, NgtReactiveRadioButtonContainerComponent, NgtReactiveSelectComponent, NgtReactiveSelectHeaderTemplate, NgtReactiveSelectOptionSelectedTemplate, NgtReactiveSelectOptionTemplate, NgtReactiveSliderColorSchemeEnum, NgtReactiveSliderComponent, NgtReactiveTextareaComponent, NgtSectionComponent, NgtSectionModule, NgtSelectComponent, NgtSelectDropdownPanelHeight, NgtSelectHeaderTmp, NgtSelectModule, NgtSelectOptionSelectedTmp, NgtSelectOptionTmp, NgtShiningComponent, NgtShiningModule, NgtShiningWidth, NgtSidenavComponent, NgtSidenavModule, NgtSliderColorSchemeEnum, NgtSliderComponent, NgtSliderModule, NgtStylizableDirective, NgtStylizableModule, NgtSvgComponent, NgtSvgModule, NgtTagComponent, NgtTagModule, NgtTbodyComponent, NgtTdCheckComponent, NgtTdComponent, NgtTextareaComponent, NgtTextareaModule, NgtThCheckComponent, NgtThComponent, NgtTheadComponent, NgtTrComponent, NgtTranslateService, Size, fadeDownAnimation, fadeUpAnimation, slideLeftToRightAnimation, slideRightToLeftAnimation };
+export { NgtAbilityValidationService, NgtActionComponent, NgtActionModule, NgtAttachmentHttpService, NgtButtonComponent, NgtButtonModule, NgtCheckboxComponent, NgtCheckboxMode, NgtCheckboxModule, NgtCheckedElement, NgtContentComponent, NgtContentModule, NgtContextMenuComponent, NgtContextMenuDirective, NgtContextMenuModule, NgtCustomFilter, NgtDatatableComponent, NgtDatatableModule, NgtDatatableParam, NgtDatatableSearchType, NgtDatatableType, NgtDateComponent, NgtDateLocale, NgtDateMode, NgtDateModule, NgtDropdownComponent, NgtDropdownContainerComponent, NgtDropdownOpenMethod, NgtDropzoneComponent, NgtDropzoneErrorType, NgtDropzoneFileTypeEnum, NgtDropzoneModule, NgtDropzonePreviewType, NgtFloatingButtonComponent, NgtFloatingButtonModule, NgtFloatingButtonType, NgtFormComponent, NgtFormModule, NgtFormState, NgtFormValidationMessageComponent, NgtHeaderNavComponent, NgtHeaderNavModule, NgtHelperComponent, NgtHttpFormService, NgtHttpResourceService, NgtHttpService, NgtHttpValidationService, NgtInputComponent, NgtInputModule, NgtModalBodyComponent, NgtModalComponent, NgtModalFooterComponent, NgtModalHeaderComponent, NgtModalModule, NgtMultiSelectComponent, NgtMultiSelectModule, NgtPaginationComponent, NgtPaginationModule, NgtPopoverComponent, NgtPopoverDirective, NgtPopoverModule, NgtPopoverOpenMethod, NgtPortletBodyComponent, NgtPortletComponent, NgtPortletFooterComponent, NgtPortletHeaderComponent, NgtPortletModule, NgtRadioButtonComponent, NgtRadioButtonContainerComponent, NgtRadioButtonModule, NgtReactFormState, NgtReactSelectDropdownPanelHeight, NgtReactiveCheckboxComponent, NgtReactiveCheckboxMode, NgtReactiveDateComponent, NgtReactiveDateLocale, NgtReactiveDateMode, NgtReactiveDropzoneComponent, NgtReactiveFormComponent, NgtReactiveInputComponent, NgtReactiveRadioButtonComponent, NgtReactiveRadioButtonContainerComponent, NgtReactiveSelectComponent, NgtReactiveSelectHeaderTemplate, NgtReactiveSelectModule, NgtReactiveSelectOptionSelectedTemplate, NgtReactiveSelectOptionTemplate, NgtReactiveSliderColorSchemeEnum, NgtReactiveSliderComponent, NgtReactiveTextareaComponent, NgtSectionComponent, NgtSectionModule, NgtSelectComponent, NgtSelectDropdownPanelHeight, NgtSelectHeaderTmp, NgtSelectModule, NgtSelectOptionSelectedTmp, NgtSelectOptionTmp, NgtShiningComponent, NgtShiningModule, NgtShiningWidth, NgtSidenavComponent, NgtSidenavModule, NgtSliderColorSchemeEnum, NgtSliderComponent, NgtSliderModule, NgtStylizableDirective, NgtStylizableModule, NgtSvgComponent, NgtSvgModule, NgtTagComponent, NgtTagModule, NgtTbodyComponent, NgtTdCheckComponent, NgtTdComponent, NgtTextareaComponent, NgtTextareaModule, NgtThCheckComponent, NgtThComponent, NgtTheadComponent, NgtTrComponent, NgtTranslateService, Size, fadeDownAnimation, fadeUpAnimation, slideLeftToRightAnimation, slideRightToLeftAnimation };
 //# sourceMappingURL=ng-tailwind.mjs.map