@colijnit/corecomponents_v12 12.2.5 → 12.2.6

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -2246,6 +2246,7 @@
             this.forceRequired = false; // a force outside of [cfgName]'s influence
             // Goal: ability to emulate the red background of input fields (form-submitted invalid state)
             this.redErrorBackground = false;
+            this.commitOnBlur = true;
             // @Output()
             // public commit: EventEmitter<any> = new EventEmitter<any>();
             this.nativeBlur = new i0.EventEmitter();
@@ -2273,6 +2274,7 @@
             this._markedAsUserTouched = false;
             this._destroyed = false;
             this._hasOnPushCdStrategy = false;
+            this._modelDirtyForCommit = false;
             this._initialModelSet = false;
             this._forceReadonly = undefined;
             this._validators = [];
@@ -2315,6 +2317,7 @@
                 }
                 this._model = value;
                 this.canSaveOrCancel = this._model !== this._initialModel;
+                this._modelDirtyForCommit = this._model !== this._initialModel;
                 this._clearErrorComponent();
                 this.modelSet();
             },
@@ -2607,7 +2610,7 @@
                             committing: false,
                             commitFinished: false
                         }, {
-                            commitClick: function (event) { return _this.commitClick(event); },
+                            commitClick: function (event) { return _this._handleCommit(event); },
                             cancelClick: function (event) { return _this.cancelClick(event); }
                         });
                     }
@@ -2673,32 +2676,6 @@
             this.changeDetector = undefined;
             this.input = undefined;
         };
-        BaseInputComponent.prototype.commitClick = function (event) {
-            return __awaiter(this, void 0, void 0, function () {
-                var success;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            this.keepFocus = true;
-                            if (this._commitButtonsComponentRef) {
-                                this._commitButtonsComponentRef.instance.commitFinished = false;
-                                this._commitButtonsComponentRef.instance.committing = true;
-                            }
-                            return [4 /*yield*/, this.commit(this.model)];
-                        case 1:
-                            success = _a.sent();
-                            this.keepFocus = false;
-                            return [4 /*yield*/, this._commitFinished()];
-                        case 2:
-                            _a.sent();
-                            if (success) {
-                                this.doBlur(event);
-                            }
-                            return [2 /*return*/, success];
-                    }
-                });
-            });
-        };
         BaseInputComponent.prototype.cancelClick = function (event) {
             this.keepFocus = true;
             if (this._initialModelSet) {
@@ -2752,24 +2729,39 @@
             }
             this.focus.next();
         };
-        BaseInputComponent.prototype.doBlur = function (event) {
-            var _this = this;
-            setTimeout(function () {
-                if (_this.keepFocus || _this.keepFocussed) {
-                    if (event) {
-                        event.preventDefault;
+        BaseInputComponent.prototype.doBlur = function (event, handleCommit) {
+            if (handleCommit === void 0) { handleCommit = true; }
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(this.showSaveCancel && handleCommit)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this._handleCommit(event, false)];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            setTimeout(function () {
+                                if (_this.keepFocus || _this.keepFocussed) {
+                                    if (event) {
+                                        event.preventDefault;
+                                    }
+                                    return false;
+                                }
+                                _this.focused = false;
+                                if (_this._hasOnPushCdStrategy) {
+                                    _this.markForCheck();
+                                }
+                                if (_this.input) {
+                                    _this.input.blur();
+                                }
+                                _this.blur.next();
+                            }, 200);
+                            return [2 /*return*/];
                     }
-                    return false;
-                }
-                _this.focused = false;
-                if (_this._hasOnPushCdStrategy) {
-                    _this.markForCheck();
-                }
-                if (_this.input) {
-                    _this.input.blur();
-                }
-                _this.blur.next();
-            }, 200);
+                });
+            });
         };
         BaseInputComponent.prototype.detectChanges = function () {
             if (!this._destroyed) {
@@ -2882,6 +2874,37 @@
                 this.control.updateValueAndValidity();
             }
         };
+        BaseInputComponent.prototype._handleCommit = function (event, doBlur) {
+            if (doBlur === void 0) { doBlur = true; }
+            return __awaiter(this, void 0, void 0, function () {
+                var success;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.showSaveCancel || (!this._modelDirtyForCommit)) {
+                                return [2 /*return*/, true];
+                            }
+                            this.keepFocus = true;
+                            if (this._commitButtonsComponentRef) {
+                                this._commitButtonsComponentRef.instance.commitFinished = false;
+                                this._commitButtonsComponentRef.instance.committing = true;
+                            }
+                            return [4 /*yield*/, this.commit(this.model)];
+                        case 1:
+                            success = _a.sent();
+                            this.keepFocus = false;
+                            return [4 /*yield*/, this._commitFinished()];
+                        case 2:
+                            _a.sent();
+                            this._modelDirtyForCommit = false;
+                            if (success && doBlur) {
+                                this.doBlur(event, false);
+                            }
+                            return [2 /*return*/, success];
+                    }
+                });
+            });
+        };
         BaseInputComponent.prototype._commitFinished = function () {
             var _this = this;
             return new Promise(function (resolve) {
@@ -2894,17 +2917,13 @@
                         resolve();
                     }, 800);
                 }
+                else {
+                    resolve();
+                }
             });
         };
         BaseInputComponent.prototype._clearErrorComponent = function () {
             this.overlayService.removeComponent(this._validationComponentRef);
-            // if (this.validationErrorContainer) {
-            //   this.validationErrorContainer.clear();
-            //   if (this._errorValidationComponent) {
-            //     this._errorValidationComponent.destroy();
-            //     this._errorValidationComponent = undefined;
-            //   }
-            // }
         };
         // whether this.ngModel.control has safe access
         BaseInputComponent.prototype._controlExists = function () {
@@ -3012,7 +3031,7 @@
                         case 1:
                             if (!!event.shiftKey) return [3 /*break*/, 3];
                             event.preventDefault();
-                            return [4 /*yield*/, this.commitClick()];
+                            return [4 /*yield*/, this._handleCommit()];
                         case 2:
                             _b.sent();
                             return [2 /*return*/, false];
@@ -3020,7 +3039,7 @@
                         case 4:
                             nextSiblingToFocus = event.shiftKey ? event.currentTarget.previousSibling : event.currentTarget.nextSibling;
                             event.preventDefault();
-                            return [4 /*yield*/, this.commitClick()];
+                            return [4 /*yield*/, this._handleCommit()];
                         case 5:
                             success = _b.sent();
                             if (success) {
@@ -3111,6 +3130,7 @@
         customCssClass: [{ type: i0.Input }],
         redErrorBackground: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.cc-red-error-background",] }],
         myFormInputInstance: [{ type: i0.Input }],
+        commitOnBlur: [{ type: i0.Input }],
         nativeBlur: [{ type: i0.Output }],
         blur: [{ type: i0.Output }],
         enter: [{ type: i0.Output }],