@colijnit/corecomponents_v12 12.0.93 → 12.0.94

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -4182,7 +4182,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 +4357,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 === "");
@@ -5649,7 +5649,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 +6433,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 +6536,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 +6616,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 +6735,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 +6930,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 +7030,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 +7667,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 +7776,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 +7917,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 +8056,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 +8150,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 +11678,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 +11853,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;
@@ -11831,6 +11946,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 +11967,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;