@colijnit/corecomponents_v12 12.0.93 → 12.0.95

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/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js'), require('hammerjs'), require('@angular/animations'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-kanban'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/forms'), require('@syncfusion/ej2-angular-schedule'), require('@syncfusion/ej2-angular-navigations'), require('@syncfusion/ej2-angular-buttons'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-grids'), require('@syncfusion/ej2-base'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-pivotview'), 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/common', '@angular/common/http', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@syncfusion/ej2-angular-splitbuttons', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js', 'hammerjs', '@angular/animations', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-kanban', '@syncfusion/ej2-angular-richtexteditor', '@angular/forms', '@syncfusion/ej2-angular-schedule', '@syncfusion/ej2-angular-navigations', '@syncfusion/ej2-angular-buttons', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-grids', '@syncfusion/ej2-base', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-pivotview', '@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.common, global.ng.common.http, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ej2AngularSplitbuttons, global.three, global.CSS3DRenderer, global.TWEEN, null, global.ng.animations, global.ej2AngularPopups, global.ej2AngularKanban, global.ej2AngularRichtexteditor, global.ng.forms, global.ej2AngularSchedule, global.ej2AngularNavigations, global.ej2AngularButtons, global.ej2AngularDropdowns, global.ej2AngularGrids, global.ej2Base, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularPivotview, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.dragDrop, global.ng.cdk.scrolling));
-})(this, (function (exports, i0, common, http, platformBrowser, rxjs, operators, ej2AngularSplitbuttons, three, CSS3DRenderer, TWEEN, hammerjs, animations, ej2AngularPopups, ej2AngularKanban, ej2AngularRichtexteditor, forms, ej2AngularSchedule, ej2AngularNavigations, ej2AngularButtons, ej2AngularDropdowns, ej2AngularGrids, ej2Base, ej2AngularCalendars, ej2AngularInputs, ej2AngularPivotview, overlay, portal, dragDrop, scrolling) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js'), require('hammerjs'), require('@angular/animations'), require('@syncfusion/ej2-angular-kanban'), require('@syncfusion/ej2-angular-schedule'), require('@syncfusion/ej2-angular-navigations'), require('@syncfusion/ej2-angular-buttons'), require('@angular/forms'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-grids'), require('@syncfusion/ej2-base'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-pivotview'), 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/common', '@angular/common/http', '@angular/platform-browser', 'rxjs', 'rxjs/operators', '@syncfusion/ej2-angular-splitbuttons', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js', 'hammerjs', '@angular/animations', '@syncfusion/ej2-angular-kanban', '@syncfusion/ej2-angular-schedule', '@syncfusion/ej2-angular-navigations', '@syncfusion/ej2-angular-buttons', '@angular/forms', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-grids', '@syncfusion/ej2-base', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-pivotview', '@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.common, global.ng.common.http, global.ng.platformBrowser, global.rxjs, global.rxjs.operators, global.ej2AngularSplitbuttons, global.three, global.CSS3DRenderer, global.TWEEN, null, global.ng.animations, global.ej2AngularKanban, global.ej2AngularSchedule, global.ej2AngularNavigations, global.ej2AngularButtons, global.ng.forms, global.ej2AngularDropdowns, global.ej2AngularGrids, global.ej2Base, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularPivotview, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.cdk.dragDrop, global.ng.cdk.scrolling));
+})(this, (function (exports, i0, common, http, platformBrowser, rxjs, operators, ej2AngularSplitbuttons, three, CSS3DRenderer, TWEEN, hammerjs, animations, ej2AngularKanban, ej2AngularSchedule, ej2AngularNavigations, ej2AngularButtons, forms, ej2AngularDropdowns, ej2AngularGrids, ej2Base, ej2AngularCalendars, ej2AngularInputs, ej2AngularPivotview, overlay, portal, dragDrop, scrolling) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -3770,70 +3770,6 @@
                 },] }
     ];
 
-    var CoDialogPromptComponent = /** @class */ (function () {
-        function CoDialogPromptComponent() {
-            var _this = this;
-            this.header = "header";
-            this.content = "content";
-            this.visible = false;
-            this.width = "50%";
-            this.showCloseIcon = true;
-            this.closeClick = new i0.EventEmitter();
-            this.target = '.co-dialog-prompt-root-container';
-            this.buttons = [
-                { click: this.buttonClick.bind(this), buttonModel: { content: 'Ja', isPrimary: 'true' } },
-                { click: this.buttonClick.bind(this), buttonModel: { content: 'Nee' } }
-            ];
-            this.onCloseClick = function () {
-                _this.close();
-                _this.closeClick.emit();
-            };
-        }
-        CoDialogPromptComponent.prototype.open = function () {
-            this.coDialogPrompt.show();
-        };
-        CoDialogPromptComponent.prototype.close = function () {
-            this.coDialogPrompt.hide();
-        };
-        CoDialogPromptComponent.prototype.buttonClick = function () {
-            this.close();
-        };
-        return CoDialogPromptComponent;
-    }());
-    CoDialogPromptComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'co-dialog-prompt',
-                    template: "\n    <div #coDialogPromptRootContainer class='co-dialog-prompt-root-container'></div>\n    <ejs-dialog #coDialogPrompt\n                [buttons]=\"buttons\"\n                [header]=\"header\"\n                [content]=\"content\"\n                [showCloseIcon]=\"showCloseIcon\"\n                [target]=\"target\"\n                [visible]=\"visible\"\n                [width]=\"width\"\n                (close)=\"onCloseClick()\"\n    >\n    </ejs-dialog>\n  ",
-                    styles: [""]
-                },] }
-    ];
-    CoDialogPromptComponent.ctorParameters = function () { return []; };
-    CoDialogPromptComponent.propDecorators = {
-        coDialogPrompt: [{ type: i0.ViewChild, args: ['coDialogPrompt',] }],
-        header: [{ type: i0.Input }],
-        content: [{ type: i0.Input }],
-        visible: [{ type: i0.Input }],
-        width: [{ type: i0.Input }],
-        showCloseIcon: [{ type: i0.Input }],
-        closeClick: [{ type: i0.Output }]
-    };
-
-    var CoDialogPromptModule = /** @class */ (function () {
-        function CoDialogPromptModule() {
-        }
-        return CoDialogPromptModule;
-    }());
-    CoDialogPromptModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        ej2AngularPopups.DialogModule
-                    ],
-                    declarations: [CoDialogPromptComponent],
-                    providers: [],
-                    exports: [CoDialogPromptComponent]
-                },] }
-    ];
-
     var CoDialogWizardComponent = /** @class */ (function () {
         function CoDialogWizardComponent() {
             this.icons = exports.CoreComponentsIcon;
@@ -3986,68 +3922,6 @@
                 },] }
     ];
 
-    var CoRichTextEditorComponent = /** @class */ (function () {
-        function CoRichTextEditorComponent() {
-            this.onChangeEvent = new i0.EventEmitter();
-        }
-        CoRichTextEditorComponent.prototype.showClass = function () {
-            return true;
-        };
-        CoRichTextEditorComponent.prototype.ngAfterViewInit = function () {
-        };
-        CoRichTextEditorComponent.prototype.ngOnInit = function () {
-        };
-        CoRichTextEditorComponent.prototype.getContent = function () {
-            if (this.editor) {
-                return this.editor.getContent();
-            }
-        };
-        CoRichTextEditorComponent.prototype.getText = function () {
-            if (this.editor) {
-                return this.editor.getText();
-            }
-        };
-        CoRichTextEditorComponent.prototype.onChange = function (args) {
-            if (args) {
-                this.onChangeEvent.next(args);
-            }
-        };
-        return CoRichTextEditorComponent;
-    }());
-    CoRichTextEditorComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'co-rich-text-editor',
-                    template: "\n    <ejs-richtexteditor\n        #rte\n        id=\"Rte\"\n        [ngModel]=\"model\"\n        (change)=\"onChange($event)\"\n    >\n      <ng-template></ng-template>\n    </ejs-richtexteditor>\n  ",
-                    providers: [ej2AngularRichtexteditor.ToolbarService, ej2AngularRichtexteditor.LinkService, ej2AngularRichtexteditor.ImageService, ej2AngularRichtexteditor.HtmlEditorService],
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    CoRichTextEditorComponent.propDecorators = {
-        editor: [{ type: i0.ViewChild, args: ['rte', { static: false },] }],
-        onChangeEvent: [{ type: i0.Output }],
-        model: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-rich-text-editor",] }]
-    };
-
-    var CoRichTextEditorModule = /** @class */ (function () {
-        function CoRichTextEditorModule() {
-        }
-        return CoRichTextEditorModule;
-    }());
-    CoRichTextEditorModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [CoRichTextEditorComponent],
-                    exports: [
-                        CoRichTextEditorComponent
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        ej2AngularRichtexteditor.RichTextEditorModule,
-                        forms.FormsModule
-                    ]
-                },] }
-    ];
-
     var CoScheduleComponent = /** @class */ (function () {
         function CoScheduleComponent() {
             this.enablePersistence = false;
@@ -4182,7 +4056,7 @@
     CoToggleComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-toggle',
-                    template: "\n    <ejs-switch \n        [checked]=\"checked\"\n        [disabled]=\"readonly\"\n    ></ejs-switch>\n  ",
+                    template: "\n    <ejs-switch\n        [checked]=\"checked\"\n        [disabled]=\"readonly\"\n    ></ejs-switch>\n  ",
                     styles: [""]
                 },] }
     ];
@@ -4357,7 +4231,7 @@
     ];
 
     // Enables "DI for interfaces" (see ConfigNameDirective injected .hostComponent).
-    var COMPONENT_INTERFACE_NAME = new i0.InjectionToken("ConfigurationAdapterComponent");
+    var SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME = new i0.InjectionToken("ScreenConfigAdapterComponent");
 
     function requiredValidator(control) {
         var isValid = !(control.value === null || control.value === undefined || control.value === "");
@@ -5150,6 +5024,7 @@
                             _a = event.code;
                             switch (_a) {
                                 case 'Enter': return [3 /*break*/, 1];
+                                case 'NumpadEnter': return [3 /*break*/, 1];
                                 case 'Tab': return [3 /*break*/, 4];
                                 case 'Escape': return [3 /*break*/, 6];
                             }
@@ -5649,7 +5524,7 @@
                     providers: [
                         ej2AngularDropdowns.CheckBoxSelectionService,
                         {
-                            provide: COMPONENT_INTERFACE_NAME,
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return DropDownListComponent; })
                         }, {
                             provide: BaseInputComponent,
@@ -6433,7 +6308,7 @@
                     selector: "co-input-checkbox",
                     template: "\n    <div class=\"checkbox\" (click)=\"handleModelChange($event)\" [class.checked]=\"model\">\n      <div class=\"checkmark\" [class.show]=\"model\"></div>\n    </div>\n    <div class=\"label\" [class.clickable]=\"clickableLabel\" *ngIf=\"label\" [textContent]=\"label\"\n         (click)=\"clickableLabel ? handleModelChange($event) : true\"></div>\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME,
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputCheckboxComponent; })
                         }, {
                             provide: BaseInputComponent,
@@ -6536,7 +6411,7 @@
                     selector: "co-input-checkbox-multi-select",
                     template: "\n    <ejs-multiselect\n       [placeholder]=\"placeholder\"\n       [dataSource]=\"source\"\n       [fields]=\"fields\"\n       mode=\"CheckBox\"\n       showDropDownIcon=\"true\"\n       [showSelectAll]=\"false\"\n       [filterBarPlaceholder]=\"filterPlaceholder\"\n    ></ejs-multiselect>\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME,
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputCheckboxMultiSelectComponent; })
                         }, {
                             provide: BaseInputComponent,
@@ -6616,7 +6491,7 @@
                     selector: "co-input-combo-box",
                     template: "\n    <ejs-combobox #combo [dataSource]=\"collection\"\n                  [fields]=\"fields\"\n                  [disabled]=\"readonly\"\n                  [placeholder]=\"placeholder\"\n                  [autofill]=\"autofill\"\n                  [ngModel]=\"model\"\n                  (ngModelChange)=\"modelChange.emit($event)\"\n                  (valueChange)=\"valueChange.emit($event)\"\n                  (focus)=\"onFocus()\"\n                  [popupWidth]=\"popupWidth\"\n                  [popupHeight]=\"popupHeight\"\n                  [filterType]=\"filterType\"\n                  [allowFiltering]=\"allowFiltering\"\n                  showClearButton=\"true\"\n                  floatLabelType=\"Auto\"\n    >\n    </ejs-combobox>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME,
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputComboBoxComponent; })
                         }, {
                             provide: BaseInputComponent,
@@ -6735,7 +6610,7 @@
                     selector: "co-input-date",
                     template: "\n    <ejs-datepicker #ejsDatePicker\n                    floatLabelType=\"Auto\"\n                    [format]=\"dateFormat\"\n                    [placeholder]=\"placeholder\"\n                    [ngModel]=\"model\"\n                    [readonly]=\"readonly\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-datepicker>\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                       [committing]=\"committing\"\n                       [commitFinished]=\"commitFinished\"\n                       (commitClick)=\"commitClick($event)\"\n                       (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputDatePickerComponent
@@ -6930,7 +6805,8 @@
                     selector: "co-input-date-range",
                     template: "\n    <ejs-daterangepicker #ejsDateRangePicker\n      [format]=\"dateFormat\"\n      floatLabelType=\"Auto\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n      [readonly]=\"readonly\"\n      (ngModelChange)=\"rangeChange()\"\n      (close)=\"close.next($event)\"\n      (select)=\"select.next($event)\"\n      (cleared)=\"cleared.next($event)\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDateRangePickerComponent; })
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+                            useExisting: i0.forwardRef(function () { return InputDateRangePickerComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputDateRangePickerComponent
@@ -7029,7 +6905,7 @@
                     selector: 'co-input-listbox',
                     template: "\n    <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n    <div class=\"co-input-listbox-content\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n      <ejs-listbox\n        [ngModel]=\"value\"\n        [dataSource]=\"collection\"\n        [fields]=\"fields\"\n        [disabled]=\"readonly\"\n        [selectionSettings]=\"selectionSettings\"\n        (ngModelChange)=\"modelChange.emit($event)\"\n      ></ejs-listbox>\n    </div>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputListboxComponent; })
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputListboxComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputListboxComponent
@@ -7666,7 +7542,7 @@
                     selector: 'co-input-number-picker',
                     template: "\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"minus-operator circle\" [class.select]=\"minSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                 (mousedown)=\"onMinusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n    <input type=\"text\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           (ngModelChange)=\"handleChangeModel($event)\"\n           (keydown)=\"handleKeyDown($event)\"/>\n    <div class=\"button-wrapper\">\n      <co-button *ngIf=\"showButtons\" class=\"plus-operator circle\"  [class.select]=\"plusSelected\"\n                 [disabled]=\"readonly\"\n                 [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                 (mousedown)=\"onPlusMouseDown($event)\"\n                 (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n    </div>\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputNumberPickerComponent; })
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputNumberPickerComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputNumberPickerComponent
@@ -7775,7 +7651,7 @@
                     selector: "co-input-text",
                     template: "\n    <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n           [textContent]=\"placeholder\"></label>\n    <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\"></co-icon>\n    <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"></co-icon>\n    <input #input\n           [type]=\"digitsOnly ? 'number' : type\"\n           [ngModel]=\"model\"\n           [min]=\"type === 'number' && this.min ? this.min : undefined\"\n           [max]=\"type === 'number' && this.max ? this.max : undefined\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n           (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n    >\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                       [committing]=\"committing\"\n                       [commitFinished]=\"commitFinished\"\n                       (commitClick)=\"commitClick($event)\"\n                       (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME,
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputTextComponent; })
                         }, {
                             provide: BaseInputComponent,
@@ -7916,7 +7792,7 @@
                     selector: "co-input-radio-button",
                     template: "\n    <div class=\"outer-circle\" [class.selected]=\"model\">\n      <div class=\"inner-circle\" *ngIf=\"model\" @showSelected></div>\n    </div>\n    <div class=\"label\" *ngIf=\"label\" [textContent]=\"label\"></div>\n    <input #input [ngModel]=\"model\" type=\"hidden\">\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputRadioButtonComponent; })
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputRadioButtonComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputRadioButtonComponent
@@ -8055,7 +7931,7 @@
                     selector: "co-input-textarea",
                     template: "\n    <label [textContent]=\"placeholder\"></label>\n    <textarea\n      #input\n      type=\"textarea\"\n      [ngModel]=\"model\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n    ></textarea>\n    <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n                       [committing]=\"committing\"\n                       [commitFinished]=\"commitFinished\"\n                       (commitClick)=\"commitClick($event)\"\n                       (cancelClick)=\"cancelClick($event)\"\n    >\n    </co-commit-buttons>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME,
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return InputTextareaComponent; })
                         }, {
                             provide: BaseInputComponent,
@@ -8149,7 +8025,7 @@
                     providers: [
                         ej2AngularDropdowns.CheckBoxSelectionService,
                         {
-                            provide: COMPONENT_INTERFACE_NAME,
+                            provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
                             useExisting: i0.forwardRef(function () { return MultiSelectListComponent; })
                         }, {
                             provide: BaseInputComponent,
@@ -11677,6 +11553,121 @@
                 },] }
     ];
 
+    var ScreenConfigComponentWrapper = /** @class */ (function () {
+        function ScreenConfigComponentWrapper() {
+        }
+        ScreenConfigComponentWrapper.prototype.setWrapperContent = function (element) {
+            this.contentNativeElement = element;
+        };
+        ScreenConfigComponentWrapper.prototype.ngAfterViewInit = function () {
+            if (this.screenConfigComponentWrapper) {
+                this.screenConfigComponentWrapper.nativeElement.appendChild(this.contentNativeElement);
+            }
+        };
+        return ScreenConfigComponentWrapper;
+    }());
+    ScreenConfigComponentWrapper.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "screen-config-component-wrapper",
+                    template: "<div *ngIf=\"!hidden\" #screenConfigComponentWrapper></div>"
+                },] }
+    ];
+    ScreenConfigComponentWrapper.propDecorators = {
+        screenConfigComponentWrapper: [{ type: i0.ViewChild, args: ['screenConfigComponentWrapper',] }]
+    };
+
+    // 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) {
+            this.hostComponent = hostComponent;
+            this._viewContainerRef = _viewContainerRef;
+            this._componentFactoryResolver = _componentFactoryResolver;
+            this.noModuleService = false;
+        }
+        Object.defineProperty(ScreenConfigurationDirective.prototype, "screenConfigurationObject", {
+            get: function () {
+                return this._screenConfigurationObject;
+            },
+            set: function (screenConfigurationObject) {
+                if (screenConfigurationObject) {
+                    this._screenConfigurationObject = screenConfigurationObject;
+                    this._initWrapperComponent();
+                    this._updateHost();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ScreenConfigurationDirective.prototype.ngOnDestroy = function () {
+            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);
+                this._wrapperComponentInstance = componentRef.instance;
+                componentRef.instance.setWrapperContent(this._viewContainerRef.element.nativeElement);
+                this._setHostVisible(!!this.screenConfigurationObject ? this.screenConfigurationObject.immediatelyVisible() : false);
+            }
+        };
+        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;
+                }
+            }
+        };
+        ScreenConfigurationDirective.prototype._setHostVisible = function (value) {
+            this._wrapperComponentInstance.hidden = !value;
+        };
+        return ScreenConfigurationDirective;
+    }());
+    ScreenConfigurationDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    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 }
+    ]; };
+    ScreenConfigurationDirective.propDecorators = {
+        container: [{ type: i0.ViewChild, args: ['test', { read: i0.ViewContainerRef },] }],
+        screenConfigurationObject: [{ type: i0.Input }],
+        noModuleService: [{ type: i0.Input }]
+    };
+    __decorate([
+        InputBoolean()
+    ], ScreenConfigurationDirective.prototype, "noModuleService", void 0);
+
+    var ScreenConfigurationModule = /** @class */ (function () {
+        function ScreenConfigurationModule() {
+        }
+        return ScreenConfigurationModule;
+    }());
+    ScreenConfigurationModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        ScreenConfigurationDirective,
+                        ScreenConfigComponentWrapper
+                    ],
+                    exports: [
+                        ScreenConfigurationDirective,
+                    ]
+                },] }
+    ];
+
     var ColorSequenceService = /** @class */ (function () {
         function ColorSequenceService() {
             this.colors = new Map();
@@ -11737,7 +11728,6 @@
     exports.ButtonDropDownComponent = ButtonDropDownComponent;
     exports.ButtonDropDownModule = ButtonDropDownModule;
     exports.ButtonModule = ButtonModule;
-    exports.COMPONENT_INTERFACE_NAME = COMPONENT_INTERFACE_NAME;
     exports.CardComponent = CardComponent;
     exports.CardModule = CardModule;
     exports.Carousel3dComponent = Carousel3dComponent;
@@ -11749,8 +11739,6 @@
     exports.ClickoutsideModule = ClickoutsideModule;
     exports.CoDialogComponent = CoDialogComponent;
     exports.CoDialogModule = CoDialogModule;
-    exports.CoDialogPromptComponent = CoDialogPromptComponent;
-    exports.CoDialogPromptModule = CoDialogPromptModule;
     exports.CoDialogWizardComponent = CoDialogWizardComponent;
     exports.CoDialogWizardModule = CoDialogWizardModule;
     exports.CoGridComponent = CoGridComponent;
@@ -11759,8 +11747,6 @@
     exports.CoKanbanModule = CoKanbanModule;
     exports.CoPivotComponent = CoPivotComponent;
     exports.CoPivotModule = CoPivotModule;
-    exports.CoRichTextEditorComponent = CoRichTextEditorComponent;
-    exports.CoRichTextEditorModule = CoRichTextEditorModule;
     exports.CoScheduleComponent = CoScheduleComponent;
     exports.CoScheduleModule = CoScheduleModule;
     exports.CoSidebarComponent = CoSidebarComponent;
@@ -11831,6 +11817,8 @@
     exports.PriceDisplayPipe = PriceDisplayPipe;
     exports.PriceDisplayPipeModule = PriceDisplayPipeModule;
     exports.PromptService = PromptService;
+    exports.SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME = SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME;
+    exports.ScreenConfigurationModule = ScreenConfigurationModule;
     exports.SimpleGridColumnDirective = SimpleGridColumnDirective;
     exports.SimpleGridComponent = SimpleGridComponent;
     exports.SimpleGridModule = SimpleGridModule;
@@ -11850,6 +11838,8 @@
     exports["ɵbf"] = ClickOutsideDirective;
     exports["ɵbg"] = ClickOutsideMasterService;
     exports["ɵbh"] = CheckmarkOverlayComponent;
+    exports["ɵbi"] = ScreenConfigurationDirective;
+    exports["ɵbj"] = ScreenConfigComponentWrapper;
     exports["ɵc"] = CoRippleDirective;
     exports["ɵd"] = CoViewportRulerService;
     exports["ɵe"] = CoScrollDispatcherService;