@colijnit/corecomponents_v12 12.2.4 → 12.2.6

package/fesm2015/colijnit-corecomponents_v12.js

@@ -1,8 +1,8 @@
 import { __awaiter, __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Input, Injectable, NgZone, Component, ViewEncapsulation, HostBinding, ComponentFactoryResolver, ApplicationRef, Injector, EventEmitter, Renderer2, ViewChildren, ElementRef, Output, Directive, ChangeDetectorRef, Optional, ViewChild, ViewContainerRef, HostListener, NgModule, SkipSelf, InjectionToken, Inject, ChangeDetectionStrategy, Pipe, ContentChildren, forwardRef, NO_ERRORS_SCHEMA, ContentChild } from '@angular/core';
+import { Input, Injectable, NgZone, Component, ViewEncapsulation, HostBinding, ComponentFactoryResolver, ApplicationRef, Injector, EventEmitter, Renderer2, ViewChildren, ElementRef, Output, Directive, ChangeDetectorRef, Optional, ViewChild, ViewContainerRef, HostListener, NgModule, SkipSelf, InjectionToken, Inject, forwardRef, ChangeDetectionStrategy, Pipe, ContentChildren, NO_ERRORS_SCHEMA, ContentChild } from '@angular/core';
 import { NgModel, FormGroup, FormsModule } from '@angular/forms';
-import { Subject, merge, fromEvent } from 'rxjs';
+import { Subject, merge, fromEvent, BehaviorSubject } from 'rxjs';
 import { DomSanitizer, HammerGestureConfig, HammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { trigger, state, style, transition, animate, query, animateChild } from '@angular/animations';
 import { CommonModule } from '@angular/common';
@@ -16,6 +16,9 @@ import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import { ArrayUtils as ArrayUtils$1 } from '@colijnit/ioneconnector/build/utils/array-utils';
+import { DEFAULT_GET_OBJECT_CONFIGURATION_PARAMS } from '@colijnit/ioneconnector/build/model/default-get-object-configurations-params';
+import { ObjectConfiguration } from '@colijnit/ioneconnector/build/model/object-configuration';
 
 // @returns true iff given value equals null or equals undefined
 function isNill(value) {
@@ -1857,6 +1860,7 @@ class BaseInputComponent {
         this.forceRequired = false; // a force outside of [cfgName]'s influence
         // Goal: ability to emulate the red background of input fields (form-submitted invalid state)
         this.redErrorBackground = false;
+        this.commitOnBlur = true;
         // @Output()
         // public commit: EventEmitter<any> = new EventEmitter<any>();
         this.nativeBlur = new EventEmitter();
@@ -1884,6 +1888,7 @@ class BaseInputComponent {
         this._markedAsUserTouched = false;
         this._destroyed = false;
         this._hasOnPushCdStrategy = false;
+        this._modelDirtyForCommit = false;
         this._initialModelSet = false;
         this._forceReadonly = undefined;
         this._validators = [];
@@ -1916,6 +1921,7 @@ class BaseInputComponent {
         }
         this._model = value;
         this.canSaveOrCancel = this._model !== this._initialModel;
+        this._modelDirtyForCommit = this._model !== this._initialModel;
         this._clearErrorComponent();
         this.modelSet();
     }
@@ -2107,7 +2113,7 @@ class BaseInputComponent {
                     committing: false,
                     commitFinished: false
                 }, {
-                    commitClick: (event) => this.commitClick(event),
+                    commitClick: (event) => this._handleCommit(event),
                     cancelClick: (event) => this.cancelClick(event)
                 });
             }
@@ -2170,22 +2176,6 @@ class BaseInputComponent {
         this.changeDetector = undefined;
         this.input = undefined;
     }
-    commitClick(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.keepFocus = true;
-            if (this._commitButtonsComponentRef) {
-                this._commitButtonsComponentRef.instance.commitFinished = false;
-                this._commitButtonsComponentRef.instance.committing = true;
-            }
-            const success = yield this.commit(this.model);
-            this.keepFocus = false;
-            yield this._commitFinished();
-            if (success) {
-                this.doBlur(event);
-            }
-            return success;
-        });
-    }
     cancelClick(event) {
         this.keepFocus = true;
         if (this._initialModelSet) {
@@ -2239,23 +2229,28 @@ class BaseInputComponent {
         }
         this.focus.next();
     }
-    doBlur(event) {
-        setTimeout(() => {
-            if (this.keepFocus || this.keepFocussed) {
-                if (event) {
-                    event.preventDefault;
-                }
-                return false;
-            }
-            this.focused = false;
-            if (this._hasOnPushCdStrategy) {
-                this.markForCheck();
-            }
-            if (this.input) {
-                this.input.blur();
+    doBlur(event, handleCommit = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.showSaveCancel && handleCommit) {
+                yield this._handleCommit(event, false);
             }
-            this.blur.next();
-        }, 200);
+            setTimeout(() => {
+                if (this.keepFocus || this.keepFocussed) {
+                    if (event) {
+                        event.preventDefault;
+                    }
+                    return false;
+                }
+                this.focused = false;
+                if (this._hasOnPushCdStrategy) {
+                    this.markForCheck();
+                }
+                if (this.input) {
+                    this.input.blur();
+                }
+                this.blur.next();
+            }, 200);
+        });
     }
     detectChanges() {
         if (!this._destroyed) {
@@ -2366,6 +2361,26 @@ class BaseInputComponent {
             this.control.updateValueAndValidity();
         }
     }
+    _handleCommit(event, doBlur = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.showSaveCancel || (!this._modelDirtyForCommit)) {
+                return true;
+            }
+            this.keepFocus = true;
+            if (this._commitButtonsComponentRef) {
+                this._commitButtonsComponentRef.instance.commitFinished = false;
+                this._commitButtonsComponentRef.instance.committing = true;
+            }
+            const success = yield this.commit(this.model);
+            this.keepFocus = false;
+            yield this._commitFinished();
+            this._modelDirtyForCommit = false;
+            if (success && doBlur) {
+                this.doBlur(event, false);
+            }
+            return success;
+        });
+    }
     _commitFinished() {
         return new Promise((resolve) => {
             if (this._commitButtonsComponentRef) {
@@ -2377,17 +2392,13 @@ class BaseInputComponent {
                     resolve();
                 }, 800);
             }
+            else {
+                resolve();
+            }
         });
     }
     _clearErrorComponent() {
         this.overlayService.removeComponent(this._validationComponentRef);
-        // if (this.validationErrorContainer) {
-        //   this.validationErrorContainer.clear();
-        //   if (this._errorValidationComponent) {
-        //     this._errorValidationComponent.destroy();
-        //     this._errorValidationComponent = undefined;
-        //   }
-        // }
     }
     // whether this.ngModel.control has safe access
     _controlExists() {
@@ -2484,14 +2495,14 @@ class BaseInputComponent {
                 case 'NumpadEnter':
                     if (!event.shiftKey) {
                         event.preventDefault();
-                        yield this.commitClick();
+                        yield this._handleCommit();
                         return false;
                     }
                     return true;
                 case 'Tab':
                     const nextSiblingToFocus = event.shiftKey ? event.currentTarget.previousSibling : event.currentTarget.nextSibling;
                     event.preventDefault();
-                    const success = yield this.commitClick();
+                    const success = yield this._handleCommit();
                     if (success) {
                         if (nextSiblingToFocus) {
                             try {
@@ -2577,6 +2588,7 @@ BaseInputComponent.propDecorators = {
     customCssClass: [{ type: Input }],
     redErrorBackground: [{ type: Input }, { type: HostBinding, args: ["class.cc-red-error-background",] }],
     myFormInputInstance: [{ type: Input }],
+    commitOnBlur: [{ type: Input }],
     nativeBlur: [{ type: Output }],
     blur: [{ type: Output }],
     enter: [{ type: Output }],
@@ -3259,6 +3271,9 @@ EventUtils._passiveSupported = undefined;
 EventUtils._passiveCapture = undefined;
 EventUtils._passiveBubble = undefined;
 
+// Enables "DI for interfaces" (see ConfigNameDirective injected .hostComponent).
+const SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME = new InjectionToken("ScreenConfigAdapterComponent");
+
 class ButtonComponent {
     constructor(_elementRef) {
         this._elementRef = _elementRef;
@@ -3275,7 +3290,7 @@ class ButtonComponent {
         return !!this.iconData;
     }
     onHostClick(event) {
-        if (this.disabled) {
+        if (this.readonly || this.disabled) {
             this.clickedWhileDisabled.emit(event);
             EventUtils.KillEvent(event);
         }
@@ -3296,16 +3311,21 @@ class ButtonComponent {
 }
 ButtonComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-button",
+                selector: 'co-button',
                 template: `
-    <co-icon *ngIf="!!iconData" [iconData]="iconData"></co-icon>
-    <span *ngIf="!!label" class="label">{{ label }}</span>
-    <co-icon *ngIf="!!iconDataRight" [iconData]="iconDataRight"></co-icon>
-    <div class="rippler" md-ripple [mdRippleDisabled]="disabled"></div>
-  `,
+        <co-icon *ngIf="!!iconData" [iconData]="iconData"></co-icon>
+        <span *ngIf="!!label" class="label">{{ label }}</span>
+        <co-icon *ngIf="!!iconDataRight" [iconData]="iconDataRight"></co-icon>
+        <div class="rippler" md-ripple [mdRippleDisabled]="disabled"></div>
+    `,
                 host: {
-                    tabindex: "0"
+                    tabindex: '0'
                 },
+                providers: [{
+                        provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+                        useExisting: forwardRef(() => ButtonComponent)
+                    }
+                ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -3314,19 +3334,20 @@ ButtonComponent.ctorParameters = () => [
     { type: ElementRef }
 ];
 ButtonComponent.propDecorators = {
-    label: [{ type: HostBinding, args: ["class.has-label",] }, { type: Input }],
-    iconData: [{ type: HostBinding, args: ["class.has-left-icon",] }, { type: Input }],
-    iconDataRight: [{ type: HostBinding, args: ["class.has-right-icon",] }, { type: Input }],
+    label: [{ type: HostBinding, args: ['class.has-label',] }, { type: Input }],
+    iconData: [{ type: HostBinding, args: ['class.has-left-icon',] }, { type: Input }],
+    iconDataRight: [{ type: HostBinding, args: ['class.has-right-icon',] }, { type: Input }],
     isToggleButton: [{ type: Input }],
-    isToggled: [{ type: Input }, { type: HostBinding, args: ["class.toggled",] }],
-    hidden: [{ type: Input }, { type: HostBinding, args: ["class.co-hidden",] }],
-    disabled: [{ type: Input }, { type: HostBinding, args: ["class.disabled",] }],
-    showClass: [{ type: HostBinding, args: ["class.co-button",] }],
+    isToggled: [{ type: Input }, { type: HostBinding, args: ['class.toggled',] }],
+    hidden: [{ type: Input }, { type: HostBinding, args: ['class.co-hidden',] }],
+    disabled: [{ type: Input }, { type: HostBinding, args: ['class.disabled',] }],
+    showClass: [{ type: HostBinding, args: ['class.co-button',] }],
     onClick: [{ type: Output }],
     clickedWhileDisabled: [{ type: Output }],
     isToggledChange: [{ type: Output }],
-    hasIcon: [{ type: HostBinding, args: ["class.has-icon",] }],
-    onHostClick: [{ type: HostListener, args: ["click", ["$event"],] }]
+    hasIcon: [{ type: HostBinding, args: ['class.has-icon',] }],
+    onHostClick: [{ type: HostListener, args: ['click', ['$event'],] }],
+    readonly: [{ type: HostBinding, args: ["class.read-only",] }]
 };
 
 class ButtonModule {
@@ -5195,9 +5216,6 @@ BaseModule.decorators = [
             },] }
 ];
 
-// Enables "DI for interfaces" (see ConfigNameDirective injected .hostComponent).
-const SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME = new InjectionToken("ScreenConfigAdapterComponent");
-
 class InputCheckboxComponent extends BaseInputComponent {
     constructor(formComponent, iconCacheService, changeDetector, overlayService, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
         super(changeDetector, componentFactoryResolver, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
@@ -5403,6 +5421,8 @@ InputDatePickerComponent.decorators = [
                 selector: 'co-input-date',
                 template: `
       <co-input-text (clickOutside)="toggleCalendar(false)" overlayParent #parentForOverlay="overlayParent"
+                     [hidden]="hidden"
+                     [readonly]="readonly"
                      [(model)]="modelAsString"
                      [rightIcon]="rightIcon"
                      [leftIcon]="leftIcon"
@@ -10616,8 +10636,11 @@ class ListOfValuesComponent extends BaseInputComponent {
         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;
     }
@@ -10736,7 +10759,7 @@ class ListOfValuesComponent extends BaseInputComponent {
                 this.selectedModel = this.model[this.displayField];
             }
             else {
-                this.selectedModel = "";
+                this.selectedModel = '';
             }
         }
     }
@@ -10779,7 +10802,11 @@ ListOfValuesComponent.decorators = [
         </co-input-text>
     `,
                 providers: [
-                    OverlayService
+                    OverlayService,
+                    {
+                        provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+                        useExisting: forwardRef(() => ListOfValuesComponent)
+                    }
                 ],
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -11323,6 +11350,8 @@ class FilterItemComponent {
         this.sliderMax = !!this.sliderMax ? this.sliderMax : this.sliderDefaultMax;
         let trueLowerBound = Math.min(this.sliderMin, this.sliderMax);
         let trueUpperBound = Math.max(this.sliderMin, this.sliderMax);
+        this.sliderMin = trueLowerBound;
+        this.sliderMax = trueUpperBound;
         this._model = `${trueLowerBound} - ${trueUpperBound}`;
     }
     _createModelForCheckboxToText() {
@@ -11564,7 +11593,7 @@ FilterItemComponent.decorators = [
                 [excludePlusMinus]="true"
                 [label]="'FROM' | localize"
                 [(model)]="sliderMin"
-                (modelChange)="handleModelChange($event)"
+                (focusout)="handleModelChange(sliderMin)"
               ></co-input-text>
               <co-input-text
                 class="slider-to"
@@ -11574,19 +11603,22 @@ FilterItemComponent.decorators = [
                 [excludePlusMinus]="true"
                 [label]="'TO' | localize"
                 [(model)]="sliderMax"
-                (modelChange)="handleModelChange($event)"
+                (focusout)="handleModelChange(sliderMax)"
               ></co-input-text>
             </div>
             <div class="co-filter-item-checkbox-content" *ngIf="mode === modes.Checkbox ">
               <co-input-checkbox
                 [(model)]="model"
-                (modelChange)="handleModelChange($event)"></co-input-checkbox>
+                (modelChange)="handleModelChange($event)"
+                [label]="placeholder">
+              </co-input-checkbox>
             </div>
             <div class="co-filter-item-checkbox-content"
                  *ngIf="mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary">
               <co-input-checkbox
                 [(model)]="checkBoxToTextModel"
-                (modelChange)="handleModelChange($event)"></co-input-checkbox>
+                (modelChange)="handleModelChange($event)"
+                [label]="placeholder"></co-input-checkbox>
             </div>
             <div class="co-filter-item-textfield-content" *ngIf="mode === modes.TextField">
               <co-input-text
@@ -11985,94 +12017,391 @@ CheckmarkOverlayModule.decorators = [
             },] }
 ];
 
-class ScreenConfigComponentWrapper {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-        this._visibleOnViewInit = true;
+class BaseModuleScreenConfigService {
+    constructor() {
+        // emits the params of the loaded config, each time when a new config was loaded
+        this.configSet = new 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();
     }
-    setWrapperContent(element, visibleOnViewInit) {
-        this._contentNativeElement = element;
-        this._visibleOnViewInit = visibleOnViewInit;
+    get configObjects() {
+        return this._configObjects;
     }
-    ngAfterViewInit() {
-        if (this.screenConfigComponentWrapper) {
-            this.screenConfigComponentWrapper.nativeElement.appendChild(this._contentNativeElement);
-            this.hidden = !this._visibleOnViewInit;
+    // POST: this.configObjects are loaded. Returns the loaded config objects.
+    loadConfig(params = DEFAULT_GET_OBJECT_CONFIGURATION_PARAMS, insertRights) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const configObjects = yield this.loadConfigForModule(params, insertRights);
+            this._configObjects = configObjects;
+            if (configObjects && Array.isArray(configObjects)) {
+                this._buildScreenConfigMap();
+                this.configSet.next(params);
+            }
+            return this._configObjects;
+        });
+    }
+    lazyLoadConfig() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.configObjects.length) {
+                yield this.loadConfig();
+            }
+        });
+    }
+    isActiveFieldValidationObject(configObject) {
+        if (configObject) {
+            return configObject.isActiveFieldValidationObject() && !this.isDataNameHiddenByAnyOfItsParentRubrics(configObject.dataName);
+        }
+    }
+    isBoValid(bo) {
+        if (this.controlValidityByBoMap && !ArrayUtils$1.IsEmptyArray(this.controlValidityByBoMap)) {
+            const mapEntry = this.controlValidityByBoMap.find(value => value.bo === bo && value.valid === false);
+            if (mapEntry) {
+                return mapEntry.valid;
+            }
+        }
+        return true;
+    }
+    getObjectConfigurationFor(configName) {
+        const configuration = this._objectConfigsMap.get(configName);
+        // If configuration not found by configname, try by data name
+        if (!!this._objectConfigsMap.size && !configuration && configName) {
+            const 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;
+    }
+    setObjectConfigurationFor(configName, configObject) {
+        this._objectConfigsMap.set(configName, configObject);
+    }
+    // Whether the user may read the component that's associated with given config object (visibility).
+    mayRead(configName) {
+        const objectConfig = this._objectConfigsMap.get(configName);
+        return objectConfig ? objectConfig.mayRead() : false;
+    }
+    isReadonly(configName) {
+        return !this.mayWrite(configName);
+    }
+    // Whether the user may write onto the component that's associated with given config object.
+    mayWrite(configName) {
+        const 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.
+    immediatelyVisible(configName) {
+        const 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.
+    immediatelyHidden(configName) {
+        const objectConfig = this._objectConfigsMap.get(configName);
+        return objectConfig ? objectConfig.immediatelyHidden() : false;
+    }
+    noRights(configName) {
+        const objectConfig = this._objectConfigsMap.get(configName);
+        return objectConfig ? objectConfig.noRights() : false;
+    }
+    isHidden(configName) {
+        return !this.immediatelyVisible(configName);
+    }
+    isRequired(configName) {
+        const objectConfig = this._objectConfigsMap.get(configName);
+        return objectConfig ? !objectConfig.nullable : false;
+    }
+    getDefaultValue(configName) {
+        const objectConfig = this._objectConfigsMap.get(configName);
+        return objectConfig ? objectConfig.getDefaultValue() : undefined;
+    }
+    getDefaultStringValue(configName) {
+        const objectConfig = this._objectConfigsMap.get(configName);
+        return objectConfig ? objectConfig.getDefaultStringValue() : undefined;
+    }
+    getDefaultNumberValue(configName) {
+        const objectConfig = this._objectConfigsMap.get(configName);
+        return objectConfig ? objectConfig.getDefaultNumberValue() : undefined;
+    }
+    getMaxLength(configName) {
+        const objectConfig = this._objectConfigsMap.get(configName);
+        return objectConfig ? objectConfig.maxLength : undefined;
+    }
+    getDecimals(configName) {
+        const objectConfig = this._objectConfigsMap.get(configName);
+        return objectConfig ? objectConfig.scale : undefined;
+    }
+    hasConfigObjects() {
+        return this._configObjects && this._configObjects.length > 0 && this._objectConfigsMap.size > 0;
+    }
+    isKind(configName, kind) {
+        const objectConfig = this._objectConfigsMap.get(configName);
+        return objectConfig ? objectConfig.isKind(kind) : false;
+    }
+    isDataNameHiddenByItselfOrAnyOfItsParentRubrics(dataName) {
+        const isHiddenItself = ArrayUtils$1.ContainsAnElementFoundBy(this._configObjects, ((item) => {
+            return item.dataName === dataName && item.isHidden();
+        }));
+        if (isHiddenItself) {
+            return true;
+        }
+        else {
+            return this.isDataNameHiddenByAnyOfItsParentRubrics(dataName);
+        }
+    }
+    isDataNameHiddenByAnyOfItsParentRubrics(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;
+    }
+    // return the first found config name for given data name
+    _getConfigNameByDataName(dataName) {
+        const itsConfigObject = this._getConfigObjectByDataName(dataName);
+        if (itsConfigObject) {
+            return itsConfigObject.configName;
+        }
+    }
+    // return the first found config object with given data name
+    _getConfigObjectByDataName(dataName) {
+        return ArrayUtils$1.Find(this._configObjects, (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.
+    _buildScreenConfigMap() {
+        this._objectConfigsMap.clear();
+        this.configObjects.forEach(item => this._objectConfigsMap.set(item.configName, item));
+    }
+    setScreenConfigurationObjectsReadOnly(value) {
+        this.configObjects.forEach((object) => {
+            const copy = Object.assign(new ObjectConfiguration(), object);
+            copy.variableReadOnly = value;
+            this.setObjectConfigurationFor(object.configName, copy);
+        });
+    }
+    setScreenConfigurationObjectsRedErrorBackground(errorValidation, setAllFalse = false) {
+        if (setAllFalse) {
+            this.configObjects.forEach((object) => {
+                const copy = Object.assign(new ObjectConfiguration(), object);
+                copy.redErrorBackground = false;
+                this.setObjectConfigurationFor(object.configName, copy);
+            });
+        }
+        else if (errorValidation) {
+            const errorMessages = errorValidation.getAllErrorMessagesOfMyValidationFields();
+            for (let i = 0, len = errorMessages.length; i < len; i++) {
+                const errorMsg = errorMessages[i];
+                const configObject = this.configObjects.find(object => object.configName === errorMsg.fieldId);
+                if (configObject) {
+                    const copy = Object.assign(new ObjectConfiguration(), configObject);
+                    copy.redErrorBackground = false;
+                    this.setObjectConfigurationFor(configObject.configName, copy);
+                }
+            }
         }
     }
 }
-ScreenConfigComponentWrapper.decorators = [
-    { type: Component, args: [{
-                selector: "screen-config-component-wrapper",
-                template: `<div *ngIf="!hidden" #screenConfigComponentWrapper></div>`
-            },] }
-];
-ScreenConfigComponentWrapper.ctorParameters = () => [
-    { type: ElementRef }
+BaseModuleScreenConfigService.decorators = [
+    { type: 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.
+ */
+class BaseModuleService {
+    constructor(screenConfigService) {
+        this.screenConfigService = screenConfigService;
+        this.readonlyChange = new 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 Subject();
+        // Emits once after succesful BO update (i.e. there were no errors)
+        this.successfulUpdate = new Subject();
+        this._readonly = true;
+        this._subscriptions = [];
+        this._subscriptions.push(this.errorValidationReceived.subscribe((errorValidation) => this.screenConfigService.setScreenConfigurationObjectsRedErrorBackground(errorValidation)), this.successfulUpdate.subscribe(() => this.screenConfigService.setScreenConfigurationObjectsRedErrorBackground(null, true)), this.readonlyChange.subscribe((readOnly) => this.screenConfigService.setScreenConfigurationObjectsReadOnly(readOnly)));
+    }
+    // Whether the module is in readonly modus or not. Input fields etc. will be readonly throughout the module.
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(readonly) {
+        if (this._readonly !== readonly) {
+            this._readonly = readonly;
+            this.readonlyChange.next(this._readonly);
+        }
+    }
+    ngOnDestroy() {
+        this._subscriptions.forEach((subscription) => subscription.unsubscribe());
+    }
+}
+BaseModuleService.decorators = [
+    { type: Injectable }
 ];
-ScreenConfigComponentWrapper.propDecorators = {
-    screenConfigComponentWrapper: [{ type: ViewChild, args: ['screenConfigComponentWrapper',] }]
-};
+BaseModuleService.ctorParameters = () => [
+    { 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.
 class ScreenConfigurationDirective {
-    constructor(hostComponent, _viewContainerRef, _componentFactoryResolver) {
+    constructor(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) {
         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((configObjects) => {
+            if (configObjects && configObjects.length > 0) {
+                this._updateHost();
+            }
+        }));
+        if (this._moduleService && !this.noModuleService) {
+            this._subs.push(this._moduleService.readonlyChange.subscribe((moduleInReadonlyState) => {
+                if (this.hostComponent) {
+                    this.hostComponent.readonly = this.hostComponent.forceReadonly || moduleInReadonlyState;
+                }
+            }), this._moduleService.errorValidationReceived.subscribe((validationResult) => {
+                this._setErrorRedBackgroundAfterScrCfgValidate(validationResult);
+            }), this._moduleService.successfulUpdate.subscribe(() => {
+                if (this.hostComponent) {
+                    this.hostComponent.redErrorBackground = false;
+                }
+            }));
+        }
     }
-    set screenConfigurationObject(screenConfigurationObject) {
-        if (screenConfigurationObject) {
-            this._screenConfigurationObject = screenConfigurationObject;
-            this._initWrapperComponent();
+    set screenConfigurationObject(value) {
+        if (value) {
+            this._screenConfigurationObject = value;
             this._updateHost();
         }
     }
     get screenConfigurationObject() {
         return this._screenConfigurationObject;
     }
+    ngOnInit() {
+        this._updateHost();
+        // this._updateHeaderStateOnHostComponent(true);
+        // show initial error message if any
+        if (!this.noModuleService) {
+            // this._setErrorRedBackgroundAfterScrCfgValidate(this._moduleService.lastError);
+        }
+    }
     ngOnDestroy() {
+        this._subs.forEach(sub => sub.unsubscribe());
+        if (this._isHeader) {
+            // this._doubleClickHeaders.handleCollapseableDestroy(this.screenConfigurationObject);
+        }
+        this._element = undefined;
         this.hostComponent = undefined;
-        this._wrapperComponentInstance = undefined;
     }
-    _initWrapperComponent() {
-        if (!this._wrapperComponentInstance) {
-            const componentFactory = this._componentFactoryResolver.resolveComponentFactory(ScreenConfigComponentWrapper);
-            const componentRef = this._viewContainerRef.createComponent(componentFactory);
-            const 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.
+    _updateHost() {
+        if (this._mayUpdateHost() || this.screenConfigNativeElement) {
+            if (!this.screenConfigNativeElement) {
+                this.hostComponent.objectConfigName = this.screenConfigurationObject;
+            }
+            const 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();
+                }
+            }
         }
     }
-    _updateHost() {
-        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.
+     */
+    _setErrorRedBackgroundAfterScrCfgValidate(errorValidation) {
+        if (this.hostComponent && errorValidation) {
+            const errorMessages = errorValidation.getAllErrorMessagesOfMyValidationFields();
+            for (let i = 0, len = errorMessages.length; i < len; i++) {
+                const errorMsg = errorMessages[i];
+                const configName = this.dataName ? this.dataName : this.screenConfigurationObject;
+                if (errorMsg.fieldId === configName && this._element /*&& this._properHost(errorMsg.boId)*/) {
+                    this.hostComponent.redErrorBackground = true;
+                }
+            }
+        }
+    }
+    _moduleInReadonlyMode() {
+        return !this.noModuleService ? (this._moduleService ? this._moduleService.readonly : false) : false;
+    }
+    _mayUpdateHost() {
+        return !!this.hostComponent && !this._isTurnedOff && !!this.screenConfigurationObject;
+    }
+    _setHostVisible(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');
+                }
             }
         }
     }
 }
 ScreenConfigurationDirective.decorators = [
     { type: Directive, args: [{
-                selector: "[screenConfigurationObject]"
+                selector: '[screenConfigurationObject]'
             },] }
 ];
 ScreenConfigurationDirective.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,] }] },
-    { type: ViewContainerRef },
-    { type: ComponentFactoryResolver }
+    { type: ElementRef },
+    { type: BaseModuleScreenConfigService },
+    { type: Renderer2 },
+    { type: BaseModuleService }
 ];
 ScreenConfigurationDirective.propDecorators = {
-    screenConfigurationObject: [{ type: Input }],
+    screenConfigurationObject: [{ type: Input, args: ['screenConfigurationObject',] }],
+    dataName: [{ type: Input }],
+    screenConfigNativeElement: [{ type: Input }],
     noModuleService: [{ type: Input }]
 };
+__decorate([
+    InputBoolean()
+], ScreenConfigurationDirective.prototype, "screenConfigNativeElement", void 0);
 __decorate([
     InputBoolean()
 ], ScreenConfigurationDirective.prototype, "noModuleService", void 0);
@@ -12085,8 +12414,7 @@ ScreenConfigurationModule.decorators = [
                     CommonModule
                 ],
                 declarations: [
-                    ScreenConfigurationDirective,
-                    ScreenConfigComponentWrapper
+                    ScreenConfigurationDirective
                 ],
                 exports: [
                     ScreenConfigurationDirective,
@@ -12144,5 +12472,5 @@ ColorSequenceService.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ArticleTileComponent, ArticleTileModule, BaseInputComponent, BaseInputDatePickerDirective, ButtonComponent, ButtonModule, CalendarComponent, CalendarModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoOrientation, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, CoreComponentsTranslationModule, CoreComponentsTranslationService, DoubleCalendarComponent, DoubleCalendarModule, FilterItemComponent, FilterItemMode, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormInputUserModelChangeListenerService, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, ListOfValuesComponent, ListOfValuesModule, ListOfValuesPopupComponent, NgZoneWrapperService, ObserveVisibilityModule, OrientationOfDirection, OverlayModule, OverlayService, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, ResponsiveTextComponent, ResponsiveTextModule, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, emailValidator, equalValidator, getValidatePasswordErrorString, maxStringLengthValidator, passwordValidator, precisionScaleValidator, requiredValidator, showHideDialog, InputBoolean as ɵa, RippleModule as ɵb, PaginationService as ɵba, PaginatePipe as ɵbb, SimpleGridCellComponent as ɵbc, ListOfValuesMultiselectPopupComponent as ɵbd, PrependPipeModule as ɵbe, PrependPipe as ɵbf, TooltipModule as ɵbg, TooltipComponent as ɵbh, TooltipDirective as ɵbi, CheckmarkOverlayComponent as ɵbj, ScreenConfigurationDirective as ɵbk, ScreenConfigComponentWrapper as ɵbl, MD_RIPPLE_GLOBAL_OPTIONS as ɵc, CoRippleDirective as ɵd, CoViewportRulerService as ɵe, CoScrollDispatcherService as ɵf, CoScrollableDirective as ɵg, StopClickModule as ɵh, StopClickDirective as ɵi, BaseModule as ɵj, AppendPipeModule as ɵk, AppendPipe as ɵl, ValidationErrorModule as ɵm, OverlayDirective as ɵn, OverlayParentDirective as ɵo, LocalizePipe as ɵp, DictionaryService as ɵq, ValidationErrorComponent as ɵr, CommitButtonsModule as ɵs, CommitButtonsComponent as ɵt, ClickOutsideDirective as ɵu, ClickOutsideMasterService as ɵv, CalendarTemplateComponent as ɵw, PopupShowerService as ɵx, BaseSimpleGridComponent as ɵy, ObserveVisibilityDirective as ɵz };
+export { ArticleTileComponent, ArticleTileModule, BaseInputComponent, BaseInputDatePickerDirective, BaseModuleScreenConfigService, BaseModuleService, ButtonComponent, ButtonModule, CalendarComponent, CalendarModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoOrientation, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, CoreComponentsTranslationModule, CoreComponentsTranslationService, DoubleCalendarComponent, DoubleCalendarModule, FilterItemComponent, FilterItemMode, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormInputUserModelChangeListenerService, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, ListOfValuesComponent, ListOfValuesModule, ListOfValuesPopupComponent, NgZoneWrapperService, ObserveVisibilityModule, OrientationOfDirection, OverlayModule, OverlayService, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, ResponsiveTextComponent, ResponsiveTextModule, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationDirective, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, emailValidator, equalValidator, getValidatePasswordErrorString, maxStringLengthValidator, passwordValidator, precisionScaleValidator, requiredValidator, showHideDialog, InputBoolean as ɵa, RippleModule as ɵb, PaginationService as ɵba, PaginatePipe as ɵbb, SimpleGridCellComponent as ɵbc, ListOfValuesMultiselectPopupComponent as ɵbd, PrependPipeModule as ɵbe, PrependPipe as ɵbf, TooltipModule as ɵbg, TooltipComponent as ɵbh, TooltipDirective as ɵbi, CheckmarkOverlayComponent as ɵbj, MD_RIPPLE_GLOBAL_OPTIONS as ɵc, CoRippleDirective as ɵd, CoViewportRulerService as ɵe, CoScrollDispatcherService as ɵf, CoScrollableDirective as ɵg, StopClickModule as ɵh, StopClickDirective as ɵi, BaseModule as ɵj, AppendPipeModule as ɵk, AppendPipe as ɵl, ValidationErrorModule as ɵm, OverlayDirective as ɵn, OverlayParentDirective as ɵo, LocalizePipe as ɵp, DictionaryService as ɵq, ValidationErrorComponent as ɵr, CommitButtonsModule as ɵs, CommitButtonsComponent as ɵt, ClickOutsideDirective as ɵu, ClickOutsideMasterService as ɵv, CalendarTemplateComponent as ɵw, PopupShowerService as ɵx, BaseSimpleGridComponent as ɵy, ObserveVisibilityDirective as ɵz };
 //# sourceMappingURL=colijnit-corecomponents_v12.js.map