@firestitch/form 12.4.16 → 12.4.18

package/fesm2015/firestitch-form.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, HostBinding, HostListener, Injectable, EventEmitter, QueryList, Inject, Optional, Input, Output, ContentChildren, InjectionToken, Self, Host, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, Directive, HostBinding, HostListener, EventEmitter, QueryList, Inject, Optional, Input, Output, ContentChildren, InjectionToken, Self, Host, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -11,12 +11,12 @@ import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import { ErrorStateMatcher, ShowOnDirtyErrorStateMatcher } from '@angular/material/core';
 import * as i3 from '@angular/router';
 import { MatTabGroup } from '@angular/material/tabs';
-import * as i2 from '@firestitch/message';
-import { MessageMode } from '@firestitch/message';
-import * as i1 from '@firestitch/prompt';
 import { guid, email, isEmpty, isNumeric, phone, url } from '@firestitch/common';
 import * as i7 from '@firestitch/drawer';
 import { DrawerRef } from '@firestitch/drawer';
+import * as i2 from '@firestitch/message';
+import { MessageMode } from '@firestitch/message';
+import * as i1 from '@firestitch/prompt';
 import { Observable, Subject, of, BehaviorSubject, isObservable, throwError, fromEvent, iif, defer, from } from 'rxjs';
 import { first, filter, map, take, mergeMap, tap, switchMap, mapTo, catchError, takeUntil, delay, startWith } from 'rxjs/operators';
 import { values, keys, isObject } from 'lodash-es';
@@ -100,33 +100,9 @@ function confirmUnsaved(directives, prompt) {
     });
 }
 
-class FsFormDialogCloseDirective {
-    constructor() {
-        this.clicked$ = new Subject();
-        this.registered = false;
-        this.type = 'button';
-    }
-    click() {
-        this.clicked$.next();
-    }
-    ngOnDestroy() {
-        this.clicked$.complete();
-    }
-}
-FsFormDialogCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FsFormDialogCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", host: { listeners: { "click": "click($event.target)" }, properties: { "attr.type": "this.type" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDialogCloseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFormDialogClose],[fs-form-dialog-close]'
-                }]
-        }], propDecorators: { type: [{
-                type: HostBinding,
-                args: ['attr.type']
-            }], click: [{
-                type: HostListener,
-                args: ['click', ['$event.target']]
-            }] } });
+function confirmResultContinue(result) {
+    return result === ConfirmResult.Discard || result === ConfirmResult.Save || result === ConfirmResult.Pristine;
+}
 
 class FsForm {
     constructor() {
@@ -164,46 +140,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-var FormStatus;
-(function (FormStatus) {
-    FormStatus["Valid"] = "valid";
-    FormStatus["Invalid"] = "invalid";
-    FormStatus["Validating"] = "validating";
-    FormStatus["Submitting"] = "submitting";
-    FormStatus["Submitted"] = "submitted";
-    FormStatus["Error"] = "error";
-    FormStatus["Success"] = "success";
-    FormStatus["Completing"] = "completing";
-})(FormStatus || (FormStatus = {}));
-
-function confirmResultContinue(result) {
-    return result === ConfirmResult.Discard || result === ConfirmResult.Save || result === ConfirmResult.Pristine;
-}
-
-function getFormErrors(control, key) {
-    let errors = null;
-    if (control.invalid && control.errors) {
-        errors = {
-            [key]: Object.assign({}, control.errors),
-        };
-    }
-    if (control instanceof FormGroup) {
-        Object.entries(control.controls)
-            .forEach(([name, childControl]) => {
-            const childErrors = getFormErrors(childControl, name);
-            if (childErrors) {
-                if (!errors) {
-                    errors = Object.assign({}, childErrors);
-                }
-                else {
-                    Object.assign(errors, childErrors);
-                }
-            }
-        });
-    }
-    return errors;
-}
-
 function getActiveRoute(route) {
     while (route.firstChild) {
         route = route.firstChild;
@@ -243,6 +179,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.FsPrompt }, { type: FsForm }, { type: i3.ActivatedRoute }]; } });
 
+function getFormErrors(control, key) {
+    let errors = null;
+    if (control.invalid && control.errors) {
+        errors = {
+            [key]: Object.assign({}, control.errors),
+        };
+    }
+    if (control instanceof FormGroup) {
+        Object.entries(control.controls)
+            .forEach(([name, childControl]) => {
+            const childErrors = getFormErrors(childControl, name);
+            if (childErrors) {
+                if (!errors) {
+                    errors = Object.assign({}, childErrors);
+                }
+                else {
+                    Object.assign(errors, childErrors);
+                }
+            }
+        });
+    }
+    return errors;
+}
+
+class FsFormDialogCloseDirective {
+    constructor() {
+        this.clicked$ = new Subject();
+        this.registered = false;
+        this.type = 'button';
+    }
+    click() {
+        this.clicked$.next();
+    }
+    ngOnDestroy() {
+        this.clicked$.complete();
+    }
+}
+FsFormDialogCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsFormDialogCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormDialogCloseDirective, selector: "[fsFormDialogClose],[fs-form-dialog-close]", host: { listeners: { "click": "click($event.target)" }, properties: { "attr.type": "this.type" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDialogCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFormDialogClose],[fs-form-dialog-close]'
+                }]
+        }], propDecorators: { type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], click: [{
+                type: HostListener,
+                args: ['click', ['$event.target']]
+            }] } });
+
+var FormStatus;
+(function (FormStatus) {
+    FormStatus["Valid"] = "valid";
+    FormStatus["Invalid"] = "invalid";
+    FormStatus["Validating"] = "validating";
+    FormStatus["Submitting"] = "submitting";
+    FormStatus["Submitted"] = "submitted";
+    FormStatus["Error"] = "error";
+    FormStatus["Success"] = "success";
+    FormStatus["Completing"] = "completing";
+})(FormStatus || (FormStatus = {}));
+
 class FsFormDirective {
     constructor(ngForm, _form, _element, _message, _prompt, _ngZone, _dialogRef, _drawerRef, _route) {
         this.ngForm = ngForm;
@@ -275,6 +275,7 @@ class FsFormDirective {
         this.submitted = new EventEmitter();
         this.reseted = new EventEmitter();
         this.cleared = new EventEmitter();
+        this.submitRegistered = new EventEmitter();
         this.fsFormClass = true;
         this._tabGroups = new QueryList();
         this._buttons = new QueryList();
@@ -357,6 +358,10 @@ class FsFormDirective {
             this._updateDirtySubmitButtons();
         }
     }
+    registerSubmit(fn) {
+        this.submit = fn;
+        this.submitRegistered.emit();
+    }
     ngAfterContentInit() {
         this._registerConfirm();
         this._registerConfirmDialogClose();
@@ -834,7 +839,7 @@ class FsFormDirective {
     }
 }
 FsFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDirective, deps: [{ token: NgForm }, { token: FsForm }, { token: i0.ElementRef }, { token: i2.FsMessage }, { token: i1.FsPrompt }, { token: i0.NgZone }, { token: MatDialogRef, optional: true }, { token: DrawerRef, optional: true }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive });
-FsFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormDirective, selector: "[fsForm]", inputs: { wrapperSelector: "wrapperSelector", messageSelector: "messageSelector", hintSelector: "hintSelector", labelSelector: "labelSelector", autocomplete: "autocomplete", shortcuts: "shortcuts", confirm: "confirm", confirmDialog: "confirmDialog", confirmDrawer: "confirmDrawer", confirmBrowser: "confirmBrowser", confirmTabs: "confirmTabs", dirtySubmitButton: "dirtySubmitButton", submit: "submit", successDelay: "successDelay", errorDelay: "errorDelay", tabGroup: "tabGroup", deactivationGuard: "deactivationGuard" }, outputs: { submitEvent: "fsForm", invalid: "invalid", valid: "valid", submitted: "submitted", reseted: "reseted", cleared: "cleared" }, host: { properties: { "class.fs-form": "this.fsFormClass" } }, queries: [{ propertyName: "formDialogClose", predicate: FsFormDialogCloseDirective, descendants: true }, { propertyName: "_tabGroups", predicate: MatTabGroup, descendants: true }], usesOnChanges: true, ngImport: i0 });
+FsFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsFormDirective, selector: "[fsForm]", inputs: { wrapperSelector: "wrapperSelector", messageSelector: "messageSelector", hintSelector: "hintSelector", labelSelector: "labelSelector", autocomplete: "autocomplete", shortcuts: "shortcuts", confirm: "confirm", confirmDialog: "confirmDialog", confirmDrawer: "confirmDrawer", confirmBrowser: "confirmBrowser", confirmTabs: "confirmTabs", dirtySubmitButton: "dirtySubmitButton", submit: "submit", successDelay: "successDelay", errorDelay: "errorDelay", tabGroup: "tabGroup", deactivationGuard: "deactivationGuard" }, outputs: { submitEvent: "fsForm", invalid: "invalid", valid: "valid", submitted: "submitted", reseted: "reseted", cleared: "cleared", submitRegistered: "submitRegistered" }, host: { properties: { "class.fs-form": "this.fsFormClass" } }, queries: [{ propertyName: "formDialogClose", predicate: FsFormDialogCloseDirective, descendants: true }, { propertyName: "_tabGroups", predicate: MatTabGroup, descendants: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDirective, decorators: [{
             type: Directive,
             args: [{
@@ -900,6 +905,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], cleared: [{
                 type: Output
+            }], submitRegistered: [{
+                type: Output
             }], fsFormClass: [{
                 type: HostBinding,
                 args: ['class.fs-form']
@@ -2149,7 +2156,7 @@ class FsFormDialogActionsComponent {
     }
 }
 FsFormDialogActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDialogActionsComponent, deps: [{ token: FsFormDirective, optional: true }, { token: i2$1.MatDialogRef, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsFormDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: { save: "save", create: "create", close: "close", done: "done", closeData: "closeData", name: "name" }, ngImport: i0, template: "<div class=\"buttons\" [ngClass]=\"{ 'save-create': save || create }\">\n  <ng-container *ngIf=\"save\">\n    <button\n        mat-button\n        type=\"submit\"\n        color=\"primary\"\n        [name]=\"name\">\n      {{create ? 'Create' : 'Save'}}\n    </button>\n    <button\n        mat-button\n        type=\"button\"\n        [disabled]=\"close && !dirty && !create\"\n        [matDialogClose]=\"null\">\n      Cancel\n    </button>\n  </ng-container>\n\n  <ng-container *ngIf=\"done\">\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [matDialogClose]=\"null\">\n      Done\n    </button>\n  </ng-container>\n\n  <ng-container *ngIf=\"save || create\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\n\n  <div class=\"close\" *ngIf=\"close\">\n    <button\n        mat-button\n        type=\"button\"\n        [color]=\"dirty ? 'basic' : 'primary'\"\n        (click)=\"closeClick()\">\n      Close\n    </button>\n  </div>\n\n  <ng-container *ngIf=\"!(save || create)\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".buttons{display:flex;flex-grow:1;align-items:center}.buttons.save-create .close{display:flex;flex-grow:1;justify-content:flex-end}@media only screen and (max-width: 599px){.buttons{flex-direction:column}}\n"], components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsFormDialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: { save: "save", create: "create", close: "close", done: "done", closeData: "closeData", name: "name" }, ngImport: i0, template: "<div class=\"form-buttons\" [ngClass]=\"{ 'save-create': save || create }\">\n  <ng-container *ngIf=\"save || create\">\n    <button\n        mat-button\n        type=\"submit\"\n        color=\"primary\"\n        [name]=\"name\">\n      {{create ? 'Create' : 'Save'}}\n    </button>\n    <button\n        mat-button\n        type=\"button\"\n        [disabled]=\"close && !dirty && !create\"\n        [matDialogClose]=\"null\">\n      Cancel\n    </button>\n  </ng-container>\n\n  <ng-container *ngIf=\"done\">\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [matDialogClose]=\"null\">\n      Done\n    </button>\n  </ng-container>\n\n  <ng-container *ngIf=\"save || create\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"close\">\n    <button\n        mat-button\n        type=\"button\"\n        class=\"close\"\n        [color]=\"dirty ? 'basic' : 'primary'\"\n        (click)=\"closeClick()\">\n      Close\n    </button>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(save || create)\">\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n  </ng-container>\n</div>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{width:100%}.form-buttons.save-create .close{float:right}\n"], components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i2$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFormDialogActionsComponent, decorators: [{
             type: Component,
             args: [{