ngx-form-draft 1.0.0 → 1.0.2

package/README.md

@@ -18,6 +18,18 @@ Zero-dependency Angular form draft auto-save and restore. Works with any Angular
 npm install ngx-form-draft
 ```
 
+### Angular 12 Users
+
+If you're using Angular 12, enable Ivy in your `tsconfig.json`:
+
+```json
+{
+  "angularCompilerOptions": {
+    "enableIvy": true
+  }
+}
+```
+
 ## Usage
 
 ### 1. Import the module

package/dist/form-draft-banner.component.d.ts

@@ -1,11 +1,11 @@
-import { EventEmitter } from '@angular/core';
-export declare class FormDraftBannerComponent {
-    visible: boolean;
-    timeLabel: string;
-    isRestored: boolean;
-    restoredText: string;
-    savedText: string;
-    savedLabel: string;
-    discardText: string;
-    discard: EventEmitter<void>;
-}
+import { EventEmitter } from '@angular/core';
+export declare class FormDraftBannerComponent {
+    visible: boolean;
+    timeLabel: string;
+    isRestored: boolean;
+    restoredText: string;
+    savedText: string;
+    savedLabel: string;
+    discardText: string;
+    discard: EventEmitter<void>;
+}

package/dist/form-draft-banner.component.js

@@ -1,53 +1,53 @@
-import { __decorate, __metadata } from "tslib";
-import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
-import { trigger, transition, style, animate } from '@angular/animations';
-let FormDraftBannerComponent = 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();
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftBannerComponent.prototype, "visible", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftBannerComponent.prototype, "timeLabel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftBannerComponent.prototype, "isRestored", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftBannerComponent.prototype, "restoredText", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftBannerComponent.prototype, "savedText", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftBannerComponent.prototype, "savedLabel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftBannerComponent.prototype, "discardText", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FormDraftBannerComponent.prototype, "discard", void 0);
-FormDraftBannerComponent = __decorate([
-    Component({
-        selector: 'ngx-form-draft-banner',
+import { __decorate, __metadata } from "tslib";
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+let FormDraftBannerComponent = 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();
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftBannerComponent.prototype, "visible", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftBannerComponent.prototype, "timeLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftBannerComponent.prototype, "isRestored", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftBannerComponent.prototype, "restoredText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftBannerComponent.prototype, "savedText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftBannerComponent.prototype, "savedLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftBannerComponent.prototype, "discardText", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FormDraftBannerComponent.prototype, "discard", void 0);
+FormDraftBannerComponent = __decorate([
+    Component({
+        selector: 'ngx-form-draft-banner',
         template: `
     <div class="form-draft-banner" *ngIf="visible" [@slideDown]>
       <div class="form-draft-banner__icon">
@@ -71,7 +71,7 @@ FormDraftBannerComponent = __decorate([
         </button>
       </div>
     </div>
-  `,
+  `,
         styles: [`
     :host { display: block; width: 100%; }
     .form-draft-banner {
@@ -93,19 +93,19 @@ FormDraftBannerComponent = __decorate([
     }
     .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; }
-  `],
-        animations: [
-            trigger('slideDown', [
-                transition(':enter', [
-                    style({ opacity: 0, transform: 'translateY(-8px)' }),
-                    animate('250ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 1, transform: 'translateY(0)' }))
-                ]),
-                transition(':leave', [
-                    animate('200ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 0, transform: 'translateY(-8px)' }))
-                ])
-            ])
-        ],
-        changeDetection: ChangeDetectionStrategy.OnPush,
-    })
-], FormDraftBannerComponent);
-export { FormDraftBannerComponent };
+  `],
+        animations: [
+            trigger('slideDown', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'translateY(-8px)' }),
+                    animate('250ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 1, transform: 'translateY(0)' }))
+                ]),
+                transition(':leave', [
+                    animate('200ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 0, transform: 'translateY(-8px)' }))
+                ])
+            ])
+        ],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+    })
+], FormDraftBannerComponent);
+export { FormDraftBannerComponent };

package/dist/form-draft.directive.d.ts

@@ -1,47 +1,47 @@
-import { OnInit, OnDestroy, ViewContainerRef, ChangeDetectorRef, ElementRef, Renderer2 } from '@angular/core';
-import { NgForm, FormGroupDirective } from '@angular/forms';
-import { FormDraftService } from './form-draft.service';
-/**
- * Auto-saves and restores form drafts
- *
- * @example
- * <form [formGroup]="myForm" ngxFormDraft="myFormId">
- *
- * @example
- * <form [formGroup]="myForm" [ngxFormDraft]="'edit_' + entityId" [draftExcludeFields]="['password']">
- */
-export declare class FormDraftDirective implements OnInit, OnDestroy {
-    private formGroupDir;
-    private ngForm;
-    private draftService;
-    private viewContainerRef;
-    private cdRef;
-    private elRef;
-    private renderer;
-    formId: string;
-    draftDebounce: number;
-    draftExcludeFields: string[];
-    draftShowOnChange: boolean;
-    draftRestoredText: string;
-    draftSavedText: string;
-    draftSavedLabel: string;
-    draftDiscardText: string;
-    private destroy$;
-    private bannerRef;
-    private formControl;
-    private initialValues;
-    private isRestoring;
-    constructor(formGroupDir: FormGroupDirective, ngForm: NgForm, draftService: FormDraftService, viewContainerRef: ViewContainerRef, cdRef: ChangeDetectorRef, elRef: ElementRef, renderer: Renderer2);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    private saveDraft;
-    private filterFields;
-    private isAllEmpty;
-    private matchesInitialValues;
-    private restoreDraft;
-    private prepareFormArrays;
-    private discardDraft;
-    private showBanner;
-    private destroyBanner;
-    clearDraft(): void;
-}
+import { OnInit, OnDestroy, ViewContainerRef, ChangeDetectorRef, ElementRef, Renderer2 } from '@angular/core';
+import { NgForm, FormGroupDirective } from '@angular/forms';
+import { FormDraftService } from './form-draft.service';
+/**
+ * Auto-saves and restores form drafts
+ *
+ * @example
+ * <form [formGroup]="myForm" ngxFormDraft="myFormId">
+ *
+ * @example
+ * <form [formGroup]="myForm" [ngxFormDraft]="'edit_' + entityId" [draftExcludeFields]="['password']">
+ */
+export declare class FormDraftDirective implements OnInit, OnDestroy {
+    private formGroupDir;
+    private ngForm;
+    private draftService;
+    private viewContainerRef;
+    private cdRef;
+    private elRef;
+    private renderer;
+    formId: string;
+    draftDebounce: number;
+    draftExcludeFields: string[];
+    draftShowOnChange: boolean;
+    draftRestoredText: string;
+    draftSavedText: string;
+    draftSavedLabel: string;
+    draftDiscardText: string;
+    private destroy$;
+    private bannerRef;
+    private formControl;
+    private initialValues;
+    private isRestoring;
+    constructor(formGroupDir: FormGroupDirective, ngForm: NgForm, draftService: FormDraftService, viewContainerRef: ViewContainerRef, cdRef: ChangeDetectorRef, elRef: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private saveDraft;
+    private filterFields;
+    private isAllEmpty;
+    private matchesInitialValues;
+    private restoreDraft;
+    private prepareFormArrays;
+    private discardDraft;
+    private showBanner;
+    private destroyBanner;
+    clearDraft(): void;
+}

package/dist/form-draft.directive.js

@@ -1,240 +1,240 @@
-import { __decorate, __metadata, __param } from "tslib";
-import { Directive, Input, Optional, ViewContainerRef, ChangeDetectorRef, ElementRef, Renderer2, } from '@angular/core';
-import { NgForm, FormGroupDirective, FormArray, FormGroup, FormControl } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { debounceTime, takeUntil } from 'rxjs/operators';
-import { FormDraftService } from './form-draft.service';
-import { FormDraftBannerComponent } from './form-draft-banner.component';
-/**
- * Auto-saves and restores form drafts
- *
- * @example
- * <form [formGroup]="myForm" ngxFormDraft="myFormId">
- *
- * @example
- * <form [formGroup]="myForm" [ngxFormDraft]="'edit_' + entityId" [draftExcludeFields]="['password']">
- */
-let FormDraftDirective = 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.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);
-        }
-        this.formControl.valueChanges
-            .pipe(debounceTime(this.draftDebounce), takeUntil(this.destroy$))
-            .subscribe((values) => {
-            if (this.isRestoring)
-                return;
-            this.saveDraft(values);
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.destroyBanner();
-    }
-    saveDraft(values) {
-        const filtered = this.filterFields(values);
-        if (this.isAllEmpty(filtered) || 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() {
-        var _a, _b;
-        this.draftService.clear(this.formId);
-        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();
-    }
-};
-__decorate([
-    Input('ngxFormDraft'),
-    __metadata("design:type", String)
-], FormDraftDirective.prototype, "formId", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftDirective.prototype, "draftDebounce", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FormDraftDirective.prototype, "draftExcludeFields", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftDirective.prototype, "draftShowOnChange", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftDirective.prototype, "draftRestoredText", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftDirective.prototype, "draftSavedText", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftDirective.prototype, "draftSavedLabel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FormDraftDirective.prototype, "draftDiscardText", void 0);
-FormDraftDirective = __decorate([
-    Directive({
-        selector: '[ngxFormDraft]',
-    }),
-    __param(0, Optional()),
-    __param(1, Optional()),
-    __metadata("design:paramtypes", [FormGroupDirective,
-        NgForm,
-        FormDraftService,
-        ViewContainerRef,
-        ChangeDetectorRef,
-        ElementRef,
-        Renderer2])
-], FormDraftDirective);
-export { FormDraftDirective };
+import { __decorate, __metadata, __param } from "tslib";
+import { Directive, Input, Optional, ViewContainerRef, ChangeDetectorRef, ElementRef, Renderer2, } from '@angular/core';
+import { NgForm, FormGroupDirective, FormArray, FormGroup, FormControl } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { FormDraftService } from './form-draft.service';
+import { FormDraftBannerComponent } from './form-draft-banner.component';
+/**
+ * Auto-saves and restores form drafts
+ *
+ * @example
+ * <form [formGroup]="myForm" ngxFormDraft="myFormId">
+ *
+ * @example
+ * <form [formGroup]="myForm" [ngxFormDraft]="'edit_' + entityId" [draftExcludeFields]="['password']">
+ */
+let FormDraftDirective = 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.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);
+        }
+        this.formControl.valueChanges
+            .pipe(debounceTime(this.draftDebounce), takeUntil(this.destroy$))
+            .subscribe((values) => {
+            if (this.isRestoring)
+                return;
+            this.saveDraft(values);
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.destroyBanner();
+    }
+    saveDraft(values) {
+        const filtered = this.filterFields(values);
+        if (this.isAllEmpty(filtered) || 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() {
+        var _a, _b;
+        this.draftService.clear(this.formId);
+        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();
+    }
+};
+__decorate([
+    Input('ngxFormDraft'),
+    __metadata("design:type", String)
+], FormDraftDirective.prototype, "formId", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftDirective.prototype, "draftDebounce", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FormDraftDirective.prototype, "draftExcludeFields", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftDirective.prototype, "draftShowOnChange", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftDirective.prototype, "draftRestoredText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftDirective.prototype, "draftSavedText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftDirective.prototype, "draftSavedLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FormDraftDirective.prototype, "draftDiscardText", void 0);
+FormDraftDirective = __decorate([
+    Directive({
+        selector: '[ngxFormDraft]',
+    }),
+    __param(0, Optional()),
+    __param(1, Optional()),
+    __metadata("design:paramtypes", [FormGroupDirective,
+        NgForm,
+        FormDraftService,
+        ViewContainerRef,
+        ChangeDetectorRef,
+        ElementRef,
+        Renderer2])
+], FormDraftDirective);
+export { FormDraftDirective };

package/dist/form-draft.service.d.ts

@@ -1,14 +1,14 @@
-export interface FormDraftData {
-    values: Record<string, any>;
-    savedAt: number;
-    formId: string;
-}
-export declare class FormDraftService {
-    private readonly STORAGE_PREFIX;
-    private readonly MAX_AGE_MS;
-    private buildKey;
-    save(formId: string, values: Record<string, any>): void;
-    load(formId: string): FormDraftData | null;
-    clear(formId: string): void;
-    formatTimestamp(timestamp: number): string;
-}
+export interface FormDraftData {
+    values: Record<string, any>;
+    savedAt: number;
+    formId: string;
+}
+export declare class FormDraftService {
+    private readonly STORAGE_PREFIX;
+    private readonly MAX_AGE_MS;
+    private buildKey;
+    save(formId: string, values: Record<string, any>): void;
+    load(formId: string): FormDraftData | null;
+    clear(formId: string): void;
+    formatTimestamp(timestamp: number): string;
+}

package/dist/form-draft.service.js

@@ -1,64 +1,64 @@
-import { __decorate } from "tslib";
-import { Injectable } from '@angular/core';
-let FormDraftService = class FormDraftService {
-    constructor() {
-        this.STORAGE_PREFIX = 'form_draft_';
-        this.MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
-    }
-    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 = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], FormDraftService);
-export { FormDraftService };
+import { __decorate } from "tslib";
+import { Injectable } from '@angular/core';
+let FormDraftService = class FormDraftService {
+    constructor() {
+        this.STORAGE_PREFIX = 'form_draft_';
+        this.MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
+    }
+    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 = __decorate([
+    Injectable({
+        providedIn: 'root'
+    })
+], FormDraftService);
+export { FormDraftService };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from './form-draft.directive';
-export * from './form-draft-banner.component';
-export * from './form-draft.service';
-export * from './ngx-form-draft.module';
+export * from './form-draft.directive';
+export * from './form-draft-banner.component';
+export * from './form-draft.service';
+export * from './ngx-form-draft.module';

package/dist/index.js

@@ -1,4 +1,4 @@
-export * from './form-draft.directive';
-export * from './form-draft-banner.component';
-export * from './form-draft.service';
-export * from './ngx-form-draft.module';
+export * from './form-draft.directive';
+export * from './form-draft-banner.component';
+export * from './form-draft.service';
+export * from './ngx-form-draft.module';

package/dist/ngx-form-draft.module.d.ts

@@ -1,2 +1,2 @@
-export declare class NgxFormDraftModule {
-}
+export declare class NgxFormDraftModule {
+}

package/dist/ngx-form-draft.module.js

@@ -1,15 +1,15 @@
-import { __decorate } from "tslib";
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormDraftDirective } from './form-draft.directive';
-import { FormDraftBannerComponent } from './form-draft-banner.component';
-let NgxFormDraftModule = class NgxFormDraftModule {
-};
-NgxFormDraftModule = __decorate([
-    NgModule({
-        declarations: [FormDraftDirective, FormDraftBannerComponent],
-        imports: [CommonModule],
-        exports: [FormDraftDirective, FormDraftBannerComponent],
-    })
-], NgxFormDraftModule);
-export { NgxFormDraftModule };
+import { __decorate } from "tslib";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormDraftDirective } from './form-draft.directive';
+import { FormDraftBannerComponent } from './form-draft-banner.component';
+let NgxFormDraftModule = class NgxFormDraftModule {
+};
+NgxFormDraftModule = __decorate([
+    NgModule({
+        declarations: [FormDraftDirective, FormDraftBannerComponent],
+        imports: [CommonModule],
+        exports: [FormDraftDirective, FormDraftBannerComponent],
+    })
+], NgxFormDraftModule);
+export { NgxFormDraftModule };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-form-draft",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Auto-save and restore Angular form drafts with zero dependencies",
   "main": "dist/index.js",
   "module": "dist/index.js",