@colijnit/corecomponents_v12 12.2.4 → 12.2.6

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('rxjs'), require('@angular/platform-browser'), require('@angular/animations'), require('@angular/common'), require('@angular/common/http'), require('rxjs/operators'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js'), require('hammerjs'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/drag-drop'), require('@angular/cdk/scrolling')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/corecomponents_v12', ['exports', '@angular/core', '@angular/forms', 'rxjs', '@angular/platform-browser', '@angular/animations', '@angular/common', '@angular/common/http', 'rxjs/operators', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js', 'hammerjs', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/drag-drop', '@angular/cdk/scrolling'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.corecomponents_v12 = {}), global.ng.core, global.ng.forms, global.rxjs, global.ng.platformBrowser, global.ng.animations, global.ng.common, global.ng.common.http, global.rxjs.operators, global.three, global.CSS3DRenderer, global.TWEEN, null, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.dragDrop, global.ng.cdk.scrolling));
-})(this, (function (exports, i0, forms, rxjs, platformBrowser, animations, common, http, operators, three, CSS3DRenderer, TWEEN, hammerjs, overlay, portal, dragDrop, scrolling) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('rxjs'), require('@angular/platform-browser'), require('@angular/animations'), require('@angular/common'), require('@angular/common/http'), require('rxjs/operators'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js'), require('hammerjs'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/cdk/drag-drop'), require('@angular/cdk/scrolling'), require('@colijnit/ioneconnector/build/utils/array-utils'), require('@colijnit/ioneconnector/build/model/default-get-object-configurations-params'), require('@colijnit/ioneconnector/build/model/object-configuration')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/corecomponents_v12', ['exports', '@angular/core', '@angular/forms', 'rxjs', '@angular/platform-browser', '@angular/animations', '@angular/common', '@angular/common/http', 'rxjs/operators', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js', 'hammerjs', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/cdk/drag-drop', '@angular/cdk/scrolling', '@colijnit/ioneconnector/build/utils/array-utils', '@colijnit/ioneconnector/build/model/default-get-object-configurations-params', '@colijnit/ioneconnector/build/model/object-configuration'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.corecomponents_v12 = {}), global.ng.core, global.ng.forms, global.rxjs, global.ng.platformBrowser, global.ng.animations, global.ng.common, global.ng.common.http, global.rxjs.operators, global.three, global.CSS3DRenderer, global.TWEEN, null, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.dragDrop, global.ng.cdk.scrolling, global.arrayUtils, global.defaultGetObjectConfigurationsParams, global.objectConfiguration));
+})(this, (function (exports, i0, forms, rxjs, platformBrowser, animations, common, http, operators, three, CSS3DRenderer, TWEEN, hammerjs, overlay, portal, dragDrop, scrolling, arrayUtils, defaultGetObjectConfigurationsParams, objectConfiguration) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -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 }],
@@ -3845,6 +3865,9 @@
     EventUtils._passiveCapture = undefined;
     EventUtils._passiveBubble = undefined;
 
+    // Enables "DI for interfaces" (see ConfigNameDirective injected .hostComponent).
+    var SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME = new i0.InjectionToken("ScreenConfigAdapterComponent");
+
     var ButtonComponent = /** @class */ (function () {
         function ButtonComponent(_elementRef) {
             this._elementRef = _elementRef;
@@ -3865,7 +3888,7 @@
             configurable: true
         });
         ButtonComponent.prototype.onHostClick = function (event) {
-            if (this.disabled) {
+            if (this.readonly || this.disabled) {
                 this.clickedWhileDisabled.emit(event);
                 EventUtils.KillEvent(event);
             }
@@ -3887,11 +3910,16 @@
     }());
     ButtonComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "co-button",
-                    template: "\n    <co-icon *ngIf=\"!!iconData\" [iconData]=\"iconData\"></co-icon>\n    <span *ngIf=\"!!label\" class=\"label\">{{ label }}</span>\n    <co-icon *ngIf=\"!!iconDataRight\" [iconData]=\"iconDataRight\"></co-icon>\n    <div class=\"rippler\" md-ripple [mdRippleDisabled]=\"disabled\"></div>\n  ",
+                    selector: 'co-button',
+                    template: "\n        <co-icon *ngIf=\"!!iconData\" [iconData]=\"iconData\"></co-icon>\n        <span *ngIf=\"!!label\" class=\"label\">{{ label }}</span>\n        <co-icon *ngIf=\"!!iconDataRight\" [iconData]=\"iconDataRight\"></co-icon>\n        <div class=\"rippler\" md-ripple [mdRippleDisabled]=\"disabled\"></div>\n    ",
                     host: {
-                        tabindex: "0"
+                        tabindex: '0'
                     },
+                    providers: [{
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+                            useExisting: i0.forwardRef(function () { return ButtonComponent; })
+                        }
+                    ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -3900,19 +3928,20 @@
         { type: i0.ElementRef }
     ]; };
     ButtonComponent.propDecorators = {
-        label: [{ type: i0.HostBinding, args: ["class.has-label",] }, { type: i0.Input }],
-        iconData: [{ type: i0.HostBinding, args: ["class.has-left-icon",] }, { type: i0.Input }],
-        iconDataRight: [{ type: i0.HostBinding, args: ["class.has-right-icon",] }, { type: i0.Input }],
+        label: [{ type: i0.HostBinding, args: ['class.has-label',] }, { type: i0.Input }],
+        iconData: [{ type: i0.HostBinding, args: ['class.has-left-icon',] }, { type: i0.Input }],
+        iconDataRight: [{ type: i0.HostBinding, args: ['class.has-right-icon',] }, { type: i0.Input }],
         isToggleButton: [{ type: i0.Input }],
-        isToggled: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.toggled",] }],
-        hidden: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.co-hidden",] }],
-        disabled: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.disabled",] }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-button",] }],
+        isToggled: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.toggled',] }],
+        hidden: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.co-hidden',] }],
+        disabled: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.disabled',] }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-button',] }],
         onClick: [{ type: i0.Output }],
         clickedWhileDisabled: [{ type: i0.Output }],
         isToggledChange: [{ type: i0.Output }],
-        hasIcon: [{ type: i0.HostBinding, args: ["class.has-icon",] }],
-        onHostClick: [{ type: i0.HostListener, args: ["click", ["$event"],] }]
+        hasIcon: [{ type: i0.HostBinding, args: ['class.has-icon',] }],
+        onHostClick: [{ type: i0.HostListener, args: ['click', ['$event'],] }],
+        readonly: [{ type: i0.HostBinding, args: ["class.read-only",] }]
     };
 
     var ButtonModule = /** @class */ (function () {
@@ -5725,9 +5754,6 @@
                 },] }
     ];
 
-    // Enables "DI for interfaces" (see ConfigNameDirective injected .hostComponent).
-    var SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME = new i0.InjectionToken("ScreenConfigAdapterComponent");
-
     var InputCheckboxComponent = /** @class */ (function (_super) {
         __extends(InputCheckboxComponent, _super);
         function InputCheckboxComponent(formComponent, iconCacheService, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
@@ -5928,7 +5954,7 @@
     InputDatePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-date',
-                    template: "\n      <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n                     [(model)]=\"modelAsString\"\n                     [rightIcon]=\"rightIcon\"\n                     [leftIcon]=\"leftIcon\"\n                     [leftIconData]=\"leftIconData\"\n                     [pattern]=\"'yyyy-MM-dd'\"\n                     [type]=\"'date'\"\n                     [placeholder]=\"placeholder\"\n                     (rightIconClick)=\"toggleCalendar(true)\"\n                     (blur)=\"handleDateChange(modelAsString)\"\n                     (clearIconClick)=\"handleClearIconClicked()\"\n      ></co-input-text>\n    ",
+                    template: "\n      <co-input-text (clickOutside)=\"toggleCalendar(false)\" overlayParent #parentForOverlay=\"overlayParent\"\n                     [hidden]=\"hidden\"\n                     [readonly]=\"readonly\"\n                     [(model)]=\"modelAsString\"\n                     [rightIcon]=\"rightIcon\"\n                     [leftIcon]=\"leftIcon\"\n                     [leftIconData]=\"leftIconData\"\n                     [pattern]=\"'yyyy-MM-dd'\"\n                     [type]=\"'date'\"\n                     [placeholder]=\"placeholder\"\n                     (rightIconClick)=\"toggleCalendar(true)\"\n                     (blur)=\"handleDateChange(modelAsString)\"\n                     (clearIconClick)=\"handleClearIconClicked()\"\n      ></co-input-text>\n    ",
                     providers: [
                         OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
@@ -11202,8 +11228,11 @@
             if (this._lovPopupComponentRef) {
                 this._lovPopupComponentRef.instance.searchTerm = model;
             }
-            if (!this.selectedModel && model) {
-                this.openPopup();
+            else {
+                if (!this.selectedModel && model) {
+                    this.openPopup();
+                    this._lovPopupComponentRef.instance.searchTerm = model;
+                }
             }
             this.selectedModel = model;
         };
@@ -11326,7 +11355,7 @@
                     this.selectedModel = this.model[this.displayField];
                 }
                 else {
-                    this.selectedModel = "";
+                    this.selectedModel = '';
                 }
             }
         };
@@ -11337,7 +11366,11 @@
                     selector: 'co-list-of-values',
                     template: "\n        <co-input-text aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isSelectOpen\" aria-controls=\"lov-popup\" role=\"combobox\"\n                       class=\"no-focus-line\"\n                       overlayParent\n                       #parentForOverlay=\"overlayParent\" type=\"text\" [id]=\"label\"\n                       [model]=\"multiselect ? selectedModels : selectedModel\"\n                       [placeholder]=\"label\"\n                       [readonly]=\"readonly\"\n                       [disabled]=\"disabled\"\n                       [required]=\"required\"\n                       [noClickFocus]=\"false\"\n                       [leftIconData]=\"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        >\n            <ng-container *ngIf=\"multiselect\">\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    ",
                     providers: [
-                        OverlayService
+                        OverlayService,
+                        {
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+                            useExisting: i0.forwardRef(function () { return ListOfValuesComponent; })
+                        }
                     ],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -11903,6 +11936,8 @@
             this.sliderMax = !!this.sliderMax ? this.sliderMax : this.sliderDefaultMax;
             var trueLowerBound = Math.min(this.sliderMin, this.sliderMax);
             var trueUpperBound = Math.max(this.sliderMin, this.sliderMax);
+            this.sliderMin = trueLowerBound;
+            this.sliderMax = trueUpperBound;
             this._model = trueLowerBound + " - " + trueUpperBound;
         };
         FilterItemComponent.prototype._createModelForCheckboxToText = function () {
@@ -12094,7 +12129,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)=\"applyFilter($event)\"\n              >\n              </co-input-text>\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                    ></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                    ></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' | localize\"\n                [(model)]=\"sliderMin\"\n                (modelChange)=\"handleModelChange($event)\"\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' | localize\"\n                [(model)]=\"sliderMax\"\n                (modelChange)=\"handleModelChange($event)\"\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)\"></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)\"></co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n              <co-input-text\n                [(model)]=\"model\"\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                [(model)]=\"model\"\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\n                [model]=\"[dateRangeStart, dateRangeEnd]\"\n                (modelChange)=\"handleModelChange($event)\"\n                [placeholder]=\"'SELECT_DATE' | localize\">\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)=\"applyFilter($event)\"\n              >\n              </co-input-text>\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                    ></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                    ></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' | localize\"\n                [(model)]=\"sliderMin\"\n                (focusout)=\"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' | localize\"\n                [(model)]=\"sliderMax\"\n                (focusout)=\"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                [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                [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\"\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                [(model)]=\"model\"\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\n                [model]=\"[dateRangeStart, dateRangeEnd]\"\n                (modelChange)=\"handleModelChange($event)\"\n                [placeholder]=\"'SELECT_DATE' | localize\">\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
                 },] }
@@ -12496,81 +12531,406 @@
                 },] }
     ];
 
-    var ScreenConfigComponentWrapper = /** @class */ (function () {
-        function ScreenConfigComponentWrapper(_elementRef) {
-            this._elementRef = _elementRef;
-            this._visibleOnViewInit = true;
+    var BaseModuleScreenConfigService = /** @class */ (function () {
+        function BaseModuleScreenConfigService() {
+            // emits the params of the loaded config, each time when a new config was loaded
+            this.configSet = new rxjs.BehaviorSubject([]);
+            this._configObjects = [];
+            // key: configName, value: the ObjectConfiguration with that configName. For faster ObjectConfiguration lookups, given a configName string (vs. array).
+            this._objectConfigsMap = new Map();
         }
-        ScreenConfigComponentWrapper.prototype.setWrapperContent = function (element, visibleOnViewInit) {
-            this._contentNativeElement = element;
-            this._visibleOnViewInit = visibleOnViewInit;
+        Object.defineProperty(BaseModuleScreenConfigService.prototype, "configObjects", {
+            get: function () {
+                return this._configObjects;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // POST: this.configObjects are loaded. Returns the loaded config objects.
+        BaseModuleScreenConfigService.prototype.loadConfig = function (params, insertRights) {
+            if (params === void 0) { params = defaultGetObjectConfigurationsParams.DEFAULT_GET_OBJECT_CONFIGURATION_PARAMS; }
+            return __awaiter(this, void 0, void 0, function () {
+                var configObjects;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.loadConfigForModule(params, insertRights)];
+                        case 1:
+                            configObjects = _a.sent();
+                            this._configObjects = configObjects;
+                            if (configObjects && Array.isArray(configObjects)) {
+                                this._buildScreenConfigMap();
+                                this.configSet.next(params);
+                            }
+                            return [2 /*return*/, this._configObjects];
+                    }
+                });
+            });
+        };
+        BaseModuleScreenConfigService.prototype.lazyLoadConfig = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!!this.configObjects.length) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.loadConfig()];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        BaseModuleScreenConfigService.prototype.isActiveFieldValidationObject = function (configObject) {
+            if (configObject) {
+                return configObject.isActiveFieldValidationObject() && !this.isDataNameHiddenByAnyOfItsParentRubrics(configObject.dataName);
+            }
+        };
+        BaseModuleScreenConfigService.prototype.isBoValid = function (bo) {
+            if (this.controlValidityByBoMap && !arrayUtils.ArrayUtils.IsEmptyArray(this.controlValidityByBoMap)) {
+                var mapEntry = this.controlValidityByBoMap.find(function (value) { return value.bo === bo && value.valid === false; });
+                if (mapEntry) {
+                    return mapEntry.valid;
+                }
+            }
+            return true;
+        };
+        BaseModuleScreenConfigService.prototype.getObjectConfigurationFor = function (configName) {
+            var configuration = this._objectConfigsMap.get(configName);
+            // If configuration not found by configname, try by data name
+            if (!!this._objectConfigsMap.size && !configuration && configName) {
+                var configNameByDataName = this._getConfigNameByDataName(configName);
+                if (this._objectConfigsMap.get(configNameByDataName)) {
+                    return this._objectConfigsMap.get(configNameByDataName);
+                } /*else if (!environment.production) {
+                    console.warn("No configuration object was found by the name of: ", configName, " or dataname ", configNameByDataName);
+                }*/
+            }
+            return configuration;
+        };
+        BaseModuleScreenConfigService.prototype.setObjectConfigurationFor = function (configName, configObject) {
+            this._objectConfigsMap.set(configName, configObject);
+        };
+        // Whether the user may read the component that's associated with given config object (visibility).
+        BaseModuleScreenConfigService.prototype.mayRead = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.mayRead() : false;
+        };
+        BaseModuleScreenConfigService.prototype.isReadonly = function (configName) {
+            return !this.mayWrite(configName);
+        };
+        // Whether the user may write onto the component that's associated with given config object.
+        BaseModuleScreenConfigService.prototype.mayWrite = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.mayWrite() : false;
+        };
+        // Whether the component associated with given config object should, from the start, be visible to the user.
+        BaseModuleScreenConfigService.prototype.immediatelyVisible = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.immediatelyVisible() : false;
+        };
+        // Whether the component associated with given config object should, from the start, be visible to the user.
+        BaseModuleScreenConfigService.prototype.immediatelyHidden = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.immediatelyHidden() : false;
+        };
+        BaseModuleScreenConfigService.prototype.noRights = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.noRights() : false;
+        };
+        BaseModuleScreenConfigService.prototype.isHidden = function (configName) {
+            return !this.immediatelyVisible(configName);
+        };
+        BaseModuleScreenConfigService.prototype.isRequired = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? !objectConfig.nullable : false;
+        };
+        BaseModuleScreenConfigService.prototype.getDefaultValue = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.getDefaultValue() : undefined;
+        };
+        BaseModuleScreenConfigService.prototype.getDefaultStringValue = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.getDefaultStringValue() : undefined;
+        };
+        BaseModuleScreenConfigService.prototype.getDefaultNumberValue = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.getDefaultNumberValue() : undefined;
+        };
+        BaseModuleScreenConfigService.prototype.getMaxLength = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.maxLength : undefined;
+        };
+        BaseModuleScreenConfigService.prototype.getDecimals = function (configName) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.scale : undefined;
+        };
+        BaseModuleScreenConfigService.prototype.hasConfigObjects = function () {
+            return this._configObjects && this._configObjects.length > 0 && this._objectConfigsMap.size > 0;
+        };
+        BaseModuleScreenConfigService.prototype.isKind = function (configName, kind) {
+            var objectConfig = this._objectConfigsMap.get(configName);
+            return objectConfig ? objectConfig.isKind(kind) : false;
+        };
+        BaseModuleScreenConfigService.prototype.isDataNameHiddenByItselfOrAnyOfItsParentRubrics = function (dataName) {
+            var isHiddenItself = arrayUtils.ArrayUtils.ContainsAnElementFoundBy(this._configObjects, (function (item) {
+                return item.dataName === dataName && item.isHidden();
+            }));
+            if (isHiddenItself) {
+                return true;
+            }
+            else {
+                return this.isDataNameHiddenByAnyOfItsParentRubrics(dataName);
+            }
+        };
+        BaseModuleScreenConfigService.prototype.isDataNameHiddenByAnyOfItsParentRubrics = function (dataName) {
+            // if (this._hardCodedConfigStructure) {
+            //     const parentConfigNames: string[] = this._hardCodedConfigStructure.getParentConfigNamesOfFieldConfigName(this._getConfigNameByDataName(dataName));
+            //     if (parentConfigNames) {
+            //         for (let i: number = 0, len: number = parentConfigNames.length; i < len; i++) {
+            //             const parentConfigObj: ObjectConfiguration = this.getObjectConfigurationFor(parentConfigNames[i]);
+            //             if (parentConfigObj && parentConfigObj.isHidden()) {
+            //                 return true;
+            //             }
+            //         }
+            //     }
+            //     return false;
+            // }
+            return false;
         };
-        ScreenConfigComponentWrapper.prototype.ngAfterViewInit = function () {
-            if (this.screenConfigComponentWrapper) {
-                this.screenConfigComponentWrapper.nativeElement.appendChild(this._contentNativeElement);
-                this.hidden = !this._visibleOnViewInit;
+        // return the first found config name for given data name
+        BaseModuleScreenConfigService.prototype._getConfigNameByDataName = function (dataName) {
+            var itsConfigObject = this._getConfigObjectByDataName(dataName);
+            if (itsConfigObject) {
+                return itsConfigObject.configName;
             }
         };
-        return ScreenConfigComponentWrapper;
+        // return the first found config object with given data name
+        BaseModuleScreenConfigService.prototype._getConfigObjectByDataName = function (dataName) {
+            return arrayUtils.ArrayUtils.Find(this._configObjects, function (cfgObj) {
+                return cfgObj.dataName === dataName;
+            });
+        };
+        // PRE: this.configObjects is loaded. POST: this._objectConfigsMap contains the latest map of configName -> to -> ObjectConfiguration for a live screen module.
+        BaseModuleScreenConfigService.prototype._buildScreenConfigMap = function () {
+            var _this = this;
+            this._objectConfigsMap.clear();
+            this.configObjects.forEach(function (item) { return _this._objectConfigsMap.set(item.configName, item); });
+        };
+        BaseModuleScreenConfigService.prototype.setScreenConfigurationObjectsReadOnly = function (value) {
+            var _this = this;
+            this.configObjects.forEach(function (object) {
+                var copy = Object.assign(new objectConfiguration.ObjectConfiguration(), object);
+                copy.variableReadOnly = value;
+                _this.setObjectConfigurationFor(object.configName, copy);
+            });
+        };
+        BaseModuleScreenConfigService.prototype.setScreenConfigurationObjectsRedErrorBackground = function (errorValidation, setAllFalse) {
+            var _this = this;
+            if (setAllFalse === void 0) { setAllFalse = false; }
+            if (setAllFalse) {
+                this.configObjects.forEach(function (object) {
+                    var copy = Object.assign(new objectConfiguration.ObjectConfiguration(), object);
+                    copy.redErrorBackground = false;
+                    _this.setObjectConfigurationFor(object.configName, copy);
+                });
+            }
+            else if (errorValidation) {
+                var errorMessages = errorValidation.getAllErrorMessagesOfMyValidationFields();
+                var _loop_1 = function (i, len) {
+                    var errorMsg = errorMessages[i];
+                    var configObject = this_1.configObjects.find(function (object) { return object.configName === errorMsg.fieldId; });
+                    if (configObject) {
+                        var copy = Object.assign(new objectConfiguration.ObjectConfiguration(), configObject);
+                        copy.redErrorBackground = false;
+                        this_1.setObjectConfigurationFor(configObject.configName, copy);
+                    }
+                };
+                var this_1 = this;
+                for (var i = 0, len = errorMessages.length; i < len; i++) {
+                    _loop_1(i, len);
+                }
+            }
+        };
+        return BaseModuleScreenConfigService;
     }());
-    ScreenConfigComponentWrapper.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "screen-config-component-wrapper",
-                    template: "<div *ngIf=\"!hidden\" #screenConfigComponentWrapper></div>"
-                },] }
+    BaseModuleScreenConfigService.decorators = [
+        { type: i0.Injectable }
+    ];
+
+    /**
+     * Base class for top-level services of CRUD-style iOne modules (the Relation, Article and Transaction modules).
+     * What sets these modules apart, is the concept of a relatively bulky, 'single businessobject' being manipulated throughout all the tabs.
+     *
+     * Many other (smaller?) iOne modules work with multiple LISTS of different business object types instead.
+     */
+    var BaseModuleService = /** @class */ (function () {
+        function BaseModuleService(screenConfigService) {
+            var _this = this;
+            this.screenConfigService = screenConfigService;
+            this.readonlyChange = new rxjs.Subject();
+            // Emits this each time a new error validation was received. (there will be zero error tooltips on the screen after this fires)
+            this.errorValidationReceived = new rxjs.Subject();
+            // Emits once after succesful BO update (i.e. there were no errors)
+            this.successfulUpdate = new rxjs.Subject();
+            this._readonly = true;
+            this._subscriptions = [];
+            this._subscriptions.push(this.errorValidationReceived.subscribe(function (errorValidation) { return _this.screenConfigService.setScreenConfigurationObjectsRedErrorBackground(errorValidation); }), this.successfulUpdate.subscribe(function () { return _this.screenConfigService.setScreenConfigurationObjectsRedErrorBackground(null, true); }), this.readonlyChange.subscribe(function (readOnly) { return _this.screenConfigService.setScreenConfigurationObjectsReadOnly(readOnly); }));
+        }
+        Object.defineProperty(BaseModuleService.prototype, "readonly", {
+            // Whether the module is in readonly modus or not. Input fields etc. will be readonly throughout the module.
+            get: function () {
+                return this._readonly;
+            },
+            set: function (readonly) {
+                if (this._readonly !== readonly) {
+                    this._readonly = readonly;
+                    this.readonlyChange.next(this._readonly);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BaseModuleService.prototype.ngOnDestroy = function () {
+            this._subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
+        };
+        return BaseModuleService;
+    }());
+    BaseModuleService.decorators = [
+        { type: i0.Injectable }
     ];
-    ScreenConfigComponentWrapper.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-    ScreenConfigComponentWrapper.propDecorators = {
-        screenConfigComponentWrapper: [{ type: i0.ViewChild, args: ['screenConfigComponentWrapper',] }]
-    };
+    BaseModuleService.ctorParameters = function () { return [
+        { type: BaseModuleScreenConfigService }
+    ]; };
 
     // Directive to represents the marker of "screen config name ID's" of components within a module.
     // Manipulates visibility, readonly and other dynamic states of an input element according to its db-fetched screen configuration object.
     var ScreenConfigurationDirective = /** @class */ (function () {
-        function ScreenConfigurationDirective(hostComponent, _viewContainerRef, _componentFactoryResolver) {
+        function ScreenConfigurationDirective(hostComponent, _element, 
+        // we must always have a config service to fetch config objects with
+        _configService, _renderer, 
+        // to make host readonly when MODULE switches to readonly:
+        _moduleService) {
+            var _this = this;
             this.hostComponent = hostComponent;
-            this._viewContainerRef = _viewContainerRef;
-            this._componentFactoryResolver = _componentFactoryResolver;
+            this._element = _element;
+            this._configService = _configService;
+            this._renderer = _renderer;
+            this._moduleService = _moduleService;
+            this.screenConfigNativeElement = false;
             this.noModuleService = false;
+            // feature toggle for devs so you can see the whole screen with all inputs etc by temporarily turning off the hiding effects of this directive on its host
+            this._isTurnedOff = false;
+            this._subs = [];
+            this._subs.push(this._configService.configSet.subscribe(function (configObjects) {
+                if (configObjects && configObjects.length > 0) {
+                    _this._updateHost();
+                }
+            }));
+            if (this._moduleService && !this.noModuleService) {
+                this._subs.push(this._moduleService.readonlyChange.subscribe(function (moduleInReadonlyState) {
+                    if (_this.hostComponent) {
+                        _this.hostComponent.readonly = _this.hostComponent.forceReadonly || moduleInReadonlyState;
+                    }
+                }), this._moduleService.errorValidationReceived.subscribe(function (validationResult) {
+                    _this._setErrorRedBackgroundAfterScrCfgValidate(validationResult);
+                }), this._moduleService.successfulUpdate.subscribe(function () {
+                    if (_this.hostComponent) {
+                        _this.hostComponent.redErrorBackground = false;
+                    }
+                }));
+            }
         }
         Object.defineProperty(ScreenConfigurationDirective.prototype, "screenConfigurationObject", {
             get: function () {
                 return this._screenConfigurationObject;
             },
-            set: function (screenConfigurationObject) {
-                if (screenConfigurationObject) {
-                    this._screenConfigurationObject = screenConfigurationObject;
-                    this._initWrapperComponent();
+            set: function (value) {
+                if (value) {
+                    this._screenConfigurationObject = value;
                     this._updateHost();
                 }
             },
             enumerable: false,
             configurable: true
         });
+        ScreenConfigurationDirective.prototype.ngOnInit = function () {
+            this._updateHost();
+            // this._updateHeaderStateOnHostComponent(true);
+            // show initial error message if any
+            if (!this.noModuleService) {
+                // this._setErrorRedBackgroundAfterScrCfgValidate(this._moduleService.lastError);
+            }
+        };
         ScreenConfigurationDirective.prototype.ngOnDestroy = function () {
+            this._subs.forEach(function (sub) { return sub.unsubscribe(); });
+            if (this._isHeader) {
+                // this._doubleClickHeaders.handleCollapseableDestroy(this.screenConfigurationObject);
+            }
+            this._element = undefined;
             this.hostComponent = undefined;
-            this._wrapperComponentInstance = undefined;
         };
-        ScreenConfigurationDirective.prototype._initWrapperComponent = function () {
-            if (!this._wrapperComponentInstance) {
-                var componentFactory = this._componentFactoryResolver.resolveComponentFactory(ScreenConfigComponentWrapper);
-                var componentRef = this._viewContainerRef.createComponent(componentFactory);
-                var visibleOnViewInit = !!this.screenConfigurationObject ? this.screenConfigurationObject.immediatelyVisible() : false;
-                this._wrapperComponentInstance = componentRef.instance;
-                this._wrapperComponentInstance.setWrapperContent(this._viewContainerRef.element.nativeElement, visibleOnViewInit);
+        // Sets host component visibility, required, readonly etc. if specified in backend screen config OR module readonly status.
+        ScreenConfigurationDirective.prototype._updateHost = function () {
+            if (this._mayUpdateHost() || this.screenConfigNativeElement) {
+                if (!this.screenConfigNativeElement) {
+                    this.hostComponent.objectConfigName = this.screenConfigurationObject;
+                }
+                var myCfgObj = this._configService.getObjectConfigurationFor(this.screenConfigurationObject);
+                if (myCfgObj) {
+                    this._setHostVisible(myCfgObj.immediatelyVisible());
+                    // if (this.hostComponent instanceof GridColumnComponent) {
+                    //   this.hostComponent.rights = myCfgObj.rights;
+                    // }
+                    if (!this.screenConfigNativeElement) {
+                        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;
+                    }
+                }
+                else {
+                    this._setHostVisible(false);
+                    if (!this.screenConfigNativeElement) {
+                        this.hostComponent.readonly = this._moduleInReadonlyMode();
+                    }
+                }
             }
         };
-        ScreenConfigurationDirective.prototype._updateHost = function () {
-            if (!!this.hostComponent && !!this._screenConfigurationObject) {
-                this.hostComponent.objectConfigName = this.screenConfigurationObject.configName;
-                if (this.screenConfigurationObject) {
-                    this.hostComponent.required = this.screenConfigurationObject.isRequired();
-                    // readonly based on forced boolean, based on rights value or based on variable value affected by module read only state
-                    this.hostComponent.readonly = this.hostComponent.forceReadonly || this.screenConfigurationObject.isReadonly() || this.screenConfigurationObject.variableReadOnly;
-                    this.hostComponent.decimals = this.screenConfigurationObject.scale;
-                    this.hostComponent.maxLength = this.screenConfigurationObject.maxLength;
+        /**
+         * Spawn error message tooltip onto our host comp, if any error was meant for the host (found by screenConfigurationObject);
+         * @param errorValidation A top-level full validation result, either from the backend or from some client-side validation error.
+         */
+        ScreenConfigurationDirective.prototype._setErrorRedBackgroundAfterScrCfgValidate = function (errorValidation) {
+            if (this.hostComponent && errorValidation) {
+                var errorMessages = errorValidation.getAllErrorMessagesOfMyValidationFields();
+                for (var i = 0, len = errorMessages.length; i < len; i++) {
+                    var errorMsg = errorMessages[i];
+                    var configName = this.dataName ? this.dataName : this.screenConfigurationObject;
+                    if (errorMsg.fieldId === configName && this._element /*&& this._properHost(errorMsg.boId)*/) {
+                        this.hostComponent.redErrorBackground = true;
+                    }
+                }
+            }
+        };
+        ScreenConfigurationDirective.prototype._moduleInReadonlyMode = function () {
+            return !this.noModuleService ? (this._moduleService ? this._moduleService.readonly : false) : false;
+        };
+        ScreenConfigurationDirective.prototype._mayUpdateHost = function () {
+            return !!this.hostComponent && !this._isTurnedOff && !!this.screenConfigurationObject;
+        };
+        ScreenConfigurationDirective.prototype._setHostVisible = function (visible) {
+            if (!this.screenConfigNativeElement) {
+                this.hostComponent.hidden = !visible;
+            }
+            else {
+                if (this._element && this._element.nativeElement) {
+                    if (!visible) {
+                        this._renderer.addClass(this._element.nativeElement, 'hidden');
+                    }
+                    else {
+                        this._renderer.removeClass(this._element.nativeElement, 'hidden');
+                    }
                 }
             }
         };
@@ -12578,18 +12938,25 @@
     }());
     ScreenConfigurationDirective.decorators = [
         { type: i0.Directive, args: [{
-                    selector: "[screenConfigurationObject]"
+                    selector: '[screenConfigurationObject]'
                 },] }
     ];
     ScreenConfigurationDirective.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: i0.Inject, args: [SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,] }] },
-        { type: i0.ViewContainerRef },
-        { type: i0.ComponentFactoryResolver }
+        { type: i0.ElementRef },
+        { type: BaseModuleScreenConfigService },
+        { type: i0.Renderer2 },
+        { type: BaseModuleService }
     ]; };
     ScreenConfigurationDirective.propDecorators = {
-        screenConfigurationObject: [{ type: i0.Input }],
+        screenConfigurationObject: [{ type: i0.Input, args: ['screenConfigurationObject',] }],
+        dataName: [{ type: i0.Input }],
+        screenConfigNativeElement: [{ type: i0.Input }],
         noModuleService: [{ type: i0.Input }]
     };
+    __decorate([
+        InputBoolean()
+    ], ScreenConfigurationDirective.prototype, "screenConfigNativeElement", void 0);
     __decorate([
         InputBoolean()
     ], ScreenConfigurationDirective.prototype, "noModuleService", void 0);
@@ -12605,8 +12972,7 @@
                         common.CommonModule
                     ],
                     declarations: [
-                        ScreenConfigurationDirective,
-                        ScreenConfigComponentWrapper
+                        ScreenConfigurationDirective
                     ],
                     exports: [
                         ScreenConfigurationDirective,
@@ -12672,6 +13038,8 @@
     exports.ArticleTileModule = ArticleTileModule;
     exports.BaseInputComponent = BaseInputComponent;
     exports.BaseInputDatePickerDirective = BaseInputDatePickerDirective;
+    exports.BaseModuleScreenConfigService = BaseModuleScreenConfigService;
+    exports.BaseModuleService = BaseModuleService;
     exports.ButtonComponent = ButtonComponent;
     exports.ButtonModule = ButtonModule;
     exports.CalendarComponent = CalendarComponent;
@@ -12757,6 +13125,7 @@
     exports.ResponsiveTextComponent = ResponsiveTextComponent;
     exports.ResponsiveTextModule = ResponsiveTextModule;
     exports.SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME = SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME;
+    exports.ScreenConfigurationDirective = ScreenConfigurationDirective;
     exports.ScreenConfigurationModule = ScreenConfigurationModule;
     exports.SimpleGridColumnDirective = SimpleGridColumnDirective;
     exports.SimpleGridComponent = SimpleGridComponent;
@@ -12787,8 +13156,6 @@
     exports["ɵbh"] = TooltipComponent;
     exports["ɵbi"] = TooltipDirective;
     exports["ɵbj"] = CheckmarkOverlayComponent;
-    exports["ɵbk"] = ScreenConfigurationDirective;
-    exports["ɵbl"] = ScreenConfigComponentWrapper;
     exports["ɵc"] = MD_RIPPLE_GLOBAL_OPTIONS;
     exports["ɵd"] = CoRippleDirective;
     exports["ɵe"] = CoViewportRulerService;