ngx-form-draft 2.2.11 → 2.2.13

package/fesm2015/ngx-form-draft.mjs

@@ -7,460 +7,460 @@ import { filter, debounceTime, takeUntil } from 'rxjs/operators';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
-class FormDraftBannerComponent {
-    constructor() {
-        this.visible = false;
-        this.timeLabel = '';
-        this.isRestored = false;
-        this.restoredText = 'Draft restored';
-        this.savedText = 'Draft saved';
-        this.savedLabel = 'saved';
-        this.discardText = 'Discard';
-        this.discard = new EventEmitter();
-    }
-}
-FormDraftBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormDraftBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormDraftBannerComponent, selector: "ngx-form-draft-banner", inputs: { visible: "visible", timeLabel: "timeLabel", isRestored: "isRestored", restoredText: "restoredText", savedText: "savedText", savedLabel: "savedLabel", discardText: "discardText" }, outputs: { discard: "discard" }, ngImport: i0, template: `
-    <div class="form-draft-banner" *ngIf="visible">
-      <div class="form-draft-banner__icon">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M12 8V12L14.5 14.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
-        </svg>
-      </div>
-      <div class="form-draft-banner__content">
-        <span class="form-draft-banner__text">
-          <span *ngIf="isRestored">{{ restoredText }}</span>
-          <span *ngIf="!isRestored">{{ savedText }}</span>
-          <span class="form-draft-banner__time" *ngIf="timeLabel && isRestored">
-            &middot; {{ savedLabel }} {{ timeLabel }}
-          </span>
-        </span>
-      </div>
-      <div class="form-draft-banner__actions">
-        <button class="form-draft-banner__btn form-draft-banner__btn--discard" (click)="discard.emit()" type="button">
-          ✕ {{ discardText }}
-        </button>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block;width:100%}.form-draft-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;border-radius:8px;background:linear-gradient(135deg,#eef6ff 0%,#f0f4ff 100%);border:1px solid #c5ddf8;box-shadow:0 2px 8px #128ad614;animation:slideDown .25s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.form-draft-banner__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:linear-gradient(135deg,#128ad6,#22b9ff);color:#fff;flex-shrink:0}.form-draft-banner__content{flex:1;min-width:0}.form-draft-banner__text{font-size:13px;font-weight:600;color:#1a3a5c}.form-draft-banner__time{font-weight:400;color:#6b8aaa;font-size:12px}.form-draft-banner__actions{flex-shrink:0}.form-draft-banner__btn{border:none;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.form-draft-banner__btn--discard{background:transparent;color:#8899a6;border:1px solid #d0dce6}.form-draft-banner__btn--discard:hover{background:#fef2f2;color:#e62e43;border-color:#e62e43}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftBannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-form-draft-banner', template: `
-    <div class="form-draft-banner" *ngIf="visible">
-      <div class="form-draft-banner__icon">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M12 8V12L14.5 14.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
-        </svg>
-      </div>
-      <div class="form-draft-banner__content">
-        <span class="form-draft-banner__text">
-          <span *ngIf="isRestored">{{ restoredText }}</span>
-          <span *ngIf="!isRestored">{{ savedText }}</span>
-          <span class="form-draft-banner__time" *ngIf="timeLabel && isRestored">
-            &middot; {{ savedLabel }} {{ timeLabel }}
-          </span>
-        </span>
-      </div>
-      <div class="form-draft-banner__actions">
-        <button class="form-draft-banner__btn form-draft-banner__btn--discard" (click)="discard.emit()" type="button">
-          ✕ {{ discardText }}
-        </button>
-      </div>
-    </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}.form-draft-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;border-radius:8px;background:linear-gradient(135deg,#eef6ff 0%,#f0f4ff 100%);border:1px solid #c5ddf8;box-shadow:0 2px 8px #128ad614;animation:slideDown .25s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.form-draft-banner__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:linear-gradient(135deg,#128ad6,#22b9ff);color:#fff;flex-shrink:0}.form-draft-banner__content{flex:1;min-width:0}.form-draft-banner__text{font-size:13px;font-weight:600;color:#1a3a5c}.form-draft-banner__time{font-weight:400;color:#6b8aaa;font-size:12px}.form-draft-banner__actions{flex-shrink:0}.form-draft-banner__btn{border:none;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.form-draft-banner__btn--discard{background:transparent;color:#8899a6;border:1px solid #d0dce6}.form-draft-banner__btn--discard:hover{background:#fef2f2;color:#e62e43;border-color:#e62e43}\n"] }]
-        }], propDecorators: { visible: [{
-                type: Input
-            }], timeLabel: [{
-                type: Input
-            }], isRestored: [{
-                type: Input
-            }], restoredText: [{
-                type: Input
-            }], savedText: [{
-                type: Input
-            }], savedLabel: [{
-                type: Input
-            }], discardText: [{
-                type: Input
-            }], discard: [{
-                type: Output
+class FormDraftBannerComponent {
+    constructor() {
+        this.visible = false;
+        this.timeLabel = '';
+        this.isRestored = false;
+        this.restoredText = 'Draft restored';
+        this.savedText = 'Draft saved';
+        this.savedLabel = 'saved';
+        this.discardText = 'Discard';
+        this.discard = new EventEmitter();
+    }
+}
+FormDraftBannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormDraftBannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FormDraftBannerComponent, selector: "ngx-form-draft-banner", inputs: { visible: "visible", timeLabel: "timeLabel", isRestored: "isRestored", restoredText: "restoredText", savedText: "savedText", savedLabel: "savedLabel", discardText: "discardText" }, outputs: { discard: "discard" }, ngImport: i0, template: `
+    <div class="form-draft-banner" *ngIf="visible">
+      <div class="form-draft-banner__icon">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 8V12L14.5 14.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
+        </svg>
+      </div>
+      <div class="form-draft-banner__content">
+        <span class="form-draft-banner__text">
+          <span *ngIf="isRestored">{{ restoredText }}</span>
+          <span *ngIf="!isRestored">{{ savedText }}</span>
+          <span class="form-draft-banner__time" *ngIf="timeLabel && isRestored">
+            &middot; {{ savedLabel }} {{ timeLabel }}
+          </span>
+        </span>
+      </div>
+      <div class="form-draft-banner__actions">
+        <button class="form-draft-banner__btn form-draft-banner__btn--discard" (click)="discard.emit()" type="button">
+          ✕ {{ discardText }}
+        </button>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}.form-draft-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;border-radius:8px;background:linear-gradient(135deg,#eef6ff 0%,#f0f4ff 100%);border:1px solid #c5ddf8;box-shadow:0 2px 8px #128ad614;animation:slideDown .25s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.form-draft-banner__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:linear-gradient(135deg,#128ad6,#22b9ff);color:#fff;flex-shrink:0}.form-draft-banner__content{flex:1;min-width:0}.form-draft-banner__text{font-size:13px;font-weight:600;color:#1a3a5c}.form-draft-banner__time{font-weight:400;color:#6b8aaa;font-size:12px}.form-draft-banner__actions{flex-shrink:0}.form-draft-banner__btn{border:none;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.form-draft-banner__btn--discard{background:transparent;color:#8899a6;border:1px solid #d0dce6}.form-draft-banner__btn--discard:hover{background:#fef2f2;color:#e62e43;border-color:#e62e43}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-form-draft-banner', template: `
+    <div class="form-draft-banner" *ngIf="visible">
+      <div class="form-draft-banner__icon">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 8V12L14.5 14.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
+        </svg>
+      </div>
+      <div class="form-draft-banner__content">
+        <span class="form-draft-banner__text">
+          <span *ngIf="isRestored">{{ restoredText }}</span>
+          <span *ngIf="!isRestored">{{ savedText }}</span>
+          <span class="form-draft-banner__time" *ngIf="timeLabel && isRestored">
+            &middot; {{ savedLabel }} {{ timeLabel }}
+          </span>
+        </span>
+      </div>
+      <div class="form-draft-banner__actions">
+        <button class="form-draft-banner__btn form-draft-banner__btn--discard" (click)="discard.emit()" type="button">
+          ✕ {{ discardText }}
+        </button>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}.form-draft-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;border-radius:8px;background:linear-gradient(135deg,#eef6ff 0%,#f0f4ff 100%);border:1px solid #c5ddf8;box-shadow:0 2px 8px #128ad614;animation:slideDown .25s cubic-bezier(.4,0,.2,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.form-draft-banner__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:linear-gradient(135deg,#128ad6,#22b9ff);color:#fff;flex-shrink:0}.form-draft-banner__content{flex:1;min-width:0}.form-draft-banner__text{font-size:13px;font-weight:600;color:#1a3a5c}.form-draft-banner__time{font-weight:400;color:#6b8aaa;font-size:12px}.form-draft-banner__actions{flex-shrink:0}.form-draft-banner__btn{border:none;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.form-draft-banner__btn--discard{background:transparent;color:#8899a6;border:1px solid #d0dce6}.form-draft-banner__btn--discard:hover{background:#fef2f2;color:#e62e43;border-color:#e62e43}\n"] }]
+        }], propDecorators: { visible: [{
+                type: Input
+            }], timeLabel: [{
+                type: Input
+            }], isRestored: [{
+                type: Input
+            }], restoredText: [{
+                type: Input
+            }], savedText: [{
+                type: Input
+            }], savedLabel: [{
+                type: Input
+            }], discardText: [{
+                type: Input
+            }], discard: [{
+                type: Output
             }] } });
 
-class FormDraftService {
-    constructor() {
-        this.STORAGE_PREFIX = 'form_draft_';
-        this.MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
-        /** Registry of formId -> reset callback (used by directive to reset form + banner) */
-        this.resetRegistry = new Map();
-    }
-    /**
-     * Register a callback to reset the form and draft UI for the given formId.
-     * Called by the directive; apps should use clearAndReset(formId) instead.
-     */
-    registerReset(formId, resetFn) {
-        this.resetRegistry.set(formId, resetFn);
-    }
-    /**
-     * Unregister the reset callback for the given formId.
-     * Called by the directive on destroy.
-     */
-    unregisterReset(formId) {
-        this.resetRegistry.delete(formId);
-    }
-    /**
-     * Clear the draft from storage and, if a directive is registered for this formId,
-     * reset the form and dismiss the draft banner in one call.
-     * Use this on form submit to clear local storage and reset the form in one line.
-     */
-    clearAndReset(formId) {
-        var _a;
-        this.clear(formId);
-        (_a = this.resetRegistry.get(formId)) === null || _a === void 0 ? void 0 : _a();
-    }
-    buildKey(formId) {
-        return `${this.STORAGE_PREFIX}${formId}`;
-    }
-    save(formId, values) {
-        try {
-            const draft = { values, savedAt: Date.now(), formId };
-            localStorage.setItem(this.buildKey(formId), JSON.stringify(draft));
-        }
-        catch (e) {
-            console.warn('[FormDraft] Could not save draft:', e);
-        }
-    }
-    load(formId) {
-        try {
-            const raw = localStorage.getItem(this.buildKey(formId));
-            if (!raw)
-                return null;
-            const draft = JSON.parse(raw);
-            if (Date.now() - draft.savedAt > this.MAX_AGE_MS) {
-                this.clear(formId);
-                return null;
-            }
-            return draft;
-        }
-        catch (e) {
-            console.warn('[FormDraft] Could not load draft:', e);
-            return null;
-        }
-    }
-    clear(formId) {
-        try {
-            localStorage.removeItem(this.buildKey(formId));
-        }
-        catch (e) {
-            console.warn('[FormDraft] Could not clear draft:', e);
-        }
-    }
-    formatTimestamp(timestamp) {
-        const seconds = Math.floor((Date.now() - timestamp) / 1000);
-        if (seconds < 60)
-            return 'just now';
-        const minutes = Math.floor(seconds / 60);
-        if (minutes < 60)
-            return `${minutes}m ago`;
-        const hours = Math.floor(minutes / 60);
-        if (hours < 24)
-            return `${hours}h ago`;
-        const days = Math.floor(hours / 24);
-        return `${days}d ago`;
-    }
-}
-FormDraftService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FormDraftService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+class FormDraftService {
+    constructor() {
+        this.STORAGE_PREFIX = 'form_draft_';
+        this.MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
+        /** Registry of formId -> reset callback (used by directive to reset form + banner) */
+        this.resetRegistry = new Map();
+    }
+    /**
+     * Register a callback to reset the form and draft UI for the given formId.
+     * Called by the directive; apps should use clearAndReset(formId) instead.
+     */
+    registerReset(formId, resetFn) {
+        this.resetRegistry.set(formId, resetFn);
+    }
+    /**
+     * Unregister the reset callback for the given formId.
+     * Called by the directive on destroy.
+     */
+    unregisterReset(formId) {
+        this.resetRegistry.delete(formId);
+    }
+    /**
+     * Clear the draft from storage and, if a directive is registered for this formId,
+     * reset the form and dismiss the draft banner in one call.
+     * Use this on form submit to clear local storage and reset the form in one line.
+     */
+    clearAndReset(formId) {
+        var _a;
+        this.clear(formId);
+        (_a = this.resetRegistry.get(formId)) === null || _a === void 0 ? void 0 : _a();
+    }
+    buildKey(formId) {
+        return `${this.STORAGE_PREFIX}${formId}`;
+    }
+    save(formId, values) {
+        try {
+            const draft = { values, savedAt: Date.now(), formId };
+            localStorage.setItem(this.buildKey(formId), JSON.stringify(draft));
+        }
+        catch (e) {
+            console.warn('[FormDraft] Could not save draft:', e);
+        }
+    }
+    load(formId) {
+        try {
+            const raw = localStorage.getItem(this.buildKey(formId));
+            if (!raw)
+                return null;
+            const draft = JSON.parse(raw);
+            if (Date.now() - draft.savedAt > this.MAX_AGE_MS) {
+                this.clear(formId);
+                return null;
+            }
+            return draft;
+        }
+        catch (e) {
+            console.warn('[FormDraft] Could not load draft:', e);
+            return null;
+        }
+    }
+    clear(formId) {
+        try {
+            localStorage.removeItem(this.buildKey(formId));
+        }
+        catch (e) {
+            console.warn('[FormDraft] Could not clear draft:', e);
+        }
+    }
+    formatTimestamp(timestamp) {
+        const seconds = Math.floor((Date.now() - timestamp) / 1000);
+        if (seconds < 60)
+            return 'just now';
+        const minutes = Math.floor(seconds / 60);
+        if (minutes < 60)
+            return `${minutes}m ago`;
+        const hours = Math.floor(minutes / 60);
+        if (hours < 24)
+            return `${hours}h ago`;
+        const days = Math.floor(hours / 24);
+        return `${days}d ago`;
+    }
+}
+FormDraftService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FormDraftService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
         }] });
 
-/**
- * Auto-saves and restores form drafts
- *
- * @example
- * <form [formGroup]="myForm" ngxFormDraft="myFormId">
- *
- * @example
- * <form [formGroup]="myForm" [ngxFormDraft]="'edit_' + entityId" [draftExcludeFields]="['password']">
- */
-class FormDraftDirective {
-    constructor(formGroupDir, ngForm, draftService, viewContainerRef, cdRef, elRef, renderer) {
-        this.formGroupDir = formGroupDir;
-        this.ngForm = ngForm;
-        this.draftService = draftService;
-        this.viewContainerRef = viewContainerRef;
-        this.cdRef = cdRef;
-        this.elRef = elRef;
-        this.renderer = renderer;
-        this.draftDebounce = 800;
-        this.draftExcludeFields = [];
-        this.draftShowOnChange = false;
-        this.draftRestoredText = 'Draft restored';
-        this.draftSavedText = 'Draft saved';
-        this.draftSavedLabel = 'saved';
-        this.draftDiscardText = 'Discard';
-        this.destroy$ = new Subject();
-        this.bannerRef = null;
-        this.formControl = null;
-        this.initialValues = {};
-        this.isRestoring = false;
-    }
-    ngOnInit() {
-        var _a, _b;
-        this.formControl = ((_a = this.formGroupDir) === null || _a === void 0 ? void 0 : _a.form) || ((_b = this.ngForm) === null || _b === void 0 ? void 0 : _b.form) || null;
-        if (!this.formControl || !this.formId)
-            return;
-        this.draftService.registerReset(this.formId, () => this.performResetAndDestroyBanner());
-        // For reactive forms, capture initial values and restore draft immediately
-        if (this.formGroupDir) {
-            this.initialValues = JSON.parse(JSON.stringify(this.formControl.value));
-            const draft = this.draftService.load(this.formId);
-            if (draft) {
-                this.restoreDraft(draft.values);
-                this.showBanner(draft.savedAt, true);
-            }
-        }
-        let hasUserInteraction = false;
-        this.formControl.valueChanges
-            .pipe(filter(() => {
-            var _a;
-            if (this.isRestoring)
-                return false;
-            if (this.ngForm && !hasUserInteraction) {
-                const currentValues = ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.value) || {};
-                const isDifferent = JSON.stringify(currentValues) !== JSON.stringify(this.initialValues);
-                if (isDifferent) {
-                    hasUserInteraction = true;
-                    return true;
-                }
-                return false;
-            }
-            return true;
-        }), debounceTime(this.draftDebounce), takeUntil(this.destroy$))
-            .subscribe((values) => {
-            this.saveDraft(values);
-        });
-    }
-    ngAfterViewInit() {
-        if (this.ngForm && this.formControl) {
-            const draft = this.draftService.load(this.formId);
-            if (draft) {
-                this.isRestoring = true;
-            }
-            setTimeout(() => {
-                if (draft) {
-                    this.restoreDraft(draft.values);
-                    this.showBanner(draft.savedAt, true);
-                    this.initialValues = {};
-                }
-                else {
-                    this.initialValues = JSON.parse(JSON.stringify(this.formControl.value));
-                }
-            }, 0);
-        }
-    }
-    ngOnDestroy() {
-        this.draftService.unregisterReset(this.formId);
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.destroyBanner();
-    }
-    saveDraft(values) {
-        const filtered = this.filterFields(values);
-        // Don't save if empty
-        if (this.isAllEmpty(filtered)) {
-            return;
-        }
-        // Don't save if matches initial values (even if initial is empty)
-        if (this.matchesInitialValues(filtered)) {
-            return;
-        }
-        this.draftService.save(this.formId, filtered);
-        if (this.draftShowOnChange && !this.bannerRef) {
-            this.showBanner(Date.now(), false);
-        }
-    }
-    filterFields(values) {
-        if (!this.draftExcludeFields.length)
-            return values;
-        const result = Object.assign({}, values);
-        this.draftExcludeFields.forEach(field => delete result[field]);
-        return result;
-    }
-    isAllEmpty(values) {
-        return Object.values(values).every(v => v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0));
-    }
-    matchesInitialValues(values) {
-        return JSON.stringify(values) === JSON.stringify(this.initialValues);
-    }
-    restoreDraft(values) {
-        var _a, _b;
-        if (!this.formControl)
-            return;
-        this.isRestoring = true;
-        const form = ((_a = this.formGroupDir) === null || _a === void 0 ? void 0 : _a.form) || ((_b = this.ngForm) === null || _b === void 0 ? void 0 : _b.form);
-        if (form) {
-            this.prepareFormArrays(form, values);
-            form.patchValue(values);
-        }
-        setTimeout(() => this.isRestoring = false, 100);
-    }
-    prepareFormArrays(control, value) {
-        if (!control || value == null)
-            return;
-        if (control instanceof FormGroup && value && typeof value === 'object' && !Array.isArray(value)) {
-            Object.keys(value).forEach(key => {
-                const childControl = control.get(key);
-                if (childControl)
-                    this.prepareFormArrays(childControl, value[key]);
-            });
-            return;
-        }
-        if (control instanceof FormArray && Array.isArray(value)) {
-            const formArray = control;
-            while (formArray.length < value.length) {
-                const template = formArray.at(0);
-                if (template instanceof FormGroup) {
-                    const newGroup = new FormGroup({});
-                    Object.keys(template.controls).forEach(ctrlName => {
-                        const existing = template.get(ctrlName);
-                        if (existing instanceof FormArray) {
-                            newGroup.addControl(ctrlName, new FormArray([]));
-                        }
-                        else if (existing instanceof FormGroup) {
-                            newGroup.addControl(ctrlName, new FormGroup({}));
-                        }
-                        else {
-                            newGroup.addControl(ctrlName, new FormControl(null));
-                        }
-                    });
-                    formArray.push(newGroup);
-                }
-                else if (template) {
-                    formArray.push(new FormControl(null));
-                }
-                else {
-                    const firstValue = value[0];
-                    if (firstValue && typeof firstValue === 'object' && !Array.isArray(firstValue)) {
-                        const group = new FormGroup({});
-                        Object.keys(firstValue).forEach(key => group.addControl(key, new FormControl(null)));
-                        formArray.push(group);
-                    }
-                    else {
-                        formArray.push(new FormControl(null));
-                    }
-                }
-            }
-            while (formArray.length > value.length) {
-                formArray.removeAt(formArray.length - 1);
-            }
-            value.forEach((childValue, index) => {
-                this.prepareFormArrays(formArray.at(index), childValue);
-            });
-        }
-    }
-    discardDraft() {
-        this.draftService.clear(this.formId);
-        this.performResetAndDestroyBanner();
-    }
-    /**
-     * Resets the form to initial values and destroys the draft banner.
-     * Used by the service when clearAndReset(formId) is called (e.g. on submit).
-     */
-    performResetAndDestroyBanner() {
-        var _a, _b;
-        if (this.formControl) {
-            this.isRestoring = true;
-            const form = ((_a = this.formGroupDir) === null || _a === void 0 ? void 0 : _a.form) || ((_b = this.ngForm) === null || _b === void 0 ? void 0 : _b.form);
-            if (form) {
-                this.prepareFormArrays(form, this.initialValues);
-                form.reset(this.initialValues);
-            }
-            setTimeout(() => {
-                this.isRestoring = false;
-            }, this.draftDebounce + 200);
-        }
-        this.destroyBanner();
-    }
-    showBanner(savedAt, isRestored = false) {
-        this.bannerRef = this.viewContainerRef.createComponent(FormDraftBannerComponent);
-        this.bannerRef.setInput('visible', true);
-        this.bannerRef.setInput('isRestored', isRestored);
-        this.bannerRef.setInput('timeLabel', isRestored ? this.draftService.formatTimestamp(savedAt) : '');
-        this.bannerRef.setInput('restoredText', this.draftRestoredText);
-        this.bannerRef.setInput('savedText', this.draftSavedText);
-        this.bannerRef.setInput('savedLabel', this.draftSavedLabel);
-        this.bannerRef.setInput('discardText', this.draftDiscardText);
-        this.bannerRef.instance.discard.subscribe(() => this.discardDraft());
-        const bannerEl = this.bannerRef.location.nativeElement;
-        const formEl = this.elRef.nativeElement;
-        this.renderer.insertBefore(formEl, bannerEl, formEl.firstChild);
-        this.cdRef.detectChanges();
-    }
-    destroyBanner() {
-        if (this.bannerRef) {
-            this.bannerRef.destroy();
-            this.bannerRef = null;
-        }
-    }
-    clearDraft() {
-        this.draftService.clear(this.formId);
-        this.destroyBanner();
-    }
-}
-FormDraftDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftDirective, deps: [{ token: i1$1.FormGroupDirective, optional: true }, { token: i1$1.NgForm, optional: true }, { token: FormDraftService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-FormDraftDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: FormDraftDirective, selector: "[ngxFormDraft]", inputs: { formId: ["ngxFormDraft", "formId"], draftDebounce: "draftDebounce", draftExcludeFields: "draftExcludeFields", draftShowOnChange: "draftShowOnChange", draftRestoredText: "draftRestoredText", draftSavedText: "draftSavedText", draftSavedLabel: "draftSavedLabel", draftDiscardText: "draftDiscardText" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngxFormDraft]',
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i1$1.FormGroupDirective, decorators: [{
-                        type: Optional
-                    }] }, { type: i1$1.NgForm, decorators: [{
-                        type: Optional
-                    }] }, { type: FormDraftService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }];
-    }, propDecorators: { formId: [{
-                type: Input,
-                args: ['ngxFormDraft']
-            }], draftDebounce: [{
-                type: Input
-            }], draftExcludeFields: [{
-                type: Input
-            }], draftShowOnChange: [{
-                type: Input
-            }], draftRestoredText: [{
-                type: Input
-            }], draftSavedText: [{
-                type: Input
-            }], draftSavedLabel: [{
-                type: Input
-            }], draftDiscardText: [{
-                type: Input
+/**
+ * Auto-saves and restores form drafts
+ *
+ * @example
+ * <form [formGroup]="myForm" ngxFormDraft="myFormId">
+ *
+ * @example
+ * <form [formGroup]="myForm" [ngxFormDraft]="'edit_' + entityId" [draftExcludeFields]="['password']">
+ */
+class FormDraftDirective {
+    constructor(formGroupDir, ngForm, draftService, viewContainerRef, cdRef, elRef, renderer) {
+        this.formGroupDir = formGroupDir;
+        this.ngForm = ngForm;
+        this.draftService = draftService;
+        this.viewContainerRef = viewContainerRef;
+        this.cdRef = cdRef;
+        this.elRef = elRef;
+        this.renderer = renderer;
+        this.draftDebounce = 800;
+        this.draftExcludeFields = [];
+        this.draftShowOnChange = false;
+        this.draftRestoredText = 'Draft restored';
+        this.draftSavedText = 'Draft saved';
+        this.draftSavedLabel = 'saved';
+        this.draftDiscardText = 'Discard';
+        this.destroy$ = new Subject();
+        this.bannerRef = null;
+        this.formControl = null;
+        this.initialValues = {};
+        this.isRestoring = false;
+    }
+    ngOnInit() {
+        var _a, _b;
+        this.formControl = ((_a = this.formGroupDir) === null || _a === void 0 ? void 0 : _a.form) || ((_b = this.ngForm) === null || _b === void 0 ? void 0 : _b.form) || null;
+        if (!this.formControl || !this.formId)
+            return;
+        this.draftService.registerReset(this.formId, () => this.performResetAndDestroyBanner());
+        // For reactive forms, capture initial values and restore draft immediately
+        if (this.formGroupDir) {
+            this.initialValues = JSON.parse(JSON.stringify(this.formControl.value));
+            const draft = this.draftService.load(this.formId);
+            if (draft) {
+                this.restoreDraft(draft.values);
+                this.showBanner(draft.savedAt, true);
+            }
+        }
+        let hasUserInteraction = false;
+        this.formControl.valueChanges
+            .pipe(filter(() => {
+            var _a;
+            if (this.isRestoring)
+                return false;
+            if (this.ngForm && !hasUserInteraction) {
+                const currentValues = ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.value) || {};
+                const isDifferent = JSON.stringify(currentValues) !== JSON.stringify(this.initialValues);
+                if (isDifferent) {
+                    hasUserInteraction = true;
+                    return true;
+                }
+                return false;
+            }
+            return true;
+        }), debounceTime(this.draftDebounce), takeUntil(this.destroy$))
+            .subscribe((values) => {
+            this.saveDraft(values);
+        });
+    }
+    ngAfterViewInit() {
+        if (this.ngForm && this.formControl) {
+            const draft = this.draftService.load(this.formId);
+            if (draft) {
+                this.isRestoring = true;
+            }
+            setTimeout(() => {
+                if (draft) {
+                    this.restoreDraft(draft.values);
+                    this.showBanner(draft.savedAt, true);
+                    this.initialValues = {};
+                }
+                else {
+                    this.initialValues = JSON.parse(JSON.stringify(this.formControl.value));
+                }
+            }, 0);
+        }
+    }
+    ngOnDestroy() {
+        this.draftService.unregisterReset(this.formId);
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.destroyBanner();
+    }
+    saveDraft(values) {
+        const filtered = this.filterFields(values);
+        // Don't save if empty
+        if (this.isAllEmpty(filtered)) {
+            return;
+        }
+        // Don't save if matches initial values (even if initial is empty)
+        if (this.matchesInitialValues(filtered)) {
+            return;
+        }
+        this.draftService.save(this.formId, filtered);
+        if (this.draftShowOnChange && !this.bannerRef) {
+            this.showBanner(Date.now(), false);
+        }
+    }
+    filterFields(values) {
+        if (!this.draftExcludeFields.length)
+            return values;
+        const result = Object.assign({}, values);
+        this.draftExcludeFields.forEach(field => delete result[field]);
+        return result;
+    }
+    isAllEmpty(values) {
+        return Object.values(values).every(v => v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0));
+    }
+    matchesInitialValues(values) {
+        return JSON.stringify(values) === JSON.stringify(this.initialValues);
+    }
+    restoreDraft(values) {
+        var _a, _b;
+        if (!this.formControl)
+            return;
+        this.isRestoring = true;
+        const form = ((_a = this.formGroupDir) === null || _a === void 0 ? void 0 : _a.form) || ((_b = this.ngForm) === null || _b === void 0 ? void 0 : _b.form);
+        if (form) {
+            this.prepareFormArrays(form, values);
+            form.patchValue(values);
+        }
+        setTimeout(() => this.isRestoring = false, 100);
+    }
+    prepareFormArrays(control, value) {
+        if (!control || value == null)
+            return;
+        if (control instanceof FormGroup && value && typeof value === 'object' && !Array.isArray(value)) {
+            Object.keys(value).forEach(key => {
+                const childControl = control.get(key);
+                if (childControl)
+                    this.prepareFormArrays(childControl, value[key]);
+            });
+            return;
+        }
+        if (control instanceof FormArray && Array.isArray(value)) {
+            const formArray = control;
+            while (formArray.length < value.length) {
+                const template = formArray.at(0);
+                if (template instanceof FormGroup) {
+                    const newGroup = new FormGroup({});
+                    Object.keys(template.controls).forEach(ctrlName => {
+                        const existing = template.get(ctrlName);
+                        if (existing instanceof FormArray) {
+                            newGroup.addControl(ctrlName, new FormArray([]));
+                        }
+                        else if (existing instanceof FormGroup) {
+                            newGroup.addControl(ctrlName, new FormGroup({}));
+                        }
+                        else {
+                            newGroup.addControl(ctrlName, new FormControl(null));
+                        }
+                    });
+                    formArray.push(newGroup);
+                }
+                else if (template) {
+                    formArray.push(new FormControl(null));
+                }
+                else {
+                    const firstValue = value[0];
+                    if (firstValue && typeof firstValue === 'object' && !Array.isArray(firstValue)) {
+                        const group = new FormGroup({});
+                        Object.keys(firstValue).forEach(key => group.addControl(key, new FormControl(null)));
+                        formArray.push(group);
+                    }
+                    else {
+                        formArray.push(new FormControl(null));
+                    }
+                }
+            }
+            while (formArray.length > value.length) {
+                formArray.removeAt(formArray.length - 1);
+            }
+            value.forEach((childValue, index) => {
+                this.prepareFormArrays(formArray.at(index), childValue);
+            });
+        }
+    }
+    discardDraft() {
+        this.draftService.clear(this.formId);
+        this.performResetAndDestroyBanner();
+    }
+    /**
+     * Resets the form to initial values and destroys the draft banner.
+     * Used by the service when clearAndReset(formId) is called (e.g. on submit).
+     */
+    performResetAndDestroyBanner() {
+        var _a, _b;
+        if (this.formControl) {
+            this.isRestoring = true;
+            const form = ((_a = this.formGroupDir) === null || _a === void 0 ? void 0 : _a.form) || ((_b = this.ngForm) === null || _b === void 0 ? void 0 : _b.form);
+            if (form) {
+                this.prepareFormArrays(form, this.initialValues);
+                form.reset(this.initialValues);
+            }
+            setTimeout(() => {
+                this.isRestoring = false;
+            }, this.draftDebounce + 200);
+        }
+        this.destroyBanner();
+    }
+    showBanner(savedAt, isRestored = false) {
+        this.bannerRef = this.viewContainerRef.createComponent(FormDraftBannerComponent);
+        this.bannerRef.setInput('visible', true);
+        this.bannerRef.setInput('isRestored', isRestored);
+        this.bannerRef.setInput('timeLabel', isRestored ? this.draftService.formatTimestamp(savedAt) : '');
+        this.bannerRef.setInput('restoredText', this.draftRestoredText);
+        this.bannerRef.setInput('savedText', this.draftSavedText);
+        this.bannerRef.setInput('savedLabel', this.draftSavedLabel);
+        this.bannerRef.setInput('discardText', this.draftDiscardText);
+        this.bannerRef.instance.discard.subscribe(() => this.discardDraft());
+        const bannerEl = this.bannerRef.location.nativeElement;
+        const formEl = this.elRef.nativeElement;
+        this.renderer.insertBefore(formEl, bannerEl, formEl.firstChild);
+        this.cdRef.detectChanges();
+    }
+    destroyBanner() {
+        if (this.bannerRef) {
+            this.bannerRef.destroy();
+            this.bannerRef = null;
+        }
+    }
+    clearDraft() {
+        this.draftService.clear(this.formId);
+        this.destroyBanner();
+    }
+}
+FormDraftDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftDirective, deps: [{ token: i1$1.FormGroupDirective, optional: true }, { token: i1$1.NgForm, optional: true }, { token: FormDraftService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+FormDraftDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: FormDraftDirective, selector: "[ngxFormDraft]", inputs: { formId: ["ngxFormDraft", "formId"], draftDebounce: "draftDebounce", draftExcludeFields: "draftExcludeFields", draftShowOnChange: "draftShowOnChange", draftRestoredText: "draftRestoredText", draftSavedText: "draftSavedText", draftSavedLabel: "draftSavedLabel", draftDiscardText: "draftDiscardText" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormDraftDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxFormDraft]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.FormGroupDirective, decorators: [{
+                        type: Optional
+                    }] }, { type: i1$1.NgForm, decorators: [{
+                        type: Optional
+                    }] }, { type: FormDraftService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }];
+    }, propDecorators: { formId: [{
+                type: Input,
+                args: ['ngxFormDraft']
+            }], draftDebounce: [{
+                type: Input
+            }], draftExcludeFields: [{
+                type: Input
+            }], draftShowOnChange: [{
+                type: Input
+            }], draftRestoredText: [{
+                type: Input
+            }], draftSavedText: [{
+                type: Input
+            }], draftSavedLabel: [{
+                type: Input
+            }], draftDiscardText: [{
+                type: Input
             }] } });
 
-class NgxFormDraftModule {
-}
-NgxFormDraftModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxFormDraftModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgxFormDraftModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgxFormDraftModule, declarations: [FormDraftDirective, FormDraftBannerComponent], imports: [CommonModule], exports: [FormDraftDirective, FormDraftBannerComponent] });
-NgxFormDraftModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxFormDraftModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxFormDraftModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FormDraftDirective, FormDraftBannerComponent],
-                    imports: [CommonModule],
-                    exports: [FormDraftDirective, FormDraftBannerComponent],
-                }]
+class NgxFormDraftModule {
+}
+NgxFormDraftModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxFormDraftModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxFormDraftModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NgxFormDraftModule, declarations: [FormDraftDirective, FormDraftBannerComponent], imports: [CommonModule], exports: [FormDraftDirective, FormDraftBannerComponent] });
+NgxFormDraftModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxFormDraftModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxFormDraftModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FormDraftDirective, FormDraftBannerComponent],
+                    imports: [CommonModule],
+                    exports: [FormDraftDirective, FormDraftBannerComponent],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { FormDraftBannerComponent, FormDraftDirective, FormDraftService, NgxFormDraftModule };