@colijnit/corecomponents_v12 12.2.5 → 12.2.7

package/fesm2015/colijnit-corecomponents_v12.js

@@ -1860,6 +1860,7 @@ class BaseInputComponent {
         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 EventEmitter();
@@ -1887,6 +1888,7 @@ class BaseInputComponent {
         this._markedAsUserTouched = false;
         this._destroyed = false;
         this._hasOnPushCdStrategy = false;
+        this._modelDirtyForCommit = false;
         this._initialModelSet = false;
         this._forceReadonly = undefined;
         this._validators = [];
@@ -1919,6 +1921,7 @@ class BaseInputComponent {
         }
         this._model = value;
         this.canSaveOrCancel = this._model !== this._initialModel;
+        this._modelDirtyForCommit = this._model !== this._initialModel;
         this._clearErrorComponent();
         this.modelSet();
     }
@@ -2110,7 +2113,7 @@ class BaseInputComponent {
                     committing: false,
                     commitFinished: false
                 }, {
-                    commitClick: (event) => this.commitClick(event),
+                    commitClick: (event) => this._handleCommit(event),
                     cancelClick: (event) => this.cancelClick(event)
                 });
             }
@@ -2173,22 +2176,6 @@ class BaseInputComponent {
         this.changeDetector = undefined;
         this.input = undefined;
     }
-    commitClick(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.keepFocus = true;
-            if (this._commitButtonsComponentRef) {
-                this._commitButtonsComponentRef.instance.commitFinished = false;
-                this._commitButtonsComponentRef.instance.committing = true;
-            }
-            const success = yield this.commit(this.model);
-            this.keepFocus = false;
-            yield this._commitFinished();
-            if (success) {
-                this.doBlur(event);
-            }
-            return success;
-        });
-    }
     cancelClick(event) {
         this.keepFocus = true;
         if (this._initialModelSet) {
@@ -2242,23 +2229,28 @@ class BaseInputComponent {
         }
         this.focus.next();
     }
-    doBlur(event) {
-        setTimeout(() => {
-            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();
+    doBlur(event, handleCommit = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.showSaveCancel && handleCommit) {
+                yield this._handleCommit(event, false);
             }
-            this.blur.next();
-        }, 200);
+            setTimeout(() => {
+                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);
+        });
     }
     detectChanges() {
         if (!this._destroyed) {
@@ -2369,6 +2361,26 @@ class BaseInputComponent {
             this.control.updateValueAndValidity();
         }
     }
+    _handleCommit(event, doBlur = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.showSaveCancel || (!this._modelDirtyForCommit)) {
+                return true;
+            }
+            this.keepFocus = true;
+            if (this._commitButtonsComponentRef) {
+                this._commitButtonsComponentRef.instance.commitFinished = false;
+                this._commitButtonsComponentRef.instance.committing = true;
+            }
+            const success = yield this.commit(this.model);
+            this.keepFocus = false;
+            yield this._commitFinished();
+            this._modelDirtyForCommit = false;
+            if (success && doBlur) {
+                this.doBlur(event, false);
+            }
+            return success;
+        });
+    }
     _commitFinished() {
         return new Promise((resolve) => {
             if (this._commitButtonsComponentRef) {
@@ -2380,17 +2392,13 @@ class BaseInputComponent {
                     resolve();
                 }, 800);
             }
+            else {
+                resolve();
+            }
         });
     }
     _clearErrorComponent() {
         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
     _controlExists() {
@@ -2487,14 +2495,14 @@ class BaseInputComponent {
                 case 'NumpadEnter':
                     if (!event.shiftKey) {
                         event.preventDefault();
-                        yield this.commitClick();
+                        yield this._handleCommit();
                         return false;
                     }
                     return true;
                 case 'Tab':
                     const nextSiblingToFocus = event.shiftKey ? event.currentTarget.previousSibling : event.currentTarget.nextSibling;
                     event.preventDefault();
-                    const success = yield this.commitClick();
+                    const success = yield this._handleCommit();
                     if (success) {
                         if (nextSiblingToFocus) {
                             try {
@@ -2580,6 +2588,7 @@ BaseInputComponent.propDecorators = {
     customCssClass: [{ type: Input }],
     redErrorBackground: [{ type: Input }, { type: HostBinding, args: ["class.cc-red-error-background",] }],
     myFormInputInstance: [{ type: Input }],
+    commitOnBlur: [{ type: Input }],
     nativeBlur: [{ type: Output }],
     blur: [{ type: Output }],
     enter: [{ type: Output }],
@@ -4525,6 +4534,7 @@ CoDialogWizardModule.decorators = [
 class CollapsibleComponent {
     constructor(_elementRef) {
         this._elementRef = _elementRef;
+        this.customHeaderContent = false;
         this.expandButtonLast = false;
         this.expanded = false;
         this.expandedChange = new EventEmitter();
@@ -4558,7 +4568,10 @@ CollapsibleComponent.decorators = [
         <div class="expand-icon-wrapper" [class.expanded]="expanded" *ngIf="!expandButtonLast">
           <co-icon class="expand-icon" [iconData]="iconData"></co-icon>
         </div>
-        <div class="collapsible-title" [textContent]="headerTitle"></div>
+        <div class="collapsible-title" *ngIf="customHeaderContent">
+          <ng-container *ngTemplateOutlet="headerContent"></ng-container>
+        </div>
+        <div *ngIf="!customHeaderContent" class="collapsible-title" [textContent]="headerTitle"></div>
       </div>
       <div class="collapsible-header-end">
         <div class="collapsible-button-wrapper" *ngIf="showButton !== undefined" (click)="$event.stopPropagation()">
@@ -4589,6 +4602,8 @@ CollapsibleComponent.ctorParameters = () => [
     { type: ElementRef }
 ];
 CollapsibleComponent.propDecorators = {
+    headerContent: [{ type: Input }],
+    customHeaderContent: [{ type: Input }],
     headerTitle: [{ type: Input }],
     buttonText: [{ type: Input }],
     iconData: [{ type: Input }],
@@ -4599,7 +4614,10 @@ CollapsibleComponent.propDecorators = {
     buttonClicked: [{ type: Output }],
     showClass: [{ type: HostBinding, args: ["class.co-collapsible",] }],
     onHostClick: [{ type: HostListener, args: ["click", ["$event"],] }]
-};
+};
+__decorate([
+    InputBoolean()
+], CollapsibleComponent.prototype, "customHeaderContent", void 0);
 
 class CollapsibleModule {
 }