@firestitch/form 9.6.7 → 9.7.2

package/fesm2015/firestitch-form.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata, __param } from 'tslib';
-import { HostBinding, HostListener, Directive, ɵɵdefineInjectable, Injectable, EventEmitter, QueryList, Inject, ElementRef, ChangeDetectorRef, NgZone, Optional, Input, Output, ContentChildren, InjectionToken, Renderer2, Injector, Self, Host, Component, ChangeDetectionStrategy, NgModule, ɵɵinject } from '@angular/core';
+import { HostBinding, HostListener, Directive, ɵɵdefineInjectable, Injectable, EventEmitter, QueryList, Inject, ElementRef, NgZone, Optional, Input, Output, ContentChildren, InjectionToken, Renderer2, Injector, Self, Host, ChangeDetectorRef, Component, ChangeDetectionStrategy, NgModule, ɵɵinject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup, NgForm, NgControl, Validators, FormsModule } from '@angular/forms';
 import { MatButton, MatButtonModule } from '@angular/material/button';
@@ -180,13 +180,12 @@ function getFormErrors(control, key) {
 }
 
 let FsFormDirective = class FsFormDirective {
-    constructor(ngForm, _form, _element, _message, _prompt, _cdRef, _ngZone, _dialogRef, _drawerRef) {
+    constructor(ngForm, _form, _element, _message, _prompt, _ngZone, _dialogRef, _drawerRef) {
         this.ngForm = ngForm;
         this._form = _form;
         this._element = _element;
         this._message = _message;
         this._prompt = _prompt;
-        this._cdRef = _cdRef;
         this._ngZone = _ngZone;
         this._dialogRef = _dialogRef;
         this._drawerRef = _drawerRef;
@@ -652,18 +651,15 @@ let FsFormDirective = class FsFormDirective {
         });
     }
     _updateDirtySubmitButtons() {
-        if (this._submitButtons) {
-            this._submitButtons.forEach((button) => {
-                button.setFormRef(this);
-                if (!this.confirm || !this.dirtySubmitButton || this.ngForm.dirty || !button.dirtySubmit) {
-                    button.enable();
-                }
-                else {
-                    button.disable();
-                }
-            });
-            this._cdRef.markForCheck();
-        }
+        this._submitButtons
+            .forEach((submitButton) => {
+            if (!this.confirm || !this.dirtySubmitButton || this.ngForm.dirty || !submitButton.dirtySubmit) {
+                submitButton.enable();
+            }
+            else {
+                submitButton.disable();
+            }
+        });
     }
     _broadcastSubmittingEvents() {
         this._status$.next(FormStatus.Submitting);
@@ -707,7 +703,6 @@ FsFormDirective.ctorParameters = () => [
     { type: ElementRef },
     { type: FsMessage },
     { type: FsPrompt },
-    { type: ChangeDetectorRef },
     { type: NgZone },
     { type: MatDialogRef, decorators: [{ type: Optional }, { type: Inject, args: [MatDialogRef,] }] },
     { type: DrawerRef, decorators: [{ type: Optional }, { type: Inject, args: [DrawerRef,] }] }
@@ -809,14 +804,13 @@ FsFormDirective = __decorate([
         selector: '[fsForm]',
     }),
     __param(0, Inject(NgForm)),
-    __param(7, Optional()), __param(7, Inject(MatDialogRef)),
-    __param(8, Optional()), __param(8, Inject(DrawerRef)),
+    __param(6, Optional()), __param(6, Inject(MatDialogRef)),
+    __param(7, Optional()), __param(7, Inject(DrawerRef)),
     __metadata("design:paramtypes", [NgForm,
         FsForm,
         ElementRef,
         FsMessage,
         FsPrompt,
-        ChangeDetectorRef,
         NgZone,
         MatDialogRef,
         DrawerRef])
@@ -1806,31 +1800,32 @@ FsFormUrlDirective = __decorate([
 ], FsFormUrlDirective);
 
 let FsSubmitButtonDirective = class FsSubmitButtonDirective {
-    constructor(_matButton, _form, _elementRef) {
+    constructor(_matButton, _form, _elementRef, _cdRef) {
         this._matButton = _matButton;
         this._form = _form;
         this._elementRef = _elementRef;
+        this._cdRef = _cdRef;
         this.dirtySubmit = true;
         this.transitionStyle = null;
         this.active = false;
         this._destroy$ = new Subject();
     }
     ngOnInit() {
-        this._form.addSubmitButton(this);
-        fromEvent(this.element, 'click')
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.active = true;
-        });
-    }
-    setFormRef(formRef) {
-        if (formRef) {
-            this.transitionStyle = 'none';
-        }
-        if (formRef && this.dirtySubmit) {
-            if (formRef.dirtySubmitButton) {
-                this.disable();
+        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.transitionStyle = 'none';
             setTimeout(() => {
                 this.transitionStyle = null;
             }, 500);
@@ -1839,12 +1834,14 @@ let FsSubmitButtonDirective = class FsSubmitButtonDirective {
     disable() {
         if (this._matButton) {
             this._matButton.disabled = true;
+            this._cdRef.markForCheck();
         }
     }
     enable() {
         if (this._matButton) {
             this._matButton.disabled = false;
             this._matButton.disableRipple = true;
+            this._cdRef.markForCheck();
         }
     }
     process() {
@@ -1920,7 +1917,8 @@ let FsSubmitButtonDirective = class FsSubmitButtonDirective {
 FsSubmitButtonDirective.ctorParameters = () => [
     { type: MatButton, decorators: [{ type: Optional }, { type: Host }] },
     { type: FsFormDirective, decorators: [{ type: Optional }] },
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
 ];
 __decorate([
     Input(),
@@ -1936,13 +1934,14 @@ __decorate([
 ], FsSubmitButtonDirective.prototype, "transitionStyle", void 0);
 FsSubmitButtonDirective = __decorate([
     Directive({
-        selector: 'form button[type="submit"],form button:not([type])',
+        selector: 'button[type="submit"]',
     }),
     __param(0, Optional()), __param(0, Host()),
     __param(1, Optional()),
     __metadata("design:paramtypes", [MatButton,
         FsFormDirective,
-        ElementRef])
+        ElementRef,
+        ChangeDetectorRef])
 ], FsSubmitButtonDirective);
 
 let FsFormValidateDirective = class FsFormValidateDirective extends FsControlDirective {
@@ -1974,8 +1973,9 @@ let FsFormDialogActionsComponent = class FsFormDialogActionsComponent {
     constructor(_form, _cdRef) {
         this._form = _form;
         this._cdRef = _cdRef;
+        this.save = true;
         this.create = false;
-        this.close = true;
+        this.close = false;
         this.dirty = false;
         this._destroy$ = new Subject();
     }
@@ -2002,6 +2002,10 @@ FsFormDialogActionsComponent.ctorParameters = () => [
     { type: FsFormDirective, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef }
 ];
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsFormDialogActionsComponent.prototype, "save", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object)
@@ -2010,11 +2014,16 @@ __decorate([
     Input(),
     __metadata("design:type", Object)
 ], FsFormDialogActionsComponent.prototype, "close", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FsFormDialogActionsComponent.prototype, "name", void 0);
 FsFormDialogActionsComponent = __decorate([
     Component({
         selector: 'fs-form-dialog-actions',
-        template: "<button \r\n    mat-button \r\n    type=\"button\"\r\n    color=\"primary\" \r\n    *ngIf=\"close && !dirty && !create\"\r\n    [matDialogClose]=\"null\">\r\n  Close\r\n</button>\r\n<button \r\n    mat-button \r\n    *ngIf=\"dirty || create || !close\"\r\n    type=\"submit\"\r\n    color=\"primary\" \r\n    name=\"save\">\r\n  {{create ? 'Create' : 'Save'}}\r\n</button>\r\n<ng-content></ng-content>\r\n<button \r\n    mat-button \r\n    type=\"button\"\r\n    *ngIf=\"dirty || create || !close\"\r\n    [matDialogClose]=\"null\">\r\n  Cancel\r\n</button>\r\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
+        template: "<div class=\"buttons\">\r\n  <ng-container *ngIf=\"save\">\r\n    <button \r\n        mat-button \r\n        type=\"submit\"\r\n        color=\"primary\" \r\n        [name]=\"name\">\r\n      {{create ? 'Create' : 'Save'}}\r\n    </button>\r\n    <button \r\n        mat-button \r\n        type=\"button\"\r\n        [disabled]=\"!dirty && !create\"\r\n        [matDialogClose]=\"null\">\r\n      Cancel\r\n    </button>\r\n  </ng-container>\r\n\r\n  <ng-content></ng-content>\r\n  <div class=\"close\" *ngIf=\"close\">\r\n    <button \r\n        mat-button \r\n        type=\"button\"\r\n        [color]=\"dirty ? 'basic' : 'primary'\"\r\n        [matDialogClose]=\"null\">\r\n      Close\r\n    </button>\r\n  </div>\r\n</div>",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        styles: [".buttons{display:flex;flex-grow:1;align-items:center}.buttons .close{display:flex;flex-grow:1;justify-content:flex-end}:host{display:flex;flex-grow:1}"]
     }),
     __param(0, Optional()),
     __metadata("design:paramtypes", [FsFormDirective,