@colijnit/corecomponents_v12 260.1.15 → 260.1.16

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -2222,7 +2222,7 @@
     CommitButtonsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-commit-buttons',
-                    template: "\n        <div class=\"commit-buttons-wrapper\" [overlay]=\"parentForOverlay\" [rightAlign]=\"true\" @showHideSaveCancel>\n            <div class=\"commit-buttons-button save\" [class.finished]=\"commitFinished\"\n                 (click)=\"commitClick.emit($event)\">\n                <div class=\"save-button-spinner\" *ngIf=\"committing\">\n                    <div #animatediv></div>\n                    <div #animatediv></div>\n                    <div #animatediv></div>\n                    <div #animatediv></div>\n                </div>\n                <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"firstShow || commitFinished\">\n                    <path class=\"checkmark-check\" [class.first-show]=\"firstShow\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"/></svg>\n            </div>\n            <div class=\"commit-buttons-button cancel\" (click)=\"cancelClick.emit($event)\">\n                <div class=\"cancel-button\"></div>\n            </div>\n        </div>\n    ",
+                    template: "\n        <div class=\"commit-buttons-wrapper\" [overlay]=\"parentForOverlay\" [rightAlign]=\"true\" @showHideSaveCancel>\n            <div class=\"commit-buttons-button save\" [class.finished]=\"commitFinished\"\n                 (click)=\"commitClick.emit($event)\">\n                <div class=\"save-button-spinner\" *ngIf=\"committing\">\n                    <div #animatediv></div>\n                    <div #animatediv></div>\n                    <div #animatediv></div>\n                    <div #animatediv></div>\n                </div>\n                <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\" *ngIf=\"firstShow || commitFinished\">\n                    <path class=\"checkmark-check\" [class.first-show]=\"firstShow\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\"/></svg>\n            </div>\n            <div class=\"commit-buttons-button cancel\" (mousedown)=\"$event.preventDefault()\" (click)=\"cancelClick.emit($event)\">\n                <div class=\"cancel-button\"></div>\n            </div>\n        </div>\n    ",
                     animations: [
                         animations.trigger('showHideSaveCancel', [
                             animations.state('*', animations.style({ transform: 'scaleY(1)', opacity: 1 })),
@@ -2291,8 +2291,8 @@
             this.excludeUserModelChange = false;
             this.noFormGroupControl = false;
             this.keepFocus = false;
-            this.canceled = false;
             this.validationError = '';
+            this.shouldCommit = true;
             this._markedAsUserTouched = false;
             this._destroyed = false;
             this._hasOnPushCdStrategy = false;
@@ -2709,8 +2709,7 @@
             this.input = undefined;
         };
         BaseInputComponent.prototype.cancelClick = function (event) {
-            this.canceled = true;
-            this.conditionResolver(this.canceled);
+            this.shouldCommit = false;
             this.keepFocus = true;
             if (this._initialModelSet) {
                 this.model = this._initialModel;
@@ -2764,34 +2763,19 @@
             }
             this.focus.next();
         };
-        BaseInputComponent.prototype.waitForCancelCondition = function () {
-            var _this = this;
-            return new Promise(function (resolve) {
-                _this.conditionResolver = resolve; // Save the resolver to be called later
-            });
-        };
         BaseInputComponent.prototype.doBlur = function (event, handleCommit) {
             if (handleCommit === void 0) { handleCommit = true; }
             return __awaiter(this, void 0, void 0, function () {
-                var cancelTimeout, result;
                 var _this = this;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            cancelTimeout = new Promise(function (resolve) { return setTimeout(resolve, 300); });
-                            return [4 /*yield*/, Promise.race([this.waitForCancelCondition(), cancelTimeout])];
-                        case 1:
-                            result = _a.sent();
-                            // If canceled
-                            if (result) {
-                                return [2 /*return*/];
-                            }
-                            if (!(this.showSaveCancel && handleCommit && this._modelDirtyForCommit)) return [3 /*break*/, 3];
+                            if (!(this.showSaveCancel && handleCommit && this._modelDirtyForCommit && this.shouldCommit)) return [3 /*break*/, 2];
                             return [4 /*yield*/, this._handleCommit(event, false)];
-                        case 2:
+                        case 1:
                             _a.sent();
-                            _a.label = 3;
-                        case 3:
+                            _a.label = 2;
+                        case 2:
                             setTimeout(function () {
                                 if (_this.keepFocus || _this.keepFocussed) {
                                     if (event) {
@@ -2935,6 +2919,7 @@
                                 return [2 /*return*/, true];
                             }
                             this.keepFocus = true;
+                            this.shouldCommit = true;
                             if (this._commitButtonsComponentRef) {
                                 this._commitButtonsComponentRef.instance.commitFinished = false;
                                 this._commitButtonsComponentRef.instance.committing = true;
@@ -6451,6 +6436,8 @@
         };
         InputTextComponent.prototype.clearInput = function (event) {
             this.setModel(null);
+            this.keepFocus = true;
+            this.shouldCommit = false;
             this.clearIconClick.emit(event);
         };
         InputTextComponent.prototype.handleKeyDownInput = function (event) {
@@ -12253,7 +12240,7 @@
     ListOfValuesComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-values',
-                    template: "\n      <co-input-text\n              *ngIf=\"!largeCollection\"\n              aria-haspopup=\"listbox\"\n              [attr.aria-expanded]=\"isSelectOpen\"\n              aria-controls=\"lov-popup\"\n              role=\"combobox\"\n              class=\"no-focus-line\"\n              overlayParent\n              #parentForOverlay=\"overlayParent\"\n              type=\"text\"\n              [id]=\"label\"\n              [model]=\"multiselect ? selectedModels : selectedModel\"\n              [placeholder]=\"label\"\n              [myFormInputInstance]=\"this\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n              [required]=\"required\"\n              [noClickFocus]=\"false\"\n              [leftIconData]=\" model && model[optionIcon] ? iconCacheService.getIcon(model[optionIcon]) : leftIconData\"\n              [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n              [showClearButton]=\"true\"\n              [useContent]=\"multiselect\"\n              [customHeight]=\"multiselect\"\n              [keepFocussed]=\"keepFocussed\"\n              (modelChange)=\"handleInputModelChange($event)\"\n              (click)=\"openPopup()\"\n              (rightIconClick)=\"toggleSelect()\"\n              (keydown)=\"handleInputKeyDown($event)\"\n              (clearIconClick)=\"clearModel($event)\"\n              (blur)=\"checkModel()\">\n          <ng-container *ngIf=\"multiselect && showChips\">\n              <div class=\"multiselect-chips-wrapper\">\n                  <div class=\"chips\" *ngFor=\"let chip of model\">\n                      <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                      <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                  </div>\n              </div>\n          </ng-container>\n      </co-input-text>\n\n      <co-input-text\n              *ngIf=\"largeCollection\"\n              [model]=\"filterText\"\n              [placeholder]=\"label\"\n              [required]=\"required\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              (modelChange)=\"onModelChange($event)\">\n      </co-input-text>\n      <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n      <input type=\"hidden\" [ngModel]=\"model\">\n  ",
+                    template: "\n      <co-input-text\n              *ngIf=\"!largeCollection\"\n              aria-haspopup=\"listbox\"\n              [attr.aria-expanded]=\"isSelectOpen\"\n              aria-controls=\"lov-popup\"\n              role=\"combobox\"\n              class=\"no-focus-line\"\n              overlayParent\n              #parentForOverlay=\"overlayParent\"\n              type=\"text\"\n              [id]=\"label\"\n              [model]=\"multiselect ? ((!selectedModels || selectedModels.length === 0) ? null : selectedModels ) : selectedModel\"\n              [placeholder]=\"label\"\n              [myFormInputInstance]=\"this\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n              [required]=\"required\"\n              [noClickFocus]=\"false\"\n              [leftIconData]=\" model && model[optionIcon] ? iconCacheService.getIcon(model[optionIcon]) : leftIconData\"\n              [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n              [showClearButton]=\"true\"\n              [useContent]=\"multiselect\"\n              [customHeight]=\"multiselect\"\n              [keepFocussed]=\"keepFocussed\"\n              (modelChange)=\"handleInputModelChange($event)\"\n              (click)=\"openPopup()\"\n              (rightIconClick)=\"toggleSelect()\"\n              (keydown)=\"handleInputKeyDown($event)\"\n              (clearIconClick)=\"clearModel($event)\"\n              (blur)=\"checkModel()\">\n          <ng-container *ngIf=\"multiselect && showChips\">\n              <div class=\"multiselect-chips-wrapper\">\n                  <div class=\"chips\" *ngFor=\"let chip of model\">\n                      <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                      <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                  </div>\n              </div>\n          </ng-container>\n      </co-input-text>\n\n      <co-input-text\n              *ngIf=\"largeCollection\"\n              [model]=\"filterText\"\n              [placeholder]=\"label\"\n              [required]=\"required\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              (modelChange)=\"onModelChange($event)\">\n      </co-input-text>\n      <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n      <input type=\"hidden\" [ngModel]=\"(selectedModels && selectedModels.length) || selectedModel ? model : null\">\n  ",
                     providers: [
                         OverlayService,
                         {
@@ -14840,7 +14827,7 @@
                 if (myCfgObj) {
                     this._setHostVisible(myCfgObj.immediatelyVisible());
                     if (!this.screenConfigNativeElement) {
-                        this.hostComponent.required = myCfgObj.isRequired();
+                        this.hostComponent.required = this.hostComponent.required || myCfgObj.isRequired();
                         this.hostComponent.readonly = this.hostComponent.forceReadonly || this._moduleInReadonlyMode() || myCfgObj.isReadonly();
                         this.hostComponent.decimals = myCfgObj.scale;
                         this.hostComponent.maxLength = myCfgObj.maxLength;