ngx-form-draft 1.0.1 → 1.0.3

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

@@ -1,111 +0,0 @@
-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">
-        <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>
-  `,
-        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 rgba(18, 138, 214, 0.08);
-    }
-    .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 0.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; }
-  `],
-        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.js

@@ -1,240 +0,0 @@
-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.js

@@ -1,64 +0,0 @@
-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.js

@@ -1,4 +0,0 @@
-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.js

@@ -1,15 +0,0 @@
-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 };