ng-tailwind 7.0.0 → 7.0.1

package/base/ngt-control-value-accessor.d.ts

@@ -1,8 +1,9 @@
-import { EventEmitter, Injector } from '@angular/core';
+import { EventEmitter, Injector, WritableSignal } from '@angular/core';
 import { AbstractControl, ControlValueAccessor } from '@angular/forms';
 export declare abstract class NgtControlValueAccessor implements ControlValueAccessor {
     onValueChangeEvent: EventEmitter<any>;
     formControl: AbstractControl;
+    touched: WritableSignal<boolean>;
     protected injector: Injector;
     private ignore;
     private _value;

package/components/forms/reactive/ngt-reactive-date/ngt-reactive-date.component.d.ts

@@ -67,6 +67,7 @@ export declare class NgtReactiveDateComponent extends NgtControlValueAccessor im
     private readonly formControlHasErrors;
     private readonly formControlIsDirty;
     private lastInputedDateString;
+    private subscriptions;
     constructor(ngtStylizableDirective: NgtStylizableDirective, ngtForm: NgtReactiveFormComponent, ngtSection: NgtSectionComponent, ngtModal: NgtModalComponent, formatterService: NgtReactiveDateFormatterService, injector: Injector);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -89,6 +90,7 @@ export declare class NgtReactiveDateComponent extends NgtControlValueAccessor im
     private getFormattedNativeValue;
     private getContainerClasses;
     private hasChangeBetweenValues;
+    private destroySubscriptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtReactiveDateComponent, [{ optional: true; self: true; }, { optional: true; skipSelf: true; }, { optional: true; skipSelf: true; }, { optional: true; skipSelf: true; }, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgtReactiveDateComponent, "ngt-reactive-date", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helpTitle": { "alias": "helpTitle"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpTextColor": { "alias": "helpTextColor"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "internalDateFormat": { "alias": "internalDateFormat"; "required": false; "isSignal": true; }; "showCalendarIcon": { "alias": "showCalendarIcon"; "required": false; "isSignal": true; }; "helperReverseYPosition": { "alias": "helperReverseYPosition"; "required": false; "isSignal": true; }; "shining": { "alias": "shining"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "minuteIncrement": { "alias": "minuteIncrement"; "required": false; "isSignal": true; }; "defaultDate": { "alias": "defaultDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "allowInput": { "alias": "allowInput"; "required": false; "isSignal": true; }; "allowClear": { "alias": "allowClear"; "required": false; "isSignal": true; }; "enableTime": { "alias": "enableTime"; "required": false; "isSignal": true; }; "time_24hr": { "alias": "time_24hr"; "required": false; "isSignal": true; }; "noCalendar": { "alias": "noCalendar"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isRequired": { "alias": "isRequired"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/components/forms/reactive/ngt-reactive-dropzone/ngt-reactive-dropzone.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, Injector, OnDestroy, Signal, WritableSignal } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, Injector, Signal, WritableSignal } from '@angular/core';
 import { AsyncValidatorFn, ValidatorFn } from '@angular/forms';
 import { NgxDropzoneChangeEvent, NgxDropzoneComponent } from 'ngx-dropzone';
 import { NgtControlValueAccessor } from '../../../../base/ngt-control-value-accessor';
@@ -13,7 +13,7 @@ import { NgtReactiveDropzoneViewerService } from './services/ngt-reactive-dropzo
 import { NgtReactiveDropzoneStateService } from './services/ngt-reactive-dropzone-state.service';
 import { NgtDropzoneFileViewerComponent } from '../../../shared/ngt-dropzone-file-viewer/ngt-dropzone-file-viewer.component';
 import * as i0 from "@angular/core";
-export declare class NgtReactiveDropzoneComponent extends NgtControlValueAccessor implements AfterViewInit, OnDestroy {
+export declare class NgtReactiveDropzoneComponent extends NgtControlValueAccessor implements AfterViewInit {
     private ngtForm;
     private ngtSection;
     private ngtModal;
@@ -76,12 +76,10 @@ export declare class NgtReactiveDropzoneComponent extends NgtControlValueAccesso
     fileViewerFileSize: WritableSignal<number>;
     /** Internal Control */
     readonly ngxElementId: string;
-    private subscriptions;
     constructor(ngtForm: NgtReactiveFormComponent, ngtSection: NgtSectionComponent, ngtModal: NgtModalComponent, validationService: NgtReactiveDropzoneValidationService, fileService: NgtReactiveDropzoneFileService, errorService: NgtReactiveDropzoneErrorService, viewerService: NgtReactiveDropzoneViewerService, stateService: NgtReactiveDropzoneStateService, changeDetector: ChangeDetectorRef, injector: Injector);
     get dropzoneHeight(): string;
     get uploadedResources(): any[];
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
     onSelectFiles(event: NgxDropzoneChangeEvent): void;
     onImageClick(element: HTMLElement, index?: number): void;
     onFileClick(url: string, name: string, size: number): void;
@@ -102,9 +100,7 @@ export declare class NgtReactiveDropzoneComponent extends NgtControlValueAccesso
     private registerEffects;
     private setupComponent;
     private setupValidators;
-    private setupSubscriptions;
     private hasChangesBetweenValues;
-    private destroySubscriptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtReactiveDropzoneComponent, [{ optional: true; skipSelf: true; }, { optional: true; skipSelf: true; }, { optional: true; skipSelf: true; }, null, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgtReactiveDropzoneComponent, "ngt-reactive-dropzone", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helpTextColor": { "alias": "helpTextColor"; "required": false; "isSignal": true; }; "helpText": { "alias": "helpText"; "required": false; "isSignal": true; }; "helpTitle": { "alias": "helpTitle"; "required": false; "isSignal": true; }; "resources": { "alias": "resources"; "required": false; "isSignal": true; }; "multipleSelection": { "alias": "multipleSelection"; "required": false; "isSignal": true; }; "itemsLimit": { "alias": "itemsLimit"; "required": false; "isSignal": true; }; "showFileName": { "alias": "showFileName"; "required": false; "isSignal": true; }; "disableClick": { "alias": "disableClick"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "canDownloadFile": { "alias": "canDownloadFile"; "required": false; "isSignal": true; }; "verticalExpandable": { "alias": "verticalExpandable"; "required": false; "isSignal": true; }; "hideNgxDropzone": { "alias": "hideNgxDropzone"; "required": false; "isSignal": true; }; "acceptedFiles": { "alias": "acceptedFiles"; "required": false; "isSignal": true; }; "unacceptedFiles": { "alias": "unacceptedFiles"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "previewType": { "alias": "previewType"; "required": false; "isSignal": true; }; "remoteResource": { "alias": "remoteResource"; "required": false; "isSignal": true; }; "isRequired": { "alias": "isRequired"; "required": false; "isSignal": true; }; "customSyncValidators": { "alias": "customSyncValidators"; "required": false; "isSignal": true; }; "customAsyncValidators": { "alias": "customAsyncValidators"; "required": false; "isSignal": true; }; }, { "onFileSelected": "onFileSelected"; "onFileSelectError": "onFileSelectError"; "onFileUploadFail": "onFileUploadFail"; "onFileRemoved": "onFileRemoved"; "onFileUploadInit": "onFileUploadInit"; "onFileUploaded": "onFileUploaded"; "onFilePreviewLoaded": "onFilePreviewLoaded"; }, never, never, true, never>;
 }

package/components/forms/reactive/ngt-reactive-dropzone/services/ngt-reactive-dropzone-state.service.d.ts

@@ -9,8 +9,6 @@ export declare class NgtReactiveDropzoneStateService {
     readonly componentReady: WritableSignal<boolean>;
     readonly loading: WritableSignal<boolean>;
     readonly shining: WritableSignal<boolean>;
-    readonly formControlHasErrors: WritableSignal<boolean>;
-    readonly formControlIsDirty: WritableSignal<boolean>;
     reset(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgtReactiveDropzoneStateService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NgtReactiveDropzoneStateService>;

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 } from '@angular/forms';
+import { ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR, NgForm, ControlContainer, Validators, FormsModule, TouchedChangeEvent } from '@angular/forms';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1 from 'angular-svg-icon';
@@ -985,8 +985,12 @@ class NgtReactiveFormComponent {
         this.destroySubscriptions();
     }
     onSubmit() {
+        this.form().markAllAsTouched();
         this.isSubmitted = true;
-        this.canShowInvalidFormMessage.set(!this.form().valid);
+        if (!this.form().valid) {
+            NgtReactiveFormComponent.onSubmitInvalidForm.emit(this.form());
+            this.canShowInvalidFormMessage.set(!this.isDisabledState());
+        }
     }
     setFormState(state, triggerChange = true) {
         this.formState.set(state);
@@ -1048,11 +1052,7 @@ class NgtReactiveFormComponent {
     }
     subcribeFormGroupStatusChanges() {
         return this.form().statusChanges.subscribe(() => {
-            if (!this.form().valid && this.isSubmitted) {
-                NgtReactiveFormComponent.onSubmitInvalidForm.emit(this.form());
-                this.canShowInvalidFormMessage.set(!this.isDisabledState());
-            }
-            else if (this.canShowInvalidFormMessage()) {
+            if (this.form().valid && this.canShowInvalidFormMessage()) {
                 this.canShowInvalidFormMessage.set(false);
             }
         });
@@ -1908,6 +1908,7 @@ 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);
         this.onChange = (_) => { };
@@ -1915,6 +1916,7 @@ class NgtControlValueAccessor {
             if (!this.formControl) {
                 this.formControl = this.getControl();
             }
+            this.touched.set(true);
             this.formControl?.markAsTouched();
         };
         this.registerOnTouched(this.onTouched);
@@ -9488,10 +9490,15 @@ class NgtReactiveInputComponent extends NgtControlValueAccessor {
         }
     }
     setupSubscriptions() {
-        this.subscriptions.push(this.formControl.statusChanges.subscribe(() => {
-            this.formControlHasErrors.set(!!this.formControl?.errors);
-            this.formControlIsDirty.set(this.formControl?.dirty);
-        }));
+        if (this.formControl) {
+            this.subscriptions.push(this.formControl.events.subscribe((event) => {
+                if (event instanceof TouchedChangeEvent) {
+                    this.touched.set(true);
+                }
+                this.formControlHasErrors.set(!!this.formControl?.errors);
+                this.formControlIsDirty.set(this.formControl?.dirty);
+            }));
+        }
         const unlistenKeydown = this.renderer.listen(this.inputElement.nativeElement, "keydown", (event) => {
             if (this.getNativeValue()?.length >= this.maxLength()) {
                 /** Backspace and delete */
@@ -9554,6 +9561,11 @@ class NgtReactiveInputComponent extends NgtControlValueAccessor {
         this.formControl.setValidators(syncValidators);
         this.formControl.setAsyncValidators(asyncValidators);
         this.formControl.updateValueAndValidity();
+        if (this.value) {
+            this.markAsDirty();
+            this.formControlHasErrors.set(!!this.formControl.errors);
+            this.formControlIsDirty.set(true);
+        }
     }
     setupMask(previousMask) {
         const currentMask = this.mask();
@@ -9676,7 +9688,7 @@ class NgtReactiveInputComponent extends NgtControlValueAccessor {
             this.inputPaddingClass(),
             this.ngtStyle.compile(['h', 'text', 'color.border', 'color.bg', 'color.text', 'rounded', 'cursor'])
         ];
-        if (this.formControlHasErrors() && this.formControlIsDirty()) {
+        if (this.formControlHasErrors() && this.formControlIsDirty() && this.touched()) {
             classes.push('input-has-error border-red-700');
         }
         return classes.join(' ');
@@ -9850,13 +9862,15 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
         this.setupSubscriptions();
     }
     setupSubscriptions() {
-        if (!this.formControl) {
-            return;
+        if (this.formControl) {
+            this.subscriptions.push(this.formControl.events.subscribe((event) => {
+                if (event instanceof TouchedChangeEvent) {
+                    this.touched.set(true);
+                }
+                this.formControlHasErrors.set(!!this.formControl?.errors);
+                this.formControlIsDirty.set(this.formControl?.dirty);
+            }));
         }
-        this.subscriptions.push(this.formControl.statusChanges.subscribe(() => {
-            this.formControlHasErrors.set(!!this.formControl?.errors);
-            this.formControlIsDirty.set(this.formControl?.dirty);
-        }));
         const unlistenKeydown = this.renderer.listen(this.textareaElement.nativeElement, 'keydown', (event) => {
             if (this.getNativeValue()?.length >= this.maxLength()) {
                 /** Backspace and delete */
@@ -9892,6 +9906,11 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
         this.formControl.setValidators(syncValidators);
         this.formControl.setAsyncValidators(asyncValidators);
         this.formControl.updateValueAndValidity();
+        if (this.value) {
+            this.markAsDirty();
+            this.formControlHasErrors.set(!!this.formControl.errors);
+            this.formControlIsDirty.set(true);
+        }
     }
     setupNgtStylizable() {
         this.ngtStyle = this.ngtStylizableDirective
@@ -9930,7 +9949,7 @@ class NgtReactiveTextareaComponent extends NgtControlValueAccessor {
             'flex border appearance-none focus:outline-none leading-tight w-full px-4 py-3',
             this.ngtStyle.compile(['text', 'color.border', 'color.bg', 'color.text', 'rounded'])
         ];
-        if (this.formControlHasErrors() && this.formControlIsDirty()) {
+        if (this.formControlHasErrors() && this.formControlIsDirty() && this.touched()) {
             classes.push('input-has-error border-red-700');
         }
         return classes.join(' ');
@@ -10496,9 +10515,14 @@ class NgtReactiveSelectComponent extends NgtControlValueAccessor {
         if (!this.getElementTitle() || this.getElementTitle() === 'null') {
             this.ngSelectComponent.element.parentElement.parentElement.parentElement.title = '';
         }
-        this.subscriptions.push(this.formControl.statusChanges.subscribe(() => {
-            this.stateService.updateFormControlState(this.formControl);
-        }));
+        if (this.formControl) {
+            this.subscriptions.push(this.formControl.events.subscribe((event) => {
+                if (event instanceof TouchedChangeEvent) {
+                    this.touched.set(true);
+                }
+                this.stateService.updateFormControlState(this.formControl);
+            }));
+        }
     }
     ngOnDestroy() {
         this.searchService.clearSearchTimeout();
@@ -10635,6 +10659,11 @@ class NgtReactiveSelectComponent extends NgtControlValueAccessor {
         const syncValidators = this.validationService.getSyncValidators(config);
         this.formControl.setValidators(syncValidators);
         this.formControl.updateValueAndValidity();
+        if (this.value) {
+            this.markAsDirty();
+            this.stateService.formControlHasErrors.set(!!this.formControl.errors);
+            this.stateService.formControlIsDirty.set(true);
+        }
     }
     setupNgtStylizable() {
         if (this.ngtStylizableDirective) {
@@ -10700,7 +10729,7 @@ class NgtReactiveSelectComponent extends NgtControlValueAccessor {
         if (this.isDisabledState()) {
             selectClass += ' select-border-disabled';
         }
-        else if (this.stateService.formControlHasErrors() && this.stateService.formControlIsDirty()) {
+        else if (this.stateService.formControlHasErrors() && this.stateService.formControlIsDirty() && this.touched()) {
             selectClass += ' select-border-error';
         }
         else {
@@ -10942,6 +10971,7 @@ class NgtReactiveDateComponent extends NgtControlValueAccessor {
         this.nativeValue = signal(null);
         this.formControlHasErrors = signal(false);
         this.formControlIsDirty = signal(false);
+        this.subscriptions = [];
         this.setupNgtStylizable();
         this.registerEffects();
     }
@@ -10954,6 +10984,7 @@ class NgtReactiveDateComponent extends NgtControlValueAccessor {
     }
     ngOnDestroy() {
         this.evDatePicker?.flatpickr?.['calendarContainer']?.remove();
+        this.destroySubscriptions();
     }
     change(value) {
         if (!value || (Array.isArray(value) && !value.length)) {
@@ -11054,10 +11085,15 @@ class NgtReactiveDateComponent extends NgtControlValueAccessor {
         });
     }
     setupSubscriptions() {
-        this.formControl?.statusChanges.subscribe(() => {
-            this.formControlHasErrors.set(!!this.formControl?.errors);
-            this.formControlIsDirty.set(this.formControl?.dirty);
-        });
+        if (this.formControl) {
+            this.subscriptions.push(this.formControl.events.subscribe((event) => {
+                if (event instanceof TouchedChangeEvent) {
+                    this.touched.set(true);
+                }
+                this.formControlHasErrors.set(!!this.formControl?.errors);
+                this.formControlIsDirty.set(this.formControl?.dirty);
+            }));
+        }
     }
     registerEffects() {
         effect(() => this.setupValidators());
@@ -11072,6 +11108,11 @@ class NgtReactiveDateComponent extends NgtControlValueAccessor {
         }
         this.formControl.setValidators(syncValidators);
         this.formControl.updateValueAndValidity();
+        if (this.value) {
+            this.markAsDirty();
+            this.formControlHasErrors.set(!!this.formControl.errors);
+            this.formControlIsDirty.set(true);
+        }
     }
     setupDateInputMask() {
         if (this.locale() == NgtReactiveDateLocale.BRAZIL) {
@@ -11126,7 +11167,7 @@ class NgtReactiveDateComponent extends NgtControlValueAccessor {
             'overflow-hidden border',
             this.ngtStyle.compile(['h', 'color.text', 'px', 'py', 'text', 'rounded', 'color.bg', 'color.border'])
         ];
-        if (this.formControlHasErrors() && this.formControlIsDirty()) {
+        if (this.formControlHasErrors() && this.formControlIsDirty() && this.touched()) {
             classes.push('border-error');
         }
         return classes.join(' ');
@@ -11134,6 +11175,10 @@ class NgtReactiveDateComponent extends NgtControlValueAccessor {
     hasChangeBetweenValues(a, b) {
         return JSON.stringify(a) != JSON.stringify(b);
     }
+    destroySubscriptions() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        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: [
             NgtValueAccessorProvider(NgtReactiveDateComponent),
@@ -11721,9 +11766,6 @@ class NgtReactiveDropzoneStateService {
         this.componentReady = signal(false);
         this.loading = signal(false);
         this.shining = signal(false);
-        // Form State
-        this.formControlHasErrors = signal(false);
-        this.formControlIsDirty = signal(false);
     }
     reset() {
         this.dropzoneHeight.set('180px');
@@ -11733,8 +11775,6 @@ class NgtReactiveDropzoneStateService {
         this.loading.set(false);
         this.shining.set(false);
         this.showFileViewer.set(false);
-        this.formControlHasErrors.set(false);
-        this.formControlIsDirty.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveDropzoneStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgtReactiveDropzoneStateService }); }
@@ -11805,7 +11845,6 @@ class NgtReactiveDropzoneComponent extends NgtControlValueAccessor {
         this.fileViewerFileSize = signal(0);
         /** Internal Control */
         this.ngxElementId = uuid();
-        this.subscriptions = [];
         this.registerEffects();
     }
     get dropzoneHeight() {
@@ -11819,9 +11858,6 @@ class NgtReactiveDropzoneComponent extends NgtControlValueAccessor {
         this.setupComponent();
         setTimeout(() => this.stateService.componentReady.set(true), 500);
     }
-    ngOnDestroy() {
-        this.destroySubscriptions();
-    }
     onSelectFiles(event) {
         const errorResult = this.errorService.validateRejectedFiles(event);
         if (errorResult.hasError) {
@@ -11978,7 +12014,6 @@ class NgtReactiveDropzoneComponent extends NgtControlValueAccessor {
     }
     setupComponent() {
         this.setupValidators();
-        this.setupSubscriptions();
         if (this.value) {
             this.fileService.resetFilesLoad(Array.isArray(this.value) ? this.value : [this.value]);
             this.loadFilePreview(Array.isArray(this.value) ? this.value : [this.value]);
@@ -11996,24 +12031,13 @@ class NgtReactiveDropzoneComponent extends NgtControlValueAccessor {
         this.formControl.setValidators(syncValidators);
         this.formControl.setAsyncValidators(asyncValidators);
         this.formControl.updateValueAndValidity();
-    }
-    setupSubscriptions() {
-        if (!this.formControl) {
-            return;
+        if (this.value) {
+            this.markAsDirty();
         }
-        this.destroySubscriptions();
-        this.subscriptions.push(this.formControl.statusChanges.subscribe(() => {
-            this.stateService.formControlHasErrors.set(!!this.formControl?.errors);
-            this.stateService.formControlIsDirty.set(this.formControl?.dirty || false);
-        }));
     }
     hasChangesBetweenValues(a, b) {
         return JSON.stringify(a) !== JSON.stringify(b);
     }
-    destroySubscriptions() {
-        this.subscriptions.forEach(subscription => subscription.unsubscribe());
-        this.subscriptions = [];
-    }
     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: [
             NgtValueAccessorProvider(NgtReactiveDropzoneComponent),