@colijnit/corecomponents_v12 12.2.5 → 12.2.7

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 }],
@@ -5043,6 +5063,7 @@
     var CollapsibleComponent = /** @class */ (function () {
         function CollapsibleComponent(_elementRef) {
             this._elementRef = _elementRef;
+            this.customHeaderContent = false;
             this.expandButtonLast = false;
             this.expanded = false;
             this.expandedChange = new i0.EventEmitter();
@@ -5071,7 +5092,7 @@
     CollapsibleComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-collapsible",
-                    template: "\n    <div class=\"collapsible-header\" [class.end]=\"expandButtonLast\" (click)=\"changeExpanded()\">\n      <div class=\"collapsible-header-start\">\n        <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"!expandButtonLast\">\n          <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n        </div>\n        <div class=\"collapsible-title\" [textContent]=\"headerTitle\"></div>\n      </div>\n      <div class=\"collapsible-header-end\">\n        <div class=\"collapsible-button-wrapper\" *ngIf=\"showButton !== undefined\" (click)=\"$event.stopPropagation()\">\n          <button class=\"collapsible-button\" *ngIf=\"showButton\" [textContent]=\"buttonText\"\n                  (click)=\"onButtonClick()\"></button>\n        </div>\n        <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"expandButtonLast\">\n          <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n        </div>\n      </div>\n    </div>\n    <div class=\"collapsible-content\" *ngIf=\"expanded\" @showHideContent>\n      <ng-content></ng-content>\n    </div>\n  ",
+                    template: "\n    <div class=\"collapsible-header\" [class.end]=\"expandButtonLast\" (click)=\"changeExpanded()\">\n      <div class=\"collapsible-header-start\">\n        <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"!expandButtonLast\">\n          <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n        </div>\n        <div class=\"collapsible-title\" *ngIf=\"customHeaderContent\">\n          <ng-container *ngTemplateOutlet=\"headerContent\"></ng-container>\n        </div>\n        <div *ngIf=\"!customHeaderContent\" class=\"collapsible-title\" [textContent]=\"headerTitle\"></div>\n      </div>\n      <div class=\"collapsible-header-end\">\n        <div class=\"collapsible-button-wrapper\" *ngIf=\"showButton !== undefined\" (click)=\"$event.stopPropagation()\">\n          <button class=\"collapsible-button\" *ngIf=\"showButton\" [textContent]=\"buttonText\"\n                  (click)=\"onButtonClick()\"></button>\n        </div>\n        <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"expandButtonLast\">\n          <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n        </div>\n      </div>\n    </div>\n    <div class=\"collapsible-content\" *ngIf=\"expanded\" @showHideContent>\n      <ng-content></ng-content>\n    </div>\n  ",
                     animations: [
                         animations.trigger('showHideContent', [
                             animations.state('*', animations.style({ height: '*' })),
@@ -5087,6 +5108,8 @@
         { type: i0.ElementRef }
     ]; };
     CollapsibleComponent.propDecorators = {
+        headerContent: [{ type: i0.Input }],
+        customHeaderContent: [{ type: i0.Input }],
         headerTitle: [{ type: i0.Input }],
         buttonText: [{ type: i0.Input }],
         iconData: [{ type: i0.Input }],
@@ -5097,7 +5120,10 @@
         buttonClicked: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-collapsible",] }],
         onHostClick: [{ type: i0.HostListener, args: ["click", ["$event"],] }]
-    };
+    };
+    __decorate([
+        InputBoolean()
+    ], CollapsibleComponent.prototype, "customHeaderContent", void 0);
 
     var CollapsibleModule = /** @class */ (function () {
         function CollapsibleModule() {