@firestitch/form 12.3.0 → 12.3.1

package/fesm2015/firestitch-form.js

@@ -217,7 +217,6 @@ class FsFormDirective {
         this.cleared = new EventEmitter();
         this.fsformClass = true;
         this._tabGroups = new QueryList();
-        this._submitButtons = new QueryList();
         this._buttons = new QueryList();
         this._dialogBackdropEscape = false;
         this._snapshot = {};
@@ -339,7 +338,7 @@ class FsFormDirective {
     }
     disable() {
         this.ngForm.control.disable();
-        this._submitButtons.forEach((button) => {
+        this._buttons.forEach((button) => {
             button.disable();
         });
     }
@@ -355,18 +354,6 @@ class FsFormDirective {
                 .filter((item) => (button !== item)),
         ]);
     }
-    addSubmitButton(submitButton) {
-        this._submitButtons.reset([
-            ...this._submitButtons.toArray(),
-            submitButton,
-        ]);
-    }
-    removeSubmitButton(submitButton) {
-        this._submitButtons.reset([
-            ...this._submitButtons.toArray()
-                .filter((submitButton_) => (submitButton !== submitButton_)),
-        ]);
-    }
     _listenSubmit() {
         this.ngForm
             .ngSubmit
@@ -451,11 +438,14 @@ class FsFormDirective {
             });
         }
     }
-    _getActiveButton() {
-        const activeButton = this._submitButtons.find(button => {
+    _getActiveSubmitButton() {
+        const submitButtons = this._buttons
+            .filter((button) => button.submit);
+        const activeButton = submitButtons
+            .find(button => {
             return button.active;
         });
-        return activeButton ? activeButton : this._submitButtons.first;
+        return activeButton ? activeButton : submitButtons[0];
     }
     _elementInForm(el) {
         if (el.isSameNode(this._element.nativeElement)) {
@@ -501,15 +491,18 @@ class FsFormDirective {
                 this._status$.next(FormStatus.Invalid);
             }
             this._resetButtons();
+            this._resetActiveButtons();
             this._updateDirtySubmitButtons();
         });
     }
     _resetButtons() {
-        this._submitButtons.forEach((button) => {
+        this._buttons.forEach((button) => {
             button.reset();
         });
+    }
+    _resetActiveButtons() {
         this._buttons.forEach((button) => {
-            button.reset();
+            button.resetActive();
         });
     }
     _registerConfirm() {
@@ -670,14 +663,15 @@ class FsFormDirective {
             .subscribe(() => {
             this._updateDirtySubmitButtons();
         });
-        this._submitButtons.changes
+        this._buttons.changes
             .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
             this._updateDirtySubmitButtons();
         });
     }
     _updateDirtySubmitButtons() {
-        this._submitButtons
+        this._buttons
+            .filter((button) => button.submit)
             .forEach((submitButton) => {
             if (!this.confirm || !this.dirtySubmitButton || this.ngForm.dirty || !submitButton.dirtySubmit) {
                 submitButton.enable();
@@ -700,7 +694,7 @@ class FsFormDirective {
         });
     }
     _setupActiveSubmitButton() {
-        this._activeSubmitButton = this._getActiveButton();
+        this._activeSubmitButton = this._getActiveSubmitButton();
         this._resetButtons();
         if (this._activeSubmitButton) {
             this._activeSubmitButton.process();
@@ -1783,7 +1777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['fsFormUrlMessage']
             }] } });
 
-class FsSubmitButtonDirective {
+class FsButtonDirective {
     constructor(_matButton, _form, _elementRef, _cdRef) {
         this._matButton = _matButton;
         this._form = _form;
@@ -1792,31 +1786,37 @@ class FsSubmitButtonDirective {
         this.dirtySubmit = true;
         this.transitionStyle = null;
         this.active = false;
+        this.submit = false;
+        this._previousDisabled = false;
         this._destroy$ = new Subject();
     }
     ngOnInit() {
+        this.submit = this._elementRef.nativeElement.getAttribute('type') === 'submit';
         if (this._form) {
-            this._form.addSubmitButton(this);
-            fromEvent(this.element, 'click')
-                .pipe(takeUntil(this._destroy$))
-                .subscribe(() => {
-                this.active = true;
-            });
-            if (this.dirtySubmit) {
-                if (this._form.dirtySubmitButton) {
-                    if (!this._form.ngForm.dirty) {
-                        this.disable();
+            this._form.addButton(this);
+            if (this.submit) {
+                fromEvent(this.element, 'click')
+                    .pipe(takeUntil(this._destroy$))
+                    .subscribe(() => {
+                    this.active = true;
+                });
+                if (this.dirtySubmit) {
+                    if (this._form.dirtySubmitButton) {
+                        if (!this._form.ngForm.dirty) {
+                            this.disable();
+                        }
                     }
                 }
+                this.transitionStyle = 'none';
+                setTimeout(() => {
+                    this.transitionStyle = null;
+                }, 500);
             }
-            this.transitionStyle = 'none';
-            setTimeout(() => {
-                this.transitionStyle = null;
-            }, 500);
         }
     }
     disable() {
-        if (this._matButton) {
+        if (this._matButton && !this.active) {
+            this._previousDisabled = this._matButton.disabled;
             this._matButton.disabled = true;
             this._cdRef.markForCheck();
         }
@@ -1850,9 +1850,13 @@ class FsSubmitButtonDirective {
     get element() {
         return this._elementRef.nativeElement;
     }
-    reset() {
+    resetActive() {
         this.active = false;
-        this.enable();
+    }
+    reset() {
+        if (!this._previousDisabled) {
+            this.enable();
+        }
         this.element.querySelectorAll('.svg-icon')
             .forEach((el) => {
             el.remove();
@@ -1864,7 +1868,7 @@ class FsSubmitButtonDirective {
         var _a;
         this._destroy$.next();
         this._destroy$.complete();
-        (_a = this._form) === null || _a === void 0 ? void 0 : _a.removeSubmitButton(this);
+        (_a = this._form) === null || _a === void 0 ? void 0 : _a.removeButton(this);
     }
     _disableShadowAnimation() {
         // .mat-elevation-z2 removes the click shadow animation
@@ -1899,12 +1903,12 @@ class FsSubmitButtonDirective {
         }
     }
 }
-FsSubmitButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSubmitButtonDirective, deps: [{ token: i1$1.MatButton, host: true, optional: true }, { token: FsFormDirective, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-FsSubmitButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: { name: "name", dirtySubmit: "dirtySubmit" }, host: { properties: { "style.transition": "this.transitionStyle" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSubmitButtonDirective, decorators: [{
+FsButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsButtonDirective, deps: [{ token: i1$1.MatButton, host: true, optional: true }, { token: FsFormDirective, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+FsButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: { name: "name", dirtySubmit: "dirtySubmit" }, host: { properties: { "style.transition": "this.transitionStyle" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsButtonDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'button[type="submit"]',
+                    selector: '[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]',
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.MatButton, decorators: [{
                     type: Optional
@@ -1949,59 +1953,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['validateData']
             }] } });
 
-class FsButtonDirective {
-    constructor(_matButton, _form, _cdRef) {
-        this._matButton = _matButton;
-        this._form = _form;
-        this._cdRef = _cdRef;
-        this.previous = false;
-        this._destroy$ = new Subject();
-    }
-    disable() {
-        this.previous = this._matButton.disabled;
-        if (this._matButton && !this.previous) {
-            this._matButton.disabled = true;
-            this._cdRef.markForCheck();
-        }
-    }
-    enable() {
-        if (this._matButton) {
-            this._matButton.disabled = false;
-            this._cdRef.markForCheck();
-        }
-    }
-    reset() {
-        if (this._matButton && !this.previous) {
-            this.enable();
-        }
-    }
-    ngOnInit() {
-        if (this._form) {
-            this._form.addButton(this);
-        }
-    }
-    ngOnDestroy() {
-        var _a;
-        this._destroy$.next();
-        this._destroy$.complete();
-        (_a = this._form) === null || _a === void 0 ? void 0 : _a.removeButton(this);
-    }
-}
-FsButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsButtonDirective, deps: [{ token: i1$1.MatButton, host: true, optional: true }, { token: FsFormDirective, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-FsButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsButtonDirective, selector: "[mat-raised-button][type=\"button\"],[mat-flat-button][type=\"button\"],[mat-stroked-button][type=\"button\"],[mat-button][type=\"button\"]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mat-raised-button][type="button"],[mat-flat-button][type="button"],[mat-stroked-button][type="button"],[mat-button][type="button"]',
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatButton, decorators: [{
-                    type: Optional
-                }, {
-                    type: Host
-                }] }, { type: FsFormDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; } });
-
 class FsFormDialogActionsComponent {
     constructor(_form, _dialogRef, _cdRef) {
         this._form = _form;
@@ -2054,7 +2005,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", 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=\"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}:host{display:flex;flex-grow:1}@media only screen and (max-width: 599px){.buttons{flex-direction:column}}\n"], components: [{ type: i1$1.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: FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: FsButtonDirective, selector: "[mat-raised-button][type=\"button\"],[mat-flat-button][type=\"button\"],[mat-stroked-button][type=\"button\"],[mat-button][type=\"button\"]" }, { 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", 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=\"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}:host{display:flex;flex-grow:1}@media only screen and (max-width: 599px){.buttons{flex-direction:column}}\n"], components: [{ type: i1$1.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"] }, { 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: [{
@@ -2156,7 +2107,6 @@ FsFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FsFormLesserDirective,
         FsFormUrlDirective,
         FsFormDialogCloseDirective,
-        FsSubmitButtonDirective,
         FsFormValidateDirective,
         FsFormDialogActionsComponent,
         FsFormNoFsValidatorsDirective,
@@ -2183,7 +2133,6 @@ FsFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FsFormLesserDirective,
         FsFormUrlDirective,
         FsFormDialogCloseDirective,
-        FsSubmitButtonDirective,
         FsFormValidateDirective,
         FsFormDialogActionsComponent,
         FsFormNoFsValidatorsDirective,
@@ -2229,7 +2178,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsFormLesserDirective,
                         FsFormUrlDirective,
                         FsFormDialogCloseDirective,
-                        FsSubmitButtonDirective,
                         FsFormValidateDirective,
                         FsFormDialogActionsComponent,
                         FsFormNoFsValidatorsDirective,
@@ -2256,7 +2204,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsFormLesserDirective,
                         FsFormUrlDirective,
                         FsFormDialogCloseDirective,
-                        FsSubmitButtonDirective,
                         FsFormValidateDirective,
                         FsFormDialogActionsComponent,
                         FsFormNoFsValidatorsDirective,
@@ -2308,5 +2255,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ConfirmResult, FormDeactivateGuard, FormStatus, FsButtonDirective, FsControlDirective, FsForm, FsFormCompareDirective, FsFormDateRangeDirective, FsFormDialogActionsComponent, FsFormDialogCloseDirective, FsFormDirective, FsFormEmailDirective, FsFormEmailsDirective, FsFormFunctionDirective, FsFormGreaterDirective, FsFormIntegerDirective, FsFormLesserDirective, FsFormMaxDirective, FsFormMaxLengthDirective, FsFormMinDirective, FsFormMinLengthDirective, FsFormModule, FsFormNoFsValidatorsDirective, FsFormNumericDirective, FsFormPatternDirective, FsFormPhoneDirective, FsFormRequiredDirective, FsFormUrlDirective, FsFormValidateDirective, FsSubmitButtonDirective, FsValidators };
+export { ConfirmResult, FormDeactivateGuard, FormStatus, FsButtonDirective, FsControlDirective, FsForm, FsFormCompareDirective, FsFormDateRangeDirective, FsFormDialogActionsComponent, FsFormDialogCloseDirective, FsFormDirective, FsFormEmailDirective, FsFormEmailsDirective, FsFormFunctionDirective, FsFormGreaterDirective, FsFormIntegerDirective, FsFormLesserDirective, FsFormMaxDirective, FsFormMaxLengthDirective, FsFormMinDirective, FsFormMinLengthDirective, FsFormModule, FsFormNoFsValidatorsDirective, FsFormNumericDirective, FsFormPatternDirective, FsFormPhoneDirective, FsFormRequiredDirective, FsFormUrlDirective, FsFormValidateDirective, FsValidators };
 //# sourceMappingURL=firestitch-form.js.map