@colijnit/corecomponents_v12 260.1.15 → 260.1.17

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;
@@ -5787,12 +5772,18 @@
         // It's value will be passed along directly as a boolean.
         FilterItemMode["Checkbox"] = "checkbox";
         //This mode makes the Filter display a simple checkBox.
-        // It's value will be passed along as either a 'T' or and 'F'.
+        // It's value will be passed along as either a 'J' or and 'N'.
         FilterItemMode["CheckboxToSimpleText"] = "checkboxToSimpleText";
         //This mode makes the Filter display a simple checkBox.
-        // It's value will be passed along as either a "?='T'" or and "?='F'".
+        // It's value will be passed along as either a "?='J'" or and "?='N'".
         FilterItemMode["CheckboxToText"] = "checkboxToText";
         //This mode makes the Filter display a simple checkBox.
+        // It's value will be passed along as either a 'T' or and 'F'.
+        FilterItemMode["CheckboxToTFSimpleText"] = "checkboxToTFSimpleText";
+        //This mode makes the Filter display a simple checkBox.
+        // It's value will be passed along as either a "?='T'" or and "?='F'".
+        FilterItemMode["CheckboxToTFText"] = "checkboxToTFText";
+        //This mode makes the Filter display a simple checkBox.
         // It's value will be passed along as either a 1 or and 0.
         FilterItemMode["CheckboxToBinary"] = "checkboxToBinary";
     })(exports.FilterItemMode || (exports.FilterItemMode = {}));
@@ -6451,6 +6442,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 +12246,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,
                         {
@@ -13034,10 +13027,18 @@
                     this.showButton = true;
                     this._createModelForCheckboxToText();
                     break;
+                case this.modes.CheckboxToTFText:
+                    this.showButton = true;
+                    this._createModelForCheckboxToTFText();
+                    break;
                 case this.modes.CheckboxToSimpleText:
                     this.showButton = true;
                     this._createModelForCheckboxToSimpleText();
                     break;
+                case this.modes.CheckboxToTFSimpleText:
+                    this.showButton = true;
+                    this._createModelForCheckboxToTFSimpleText();
+                    break;
                 case this.modes.CheckboxToBinary:
                     this.showButton = true;
                     this._createModelForCheckboxToBinary();
@@ -13184,6 +13185,10 @@
                 case this.modes.CheckboxToSimpleText:
                     this._readModelForCheckboxToText(newModel);
                     break;
+                case this.modes.CheckboxToTFText:
+                case this.modes.CheckboxToTFSimpleText:
+                    this._readModelForCheckboxToTFText(newModel);
+                    break;
                 case this.modes.CheckboxToBinary:
                     this._readModelForCheckboxToBinary(newModel);
                     break;
@@ -13288,6 +13293,14 @@
                 this._model = "?='N'";
             }
         };
+        FilterItemComponent.prototype._createModelForCheckboxToTFText = function () {
+            if (this.checkBoxToTextModel) {
+                this._model = "?='T'";
+            }
+            else {
+                this._model = "?='F'";
+            }
+        };
         FilterItemComponent.prototype._createModelForCheckboxToSimpleText = function () {
             if (this.checkBoxToTextModel) {
                 this._model = "J";
@@ -13296,6 +13309,14 @@
                 this._model = "N";
             }
         };
+        FilterItemComponent.prototype._createModelForCheckboxToTFSimpleText = function () {
+            if (this.checkBoxToTextModel) {
+                this._model = "T";
+            }
+            else {
+                this._model = "F";
+            }
+        };
         FilterItemComponent.prototype._createModelForCheckboxToBinary = function () {
             if (this.checkBoxToTextModel) {
                 this._model = 1;
@@ -13439,6 +13460,15 @@
                 this.checkBoxToTextModel = false;
             }
         };
+        FilterItemComponent.prototype._readModelForCheckboxToTFText = function (checkboxToTextModel) {
+            this._model = checkboxToTextModel;
+            if (checkboxToTextModel !== undefined && checkboxToTextModel !== null) {
+                this.checkBoxToTextModel = (checkboxToTextModel.indexOf('T') > -1);
+            }
+            else {
+                this.checkBoxToTextModel = false;
+            }
+        };
         FilterItemComponent.prototype._readModelForCheckboxToBinary = function (checkboxToBinary) {
             this._model = checkboxToBinary;
             if (checkboxToBinary !== undefined && checkboxToBinary !== null) {
@@ -13572,12 +13602,20 @@
         };
         FilterItemComponent.prototype._applyDefaultForCheckboxToText = function () {
             var defaultString = this.defaultValue.toString().toUpperCase();
-            this.checkBoxToTextModel = (defaultString === 'J' || defaultString === 'Y' || defaultString === 'TRUE');
-            if (this.mode === this.modes.CheckboxToText) {
-                this._createModelForCheckboxToText();
-            }
-            else {
-                this._createModelForCheckboxToSimpleText();
+            this.checkBoxToTextModel = (defaultString === 'J' || defaultString === 'T' || defaultString === 'Y' || defaultString === 'TRUE');
+            switch (this.mode) {
+                case this.modes.CheckboxToText:
+                    this._createModelForCheckboxToText();
+                    break;
+                case this.modes.CheckboxToSimpleText:
+                    this._createModelForCheckboxToSimpleText();
+                    break;
+                case this.modes.CheckboxToTFText:
+                    this._createModelForCheckboxToTFText();
+                    break;
+                case this.modes.CheckboxToTFSimpleText:
+                    this._createModelForCheckboxToTFSimpleText();
+                    break;
             }
             this.modelChange.emit(this._model);
             this.showButton = true;
@@ -13682,6 +13720,8 @@
                     break;
                 case this.modes.CheckboxToText:
                 case this.modes.CheckboxToSimpleText:
+                case this.modes.CheckboxToTFText:
+                case this.modes.CheckboxToTFSimpleText:
                     this._applyDefaultForCheckboxToText();
                     break;
                 case this.modes.CheckboxToBinary:
@@ -13707,7 +13747,7 @@
     FilterItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-filter-item",
-                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n                                                                   || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"onModelChange($event)\"\n                [readonly]=\"readonly\"\n              >\n              </co-input-text>\n              <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"mode !== modes.SingleSelectList\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       [clickableLabel]=\"false\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                                       [readonly]=\"readonly\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"mode === modes.SingleSelectList\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                                           [readonly]=\"readonly\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n            <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n              <co-input-text\n                class=\"slider-from\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'FROM' | coreLocalize\"\n                [(model)]=\"sliderMin\"\n                [readonly]=\"readonly\"\n                (modelChange)=\"handleModelChange(sliderMin)\"\n              ></co-input-text>\n              <co-input-text\n                class=\"slider-to\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'TO' | coreLocalize\"\n                [(model)]=\"sliderMax\"\n                [readonly]=\"readonly\"\n                (modelChange)=\"handleModelChange(sliderMax)\"\n              ></co-input-text>\n            </div>\n            <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.NullableSlider\">\n              <co-input-text\n                class=\"slider-from\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'FROM' | coreLocalize\"\n                [(model)]=\"sliderMin\"\n                [readonly]=\"readonly\"\n                (modelChange)=\"handleModelChange(sliderMin)\"\n              ></co-input-text>\n              <co-input-text\n                class=\"slider-to\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'TO' | coreLocalize\"\n                [(model)]=\"sliderMax\"\n                [readonly]=\"readonly\"\n                (modelChange)=\"handleModelChange(sliderMax)\"\n              ></co-input-text>\n            </div>\n            <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n              <co-input-checkbox\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"\n                [readonly]=\"readonly\"\n                [label]=\"placeholder\">\n              </co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-checkbox-content\"\n                 *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n              <co-input-checkbox\n                [(model)]=\"checkBoxToTextModel\"\n                (modelChange)=\"handleModelChange($event)\"\n                [readonly]=\"readonly\"\n                [label]=\"placeholder\"></co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n              <co-input-text\n                [(model)]=\"model\" [readonly]=\"readonly\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-text>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n              <co-input-date\n                #dateInput\n                [(model)]=\"dateFieldValue\" [readonly]=\"readonly\" [firstDayOfWeek]=\"firstDayOfWeek\"\n                (modelChange)=\"handleModelChange($event)\"\n              ></co-input-date>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n              <co-input-date-range [readonly]=\"readonly\" [firstDayOfWeek]=\"firstDayOfWeek\"\n                                   #dateRangeInput\n                                   [model]=\"[dateRangeStart, dateRangeEnd]\"\n                                   (modelChange)=\"handleModelChange($event)\"\n                                   [placeholder]=\"'Kies datum' | coreLocalize\">\n              </co-input-date-range>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
+                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n                                                                   || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"onModelChange($event)\"\n                [readonly]=\"readonly\"\n              >\n              </co-input-text>\n              <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"mode !== modes.SingleSelectList\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       [clickableLabel]=\"false\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                                       [readonly]=\"readonly\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"mode === modes.SingleSelectList\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                                           [readonly]=\"readonly\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n            <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n              <co-input-text\n                class=\"slider-from\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'FROM' | coreLocalize\"\n                [(model)]=\"sliderMin\"\n                [readonly]=\"readonly\"\n                (modelChange)=\"handleModelChange(sliderMin)\"\n              ></co-input-text>\n              <co-input-text\n                class=\"slider-to\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'TO' | coreLocalize\"\n                [(model)]=\"sliderMax\"\n                [readonly]=\"readonly\"\n                (modelChange)=\"handleModelChange(sliderMax)\"\n              ></co-input-text>\n            </div>\n            <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.NullableSlider\">\n              <co-input-text\n                class=\"slider-from\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'FROM' | coreLocalize\"\n                [(model)]=\"sliderMin\"\n                [readonly]=\"readonly\"\n                (modelChange)=\"handleModelChange(sliderMin)\"\n              ></co-input-text>\n              <co-input-text\n                class=\"slider-to\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'TO' | coreLocalize\"\n                [(model)]=\"sliderMax\"\n                [readonly]=\"readonly\"\n                (modelChange)=\"handleModelChange(sliderMax)\"\n              ></co-input-text>\n            </div>\n            <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n              <co-input-checkbox\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"\n                [readonly]=\"readonly\"\n                [label]=\"placeholder\">\n              </co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-checkbox-content\"\n                 *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary || mode === modes.CheckboxToTFSimpleText || mode === modes.CheckboxToTFText\">\n              <co-input-checkbox\n                [(model)]=\"checkBoxToTextModel\"\n                (modelChange)=\"handleModelChange($event)\"\n                [readonly]=\"readonly\"\n                [label]=\"placeholder\"></co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n              <co-input-text\n                [(model)]=\"model\" [readonly]=\"readonly\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-text>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n              <co-input-date\n                #dateInput\n                [(model)]=\"dateFieldValue\" [readonly]=\"readonly\" [firstDayOfWeek]=\"firstDayOfWeek\"\n                (modelChange)=\"handleModelChange($event)\"\n              ></co-input-date>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n              <co-input-date-range [readonly]=\"readonly\" [firstDayOfWeek]=\"firstDayOfWeek\"\n                                   #dateRangeInput\n                                   [model]=\"[dateRangeStart, dateRangeEnd]\"\n                                   (modelChange)=\"handleModelChange($event)\"\n                                   [placeholder]=\"'Kies datum' | coreLocalize\">\n              </co-input-date-range>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [{
@@ -14840,7 +14880,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;