@firestitch/form 12.4.9 → 12.4.11

package/app/directives/button.directive.d.ts

@@ -9,6 +9,7 @@ export declare class FsButtonDirective implements OnInit, OnDestroy {
     private _cdRef;
     name: any;
     dirtySubmit: boolean;
+    form: FsFormDirective;
     transitionStyle: any;
     active: boolean;
     submit: boolean;
@@ -30,5 +31,5 @@ export declare class FsButtonDirective implements OnInit, OnDestroy {
     private _resetClass;
     private _getSvg;
     static ɵfac: i0.ɵɵFactoryDeclaration<FsButtonDirective, [{ optional: true; host: true; }, { optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FsButtonDirective, "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", never, { "name": "name"; "dirtySubmit": "dirtySubmit"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FsButtonDirective, "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", never, { "name": "name"; "dirtySubmit": "dirtySubmit"; "form": "form"; }, {}, never>;
 }

package/bundles/firestitch-form.umd.js

@@ -1359,16 +1359,9 @@
         };
         FsControlDirective.prototype.ngAfterContentInit = function () {
             if (this._control) {
-                /*
-                  Ensure that statusChanges has one subscription per control. Multiple can happen
-                  when multiple fsForm validation directives are applied to the same element
-                */
-                if (!this._control.statusChangesSubscribe) {
-                    this._control.statusChanges
-                        .pipe(operators.takeUntil(this._destroy$))
-                        .subscribe(this.render.bind(this));
-                    this._control.statusChangesSubscribe = true;
-                }
+                this._control.statusChanges
+                    .pipe(operators.takeUntil(this._destroy$))
+                    .subscribe(this.render.bind(this));
             }
         };
         FsControlDirective.prototype.getMessageSelector = function () {
@@ -1437,6 +1430,10 @@
         */
         FsControlDirective.prototype.render = function () {
             var _a, _b;
+            if (this._control.statusChangesSubscribe) {
+                return;
+            }
+            this._control.statusChangesSubscribe = true;
             if (this.ngControl) {
                 var renderer = this.renderer2;
                 var wrapper = this.getWrapperElement();
@@ -2469,8 +2466,9 @@
         FsButtonDirective.prototype.ngOnInit = function () {
             var _this = this;
             this.submit = this._elementRef.nativeElement.getAttribute('type') === 'submit';
-            if (this._form) {
-                this._form.addButton(this);
+            this.form = this.form || this._form;
+            if (this.form) {
+                this.form.addButton(this);
                 if (this.submit) {
                     rxjs.fromEvent(this.element, 'click')
                         .pipe(operators.takeUntil(this._destroy$))
@@ -2478,8 +2476,8 @@
                         _this.active = true;
                     });
                     if (this.dirtySubmit) {
-                        if (this._form.dirtySubmitButton) {
-                            if (!this._form.ngForm.dirty) {
+                        if (this.form.dirtySubmitButton) {
+                            if (!this.form.ngForm.dirty) {
                                 this.disable();
                             }
                         }
@@ -2557,7 +2555,7 @@
             var _a;
             this._destroy$.next();
             this._destroy$.complete();
-            (_a = this._form) === null || _a === void 0 ? void 0 : _a.removeButton(this);
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.removeButton(this);
         };
         FsButtonDirective.prototype._disableShadowAnimation = function () {
             // .mat-elevation-z2 removes the click shadow animation
@@ -2580,7 +2578,7 @@
         return FsButtonDirective;
     }());
     FsButtonDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsButtonDirective, deps: [{ token: i1__namespace$2.MatButton, host: true, optional: true }, { token: FsFormDirective, optional: true }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    FsButtonDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    FsButtonDirective.ɵdir = i0__namespace.ɵɵ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", form: "form" }, host: { properties: { "style.transition": "this.transitionStyle" } }, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsButtonDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
@@ -2598,6 +2596,8 @@
                     type: i0.Input
                 }], dirtySubmit: [{
                     type: i0.Input
+                }], form: [{
+                    type: i0.Input
                 }], transitionStyle: [{
                     type: i0.HostBinding,
                     args: ['style.transition']
@@ -2699,7 +2699,7 @@
         return FsFormDialogActionsComponent;
     }());
     FsFormDialogActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFormDialogActionsComponent, deps: [{ token: FsFormDirective, optional: true }, { token: i2__namespace$1.MatDialogRef, optional: true }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFormDialogActionsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsFormDialogActionsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.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__namespace$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFormDialogActionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{