@colijnit/corecomponents_v12 12.0.73 → 12.0.75

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -2,7 +2,7 @@
     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, core, 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';
+})(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';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -22,6 +22,7 @@
         return Object.freeze(n);
     }
 
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var TWEEN__namespace = /*#__PURE__*/_interopNamespace(TWEEN);
 
     // @returns true iff given value equals null or equals undefined
@@ -1279,7 +1280,7 @@
         return IconCacheService;
     }());
     IconCacheService.decorators = [
-        { type: core.Injectable }
+        { type: i0.Injectable }
     ];
     IconCacheService.ctorParameters = function () { return [
         { type: platformBrowser.DomSanitizer }
@@ -1303,19 +1304,19 @@
         return IconComponent;
     }());
     IconComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-icon',
                     template: '',
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     IconComponent.ctorParameters = function () { return [
         { type: IconCacheService }
     ]; };
     IconComponent.propDecorators = {
-        icon: [{ type: core.Input }],
-        iconData: [{ type: core.Input }, { type: core.HostBinding, args: ["innerHtml",] }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-icon",] }]
+        icon: [{ type: i0.Input }],
+        iconData: [{ type: i0.Input }, { type: i0.HostBinding, args: ["innerHtml",] }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-icon",] }]
     };
 
     var IconModule = /** @class */ (function () {
@@ -1324,7 +1325,7 @@
         return IconModule;
     }());
     IconModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         http.HttpClientModule
@@ -1439,7 +1440,7 @@
         return CoScrollDispatcherService;
     }());
     CoScrollDispatcherService.decorators = [
-        { type: core.Injectable }
+        { type: i0.Injectable }
     ];
     function SCROLL_DISPATCHER_PROVIDER_FACTORY(parentDispatcher) {
         return parentDispatcher || new CoScrollDispatcherService();
@@ -1447,7 +1448,7 @@
     var SCROLL_DISPATCHER_PROVIDER = {
         // If there is already a ScrollDispatcher available, use that. Otherwise, provide a new one.
         provide: CoScrollDispatcherService,
-        deps: [[new core.Optional(), new core.SkipSelf(), CoScrollDispatcherService]],
+        deps: [[new i0.Optional(), new i0.SkipSelf(), CoScrollDispatcherService]],
         useFactory: SCROLL_DISPATCHER_PROVIDER_FACTORY
     };
 
@@ -1511,7 +1512,7 @@
         return CoViewportRulerService;
     }());
     CoViewportRulerService.decorators = [
-        { type: core.Injectable }
+        { type: i0.Injectable }
     ];
     CoViewportRulerService.ctorParameters = function () { return [
         { type: CoScrollDispatcherService }
@@ -1522,7 +1523,7 @@
     var VIEWPORT_RULER_PROVIDER = {
         // If there is already a ViewportRuler available, use that. Otherwise, provide a new one.
         provide: CoViewportRulerService,
-        deps: [[new core.Optional(), new core.SkipSelf(), CoViewportRulerService], CoScrollDispatcherService],
+        deps: [[new i0.Optional(), new i0.SkipSelf(), CoViewportRulerService], CoScrollDispatcherService],
         useFactory: VIEWPORT_RULER_PROVIDER_FACTORY
     };
 
@@ -1719,7 +1720,7 @@
 
     // NOTE: Copied from iOneJS and adapted to CoreComponents on 9-may-2018.
     /** OpaqueToken that can be used to specify the global ripple options. */
-    var MD_RIPPLE_GLOBAL_OPTIONS = new core.InjectionToken('CoRippleGlobalOptions');
+    var MD_RIPPLE_GLOBAL_OPTIONS = new i0.InjectionToken('CoRippleGlobalOptions');
     var CoRippleDirective = /** @class */ (function () {
         function CoRippleDirective(elementRef, ngZone, ruler, 
         // Type needs to be `any` because of https://github.com/angular/angular/issues/12631
@@ -1775,7 +1776,7 @@
         return CoRippleDirective;
     }());
     CoRippleDirective.decorators = [
-        { type: core.Directive, args: [{
+        { type: i0.Directive, args: [{
                     selector: '[md-ripple], [mat-ripple], [mdRipple], [matRipple]',
                     exportAs: 'mdRipple',
                     host: {
@@ -1785,19 +1786,19 @@
                 },] }
     ];
     CoRippleDirective.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.NgZone },
+        { type: i0.ElementRef },
+        { type: i0.NgZone },
         { type: CoViewportRulerService },
-        { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MD_RIPPLE_GLOBAL_OPTIONS,] }] }
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [MD_RIPPLE_GLOBAL_OPTIONS,] }] }
     ]; };
     CoRippleDirective.propDecorators = {
-        trigger: [{ type: core.Input, args: ['mdRippleTrigger',] }],
-        centered: [{ type: core.Input, args: ['mdRippleCentered',] }],
-        disabled: [{ type: core.Input, args: ['mdRippleDisabled',] }],
-        radius: [{ type: core.Input, args: ['mdRippleRadius',] }],
-        speedFactor: [{ type: core.Input, args: ['mdRippleSpeedFactor',] }],
-        color: [{ type: core.Input, args: ['mdRippleColor',] }],
-        unbounded: [{ type: core.Input, args: ['mdRippleUnbounded',] }]
+        trigger: [{ type: i0.Input, args: ['mdRippleTrigger',] }],
+        centered: [{ type: i0.Input, args: ['mdRippleCentered',] }],
+        disabled: [{ type: i0.Input, args: ['mdRippleDisabled',] }],
+        radius: [{ type: i0.Input, args: ['mdRippleRadius',] }],
+        speedFactor: [{ type: i0.Input, args: ['mdRippleSpeedFactor',] }],
+        color: [{ type: i0.Input, args: ['mdRippleColor',] }],
+        unbounded: [{ type: i0.Input, args: ['mdRippleUnbounded',] }]
     };
 
     // NOTE: Copied and adapted to TwoDSelector from iOneJS on 9-may-2018.
@@ -1829,12 +1830,12 @@
         return CoScrollableDirective;
     }());
     CoScrollableDirective.decorators = [
-        { type: core.Directive, args: [{
+        { type: i0.Directive, args: [{
                     selector: '[cdk-scrollable]'
                 },] }
     ];
     CoScrollableDirective.ctorParameters = function () { return [
-        { type: core.ElementRef },
+        { type: i0.ElementRef },
         { type: CoScrollDispatcherService }
     ]; };
 
@@ -1845,7 +1846,7 @@
         return RippleModule;
     }());
     RippleModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         CoRippleDirective,
                         CoScrollableDirective
@@ -1932,9 +1933,9 @@
             this._elementRef = _elementRef;
             this.hidden = false;
             this.disabled = false;
-            this.onClick = new core.EventEmitter();
-            this.clickedWhileDisabled = new core.EventEmitter();
-            this.isToggledChange = new core.EventEmitter();
+            this.onClick = new i0.EventEmitter();
+            this.clickedWhileDisabled = new i0.EventEmitter();
+            this.isToggledChange = new i0.EventEmitter();
         }
         ButtonComponent.prototype.showClass = function () {
             return true;
@@ -1968,32 +1969,32 @@
         return ButtonComponent;
     }());
     ButtonComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-button",
                     template: "\n    <co-icon *ngIf=\"!!iconData\" [iconData]=\"iconData\"></co-icon>\n    <span *ngIf=\"!!label\" class=\"label\">{{ label }}</span>\n    <div class=\"rippler\" md-ripple [mdRippleDisabled]=\"disabled\"></div>\n  ",
                     host: {
                         tabindex: "0"
                     },
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     ButtonComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     ButtonComponent.propDecorators = {
-        label: [{ type: core.Input }],
-        iconData: [{ type: core.Input }],
-        isToggleButton: [{ type: core.Input }],
-        isToggled: [{ type: core.Input }, { type: core.HostBinding, args: ["class.toggled",] }],
-        hidden: [{ type: core.Input }, { type: core.HostBinding, args: ["class.co-hidden",] }],
-        disabled: [{ type: core.Input }, { type: core.HostBinding, args: ["class.disabled",] }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-button",] }],
-        onClick: [{ type: core.Output }],
-        clickedWhileDisabled: [{ type: core.Output }],
-        isToggledChange: [{ type: core.Output }],
-        hasIcon: [{ type: core.HostBinding, args: ["class.has-icon",] }],
-        onHostClick: [{ type: core.HostListener, args: ["click", ["$event"],] }]
+        label: [{ type: i0.Input }],
+        iconData: [{ type: i0.Input }],
+        isToggleButton: [{ type: i0.Input }],
+        isToggled: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.toggled",] }],
+        hidden: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.co-hidden",] }],
+        disabled: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.disabled",] }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-button",] }],
+        onClick: [{ type: i0.Output }],
+        clickedWhileDisabled: [{ type: i0.Output }],
+        isToggledChange: [{ type: i0.Output }],
+        hasIcon: [{ type: i0.HostBinding, args: ["class.has-icon",] }],
+        onHostClick: [{ type: i0.HostListener, args: ["click", ["$event"],] }]
     };
 
     var ButtonModule = /** @class */ (function () {
@@ -2002,7 +2003,7 @@
         return ButtonModule;
     }());
     ButtonModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         IconModule,
@@ -2019,16 +2020,16 @@
         return ImageComponent;
     }());
     ImageComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-image",
                     template: "\n        <img *ngIf=\"!!source\" [src]=\"source\">\n    ",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:inline-block}img{width:100%;height:100%;object-fit:contain}\n"]
                 },] }
     ];
     ImageComponent.ctorParameters = function () { return []; };
     ImageComponent.propDecorators = {
-        source: [{ type: core.Input }]
+        source: [{ type: i0.Input }]
     };
 
     var ImageModule = /** @class */ (function () {
@@ -2037,7 +2038,7 @@
         return ImageModule;
     }());
     ImageModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [common.CommonModule],
                     declarations: [ImageComponent],
                     exports: [ImageComponent]
@@ -2071,16 +2072,16 @@
         return StopClickDirective;
     }());
     StopClickDirective.decorators = [
-        { type: core.Directive, args: [{
+        { type: i0.Directive, args: [{
                     selector: '[stopClick]'
                 },] }
     ];
     StopClickDirective.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.NgZone }
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
     ]; };
     StopClickDirective.propDecorators = {
-        stopClick: [{ type: core.Input }]
+        stopClick: [{ type: i0.Input }]
     };
 
     var StopClickModule = /** @class */ (function () {
@@ -2089,7 +2090,7 @@
         return StopClickModule;
     }());
     StopClickModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         StopClickDirective
                     ],
@@ -2124,17 +2125,17 @@
         return LevelIndicatorComponent;
     }());
     LevelIndicatorComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-level-indicator",
                     template: "\n        <div [ngClass]=\"modelAsString\">\n            <div class=\"square-1\"></div>\n            <div class=\"square-2\"></div>\n            <div class=\"square-3\"></div>\n        </div>\n    ",
-                    encapsulation: core.ViewEncapsulation.None,
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     LevelIndicatorComponent.ctorParameters = function () { return []; };
     LevelIndicatorComponent.propDecorators = {
-        model: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-level-indicator',] }]
+        model: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-level-indicator',] }]
     };
 
     var LevelIndicatorModule = /** @class */ (function () {
@@ -2143,7 +2144,7 @@
         return LevelIndicatorModule;
     }());
     LevelIndicatorModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule
                     ],
@@ -2169,7 +2170,7 @@
         return PriceDisplayPipe;
     }());
     PriceDisplayPipe.decorators = [
-        { type: core.Pipe, args: [{ name: "priceDisplay" },] }
+        { type: i0.Pipe, args: [{ name: "priceDisplay" },] }
     ];
 
     var PriceDisplayPipeModule = /** @class */ (function () {
@@ -2178,7 +2179,7 @@
         return PriceDisplayPipeModule;
     }());
     PriceDisplayPipeModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         PriceDisplayPipe
                     ],
@@ -2816,7 +2817,7 @@
      * Angular assigns an empty string to the input property in the naked "someBoolInput" template case.
      */
     function InputBoolean(bindingPropertyName) {
-        var inputDecorator = core.Input(bindingPropertyName);
+        var inputDecorator = i0.Input(bindingPropertyName);
         return function (target, key) {
             inputDecorator(target, key);
             var descriptor = Object.getOwnPropertyDescriptor(target, key) || {};
@@ -2853,29 +2854,29 @@
             this.mouseOverExtended = false;
             this.small = false;
             this.noImagePlaceholder = false;
-            this.onImageClick = new core.EventEmitter();
+            this.onImageClick = new i0.EventEmitter();
             this.showClass = true;
             this.imagePlaceHolder = this._iconCache.getIcon(this.icon.Camera);
         }
         return TileComponent;
     }());
     TileComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-tile',
                     template: "\n    <div class=\"tile-wrapper\">\n      <div class=\"tile-top\">\n        <ng-content select=\"[tile-top-content]\"></ng-content>\n      </div>\n      <div class=\"image\" (click)=\"onImageClick.emit()\">\n        <co-image *ngIf=\"image\" [source]=\"image\"></co-image>\n        <div class=\"no-image-wrapper\" *ngIf=\"!image && !noImagePlaceholder\">\n          <co-icon class=\"no-image\" [iconData]=\"imagePlaceHolder\"></co-icon>\n          <span [textContent]=\"'Geen afbeelding'\"></span>\n        </div>\n        <ng-content select=\"[tile-over-image]\"></ng-content>\n      </div>\n      <div class=\"tile-bottom\">\n        <ng-content select=\"[tile-bottom-content]\"></ng-content>\n      </div>\n    </div>\n    <div class=\"tile-extra-bottom\">\n      <div class=\"main\">\n        <ng-content select=\"[tile-extra-bottom-content]\"></ng-content>\n      </div>\n    </div>\n    <div class=\"tile-extended-shadow-wrapper\" *ngIf=\"mouseOverExtended\">\n      <div class=\"shodow-masque\"></div>\n      <div class=\"extended\">\n        <ng-content select=\"[tile-extended-content]\"></ng-content>\n      </div>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     TileComponent.ctorParameters = function () { return [
         { type: IconCacheService }
     ]; };
     TileComponent.propDecorators = {
-        image: [{ type: core.Input }],
-        mouseOverExtended: [{ type: core.Input }],
-        small: [{ type: core.HostBinding, args: ['class.small',] }, { type: core.Input }],
-        noImagePlaceholder: [{ type: core.Input }],
-        onImageClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-tile',] }]
+        image: [{ type: i0.Input }],
+        mouseOverExtended: [{ type: i0.Input }],
+        small: [{ type: i0.HostBinding, args: ['class.small',] }, { type: i0.Input }],
+        noImagePlaceholder: [{ type: i0.Input }],
+        onImageClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-tile',] }]
     };
     __decorate([
         InputBoolean()
@@ -2893,7 +2894,7 @@
         return TileModule;
     }());
     TileModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         IconModule,
@@ -2916,10 +2917,10 @@
             this.hasThreeDButton = false;
             this.hasCartButton = false;
             // does not emit when you click one of the predefined buttons, but emits on a click on any of our other content
-            this.contentClick = new core.EventEmitter();
-            this.configureButtonClick = new core.EventEmitter();
-            this.threeDButtonClick = new core.EventEmitter();
-            this.cartButtonClick = new core.EventEmitter();
+            this.contentClick = new i0.EventEmitter();
+            this.configureButtonClick = new i0.EventEmitter();
+            this.threeDButtonClick = new i0.EventEmitter();
+            this.cartButtonClick = new i0.EventEmitter();
             this.Icons = exports.CoreComponentsIcon;
         }
         ArticleTileComponent.prototype.onHostClick = function (event) {
@@ -2928,10 +2929,10 @@
         return ArticleTileComponent;
     }());
     ArticleTileComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-article-tile",
                     template: "\n        <co-tile [image]=\"imageData\" [small]=\"isSmallModus\">\n            <ng-container tile-top-content>\n                <ng-content select=\"[tile-top-content]\"></ng-content>\n            </ng-container>\n            <ng-container tile-over-image>\n                <ng-content select=\"[over-image]\"></ng-content>\n            </ng-container>\n            <ng-container tile-bottom-content>\n                <div class=\"bottom-content-wrapper\">\n                    <div class=\"left-buttons\">\n                        <co-button class=\"card-button square white\" *ngIf=\"hasConfigureButton\" [iconData]=\"icons.getIcon(Icons.MagicWand)\"\n                                   [stopClick]=\"true\" [class.mini]=\"isSmallModus\"\n                                   (click)=\"configureButtonClick.emit($event)\"></co-button>\n                        <co-button class=\"card-button square white\" *ngIf=\"hasThreeDButton\" [iconData]=\"icons.getIcon(Icons.ThreeD)\"\n                                   [stopClick]=\"true\" [class.mini]=\"isSmallModus\"\n                                   (click)=\"threeDButtonClick.emit($event)\"></co-button>\n                    </div>\n                    <co-level-indicator *ngIf=\"!!level\" [model]=\"level\" [class.small]=\"isSmallModus\"></co-level-indicator>\n                    <co-button class=\"card-button\" *ngIf=\"hasCartButton\" [iconData]=\"icons.getIcon(Icons.AddToCartDrop)\"\n                               [stopClick]=\"true\" [class.mini]=\"isSmallModus\"\n                               (click)=\"cartButtonClick.emit($event)\"></co-button>\n                </div>\n            </ng-container>\n            <ng-container tile-extra-bottom-content>\n                <span *ngIf=\"!!description\" class=\"description\" [innerText]=\"description\"></span>\n                <span *ngIf=\"!!price\" class=\"price\" [innerText]=\"price | priceDisplay\"></span>\n                <ng-content select=\"[card-extra-content]\"></ng-content>\n            </ng-container>\n        </co-tile>\n    ",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host .description{font-weight:bold}co-button.card-button{height:50px;width:50px;padding:0;border-radius:50%}co-button.card-button.square{border-radius:5px}co-button.card-button ::ng-deep co-icon{height:50px;width:50px}co-button.card-button.mini{transform:scale(1);height:20px;width:20px}co-button.card-button.mini ::ng-deep co-icon{height:20px;width:20px}.bottom-content-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;height:100%}.bottom-content-wrapper .left-buttons{display:flex;margin-right:auto;height:100%;align-items:center}.bottom-content-wrapper .left-buttons *{margin-right:5px}\n"]
                 },] }
     ];
@@ -2939,20 +2940,20 @@
         { type: IconCacheService }
     ]; };
     ArticleTileComponent.propDecorators = {
-        imageData: [{ type: core.Input }],
-        description: [{ type: core.Input }],
-        price: [{ type: core.Input }],
-        level: [{ type: core.Input }],
-        isSelected: [{ type: core.Input }],
-        isSmallModus: [{ type: core.Input }, { type: core.HostBinding, args: ["class.small-modus",] }],
-        hasConfigureButton: [{ type: core.Input }],
-        hasThreeDButton: [{ type: core.Input }],
-        hasCartButton: [{ type: core.Input }],
-        contentClick: [{ type: core.Output }],
-        configureButtonClick: [{ type: core.Output }],
-        threeDButtonClick: [{ type: core.Output }],
-        cartButtonClick: [{ type: core.Output }],
-        onHostClick: [{ type: core.HostListener, args: ["click", ["$event"],] }]
+        imageData: [{ type: i0.Input }],
+        description: [{ type: i0.Input }],
+        price: [{ type: i0.Input }],
+        level: [{ type: i0.Input }],
+        isSelected: [{ type: i0.Input }],
+        isSmallModus: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.small-modus",] }],
+        hasConfigureButton: [{ type: i0.Input }],
+        hasThreeDButton: [{ type: i0.Input }],
+        hasCartButton: [{ type: i0.Input }],
+        contentClick: [{ type: i0.Output }],
+        configureButtonClick: [{ type: i0.Output }],
+        threeDButtonClick: [{ type: i0.Output }],
+        cartButtonClick: [{ type: i0.Output }],
+        onHostClick: [{ type: i0.HostListener, args: ["click", ["$event"],] }]
     };
 
     var ArticleTileModule = /** @class */ (function () {
@@ -2961,7 +2962,7 @@
         return ArticleTileModule;
     }());
     ArticleTileModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         http.HttpClientModule,
@@ -2985,7 +2986,7 @@
         function ButtonDropDownComponent() {
             this.iconPosition = "Left";
             this.transparent = false;
-            this.select = new core.EventEmitter();
+            this.select = new i0.EventEmitter();
         }
         ButtonDropDownComponent.prototype.showClass = function () {
             return true;
@@ -3002,22 +3003,22 @@
         return ButtonDropDownComponent;
     }());
     ButtonDropDownComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-button-drop-down",
                     template: "\n    <button ejs-dropdownbutton\n            [content]=\"content\"\n            [items]=\"items\"\n            [iconCss]=\"iconCss\"\n            [iconPosition]=\"iconPosition\"\n            [cssClass]=\"cssClass\"\n            [ngClass]=\"{\n                '.e-dropdown-popup': isTransparent,\n                '.e-btn.e-active, .e-btn:hover': isTransparent\n            }\"\n            (select)=\"select.emit($event)\"></button>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     ButtonDropDownComponent.ctorParameters = function () { return []; };
     ButtonDropDownComponent.propDecorators = {
-        content: [{ type: core.Input }],
-        items: [{ type: core.Input }],
-        iconCss: [{ type: core.Input }],
-        iconPosition: [{ type: core.Input }],
-        cssClass: [{ type: core.Input }],
-        transparent: [{ type: core.Input }],
-        select: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-button-drop-down",] }]
+        content: [{ type: i0.Input }],
+        items: [{ type: i0.Input }],
+        iconCss: [{ type: i0.Input }],
+        iconPosition: [{ type: i0.Input }],
+        cssClass: [{ type: i0.Input }],
+        transparent: [{ type: i0.Input }],
+        select: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-button-drop-down",] }]
     };
 
     var ButtonDropDownModule = /** @class */ (function () {
@@ -3026,7 +3027,7 @@
         return ButtonDropDownModule;
     }());
     ButtonDropDownModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         ButtonDropDownComponent
                     ],
@@ -3049,9 +3050,9 @@
             this.hasMagnifierButton = false;
             this.hasInfoButton = false;
             // does not emit when you click one of the predefined buttons, but emits on a click on any of our other content
-            this.contentClick = new core.EventEmitter();
-            this.infoButtonClick = new core.EventEmitter();
-            this.magnifierButtonClick = new core.EventEmitter();
+            this.contentClick = new i0.EventEmitter();
+            this.infoButtonClick = new i0.EventEmitter();
+            this.magnifierButtonClick = new i0.EventEmitter();
             this.showClass = true;
             this.Icons = exports.CoreComponentsIcon;
             this.heightCard = 150;
@@ -3062,31 +3063,31 @@
         return CardComponent;
     }());
     CardComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-card',
                     template: "\n    <div class=\"co-card-wrapper\">\n      <div class=\"content-wrapper\">\n        <co-icon *ngIf=\"isSelected\" [iconData]=\"icons.getIcon(Icons.Check)\" class=\"check light circle\"></co-icon>\n        <co-button *ngIf=\"hasMagnifierButton\" [iconData]=\"icons.getIcon(Icons.MagnifierPlus)\" class=\"magnify white small circle\"\n                   [stopClick]=\"true\" (click)=\"magnifierButtonClick.emit($event)\"></co-button>\n        <div class=\"image\">\n          <co-image [source]=\"imageData\"></co-image>\n          <ng-content select=\"[over-image]\"></ng-content>\n        </div>\n        <co-level-indicator class=\"co-level-indicator\" *ngIf=\"!!level\" [model]=\"level\"></co-level-indicator>\n        <co-button *ngIf=\"hasInfoButton\" [iconData]=\"icons.getIcon(Icons.Information)\" class=\"info white small circle\"\n                   [class.small]=\"!isSmallModus\" [stopClick]=\"true\" [class.mini]=\"isSmallModus\"\n                   (click)=\"infoButtonClick.emit($event)\"></co-button>\n      </div>\n      <div class=\"description-wrapper\">\n        <span *ngIf=\"!!description\" class=\"description\" [innerText]=\"description\"></span>\n        <span *ngIf=\"!!price\" class=\"price\" [innerText]=\"price | priceDisplay\"></span>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None,
-                    changeDetection: core.ChangeDetectionStrategy.OnPush
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
     CardComponent.ctorParameters = function () { return [
         { type: IconCacheService },
-        { type: core.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef }
     ]; };
     CardComponent.propDecorators = {
-        imageData: [{ type: core.Input }],
-        description: [{ type: core.Input }],
-        price: [{ type: core.Input }],
-        level: [{ type: core.Input }],
-        isSelected: [{ type: core.Input }],
-        isSmallModus: [{ type: core.Input }, { type: core.HostBinding, args: ['class.small-modus',] }],
-        hasMagnifierButton: [{ type: core.Input }],
-        hasInfoButton: [{ type: core.Input }],
-        contentClick: [{ type: core.Output }],
-        infoButtonClick: [{ type: core.Output }],
-        magnifierButtonClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-card',] }],
-        onHostClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
+        imageData: [{ type: i0.Input }],
+        description: [{ type: i0.Input }],
+        price: [{ type: i0.Input }],
+        level: [{ type: i0.Input }],
+        isSelected: [{ type: i0.Input }],
+        isSmallModus: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.small-modus',] }],
+        hasMagnifierButton: [{ type: i0.Input }],
+        hasInfoButton: [{ type: i0.Input }],
+        contentClick: [{ type: i0.Output }],
+        infoButtonClick: [{ type: i0.Output }],
+        magnifierButtonClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-card',] }],
+        onHostClick: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
     };
 
     var CardModule = /** @class */ (function () {
@@ -3095,7 +3096,7 @@
         return CardModule;
     }());
     CardModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         http.HttpClientModule,
@@ -3174,7 +3175,7 @@
             this.cameraHeight = 50;
             this.shadow = false;
             this.selectedIndex = 0;
-            this.indexSelected = new core.EventEmitter();
+            this.indexSelected = new i0.EventEmitter();
             this._cameraZoom = 0;
             this._backgroundColor = 0xffffff;
             this._ambientLight = true;
@@ -3451,23 +3452,23 @@
         return Carousel3dComponent;
     }());
     Carousel3dComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-carousel-3d",
                     template: "\n    <div class=\"carousel-3d-canvas-wrapper\" #canvasContainer>\n      <div class=\"carousel-wrapper\" #carouselWrapper>\n        <div class=\"carousel-navigate-button left\">\n          <div class=\"carousel-navigate-button-wrapper\" *ngIf=\"canNavigateLeft\" (click)=\"handleButtonLeftClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 512\">\n              <path\n                d=\"M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z\"></path>\n            </svg>\n          </div>\n        </div>\n        <div class=\"carousel-navigate-button right\">\n          <div class=\"carousel-navigate-button-wrapper\" *ngIf=\"canNavigateRight\" (click)=\"handleButtonRightClick()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 512\">\n              <path\n                d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"></path>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     Carousel3dComponent.propDecorators = {
-        canvasContainer: [{ type: core.ViewChild, args: ["canvasContainer", { read: core.ElementRef },] }],
-        carouselWrapper: [{ type: core.ViewChild, args: ["carouselWrapper", { read: core.ElementRef },] }],
-        children: [{ type: core.ContentChildren, args: ["carouselItem", { read: core.ElementRef, descendants: true },] }],
-        tileWidth: [{ type: core.Input }],
-        tileHeight: [{ type: core.Input }],
-        cameraHeight: [{ type: core.Input }],
-        shadow: [{ type: core.Input }],
-        selectedIndex: [{ type: core.Input }],
-        indexSelected: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-carousel-3d",] }]
+        canvasContainer: [{ type: i0.ViewChild, args: ["canvasContainer", { read: i0.ElementRef },] }],
+        carouselWrapper: [{ type: i0.ViewChild, args: ["carouselWrapper", { read: i0.ElementRef },] }],
+        children: [{ type: i0.ContentChildren, args: ["carouselItem", { read: i0.ElementRef, descendants: true },] }],
+        tileWidth: [{ type: i0.Input }],
+        tileHeight: [{ type: i0.Input }],
+        cameraHeight: [{ type: i0.Input }],
+        shadow: [{ type: i0.Input }],
+        selectedIndex: [{ type: i0.Input }],
+        indexSelected: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-carousel-3d",] }]
     };
 
     var Carousel3dModule = /** @class */ (function () {
@@ -3476,7 +3477,7 @@
         return Carousel3dModule;
     }());
     Carousel3dModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule
                     ],
@@ -3614,16 +3615,16 @@
         return CarouselComponent;
     }());
     CarouselComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-carousel',
                     template: "\n    <div class=\"carousel-wrapper\" #container (swipeleft)=\"handleButtonRightClick()\" (swiperight)=\"handleButtonLeftClick()\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"carousel-navigate-button left\">\n      <div class=\"carousel-navigate-button-wrapper\" *ngIf=\"canNavigateLeft\" (click)=\"handleButtonLeftClick()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 512\">\n          <path\n            d=\"M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z\"></path>\n        </svg>\n      </div>\n    </div>\n    <div class=\"carousel-navigate-button right\">\n      <div class=\"carousel-navigate-button-wrapper\" *ngIf=\"canNavigateRight\" (click)=\"handleButtonRightClick()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 512\">\n          <path\n            d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"></path>\n        </svg>\n      </div>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     CarouselComponent.propDecorators = {
-        containerChild: [{ type: core.ViewChild, args: ['container', { read: core.ElementRef },] }],
-        contentChildren: [{ type: core.ContentChildren, args: ['carouselItem', { read: core.ElementRef, descendants: true },] }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-carousel',] }]
+        containerChild: [{ type: i0.ViewChild, args: ['container', { read: i0.ElementRef },] }],
+        contentChildren: [{ type: i0.ContentChildren, args: ['carouselItem', { read: i0.ElementRef, descendants: true },] }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-carousel',] }]
     };
 
     var CarouselHammerConfig = /** @class */ (function (_super) {
@@ -3643,7 +3644,7 @@
         return CarouselModule;
     }());
     CarouselModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         platformBrowser.HammerModule
@@ -3682,8 +3683,8 @@
             this.modal = false;
             this.show = false;
             this.borderless = false;
-            this.closeClick = new core.EventEmitter();
-            this.overlayClick = new core.EventEmitter();
+            this.closeClick = new i0.EventEmitter();
+            this.overlayClick = new i0.EventEmitter();
             this.isTouch = false;
             this.mobile = false;
         }
@@ -3722,7 +3723,7 @@
         return CoDialogComponent;
     }());
     CoDialogComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-dialog',
                     template: "\n    <div class=\"co-dialog-overlay\" *ngIf=\"show\" (click)=\"handleOverlayClick($event)\" @showHideOverlay></div>\n    <div class=\"co-dialog-wrapper\" *ngIf=\"show\" @showHideDialog>\n      <div class=\"dialog-header\" *ngIf=\"!borderless\">\n        <div class=\"dialog-header-caption\" *ngIf=\"headerTemplate\">\n          <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n        </div>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n          <co-icon [icon]=\"icons.Cancel\"></co-icon>\n        </div>\n      </div>\n      <div class=\"dialog-content\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"dialog-footer\" *ngIf=\"footerTemplate\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n      </div>\n    </div>\n  ",
                     animations: [
@@ -3734,23 +3735,23 @@
                         ]),
                         showHideDialogAnimation('showHideDialog')
                     ],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     CoDialogComponent.propDecorators = {
-        customCssClass: [{ type: core.Input }],
-        headerTemplate: [{ type: core.Input }],
-        footerTemplate: [{ type: core.Input }],
-        showCloseIcon: [{ type: core.Input }],
-        modal: [{ type: core.Input }],
-        show: [{ type: core.Input }],
-        borderless: [{ type: core.HostBinding, args: ['class.borderless',] }, { type: core.Input }],
-        closeClick: [{ type: core.Output }],
-        overlayClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-dialog',] }],
-        handleKeyDown: [{ type: core.HostListener, args: ['window:keydown', ['$event'],] }],
-        isTouch: [{ type: core.HostBinding, args: ['class.is-touch',] }],
-        mobile: [{ type: core.HostBinding, args: ['class.is-mobile',] }]
+        customCssClass: [{ type: i0.Input }],
+        headerTemplate: [{ type: i0.Input }],
+        footerTemplate: [{ type: i0.Input }],
+        showCloseIcon: [{ type: i0.Input }],
+        modal: [{ type: i0.Input }],
+        show: [{ type: i0.Input }],
+        borderless: [{ type: i0.HostBinding, args: ['class.borderless',] }, { type: i0.Input }],
+        closeClick: [{ type: i0.Output }],
+        overlayClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-dialog',] }],
+        handleKeyDown: [{ type: i0.HostListener, args: ['window:keydown', ['$event'],] }],
+        isTouch: [{ type: i0.HostBinding, args: ['class.is-touch',] }],
+        mobile: [{ type: i0.HostBinding, args: ['class.is-mobile',] }]
     };
 
     var CoDialogModule = /** @class */ (function () {
@@ -3759,7 +3760,7 @@
         return CoDialogModule;
     }());
     CoDialogModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         IconModule
@@ -3777,7 +3778,7 @@
             this.visible = false;
             this.width = "50%";
             this.showCloseIcon = true;
-            this.closeClick = new core.EventEmitter();
+            this.closeClick = new i0.EventEmitter();
             this.target = '.co-dialog-prompt-root-container';
             this.buttons = [
                 { click: this.buttonClick.bind(this), buttonModel: { content: 'Ja', isPrimary: 'true' } },
@@ -3800,7 +3801,7 @@
         return CoDialogPromptComponent;
     }());
     CoDialogPromptComponent.decorators = [
-        { type: core.Component, args: [{
+        { 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: [""]
@@ -3808,13 +3809,13 @@
     ];
     CoDialogPromptComponent.ctorParameters = function () { return []; };
     CoDialogPromptComponent.propDecorators = {
-        coDialogPrompt: [{ type: core.ViewChild, args: ['coDialogPrompt',] }],
-        header: [{ type: core.Input }],
-        content: [{ type: core.Input }],
-        visible: [{ type: core.Input }],
-        width: [{ type: core.Input }],
-        showCloseIcon: [{ type: core.Input }],
-        closeClick: [{ type: core.Output }]
+        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 () {
@@ -3823,7 +3824,7 @@
         return CoDialogPromptModule;
     }());
     CoDialogPromptModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         ej2AngularPopups.DialogModule
                     ],
@@ -3838,7 +3839,7 @@
             this.icons = exports.CoreComponentsIcon;
             this.showCloseIcon = true;
             this.animation = true;
-            this.closeClick = new core.EventEmitter();
+            this.closeClick = new i0.EventEmitter();
         }
         CoDialogWizardComponent.prototype.showClass = function () {
             return true;
@@ -3846,7 +3847,7 @@
         return CoDialogWizardComponent;
     }());
     CoDialogWizardComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-dialog-wizard',
                     template: "\n    <div class=\"co-dialog-wizard-wrapper\" [@showHideDialog]=\"animation\">\n      <div class=\"dialog-header\">\n        <ng-content select=\"[header]\"></ng-content>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"closeClick.emit($event)\">\n          <co-icon [icon]=\"icons.Cancel\"></co-icon>\n        </div>\n      </div>\n\n      <hr class=\"co-dialog-wizard-divider\">\n\n      <div class=\"dialog-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
                     animations: [
@@ -3857,14 +3858,14 @@
                             animations.transition('* => void', animations.animate(200))
                         ])
                     ],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     CoDialogWizardComponent.propDecorators = {
-        showCloseIcon: [{ type: core.Input }],
-        animation: [{ type: core.Input }],
-        closeClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-dialog-wizard",] }]
+        showCloseIcon: [{ type: i0.Input }],
+        animation: [{ type: i0.Input }],
+        closeClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-dialog-wizard",] }]
     };
 
     var CoDialogWizardModule = /** @class */ (function () {
@@ -3873,7 +3874,7 @@
         return CoDialogWizardModule;
     }());
     CoDialogWizardModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         IconModule
@@ -3891,10 +3892,10 @@
             this.enableTooltip = false;
             this.keyField = "";
             this.showEmptyColumn = false;
-            this.cardClickEvent = new core.EventEmitter();
-            this.cardDoubleClickEvent = new core.EventEmitter();
-            this.dragStartEvent = new core.EventEmitter();
-            this.dragStopEvent = new core.EventEmitter();
+            this.cardClickEvent = new i0.EventEmitter();
+            this.cardDoubleClickEvent = new i0.EventEmitter();
+            this.dragStartEvent = new i0.EventEmitter();
+            this.dragStopEvent = new i0.EventEmitter();
         }
         CoKanbanComponent.prototype.showClass = function () {
             return true;
@@ -3924,30 +3925,30 @@
         return CoKanbanComponent;
     }());
     CoKanbanComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-kanban',
                     template: "\n    <ejs-kanban\n        #kanban\n        id=\"kanban\"\n        [allowDragAndDrop]=\"allowDragAndDrop\"\n        [allowKeyboard]=\"allowKeyboard\"\n        [cardSettings]=\"cardSettings\"\n        [enablePersistence]=\"enablePersistence\"\n        [enableTooltip]=\"enableTooltip\"\n        [keyField]=\"keyField\"\n        [showEmptyColumn]=\"showEmptyColumn\"\n        [swimlaneSettings]=\"swimlaneSettings\"\n        [dataSource]=\"data\"\n        (cardClick)=\"handleCardClick($event)\"\n        (cardDoubleClick)=\"handleCardDoubleClick($event)\"\n        (dialogOpen)=\"dialogOpen($event)\"\n        (dragStart)=\"handleDragStart($event)\"\n        (dragStop)=\"handleDragStop($event)\"\n    >\n    </ejs-kanban>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     CoKanbanComponent.ctorParameters = function () { return []; };
     CoKanbanComponent.propDecorators = {
-        kanban: [{ type: core.ViewChild, args: ['kanban', { static: false },] }],
-        allowDragAndDrop: [{ type: core.Input }],
-        allowKeyboard: [{ type: core.Input }],
-        cardSettings: [{ type: core.Input }],
-        enablePersistence: [{ type: core.Input }],
-        enableTooltip: [{ type: core.Input }],
-        keyField: [{ type: core.Input }],
-        showEmptyColumn: [{ type: core.Input }],
-        swimlaneSettings: [{ type: core.Input }],
-        columns: [{ type: core.Input }],
-        data: [{ type: core.Input }],
-        cardClickEvent: [{ type: core.Output }],
-        cardDoubleClickEvent: [{ type: core.Output }],
-        dragStartEvent: [{ type: core.Output }],
-        dragStopEvent: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-kanban",] }]
+        kanban: [{ type: i0.ViewChild, args: ['kanban', { static: false },] }],
+        allowDragAndDrop: [{ type: i0.Input }],
+        allowKeyboard: [{ type: i0.Input }],
+        cardSettings: [{ type: i0.Input }],
+        enablePersistence: [{ type: i0.Input }],
+        enableTooltip: [{ type: i0.Input }],
+        keyField: [{ type: i0.Input }],
+        showEmptyColumn: [{ type: i0.Input }],
+        swimlaneSettings: [{ type: i0.Input }],
+        columns: [{ type: i0.Input }],
+        data: [{ type: i0.Input }],
+        cardClickEvent: [{ type: i0.Output }],
+        cardDoubleClickEvent: [{ type: i0.Output }],
+        dragStartEvent: [{ type: i0.Output }],
+        dragStopEvent: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-kanban",] }]
     };
     __decorate([
         InputBoolean()
@@ -3971,7 +3972,7 @@
         return CoKanbanModule;
     }());
     CoKanbanModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         CoKanbanComponent
                     ],
@@ -3987,7 +3988,7 @@
 
     var CoRichTextEditorComponent = /** @class */ (function () {
         function CoRichTextEditorComponent() {
-            this.onChangeEvent = new core.EventEmitter();
+            this.onChangeEvent = new i0.EventEmitter();
         }
         CoRichTextEditorComponent.prototype.showClass = function () {
             return true;
@@ -4014,18 +4015,18 @@
         return CoRichTextEditorComponent;
     }());
     CoRichTextEditorComponent.decorators = [
-        { type: core.Component, args: [{
+        { 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: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     CoRichTextEditorComponent.propDecorators = {
-        editor: [{ type: core.ViewChild, args: ['rte', { static: false },] }],
-        onChangeEvent: [{ type: core.Output }],
-        model: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-rich-text-editor",] }]
+        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 () {
@@ -4034,7 +4035,7 @@
         return CoRichTextEditorModule;
     }());
     CoRichTextEditorModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [CoRichTextEditorComponent],
                     exports: [
                         CoRichTextEditorComponent
@@ -4050,9 +4051,9 @@
     var CoScheduleComponent = /** @class */ (function () {
         function CoScheduleComponent() {
             this.enablePersistence = false;
-            this.actionBegin = new core.EventEmitter();
-            this.actionComplete = new core.EventEmitter();
-            this.actionFailure = new core.EventEmitter();
+            this.actionBegin = new i0.EventEmitter();
+            this.actionComplete = new i0.EventEmitter();
+            this.actionFailure = new i0.EventEmitter();
         }
         CoScheduleComponent.prototype.ngOnInit = function () {
         };
@@ -4068,7 +4069,7 @@
         return CoScheduleComponent;
     }());
     CoScheduleComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-schedule',
                     template: "\n    <ejs-schedule\n        #ejsSchedule\n        [selectedDate]=\"selectedDate\"\n        [currentView]=\"currentView\"\n        [eventSettings]=\"eventSettings\"\n        [enablePersistence]=\"enablePersistence\"\n        (actionBegin)=\"onActionBegin($event)\"\n        (actionComplete)=\"onActionComplete($event)\"\n        (actionFailure)=\"onActionFailure($event)\"\n    ><ng-content></ng-content>\n    </ejs-schedule>\n  ",
                     providers: [
@@ -4081,21 +4082,21 @@
                         ej2AngularSchedule.TimelineViewsService,
                         ej2AngularSchedule.TimelineMonthService
                     ],
-                    encapsulation: core.ViewEncapsulation.None,
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
     ];
     CoScheduleComponent.ctorParameters = function () { return []; };
     CoScheduleComponent.propDecorators = {
-        scheduleObj: [{ type: core.ViewChild, args: ['ejsSchedule', { static: true },] }],
-        selectedDate: [{ type: core.Input }],
-        currentView: [{ type: core.Input }],
-        eventSettings: [{ type: core.Input }],
-        enablePersistence: [{ type: core.Input }],
-        actionBegin: [{ type: core.Output }],
-        actionComplete: [{ type: core.Output }],
-        actionFailure: [{ type: core.Output }]
+        scheduleObj: [{ type: i0.ViewChild, args: ['ejsSchedule', { static: true },] }],
+        selectedDate: [{ type: i0.Input }],
+        currentView: [{ type: i0.Input }],
+        eventSettings: [{ type: i0.Input }],
+        enablePersistence: [{ type: i0.Input }],
+        actionBegin: [{ type: i0.Output }],
+        actionComplete: [{ type: i0.Output }],
+        actionFailure: [{ type: i0.Output }]
     };
 
     var CoScheduleModule = /** @class */ (function () {
@@ -4104,7 +4105,7 @@
         return CoScheduleModule;
     }());
     CoScheduleModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         CoScheduleComponent
                     ],
@@ -4135,7 +4136,7 @@
         return CoSidebarComponent;
     }());
     CoSidebarComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-sidebar',
                     template: "\n    <ejs-sidebar #sidebarInstance \n                 closeOnDocumentClick=\"true\"\n                 type=\"Over\"\n                 [position]=\"position\"\n                 [isOpen]=\"isOpen\"\n    >\n      <ng-content></ng-content>\n    </ejs-sidebar>\n  ",
                     styles: [""]
@@ -4143,9 +4144,9 @@
     ];
     CoSidebarComponent.ctorParameters = function () { return []; };
     CoSidebarComponent.propDecorators = {
-        sidebarInstance: [{ type: core.ViewChild, args: ['sidebarInstance',] }],
-        position: [{ type: core.Input }],
-        isOpen: [{ type: core.Input }]
+        sidebarInstance: [{ type: i0.ViewChild, args: ['sidebarInstance',] }],
+        position: [{ type: i0.Input }],
+        isOpen: [{ type: i0.Input }]
     };
 
     var CoSidebarModule = /** @class */ (function () {
@@ -4154,7 +4155,7 @@
         return CoSidebarModule;
     }());
     CoSidebarModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [CoSidebarComponent],
                     imports: [
                         ej2AngularNavigations.SidebarModule
@@ -4166,7 +4167,7 @@
     var CoToggleComponent = /** @class */ (function () {
         function CoToggleComponent() {
             this.readonly = false;
-            this.activeChange = new core.EventEmitter();
+            this.activeChange = new i0.EventEmitter();
         }
         CoToggleComponent.prototype.ngOnInit = function () {
         };
@@ -4179,7 +4180,7 @@
         return CoToggleComponent;
     }());
     CoToggleComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-toggle',
                     template: "\n    <ejs-switch \n        [checked]=\"checked\"\n        [disabled]=\"readonly\"\n    ></ejs-switch>\n  ",
                     styles: [""]
@@ -4187,10 +4188,10 @@
     ];
     CoToggleComponent.ctorParameters = function () { return []; };
     CoToggleComponent.propDecorators = {
-        checked: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        activeChange: [{ type: core.Output }],
-        onHostClick: [{ type: core.HostListener, args: ["click",] }]
+        checked: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        activeChange: [{ type: i0.Output }],
+        onHostClick: [{ type: i0.HostListener, args: ["click",] }]
     };
 
     var CoToggleModule = /** @class */ (function () {
@@ -4199,7 +4200,7 @@
         return CoToggleModule;
     }());
     CoToggleModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         CoToggleComponent
                     ],
@@ -4218,8 +4219,8 @@
             this._elementRef = _elementRef;
             this.expandButtonLast = false;
             this.expanded = false;
-            this.expandedChange = new core.EventEmitter();
-            this.buttonClicked = new core.EventEmitter();
+            this.expandedChange = new i0.EventEmitter();
+            this.buttonClicked = new i0.EventEmitter();
         }
         CollapsibleComponent.prototype.showClass = function () {
             return true;
@@ -4242,7 +4243,7 @@
         return CollapsibleComponent;
     }());
     CollapsibleComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-collapsible",
                     template: "\n    <div class=\"collapsible-header\" [class.end]=\"expandButtonLast\" (click)=\"changeExpanded()\">\n      <div class=\"collapsible-header-start\">\n        <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"!expandButtonLast\">\n          <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n        </div>\n        <div class=\"collapsible-title\" [textContent]=\"headerTitle\"></div>\n      </div>\n      <div class=\"collapsible-header-end\">\n        <div class=\"collapsible-button-wrapper\" *ngIf=\"showButton !== undefined\" (click)=\"$event.stopPropagation()\">\n          <button class=\"collapsible-button\" *ngIf=\"showButton\" [textContent]=\"buttonText\"\n                  (click)=\"onButtonClick()\"></button>\n        </div>\n        <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"expandButtonLast\">\n          <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n        </div>\n      </div>\n    </div>\n    <div class=\"collapsible-content\" *ngIf=\"expanded\" @showHideContent>\n      <ng-content></ng-content>\n    </div>\n  ",
                     animations: [
@@ -4252,24 +4253,24 @@
                             animations.transition('void <=> *', animations.animate(200))
                         ]),
                     ],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     CollapsibleComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     CollapsibleComponent.propDecorators = {
-        headerTitle: [{ type: core.Input }],
-        buttonText: [{ type: core.Input }],
-        iconData: [{ type: core.Input }],
-        expandButtonLast: [{ type: core.Input }],
-        showButton: [{ type: core.Input }],
-        expanded: [{ type: core.Input }],
-        expandedChange: [{ type: core.Output }],
-        buttonClicked: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-collapsible",] }],
-        onHostClick: [{ type: core.HostListener, args: ["click", ["$event"],] }]
+        headerTitle: [{ type: i0.Input }],
+        buttonText: [{ type: i0.Input }],
+        iconData: [{ type: i0.Input }],
+        expandButtonLast: [{ type: i0.Input }],
+        showButton: [{ type: i0.Input }],
+        expanded: [{ type: i0.Input }],
+        expandedChange: [{ type: i0.Output }],
+        buttonClicked: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-collapsible",] }],
+        onHostClick: [{ type: i0.HostListener, args: ["click", ["$event"],] }]
     };
 
     var CollapsibleModule = /** @class */ (function () {
@@ -4278,7 +4279,7 @@
         return CollapsibleModule;
     }());
     CollapsibleModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         IconModule,
@@ -4310,7 +4311,7 @@
         return FormInputUserModelChangeListenerService;
     }());
     FormInputUserModelChangeListenerService.decorators = [
-        { type: core.Injectable }
+        { type: i0.Injectable }
     ];
     FormInputUserModelChangeListenerService.ctorParameters = function () { return []; };
 
@@ -4329,10 +4330,10 @@
         return NgZoneWrapperService;
     }());
     NgZoneWrapperService.decorators = [
-        { type: core.Injectable }
+        { type: i0.Injectable }
     ];
     NgZoneWrapperService.ctorParameters = function () { return [
-        { type: core.NgZone }
+        { type: i0.NgZone }
     ]; };
 
     var BaseModule = /** @class */ (function () {
@@ -4341,7 +4342,7 @@
         return BaseModule;
     }());
     BaseModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         forms.FormsModule
@@ -4356,7 +4357,7 @@
     ];
 
     // Enables "DI for interfaces" (see ConfigNameDirective injected .hostComponent).
-    var COMPONENT_INTERFACE_NAME = new core.InjectionToken("ConfigurationAdapterComponent");
+    var COMPONENT_INTERFACE_NAME = new i0.InjectionToken("ConfigurationAdapterComponent");
 
     function requiredValidator(control) {
         var isValid = !(control.value === null || control.value === undefined || control.value === "");
@@ -4394,21 +4395,21 @@
         return ValidationErrorComponent;
     }());
     ValidationErrorComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-validation-error",
                     template: "\n    <div class=\"validation-error-content\">\n      <co-icon [iconData]=\"icons.getIcon(Icons.InformationRoundOpen)\"></co-icon>\n        <div class=\"validation-error-message\" [textContent]=\"error\"></div>\n    </div>\n  ",
                     animations: [],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     ValidationErrorComponent.ctorParameters = function () { return [
         { type: IconCacheService }
     ]; };
     ValidationErrorComponent.propDecorators = {
-        error: [{ type: core.Input }],
-        top: [{ type: core.HostBinding, args: ['style.top.px',] }, { type: core.Input }],
-        left: [{ type: core.HostBinding, args: ['style.left.px',] }, { type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-validation-error',] }]
+        error: [{ type: i0.Input }],
+        top: [{ type: i0.HostBinding, args: ['style.top.px',] }, { type: i0.Input }],
+        left: [{ type: i0.HostBinding, args: ['style.left.px',] }, { type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-validation-error',] }]
     };
 
     /**
@@ -4430,16 +4431,16 @@
             this.redErrorBackground = false;
             // @Output()
             // public commit: EventEmitter<any> = new EventEmitter<any>();
-            this.nativeBlur = new core.EventEmitter();
-            this.blur = new core.EventEmitter();
+            this.nativeBlur = new i0.EventEmitter();
+            this.blur = new i0.EventEmitter();
             // emits when the enter button on keyboard was pressed while this form input had focussed
-            this.enter = new core.EventEmitter();
-            this.focus = new core.EventEmitter();
-            this.keyDown = new core.EventEmitter();
-            this.keyUp = new core.EventEmitter();
-            this.modelChange = new core.EventEmitter();
-            this.userModelChange = new core.EventEmitter();
-            this.hiddenChange = new core.EventEmitter();
+            this.enter = new i0.EventEmitter();
+            this.focus = new i0.EventEmitter();
+            this.keyDown = new i0.EventEmitter();
+            this.keyUp = new i0.EventEmitter();
+            this.modelChange = new i0.EventEmitter();
+            this.userModelChange = new i0.EventEmitter();
+            this.hiddenChange = new i0.EventEmitter();
             this.focused = false;
             this.formInput = true;
             this.customWidth = false;
@@ -5219,73 +5220,73 @@
     BaseInputComponent.BaseFormInputComponentIndex = 0;
     BaseInputComponent.HiddenClass = "hidden";
     BaseInputComponent.decorators = [
-        { type: core.Directive },
-        { type: core.Injectable }
+        { type: i0.Directive },
+        { type: i0.Injectable }
     ];
     BaseInputComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
-        { type: FormInputUserModelChangeListenerService, decorators: [{ type: core.Optional }] },
-        { type: NgZoneWrapperService, decorators: [{ type: core.Optional }] },
-        { type: core.ElementRef, decorators: [{ type: core.Optional }] }
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
+        { type: FormInputUserModelChangeListenerService, decorators: [{ type: i0.Optional }] },
+        { type: NgZoneWrapperService, decorators: [{ type: i0.Optional }] },
+        { type: i0.ElementRef, decorators: [{ type: i0.Optional }] }
     ]; };
     BaseInputComponent.propDecorators = {
-        validationErrorContainer: [{ type: core.ViewChild, args: ["validationError", { read: core.ViewContainerRef },] }],
-        _ngModel: [{ type: core.ViewChild, args: [forms.NgModel, { static: true },] }],
-        showSaveCancel: [{ type: core.Input }],
-        model: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        noValidation: [{ type: core.Input }],
-        initFocus: [{ type: core.Input }],
-        noClickFocus: [{ type: core.Input }],
-        businessObjectId: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        maxLength: [{ type: core.Input }],
-        forcedMaxLength: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        forceReadonly: [{ type: core.Input }],
-        required: [{ type: core.Input }],
-        forceRequired: [{ type: core.Input }],
-        validators: [{ type: core.Input }],
-        asyncValidators: [{ type: core.Input }],
-        hidden: [{ type: core.Input }, { type: core.HostBinding, args: ["class." + BaseInputComponent.HiddenClass,] }],
-        decimals: [{ type: core.Input }],
-        icon: [{ type: core.Input }],
-        redErrorBackground: [{ type: core.Input }, { type: core.HostBinding, args: ["class.cc-red-error-background",] }],
-        myFormInputInstance: [{ type: core.Input }],
-        nativeBlur: [{ type: core.Output }],
-        blur: [{ type: core.Output }],
-        enter: [{ type: core.Output }],
-        focus: [{ type: core.Output }],
-        keyDown: [{ type: core.Output }],
-        keyUp: [{ type: core.Output }],
-        modelChange: [{ type: core.Output }],
-        userModelChange: [{ type: core.Output }],
-        hiddenChange: [{ type: core.Output }],
-        focused: [{ type: core.HostBinding, args: ["class.cc-input-focused",] }],
-        formInput: [{ type: core.HostBinding, args: ["class.form-input",] }],
-        customWidth: [{ type: core.Input }, { type: core.HostBinding, args: ["class.custom-width",] }],
-        customHeight: [{ type: core.Input }, { type: core.HostBinding, args: ['class.custom-height',] }],
-        noTriangleGraphic: [{ type: core.Input }],
-        halfWidth: [{ type: core.Input }, { type: core.HostBinding, args: ["class.half-width",] }],
-        fullWidth: [{ type: core.Input }, { type: core.HostBinding, args: ["class.full-width-important",] }],
-        excludeUserModelChange: [{ type: core.Input }],
-        noFormGroupControl: [{ type: core.Input }],
-        formSubmitted: [{ type: core.HostBinding, args: ["class.form-submitted",] }],
-        hasNoLabel: [{ type: core.HostBinding, args: ["class.hasnolabel",] }],
-        hasValue: [{ type: core.HostBinding, args: ["class.hasvalue",] }],
-        invalid: [{ type: core.HostBinding, args: ["class.invalid",] }],
-        isDisabled: [{ type: core.HostBinding, args: ["class.disabled",] }],
-        isReadonly: [{ type: core.HostBinding, args: ["class.read-only",] }],
-        isRequired: [{ type: core.HostBinding, args: ["class.required",] }],
-        touchedInvalid: [{ type: core.HostBinding, args: ["class.cc-touched-invalid",] }],
-        valid: [{ type: core.HostBinding, args: ["class.valid",] }],
-        validationDisabled: [{ type: core.HostBinding, args: ["class.no-validation",] }],
-        onClick: [{ type: core.HostListener, args: ["click", ["$event"],] }],
-        onFocusIn: [{ type: core.HostListener, args: ["focusin",] }],
-        handleDocumentScroll: [{ type: core.HostListener, args: ["document:scroll",] }],
-        handleWindowResize: [{ type: core.HostListener, args: ["window:resize",] }],
-        handleKeyDown: [{ type: core.HostListener, args: ["keydown", ["$event"],] }]
+        validationErrorContainer: [{ type: i0.ViewChild, args: ["validationError", { read: i0.ViewContainerRef },] }],
+        _ngModel: [{ type: i0.ViewChild, args: [forms.NgModel, { static: true },] }],
+        showSaveCancel: [{ type: i0.Input }],
+        model: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        noValidation: [{ type: i0.Input }],
+        initFocus: [{ type: i0.Input }],
+        noClickFocus: [{ type: i0.Input }],
+        businessObjectId: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        maxLength: [{ type: i0.Input }],
+        forcedMaxLength: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        forceReadonly: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        forceRequired: [{ type: i0.Input }],
+        validators: [{ type: i0.Input }],
+        asyncValidators: [{ type: i0.Input }],
+        hidden: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class." + BaseInputComponent.HiddenClass,] }],
+        decimals: [{ type: i0.Input }],
+        icon: [{ type: i0.Input }],
+        redErrorBackground: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.cc-red-error-background",] }],
+        myFormInputInstance: [{ type: i0.Input }],
+        nativeBlur: [{ type: i0.Output }],
+        blur: [{ type: i0.Output }],
+        enter: [{ type: i0.Output }],
+        focus: [{ type: i0.Output }],
+        keyDown: [{ type: i0.Output }],
+        keyUp: [{ type: i0.Output }],
+        modelChange: [{ type: i0.Output }],
+        userModelChange: [{ type: i0.Output }],
+        hiddenChange: [{ type: i0.Output }],
+        focused: [{ type: i0.HostBinding, args: ["class.cc-input-focused",] }],
+        formInput: [{ type: i0.HostBinding, args: ["class.form-input",] }],
+        customWidth: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.custom-width",] }],
+        customHeight: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.custom-height',] }],
+        noTriangleGraphic: [{ type: i0.Input }],
+        halfWidth: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.half-width",] }],
+        fullWidth: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.full-width-important",] }],
+        excludeUserModelChange: [{ type: i0.Input }],
+        noFormGroupControl: [{ type: i0.Input }],
+        formSubmitted: [{ type: i0.HostBinding, args: ["class.form-submitted",] }],
+        hasNoLabel: [{ type: i0.HostBinding, args: ["class.hasnolabel",] }],
+        hasValue: [{ type: i0.HostBinding, args: ["class.hasvalue",] }],
+        invalid: [{ type: i0.HostBinding, args: ["class.invalid",] }],
+        isDisabled: [{ type: i0.HostBinding, args: ["class.disabled",] }],
+        isReadonly: [{ type: i0.HostBinding, args: ["class.read-only",] }],
+        isRequired: [{ type: i0.HostBinding, args: ["class.required",] }],
+        touchedInvalid: [{ type: i0.HostBinding, args: ["class.cc-touched-invalid",] }],
+        valid: [{ type: i0.HostBinding, args: ["class.valid",] }],
+        validationDisabled: [{ type: i0.HostBinding, args: ["class.no-validation",] }],
+        onClick: [{ type: i0.HostListener, args: ["click", ["$event"],] }],
+        onFocusIn: [{ type: i0.HostListener, args: ["focusin",] }],
+        handleDocumentScroll: [{ type: i0.HostListener, args: ["document:scroll",] }],
+        handleWindowResize: [{ type: i0.HostListener, args: ["window:resize",] }],
+        handleKeyDown: [{ type: i0.HostListener, args: ["keydown", ["$event"],] }]
     };
     __decorate([
         InputBoolean()
@@ -5428,7 +5429,7 @@
         return FormMasterService;
     }());
     FormMasterService.decorators = [
-        { type: core.Injectable }
+        { type: i0.Injectable }
     ];
     FormMasterService.ctorParameters = function () { return []; };
 
@@ -5442,16 +5443,16 @@
     var FormComponent = /** @class */ (function () {
         function FormComponent(_formMaster) {
             this._formMaster = _formMaster;
-            this.onChange = new core.EventEmitter();
+            this.onChange = new i0.EventEmitter();
             this.showClass = true;
             this.submitted = false;
             // Emits true after every valid submit.
-            this.validSubmit = new core.EventEmitter();
+            this.validSubmit = new i0.EventEmitter();
             // Emits void after every 'submit' (either valid or invalid, eg a submit attempt)
-            this.anySubmit = new core.EventEmitter();
+            this.anySubmit = new i0.EventEmitter();
             // note: a disabled control is considered valid
-            this.validityChange = new core.EventEmitter();
-            this.readonlyChange = new core.EventEmitter();
+            this.validityChange = new i0.EventEmitter();
+            this.readonlyChange = new i0.EventEmitter();
             // The Angular in-memory representation of the form controls on this form. Performs actual logic, emits 'input field' (Control) state change events, etc.
             this.formGroup = new forms.FormGroup({});
             this.invalidSubmit = new rxjs.Subject();
@@ -5595,26 +5596,26 @@
         return FormComponent;
     }());
     FormComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-form",
                     template: "\n    <ng-content></ng-content>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     FormComponent.ctorParameters = function () { return [
         { type: FormMasterService }
     ]; };
     FormComponent.propDecorators = {
-        readonly: [{ type: core.Input }],
-        keepInView: [{ type: core.Input }],
-        onChange: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-form",] }],
-        submitted: [{ type: core.HostBinding, args: ["class.submitted",] }],
-        validSubmit: [{ type: core.Output }],
-        anySubmit: [{ type: core.Output }],
-        validityChange: [{ type: core.Output }],
-        readonlyChange: [{ type: core.Output }],
-        invalidSubmit: [{ type: core.Output }]
+        readonly: [{ type: i0.Input }],
+        keepInView: [{ type: i0.Input }],
+        onChange: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-form",] }],
+        submitted: [{ type: i0.HostBinding, args: ["class.submitted",] }],
+        validSubmit: [{ type: i0.Output }],
+        anySubmit: [{ type: i0.Output }],
+        validityChange: [{ type: i0.Output }],
+        readonlyChange: [{ type: i0.Output }],
+        invalidSubmit: [{ type: i0.Output }]
     };
 
     var DropDownListComponent = /** @class */ (function (_super) {
@@ -5642,41 +5643,41 @@
         return DropDownListComponent;
     }(BaseInputComponent));
     DropDownListComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-drop-down-list",
                     template: "\n    <ejs-dropdownlist\n      [dataSource]=\"collection\"\n      [allowFiltering]=\"allowFiltering\"\n      [value]=\"model\"\n      [fields]=\"fields\"\n      [filterBarPlaceholder]=\"filterBarPlaceholder\"\n      [filterType]=\"filterType\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [itemTemplate]=\"itemTemplate\"\n      [headerTemplate]=\"headerTemplate\"\n      [valueTemplate]=\"valueTemplate\"\n      [disabled]=\"disabled\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n      showClearButton=\"true\"\n      floatLabelType=\"Auto\"\n    >\n    </ejs-dropdownlist>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [
                         ej2AngularDropdowns.CheckBoxSelectionService,
                         {
                             provide: COMPONENT_INTERFACE_NAME,
-                            useExisting: core.forwardRef(function () { return DropDownListComponent; })
+                            useExisting: i0.forwardRef(function () { return DropDownListComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: DropDownListComponent
                         }
                     ],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     DropDownListComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     DropDownListComponent.propDecorators = {
-        collection: [{ type: core.Input }],
-        fields: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        allowFiltering: [{ type: core.Input }],
-        filterBarPlaceholder: [{ type: core.Input }],
-        filterType: [{ type: core.Input }],
-        itemTemplate: [{ type: core.Input }],
-        headerTemplate: [{ type: core.Input }],
-        valueTemplate: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-drop-down-list",] }]
+        collection: [{ type: i0.Input }],
+        fields: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        allowFiltering: [{ type: i0.Input }],
+        filterBarPlaceholder: [{ type: i0.Input }],
+        filterType: [{ type: i0.Input }],
+        itemTemplate: [{ type: i0.Input }],
+        headerTemplate: [{ type: i0.Input }],
+        valueTemplate: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-drop-down-list",] }]
     };
 
     var DropDownModule = /** @class */ (function () {
@@ -5685,7 +5686,7 @@
         return DropDownModule;
     }());
     DropDownModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         BaseModule,
                         common.CommonModule,
@@ -5704,7 +5705,7 @@
         return FormModule;
     }());
     FormModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule
                     ],
@@ -5766,29 +5767,29 @@
         return BaseGridComponent;
     }());
     BaseGridComponent.decorators = [
-        { type: core.Directive }
+        { type: i0.Directive }
     ];
     BaseGridComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     BaseGridComponent.propDecorators = {
-        grid: [{ type: core.ViewChild, args: ['grid', { static: false },] }],
-        data: [{ type: core.Input }],
-        gridLines: [{ type: core.Input }],
-        contextMenuItems: [{ type: core.Input }],
-        frozenColumns: [{ type: core.Input }],
-        frozenRows: [{ type: core.Input }],
-        sortingEnabled: [{ type: core.Input }],
-        filteringEnabled: [{ type: core.Input }],
-        pagingEnabled: [{ type: core.Input }],
-        groupingEnabled: [{ type: core.Input }],
-        reorderingEnabled: [{ type: core.Input }],
-        rowDragAndDropEnabled: [{ type: core.Input }],
-        rowDropSettings: [{ type: core.Input }],
-        resizingEnabled: [{ type: core.Input }],
-        showColumnMenu: [{ type: core.Input }],
-        maxNumberOfRows: [{ type: core.Input }],
-        columns: [{ type: core.Input }]
+        grid: [{ type: i0.ViewChild, args: ['grid', { static: false },] }],
+        data: [{ type: i0.Input }],
+        gridLines: [{ type: i0.Input }],
+        contextMenuItems: [{ type: i0.Input }],
+        frozenColumns: [{ type: i0.Input }],
+        frozenRows: [{ type: i0.Input }],
+        sortingEnabled: [{ type: i0.Input }],
+        filteringEnabled: [{ type: i0.Input }],
+        pagingEnabled: [{ type: i0.Input }],
+        groupingEnabled: [{ type: i0.Input }],
+        reorderingEnabled: [{ type: i0.Input }],
+        rowDragAndDropEnabled: [{ type: i0.Input }],
+        rowDropSettings: [{ type: i0.Input }],
+        resizingEnabled: [{ type: i0.Input }],
+        showColumnMenu: [{ type: i0.Input }],
+        maxNumberOfRows: [{ type: i0.Input }],
+        columns: [{ type: i0.Input }]
     };
     __decorate([
         InputBoolean()
@@ -5887,12 +5888,12 @@
         return BaseToolbarGridComponent;
     }(BaseGridComponent));
     BaseToolbarGridComponent.decorators = [
-        { type: core.Directive }
+        { type: i0.Directive }
     ];
     BaseToolbarGridComponent.propDecorators = {
-        showColumnChooser: [{ type: core.Input }],
-        exportExcelEnabled: [{ type: core.Input }],
-        exportPdfEnabled: [{ type: core.Input }]
+        showColumnChooser: [{ type: i0.Input }],
+        exportExcelEnabled: [{ type: i0.Input }],
+        exportPdfEnabled: [{ type: i0.Input }]
     };
     __decorate([
         InputBoolean()
@@ -5908,9 +5909,9 @@
         __extends(BaseInlineEditGridComponent, _super);
         function BaseInlineEditGridComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.rowSaved = new core.EventEmitter();
-            _this.beforeRowDelete = new core.EventEmitter(false);
-            _this.rowDeleted = new core.EventEmitter();
+            _this.rowSaved = new i0.EventEmitter();
+            _this.beforeRowDelete = new i0.EventEmitter(false);
+            _this.rowDeleted = new i0.EventEmitter();
             _this.actionBeginObservable$ = new rxjs.Observable();
             _this.actionBeginObservableSub = new rxjs.Subscription();
             return _this;
@@ -5990,13 +5991,13 @@
         return BaseInlineEditGridComponent;
     }(BaseToolbarGridComponent));
     BaseInlineEditGridComponent.decorators = [
-        { type: core.Directive }
+        { type: i0.Directive }
     ];
     BaseInlineEditGridComponent.propDecorators = {
-        inlineEdit: [{ type: core.Input }],
-        rowSaved: [{ type: core.Output }],
-        beforeRowDelete: [{ type: core.Output }],
-        rowDeleted: [{ type: core.Output }]
+        inlineEdit: [{ type: i0.Input }],
+        rowSaved: [{ type: i0.Output }],
+        beforeRowDelete: [{ type: i0.Output }],
+        rowDeleted: [{ type: i0.Output }]
     };
     __decorate([
         InputBoolean()
@@ -6008,14 +6009,14 @@
         function BaseSelectionGridComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.includeDetailColumn = false;
-            _this.rowsSelected = new core.EventEmitter();
-            _this.rowDoubleClick = new core.EventEmitter();
-            _this.detailColumnClick = new core.EventEmitter();
-            _this.contextMenuItemClick = new core.EventEmitter();
-            _this.rowDragStartEvent = new core.EventEmitter();
-            _this.rowDropEvent = new core.EventEmitter();
-            _this.beforeRowsDelete = new core.EventEmitter();
-            _this.rowsDeleted = new core.EventEmitter();
+            _this.rowsSelected = new i0.EventEmitter();
+            _this.rowDoubleClick = new i0.EventEmitter();
+            _this.detailColumnClick = new i0.EventEmitter();
+            _this.contextMenuItemClick = new i0.EventEmitter();
+            _this.rowDragStartEvent = new i0.EventEmitter();
+            _this.rowDropEvent = new i0.EventEmitter();
+            _this.beforeRowsDelete = new i0.EventEmitter();
+            _this.rowsDeleted = new i0.EventEmitter();
             _this.selectionOptions = { type: "Single" };
             return _this;
         }
@@ -6076,20 +6077,20 @@
         return BaseSelectionGridComponent;
     }(BaseInlineEditGridComponent));
     BaseSelectionGridComponent.decorators = [
-        { type: core.Directive }
+        { type: i0.Directive }
     ];
     BaseSelectionGridComponent.propDecorators = {
-        multipleSelect: [{ type: core.Input }],
-        includeDetailColumn: [{ type: core.HostBinding, args: ["class.detail-column",] }, { type: core.Input }],
-        detailColumnTemplate: [{ type: core.Input }],
-        rowsSelected: [{ type: core.Output }],
-        rowDoubleClick: [{ type: core.Output }],
-        detailColumnClick: [{ type: core.Output }],
-        contextMenuItemClick: [{ type: core.Output }],
-        rowDragStartEvent: [{ type: core.Output }],
-        rowDropEvent: [{ type: core.Output }],
-        beforeRowsDelete: [{ type: core.Output }],
-        rowsDeleted: [{ type: core.Output }]
+        multipleSelect: [{ type: i0.Input }],
+        includeDetailColumn: [{ type: i0.HostBinding, args: ["class.detail-column",] }, { type: i0.Input }],
+        detailColumnTemplate: [{ type: i0.Input }],
+        rowsSelected: [{ type: i0.Output }],
+        rowDoubleClick: [{ type: i0.Output }],
+        detailColumnClick: [{ type: i0.Output }],
+        contextMenuItemClick: [{ type: i0.Output }],
+        rowDragStartEvent: [{ type: i0.Output }],
+        rowDropEvent: [{ type: i0.Output }],
+        beforeRowsDelete: [{ type: i0.Output }],
+        rowsDeleted: [{ type: i0.Output }]
     };
     __decorate([
         InputBoolean()
@@ -6112,17 +6113,17 @@
         return CoGridComponent;
     }(BaseSelectionGridComponent));
     CoGridComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-grid',
                     template: "\n      <ejs-grid #grid id=\"grid\"\n                [dataSource]=\"data\"\n                [columns]=\"columns\"\n                [contextMenuItems]=\"contextMenuItems\"\n                [pageSettings]=\"pageSettings\"\n                [toolbar]=\"toolbarOptions\"\n                [gridLines]=\"gridLines\"\n                [frozenColumns]=\"frozenColumns\"\n                [frozenRows]=\"frozenRows\"\n                [selectionSettings]=\"selectionOptions\"\n                [editSettings]=\"editSettings\"\n                [allowPaging]=\"pagingEnabled\"\n                [allowSorting]=\"sortingEnabled\"\n                [allowFiltering]=\"filteringEnabled\"\n                [allowGrouping]=\"groupingEnabled\"\n                [allowReordering]=\"reorderingEnabled\"\n                [allowResizing]=\"resizingEnabled\"\n                [allowRowDragAndDrop]=\"rowDragAndDropEnabled\"\n                [showColumnMenu]=\"showColumnMenu\"\n                [showColumnChooser]=\"showColumnChooser\"\n                [allowExcelExport]=\"exportExcelEnabled\"\n                [allowPdfExport]=\"exportPdfEnabled\"\n                (toolbarClick)=\"toolbarClick($event)\"\n                (rowSelected)=\"handleRowSelected($event)\"\n                (recordDoubleClick)=\"handleDoubleClick($event)\"\n                (recordClick)=\"handleRecordClick($event)\"\n                (actionComplete)=\"handleActionComplete($event)\"\n                (contextMenuClick)=\"contextMenuClick($event)\"\n                (rowDragStart)=\"rowDragStartClick($event)\"\n                (rowDrop)=\"rowDropClick($event)\"\n                (beforeBatchDelete)=\"handleBeforeBatchDelete($event)\"\n                (batchDelete)=\"handleBatchDelete($event)\"\n      >\n      </ejs-grid>\n    ",
                     providers: [
                         ej2AngularGrids.RowDDService
                     ],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     CoGridComponent.propDecorators = {
-        showClass: [{ type: core.HostBinding, args: ['class.co-grid',] }]
+        showClass: [{ type: i0.HostBinding, args: ['class.co-grid',] }]
     };
 
     var GridToolbarComponent = /** @class */ (function () {
@@ -6133,11 +6134,11 @@
             this.showAdd = false;
             this.showDelete = false;
             this.deleteEnabled = false;
-            this.editClick = new core.EventEmitter();
-            this.cancelClick = new core.EventEmitter();
-            this.saveClick = new core.EventEmitter();
-            this.addClick = new core.EventEmitter();
-            this.deleteClick = new core.EventEmitter();
+            this.editClick = new i0.EventEmitter();
+            this.cancelClick = new i0.EventEmitter();
+            this.saveClick = new i0.EventEmitter();
+            this.addClick = new i0.EventEmitter();
+            this.deleteClick = new i0.EventEmitter();
         }
         GridToolbarComponent.prototype.showClass = function () {
             return true;
@@ -6145,26 +6146,26 @@
         return GridToolbarComponent;
     }());
     GridToolbarComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-grid-toolbar",
                     template: "\n    <div class=\"grid-toolbar-wrapper\">\n      <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.PenToSquareSolid)\" [title]=\"'edit'\" (click)=\"editClick.emit($event)\"></co-icon>\n      <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.RotateLeftSolid)\" [title]=\"'cancel'\" (click)=\"cancelClick.emit()\"></co-icon>\n      <co-icon *ngIf=\"showEdit\" [iconData]=\"iconsService.getIcon(icons.FloppyDiskSolid)\" [title]=\"'save'\" (click)=\"saveClick.emit()\"></co-icon>\n      <co-icon *ngIf=\"showAdd || showEdit\" [iconData]=\"iconsService.getIcon(icons.PlusSolid)\" [title]=\"'add'\" (click)=\"addClick.emit()\"></co-icon>\n      <co-icon *ngIf=\"showDelete\" [iconData]=\"iconsService.getIcon(icons.TrashCanSolid)\" [title]=\"'delete'\" [class.disabled]=\"!deleteEnabled\" (click)=\"deleteClick.emit()\"></co-icon>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     GridToolbarComponent.ctorParameters = function () { return [
         { type: IconCacheService }
     ]; };
     GridToolbarComponent.propDecorators = {
-        showEdit: [{ type: core.Input }],
-        showAdd: [{ type: core.Input }],
-        showDelete: [{ type: core.Input }],
-        deleteEnabled: [{ type: core.Input }],
-        editClick: [{ type: core.Output }],
-        cancelClick: [{ type: core.Output }],
-        saveClick: [{ type: core.Output }],
-        addClick: [{ type: core.Output }],
-        deleteClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-grid-toolbar",] }]
+        showEdit: [{ type: i0.Input }],
+        showAdd: [{ type: i0.Input }],
+        showDelete: [{ type: i0.Input }],
+        deleteEnabled: [{ type: i0.Input }],
+        editClick: [{ type: i0.Output }],
+        cancelClick: [{ type: i0.Output }],
+        saveClick: [{ type: i0.Output }],
+        addClick: [{ type: i0.Output }],
+        deleteClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-grid-toolbar",] }]
     };
 
     ej2Base.enableRipple(true);
@@ -6174,7 +6175,7 @@
         return GridToolbarModule;
     }());
     GridToolbarModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         IconModule,
                         ButtonModule,
@@ -6195,7 +6196,7 @@
         return CoGridModule;
     }());
     CoGridModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
@@ -6226,7 +6227,7 @@
     var GridToolbarButtonComponent = /** @class */ (function () {
         function GridToolbarButtonComponent() {
             this.disabled = false;
-            this.buttonClick = new core.EventEmitter();
+            this.buttonClick = new i0.EventEmitter();
         }
         GridToolbarButtonComponent.prototype.showClass = function () {
             return true;
@@ -6234,17 +6235,17 @@
         return GridToolbarButtonComponent;
     }());
     GridToolbarButtonComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-grid-toolbar-button",
                     template: "\n    <div class=\"grid-toolbar-button-wrapper\" [class.disabled]=\"disabled\" (click)=\"buttonClick.next()\">\n      <co-icon [iconData]=\"iconData\"></co-icon>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     GridToolbarButtonComponent.propDecorators = {
-        iconData: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        buttonClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-grid-toolbar-button",] }]
+        iconData: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        buttonClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-grid-toolbar-button",] }]
     };
 
     ej2Base.enableRipple(true);
@@ -6254,7 +6255,7 @@
         return GridToolbarButtonModule;
     }());
     GridToolbarButtonModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         IconModule,
                     ],
@@ -6355,21 +6356,21 @@
         return IconCollapseHandleComponent;
     }());
     IconCollapseHandleComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-icon-collapse-handle",
                     template: "\n    <div class=\"wrap\">\n      <co-icon [icon]=\"Icons.ArrowPointUp\" [class]=\"'first ' + arrowDirection + ' ' + iconColorClass\"></co-icon>\n      <co-icon *ngIf=\"twoArrows\" [icon]=\"Icons.ArrowPointUp\"\n            [class]=\"'second ' + oppositeArrowDirection + ' ' + iconColorClass\"></co-icon>\n    </div>\n    <div class=\"absolute-fill-parent\" md-ripple></div>\n    ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     IconCollapseHandleComponent.ctorParameters = function () { return []; };
     IconCollapseHandleComponent.propDecorators = {
-        showClass: [{ type: core.HostBinding, args: ["class.co-icon-collapse-handle",] }],
-        orientation: [{ type: core.Input }],
-        arrowDirection: [{ type: core.Input }],
-        twoArrows: [{ type: core.Input }, { type: core.HostBinding, args: ["class.two-arrows",] }],
-        isVertical: [{ type: core.HostBinding, args: ["class.vertical",] }],
-        arrowsOrientatedHorizontally: [{ type: core.HostBinding, args: ["class.arrows-orientated-horizontally",] }],
-        hidden: [{ type: core.HostBinding, args: ["class.hidden",] }]
+        showClass: [{ type: i0.HostBinding, args: ["class.co-icon-collapse-handle",] }],
+        orientation: [{ type: i0.Input }],
+        arrowDirection: [{ type: i0.Input }],
+        twoArrows: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.two-arrows",] }],
+        isVertical: [{ type: i0.HostBinding, args: ["class.vertical",] }],
+        arrowsOrientatedHorizontally: [{ type: i0.HostBinding, args: ["class.arrows-orientated-horizontally",] }],
+        hidden: [{ type: i0.HostBinding, args: ["class.hidden",] }]
     };
     __decorate([
         InputBoolean()
@@ -6381,7 +6382,7 @@
         return IconCollapseHandleModule;
     }());
     IconCollapseHandleModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         IconModule,
@@ -6407,7 +6408,7 @@
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
-            _this.modelChange = new core.EventEmitter();
+            _this.modelChange = new i0.EventEmitter();
             return _this;
         }
         InputCheckboxComponent.prototype.showClass = function () {
@@ -6417,43 +6418,43 @@
             this.model = value;
             this.modelChange.next(this.model);
         };
-        InputCheckboxComponent.prototype.handleModelChange = function (value) {
+        InputCheckboxComponent.prototype.handleModelChange = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
             if (!this.readonly && !this.disabled) {
-                this.setModel(value);
+                this.setModel(!this.model);
             }
         };
         return InputCheckboxComponent;
     }(BaseInputComponent));
     InputCheckboxComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-input-checkbox",
-                    template: "\n    <ejs-checkbox [label]=\"label\"\n                  [name]=\"name\"\n                  [cssClass]=\"cssClass\"\n                  [ngModel]=\"model\"\n                  [disabled]=\"disabled\"\n                  [style.pointer-events]=\"(readonly == true) ? 'none' : 'auto'\"\n                  (click)=\"!readonly\"\n                  (ngModelChange)=\"handleModelChange($event)\"\n    ></ejs-checkbox>\n  ",
+                    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\" *ngIf=\"label\" [textContent]=\"label\" (click)=\"handleModelChange($event)\"></div>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
-                            useExisting: core.forwardRef(function () { return InputCheckboxComponent; })
+                            useExisting: i0.forwardRef(function () { return InputCheckboxComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputCheckboxComponent
                         }],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputCheckboxComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: IconCacheService },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     InputCheckboxComponent.propDecorators = {
-        name: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        cssClass: [{ type: core.Input }],
-        modelChange: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-checkbox",] }]
+        cssClass: [{ type: i0.Input }],
+        modelChange: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-input-checkbox",] }]
     };
 
     ej2Base.enableRipple(true);
@@ -6463,7 +6464,7 @@
         return InputCheckboxModule;
     }());
     InputCheckboxModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         BaseModule,
                         common.CommonModule,
@@ -6491,7 +6492,7 @@
         return AppendPipe;
     }());
     AppendPipe.decorators = [
-        { type: core.Pipe, args: [{ name: "append" },] }
+        { type: i0.Pipe, args: [{ name: "append" },] }
     ];
 
     var AppendPipeModule = /** @class */ (function () {
@@ -6500,7 +6501,7 @@
         return AppendPipeModule;
     }());
     AppendPipeModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         AppendPipe
                     ],
@@ -6529,35 +6530,35 @@
         return InputCheckboxMultiSelectComponent;
     }(BaseInputComponent));
     InputCheckboxMultiSelectComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     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,
-                            useExisting: core.forwardRef(function () { return InputCheckboxMultiSelectComponent; })
+                            useExisting: i0.forwardRef(function () { return InputCheckboxMultiSelectComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputCheckboxMultiSelectComponent
                         }],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputCheckboxMultiSelectComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     InputCheckboxMultiSelectComponent.propDecorators = {
-        source: [{ type: core.Input }],
-        fields: [{ type: core.Input }],
-        selected: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        filterPlaceholder: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-checkbox-multi-select",] }]
+        source: [{ type: i0.Input }],
+        fields: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        filterPlaceholder: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-input-checkbox-multi-select",] }]
     };
 
     var InputCheckboxMultiSelectModule = /** @class */ (function () {
@@ -6566,7 +6567,7 @@
         return InputCheckboxMultiSelectModule;
     }());
     InputCheckboxMultiSelectModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         BaseModule,
                         common.CommonModule,
@@ -6591,7 +6592,7 @@
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
             _this.shopPopup = true;
-            _this.valueChange = new core.EventEmitter();
+            _this.valueChange = new i0.EventEmitter();
             _this.isSmall = false;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
@@ -6607,39 +6608,39 @@
         return InputComboBoxComponent;
     }(BaseInputComponent));
     InputComboBoxComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-input-combo-box",
                     template: "\n    <ejs-combobox #combo [dataSource]=\"collection\"\n                  [fields]=\"fields\"\n                  [disabled]=\"readonly\"\n                  [placeholder]=\"placeholder\"\n                  [autofill]=\"true\"\n                  [ngModel]=\"model\"\n                  (ngModelChange)=\"modelChange.emit($event)\"\n                  (valueChange)=\"valueChange.emit($event)\"\n                  (focus)=\"onFocus()\"\n                  [popupWidth]=\"popupWidth\"\n                  [popupHeight]=\"popupHeight\"\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,
-                            useExisting: core.forwardRef(function () { return InputComboBoxComponent; })
+                            useExisting: i0.forwardRef(function () { return InputComboBoxComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputComboBoxComponent
                         }],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputComboBoxComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     InputComboBoxComponent.propDecorators = {
-        combo: [{ type: core.ViewChild, args: ["combo",] }],
-        collection: [{ type: core.Input }],
-        fields: [{ type: core.Input }],
-        selected: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        shopPopup: [{ type: core.Input }],
-        popupHeight: [{ type: core.Input }],
-        popupWidth: [{ type: core.Input }],
-        valueChange: [{ type: core.Output }],
-        isSmall: [{ type: core.HostBinding, args: ['class.is-small',] }, { type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-combo-box",] }]
+        combo: [{ type: i0.ViewChild, args: ["combo",] }],
+        collection: [{ type: i0.Input }],
+        fields: [{ type: i0.Input }],
+        selected: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        shopPopup: [{ type: i0.Input }],
+        popupHeight: [{ type: i0.Input }],
+        popupWidth: [{ type: i0.Input }],
+        valueChange: [{ type: i0.Output }],
+        isSmall: [{ type: i0.HostBinding, args: ['class.is-small',] }, { type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-input-combo-box",] }]
     };
 
     var InputComboBoxModule = /** @class */ (function () {
@@ -6648,7 +6649,7 @@
         return InputComboBoxModule;
     }());
     InputComboBoxModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         BaseModule,
                         common.CommonModule,
@@ -6678,7 +6679,7 @@
             _this.calendarIconName = _this.icons.CalendarEmpty;
             _this.iconHeight = "24px";
             _this.placeholder = "";
-            _this.blur = new core.EventEmitter();
+            _this.blur = new i0.EventEmitter();
             _this.isMinimal = false;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
@@ -6717,45 +6718,45 @@
         return InputDatePickerComponent;
     }(BaseInputComponent));
     InputDatePickerComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     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: core.forwardRef(function () { return InputDatePickerComponent; })
+                            provide: COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputDatePickerComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputDatePickerComponent
                         }],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputDatePickerComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
         { type: IconCacheService },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     InputDatePickerComponent.propDecorators = {
-        ejsDatePicker: [{ type: core.ViewChild, args: ["ejsDatePicker",] }],
-        dateFormat: [{ type: core.Input }],
-        calendarIconName: [{ type: core.Input }],
-        iconHeight: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        width: [{ type: core.Input }],
-        blur: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-date",] }],
-        isMinimal: [{ type: core.HostBinding, args: ['class.is-minimal',] }, { type: core.Input }]
+        ejsDatePicker: [{ type: i0.ViewChild, args: ["ejsDatePicker",] }],
+        dateFormat: [{ type: i0.Input }],
+        calendarIconName: [{ type: i0.Input }],
+        iconHeight: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        width: [{ type: i0.Input }],
+        blur: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-input-date",] }],
+        isMinimal: [{ type: i0.HostBinding, args: ['class.is-minimal',] }, { type: i0.Input }]
     };
 
     var CommitButtonsComponent = /** @class */ (function () {
         function CommitButtonsComponent(_renderer) {
             var _this = this;
             this._renderer = _renderer;
-            this.cancelClick = new core.EventEmitter();
-            this.commitClick = new core.EventEmitter();
+            this.cancelClick = new i0.EventEmitter();
+            this.commitClick = new i0.EventEmitter();
             this._committing = false;
             this._commitFinished = false;
             this._handleAnimationIteration = function (event) {
@@ -6815,7 +6816,7 @@
         return CommitButtonsComponent;
     }());
     CommitButtonsComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-commit-buttons",
                     template: "\n    <div class=\"commit-buttons-wrapper\" @showHideSaveCancel>\n      <div class=\"commit-buttons-button save\" [class.finished]=\"commitFinished\"\n           (click)=\"commitClick.emit($event)\">\n        <div class=\"save-button-spinner\" *ngIf=\"committing || commitFinished\">\n          <div #animatediv></div>\n          <div #animatediv></div>\n          <div #animatediv></div>\n          <div #animatediv></div>\n        </div>\n        <div class=\"spinner-checkmark\" *ngIf=\"!committing || commitFinished\"></div>\n      </div>\n      <div class=\"commit-buttons-button cancel\" (click)=\"cancelClick.emit($event)\">\n        <div class=\"cancel-button\"></div>\n      </div>\n    </div>\n  ",
                     animations: [
@@ -6825,19 +6826,19 @@
                             animations.transition('void <=> *', animations.animate(200))
                         ]),
                     ],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     CommitButtonsComponent.ctorParameters = function () { return [
-        { type: core.Renderer2 }
+        { type: i0.Renderer2 }
     ]; };
     CommitButtonsComponent.propDecorators = {
-        content: [{ type: core.ViewChildren, args: ['animatediv', { read: core.ElementRef },] }],
-        committing: [{ type: core.Input }],
-        commitFinished: [{ type: core.Input }],
-        cancelClick: [{ type: core.Output }],
-        commitClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-commit-buttons",] }]
+        content: [{ type: i0.ViewChildren, args: ['animatediv', { read: i0.ElementRef },] }],
+        committing: [{ type: i0.Input }],
+        commitFinished: [{ type: i0.Input }],
+        cancelClick: [{ type: i0.Output }],
+        commitClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-commit-buttons",] }]
     };
 
     var CommitButtonsModule = /** @class */ (function () {
@@ -6846,7 +6847,7 @@
         return CommitButtonsModule;
     }());
     CommitButtonsModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule
                     ],
@@ -6865,7 +6866,7 @@
         return InputDatePickerModule;
     }());
     InputDatePickerModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         BaseModule,
                         common.CommonModule,
@@ -6876,7 +6877,7 @@
                         CommitButtonsModule
                     ],
                     schemas: [
-                        core.NO_ERRORS_SCHEMA
+                        i0.NO_ERRORS_SCHEMA
                     ],
                     declarations: [InputDatePickerComponent],
                     exports: [InputDatePickerComponent]
@@ -6889,12 +6890,12 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.dateFormat = "dd-MM-yyyy";
             _this.placeholder = "";
-            _this.startDateChange = new core.EventEmitter();
-            _this.endDateChange = new core.EventEmitter();
-            _this.dateRangeChange = new core.EventEmitter();
-            _this.close = new core.EventEmitter();
-            _this.select = new core.EventEmitter();
-            _this.cleared = new core.EventEmitter();
+            _this.startDateChange = new i0.EventEmitter();
+            _this.endDateChange = new i0.EventEmitter();
+            _this.dateRangeChange = new i0.EventEmitter();
+            _this.close = new i0.EventEmitter();
+            _this.select = new i0.EventEmitter();
+            _this.cleared = new i0.EventEmitter();
             return _this;
         }
         InputDateRangePickerComponent.prototype.showClass = function () {
@@ -6910,24 +6911,24 @@
         return InputDateRangePickerComponent;
     }(BaseInputComponent));
     InputDateRangePickerComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-input-date-range",
                     template: "\n    <ejs-daterangepicker\n      [format]=\"dateFormat\"\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  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputDateRangePickerComponent.propDecorators = {
-        dateFormat: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        startDate: [{ type: core.Input }],
-        endDate: [{ type: core.Input }],
-        startDateChange: [{ type: core.Output }],
-        endDateChange: [{ type: core.Output }],
-        dateRangeChange: [{ type: core.Output }],
-        close: [{ type: core.Output }],
-        select: [{ type: core.Output }],
-        cleared: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-date-range-picker",] }]
+        dateFormat: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        startDate: [{ type: i0.Input }],
+        endDate: [{ type: i0.Input }],
+        startDateChange: [{ type: i0.Output }],
+        endDateChange: [{ type: i0.Output }],
+        dateRangeChange: [{ type: i0.Output }],
+        close: [{ type: i0.Output }],
+        select: [{ type: i0.Output }],
+        cleared: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-input-date-range-picker",] }]
     };
 
     var InputDateRangePickerModule = /** @class */ (function () {
@@ -6936,7 +6937,7 @@
         return InputDateRangePickerModule;
     }());
     InputDateRangePickerModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         BaseModule,
                         ej2AngularCalendars.DateRangePickerModule,
@@ -7002,36 +7003,36 @@
         return InputListboxComponent;
     }(BaseInputComponent));
     InputListboxComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     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: core.forwardRef(function () { return InputListboxComponent; })
+                            provide: COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputListboxComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputListboxComponent
                         }],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputListboxComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     InputListboxComponent.propDecorators = {
-        customCssClass: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        collection: [{ type: core.Input }],
-        fields: [{ type: core.Input }],
-        singleSelect: [{ type: core.Input }],
-        showCheckbox: [{ type: core.Input }],
-        showSelectAll: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-input-listbox',] }]
+        customCssClass: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        collection: [{ type: i0.Input }],
+        fields: [{ type: i0.Input }],
+        singleSelect: [{ type: i0.Input }],
+        showCheckbox: [{ type: i0.Input }],
+        showSelectAll: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-listbox',] }]
     };
 
     ej2Base.enableRipple(true);
@@ -7041,7 +7042,7 @@
         return InputListboxModule;
     }());
     InputListboxModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
@@ -7411,7 +7412,7 @@
             // @override Default true for us.
             _this.noValidation = true;
             // @override
-            _this.modelChange = new core.EventEmitter();
+            _this.modelChange = new i0.EventEmitter();
             _this.myKeyDownWhiteList = NUMBER_INPUTS_KEY_DOWN_WHITE_LIST;
             _this.numberLogic = new BoundsConstrainedNumberValue();
             _this.minSelected = false;
@@ -7639,42 +7640,42 @@
         return InputNumberPickerComponent;
     }(BaseInputComponent));
     InputNumberPickerComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     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: core.forwardRef(function () { return InputNumberPickerComponent; })
+                            provide: COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputNumberPickerComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputNumberPickerComponent
                         }],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputNumberPickerComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: IconCacheService, decorators: [{ type: core.Inject, args: [IconCacheService,] }] },
-        { type: core.NgZone },
-        { type: core.ComponentFactoryResolver },
-        { type: core.ChangeDetectorRef },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: IconCacheService, decorators: [{ type: i0.Inject, args: [IconCacheService,] }] },
+        { type: i0.NgZone },
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ChangeDetectorRef },
         { type: FormInputUserModelChangeListenerService }
     ]; };
     InputNumberPickerComponent.propDecorators = {
-        model: [{ type: core.Input }],
-        min: [{ type: core.Input }],
-        step: [{ type: core.Input }],
-        max: [{ type: core.Input }],
-        ngModelOptions: [{ type: core.Input }],
-        minusIcon: [{ type: core.Input }],
-        plusIcon: [{ type: core.Input }],
-        buttonShowMode: [{ type: core.Input }],
-        noValidation: [{ type: core.Input }],
-        decimals: [{ type: core.Input }],
-        modelChange: [{ type: core.Output }],
-        showButtonsOnFocusOnly: [{ type: core.HostBinding, args: ["class.show-buttons-on-focus-only",] }],
-        hasLabel: [{ type: core.HostBinding, args: ["class.has-label",] }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-input-number-picker',] }]
+        model: [{ type: i0.Input }],
+        min: [{ type: i0.Input }],
+        step: [{ type: i0.Input }],
+        max: [{ type: i0.Input }],
+        ngModelOptions: [{ type: i0.Input }],
+        minusIcon: [{ type: i0.Input }],
+        plusIcon: [{ type: i0.Input }],
+        buttonShowMode: [{ type: i0.Input }],
+        noValidation: [{ type: i0.Input }],
+        decimals: [{ type: i0.Input }],
+        modelChange: [{ type: i0.Output }],
+        showButtonsOnFocusOnly: [{ type: i0.HostBinding, args: ["class.show-buttons-on-focus-only",] }],
+        hasLabel: [{ type: i0.HostBinding, args: ["class.has-label",] }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-number-picker',] }]
     };
     __decorate([
         InputBoolean()
@@ -7740,43 +7741,43 @@
         return InputTextComponent;
     }(BaseInputComponent));
     InputTextComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-input-text",
                     template: "\n    <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\" [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]=\"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    >\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: core.forwardRef(function () { return InputTextComponent; })
+                            useExisting: i0.forwardRef(function () { return InputTextComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputTextComponent
                         }],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputTextComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     InputTextComponent.propDecorators = {
-        placeholder: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        min: [{ type: core.Input }],
-        max: [{ type: core.Input }],
-        showClearButton: [{ type: core.Input }],
-        keyDownWhiteList: [{ type: core.Input }],
-        showPlaceholderOnFocus: [{ type: core.Input }],
-        leftIcon: [{ type: core.Input }],
-        rightIcon: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-text",] }],
-        hasLeftIcon: [{ type: core.HostBinding, args: ['class.has-left-icon',] }],
-        hasRightIcon: [{ type: core.HostBinding, args: ['class.has-right-icon',] }],
-        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }],
-        hideArrowButtons: [{ type: core.Input }, { type: core.HostBinding, args: ['class.hideArrows',] }],
-        isSmall: [{ type: core.HostBinding, args: ['class.is-small',] }, { type: core.Input }]
+        placeholder: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        min: [{ type: i0.Input }],
+        max: [{ type: i0.Input }],
+        showClearButton: [{ type: i0.Input }],
+        keyDownWhiteList: [{ type: i0.Input }],
+        showPlaceholderOnFocus: [{ type: i0.Input }],
+        leftIcon: [{ type: i0.Input }],
+        rightIcon: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-input-text",] }],
+        hasLeftIcon: [{ type: i0.HostBinding, args: ['class.has-left-icon',] }],
+        hasRightIcon: [{ type: i0.HostBinding, args: ['class.has-right-icon',] }],
+        hasOwnLabel: [{ type: i0.HostBinding, args: ["class.has-own-label",] }],
+        hideArrowButtons: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.hideArrows',] }],
+        isSmall: [{ type: i0.HostBinding, args: ['class.is-small',] }, { type: i0.Input }]
     };
 
     var ValidationErrorModule = /** @class */ (function () {
@@ -7785,7 +7786,7 @@
         return ValidationErrorModule;
     }());
     ValidationErrorModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         IconModule
@@ -7805,7 +7806,7 @@
         return InputTextModule;
     }());
     InputTextModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         BaseModule,
                         common.CommonModule,
@@ -7832,7 +7833,7 @@
         return InputNumberPickerModule;
     }());
     InputNumberPickerModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
@@ -7860,40 +7861,47 @@
         InputRadioButtonComponent.prototype.showClass = function () {
             return true;
         };
-        InputRadioButtonComponent.prototype.handleModelChange = function (change) {
-            this.model = change.value;
-            this.modelChange.next(this.model);
+        InputRadioButtonComponent.prototype.handleModelChange = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!this.readonly) {
+                this.model = !this.model;
+                this.modelChange.next(this.model);
+            }
         };
         return InputRadioButtonComponent;
     }(BaseInputComponent));
     InputRadioButtonComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-input-radio-button",
-                    template: "\n    <ejs-radiobutton\n      [label]=\"label\"\n      [name]=\"name\"\n      [value]=\"value\"\n      [checked]=\"checked\"\n      (change)=\"handleModelChange($event)\"\n    ></ejs-radiobutton>\n  ",
+                    template: "\n    <div class=\"outer-circle\" [class.selected]=\"model\" (click)=\"handleModelChange($event)\">\n      <div class=\"inner-circle\" *ngIf=\"model\" @showSelected></div>\n    </div>\n    <div class=\"label\" *ngIf=\"label\" [textContent]=\"label\" (click)=\"handleModelChange($event)\"></div>\n    <input #input [ngModel]=\"model\" type=\"hidden\">\n  ",
                     providers: [{
-                            provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputRadioButtonComponent; })
+                            provide: COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputRadioButtonComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputRadioButtonComponent
                         }],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
+                    animations: [
+                        animations.trigger("showSelected", [
+                            animations.state("void", animations.style({ transform: "scale(0)" })),
+                            animations.state("*", animations.style({ transform: "scale(1)" })),
+                            animations.transition("void <=> *", animations.animate("200ms ease-in-out")),
+                        ])
+                    ],
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputRadioButtonComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     InputRadioButtonComponent.propDecorators = {
-        value: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        name: [{ type: core.Input }],
-        checked: [{ type: core.HostBinding, args: ['class.checked',] }, { type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-radio-button",] }]
+        showClass: [{ type: i0.HostBinding, args: ["class.co-radio-button",] }]
     };
 
     var InputRadioButtonModule = /** @class */ (function () {
@@ -7902,7 +7910,7 @@
         return InputRadioButtonModule;
     }());
     InputRadioButtonModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         BaseModule,
                         common.CommonModule,
@@ -7920,7 +7928,7 @@
         function InputSearchComponent() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.searchIcon = exports.CoreComponentsIcon.Magnifier;
-            _this.search = new core.EventEmitter();
+            _this.search = new i0.EventEmitter();
             _this.useLeftIcon = false;
             _this.useRightIcon = false;
             _this.noIcon = false;
@@ -7942,21 +7950,21 @@
         return InputSearchComponent;
     }(BaseInputComponent));
     InputSearchComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-input-search',
                     template: "\n    <co-input-text\n      [model]=\"model\"\n      [leftIcon]=\"useLeftIcon ? searchIcon : null\"\n      [rightIcon]=\"useRightIcon ? searchIcon : null\"\n      [placeholder]=\"placeholder\"\n      [customHeight]=\"customHeight\"\n      [showPlaceholderOnFocus]=\"false\"\n      (modelChange)=\"modelChange.emit($event)\"\n    ></co-input-text>\n  ",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputSearchComponent.propDecorators = {
-        placeholder: [{ type: core.Input }],
-        search: [{ type: core.Output }],
-        useLeftIcon: [{ type: core.Input }],
-        useRightIcon: [{ type: core.Input }],
-        noIcon: [{ type: core.HostBinding, args: ['class.no-icon',] }, { type: core.Input }],
-        isSmall: [{ type: core.HostBinding, args: ['class.is-small',] }, { type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-input-search',] }]
+        placeholder: [{ type: i0.Input }],
+        search: [{ type: i0.Output }],
+        useLeftIcon: [{ type: i0.Input }],
+        useRightIcon: [{ type: i0.Input }],
+        noIcon: [{ type: i0.HostBinding, args: ['class.no-icon',] }, { type: i0.Input }],
+        isSmall: [{ type: i0.HostBinding, args: ['class.is-small',] }, { type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-search',] }]
     };
     __decorate([
         InputBoolean()
@@ -7971,7 +7979,7 @@
         return InputSearchModule;
     }());
     InputSearchModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         IconModule,
@@ -8004,31 +8012,31 @@
         return InputTextareaComponent;
     }(BaseInputComponent));
     InputTextareaComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     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,
-                            useExisting: core.forwardRef(function () { return InputTextareaComponent; })
+                            useExisting: i0.forwardRef(function () { return InputTextareaComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: InputTextareaComponent
                         }],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     InputTextareaComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     InputTextareaComponent.propDecorators = {
-        placeholder: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-textarea",] }],
-        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }]
+        placeholder: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-input-textarea",] }],
+        hasOwnLabel: [{ type: i0.HostBinding, args: ["class.has-own-label",] }]
     };
 
     var InputTextareaModule = /** @class */ (function () {
@@ -8037,7 +8045,7 @@
         return InputTextareaModule;
     }());
     InputTextareaModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         forms.FormsModule,
@@ -8096,41 +8104,41 @@
         return MultiSelectListComponent;
     }(BaseInputComponent));
     MultiSelectListComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-multi-select-list",
                     template: "\n    <ejs-multiselect\n      [dataSource]=\"collection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"model\"\n      [mode]=\"mode\"\n      [fields]=\"fields\"\n      [readonly]=\"readonly\"\n      [itemTemplate]=\"itemTemplate\"\n      [headerTemplate]=\"headerTemplate\"\n      [valueTemplate]=\"valueTemplate\"\n      [footerTemplate]=\"footerTemplate\"\n      [selectAllText]=\"'Select All'\"\n      [showSelectAll]=showSelectAll\n      [ngModel]=\"model\"\n      (ngModelChange)=\"handleModelChange($event)\"\n      (valueChange)=\"handleModelChange($event)\"\n    ></ejs-multiselect>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [
                         ej2AngularDropdowns.CheckBoxSelectionService,
                         {
                             provide: COMPONENT_INTERFACE_NAME,
-                            useExisting: core.forwardRef(function () { return MultiSelectListComponent; })
+                            useExisting: i0.forwardRef(function () { return MultiSelectListComponent; })
                         }, {
                             provide: BaseInputComponent,
                             useExisting: MultiSelectListComponent
                         }
                     ],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     MultiSelectListComponent.ctorParameters = function () { return [
-        { type: FormComponent, decorators: [{ type: core.Optional }] },
-        { type: core.ChangeDetectorRef },
-        { type: core.ComponentFactoryResolver },
+        { type: FormComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     MultiSelectListComponent.propDecorators = {
-        collection: [{ type: core.Input }],
-        fields: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        itemTemplate: [{ type: core.Input }],
-        headerTemplate: [{ type: core.Input }],
-        valueTemplate: [{ type: core.Input }],
-        footerTemplate: [{ type: core.Input }],
-        showSelectAll: [{ type: core.Input }],
-        showCheckbox: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-multi-select-list",] }]
+        collection: [{ type: i0.Input }],
+        fields: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        itemTemplate: [{ type: i0.Input }],
+        headerTemplate: [{ type: i0.Input }],
+        valueTemplate: [{ type: i0.Input }],
+        footerTemplate: [{ type: i0.Input }],
+        showSelectAll: [{ type: i0.Input }],
+        showCheckbox: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-multi-select-list",] }]
     };
 
     var MultiSelectListModule = /** @class */ (function () {
@@ -8139,7 +8147,7 @@
         return MultiSelectListModule;
     }());
     MultiSelectListModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         BaseModule,
                         common.CommonModule,
@@ -8164,14 +8172,14 @@
             this.allowNumberFormatting = true;
             this.allowCalculatedField = false;
             this.height = "100%";
-            this.saveReportClick = new core.EventEmitter();
-            this.loadReportClick = new core.EventEmitter();
-            this.fetchReportClick = new core.EventEmitter();
-            this.renameReportClick = new core.EventEmitter();
-            this.removeReportClick = new core.EventEmitter();
-            this.newReportClick = new core.EventEmitter();
-            this.beforeToolbarRenderClick = new core.EventEmitter();
-            this.enginePopulated = new core.EventEmitter();
+            this.saveReportClick = new i0.EventEmitter();
+            this.loadReportClick = new i0.EventEmitter();
+            this.fetchReportClick = new i0.EventEmitter();
+            this.renameReportClick = new i0.EventEmitter();
+            this.removeReportClick = new i0.EventEmitter();
+            this.newReportClick = new i0.EventEmitter();
+            this.beforeToolbarRenderClick = new i0.EventEmitter();
+            this.enginePopulated = new i0.EventEmitter();
         }
         CoPivotComponent.prototype.showClass = function () {
             return true;
@@ -8227,39 +8235,39 @@
         return CoPivotComponent;
     }());
     CoPivotComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-pivot',
                     template: "\n    <ejs-pivotview\n        #pivot\n        id=\"Pivot\"\n        [dataSourceSettings]=\"dataSourceSettings\"\n        [gridSettings]=\"gridSettings\"\n        [showGroupingBar]=\"showGroupingBar\"\n        [allowGrouping]=\"allowGrouping\"\n        [enablePersistence]=\"enablePersistence\"\n        [showFieldList]=\"showFieldList\"\n        [showToolbar]=\"showToolbar\"\n        [toolbar]=\"toolbarOptions\"\n        [allowExcelExport]=\"allowExcelExport\"\n        [allowConditionalFormatting]=\"allowConditionalFormatting\"\n        [allowNumberFormatting]=\"allowNumberFormatting\"\n        [allowPdfExport]=\"allowPdfExport\"\n        [allowCalculatedField]=\"allowCalculatedField\"\n        [height]=\"height\"\n        (saveReport)=\"saveReport($event)\"\n        (loadReport)=\"loadReport($event)\"\n        (fetchReport)=\"fetchReport($event)\"\n        (renameReport)=\"renameReport($event)\"\n        (removeReport)=\"removeReport($event)\"\n        (newReport)=\"newReport()\"\n        (toolbarRender)=\"beforeToolbarRender($event)\"\n        (enginePopulated)=\"hanldeEnginePopulated($event)\"\n    >\n    </ejs-pivotview>\n  ",
                     providers: [ej2AngularPivotview.GroupingBarService, ej2AngularPivotview.GroupingService, ej2AngularPivotview.ToolbarService, ej2AngularPivotview.ConditionalFormattingService, ej2AngularPivotview.FieldListService, ej2AngularPivotview.NumberFormattingService],
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     CoPivotComponent.ctorParameters = function () { return []; };
     CoPivotComponent.propDecorators = {
-        pivot: [{ type: core.ViewChild, args: ['pivot', { static: false },] }],
-        dataSourceSettings: [{ type: core.Input }],
-        gridSettings: [{ type: core.Input }],
-        toolbarOptions: [{ type: core.Input }],
-        showGroupingBar: [{ type: core.Input }],
-        allowGrouping: [{ type: core.Input }],
-        enablePersistence: [{ type: core.Input }],
-        showFieldList: [{ type: core.Input }],
-        showToolbar: [{ type: core.Input }],
-        allowExcelExport: [{ type: core.Input }],
-        allowPdfExport: [{ type: core.Input }],
-        allowConditionalFormatting: [{ type: core.Input }],
-        allowNumberFormatting: [{ type: core.Input }],
-        allowCalculatedField: [{ type: core.Input }],
-        height: [{ type: core.Input }],
-        saveReportClick: [{ type: core.Output }],
-        loadReportClick: [{ type: core.Output }],
-        fetchReportClick: [{ type: core.Output }],
-        renameReportClick: [{ type: core.Output }],
-        removeReportClick: [{ type: core.Output }],
-        newReportClick: [{ type: core.Output }],
-        beforeToolbarRenderClick: [{ type: core.Output }],
-        enginePopulated: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-pivot",] }]
+        pivot: [{ type: i0.ViewChild, args: ['pivot', { static: false },] }],
+        dataSourceSettings: [{ type: i0.Input }],
+        gridSettings: [{ type: i0.Input }],
+        toolbarOptions: [{ type: i0.Input }],
+        showGroupingBar: [{ type: i0.Input }],
+        allowGrouping: [{ type: i0.Input }],
+        enablePersistence: [{ type: i0.Input }],
+        showFieldList: [{ type: i0.Input }],
+        showToolbar: [{ type: i0.Input }],
+        allowExcelExport: [{ type: i0.Input }],
+        allowPdfExport: [{ type: i0.Input }],
+        allowConditionalFormatting: [{ type: i0.Input }],
+        allowNumberFormatting: [{ type: i0.Input }],
+        allowCalculatedField: [{ type: i0.Input }],
+        height: [{ type: i0.Input }],
+        saveReportClick: [{ type: i0.Output }],
+        loadReportClick: [{ type: i0.Output }],
+        fetchReportClick: [{ type: i0.Output }],
+        renameReportClick: [{ type: i0.Output }],
+        removeReportClick: [{ type: i0.Output }],
+        newReportClick: [{ type: i0.Output }],
+        beforeToolbarRenderClick: [{ type: i0.Output }],
+        enginePopulated: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-pivot",] }]
     };
     __decorate([
         InputBoolean()
@@ -8298,7 +8306,7 @@
         return CoPivotModule;
     }());
     CoPivotModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [CoPivotComponent],
                     exports: [
                         CoPivotComponent
@@ -8332,17 +8340,17 @@
         return TextInputPopupComponent;
     }());
     TextInputPopupComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-text-input-popup",
                     template: "\n        <co-input-text [(model)]=\"text\" [label]=\"label\" [noValidation]=\"true\" [initFocus]=\"true\"></co-input-text>\n    "
                 },] }
     ];
     TextInputPopupComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef }
     ]; };
     TextInputPopupComponent.propDecorators = {
-        text: [{ type: core.Input }],
-        label: [{ type: core.Input }]
+        text: [{ type: i0.Input }],
+        label: [{ type: i0.Input }]
     };
 
     /**
@@ -8955,15 +8963,15 @@
         return PopupMessageDisplayComponent;
     }());
     PopupMessageDisplayComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-popup-message-display",
                     template: "\n        <span *ngIf=\"!image\" class=\"message\" [textContent]=\"message\"></span>\n        <img *ngIf=\"image\" [src]=\"message\"/>\n        <ng-container *ngIf=\"details\" label=\"DETAILS\">\n            <div class=\"overflow-y-auto overflow-x-hidden details\">\n                <span class=\"message wrap\" [textContent]=\"details\" style=\"overflow-wrap: break-word;\"></span>\n            </div>\n            <span class=\"details-link\" [textContent]=\"'COPY_MESSAGE_TO_CLIPBOARD'\" (click)=\"handleCopyClick()\"></span>\n        </ng-container>\n    "
                 },] }
     ];
     PopupMessageDisplayComponent.ctorParameters = function () { return []; };
     PopupMessageDisplayComponent.propDecorators = {
-        message: [{ type: core.Input }],
-        details: [{ type: core.Input }]
+        message: [{ type: i0.Input }],
+        details: [{ type: i0.Input }]
     };
 
     // the different types of buttons for the app window component
@@ -9002,7 +9010,7 @@
     // Component that is part of the WindowComponent, and represents the panel with buttons on the bottom of app popups.
     var PopupButtonsComponent = /** @class */ (function () {
         function PopupButtonsComponent() {
-            this.buttonClick = new core.EventEmitter();
+            this.buttonClick = new i0.EventEmitter();
             this.buttons = [PopupButtonGlobals.Ok, PopupButtonGlobals.Cancel];
         }
         PopupButtonsComponent.prototype.ngOnInit = function () {
@@ -9027,7 +9035,7 @@
         return PopupButtonsComponent;
     }());
     PopupButtonsComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-popup-buttons',
                     template: "\n        <div class=\"popup-buttons\">\n            <co-button\n                *ngFor=\"let button of buttons\"\n                [label]=\"button.label\"\n                [class]=\"button.cssClass\"\n                [disabled]=\"button.disabled\"\n                (click)=\"handleClick($event, button)\"\n            ></co-button>\n        </div>\n    ",
                     styles: [":host{display:flex;justify-content:center}:host co-button:not(:last-child){margin-right:10px}:host .popup-buttons{display:flex}\n"]
@@ -9035,9 +9043,9 @@
     ];
     PopupButtonsComponent.ctorParameters = function () { return []; };
     PopupButtonsComponent.propDecorators = {
-        popupWindow: [{ type: core.Input }],
-        buttonClick: [{ type: core.Output }],
-        firstButton: [{ type: core.ViewChild, args: [ButtonComponent,] }]
+        popupWindow: [{ type: i0.Input }],
+        buttonClick: [{ type: i0.Output }],
+        firstButton: [{ type: i0.ViewChild, args: [ButtonComponent,] }]
     };
 
     var PopupType;
@@ -9174,28 +9182,28 @@
         return PopupWindowShellComponent;
     }());
     PopupWindowShellComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-popup-window-shell",
                     template: "\n    <ng-container *ngIf=\"!isBlank\">\n      <co-button *ngIf=\"popupWindow?.settings.downloadable\" class=\"circle shadowed popup-downloadable\" [iconData]=\"downloadIcon\"\n                 iconClass=\"light\"\n                 (click)=\"onDownloadClick()\"></co-button>\n      <co-button *ngIf=\"!popupWindow?.settings.hideCloseIcon\" class=\"circle shadowed popup-close\" [iconData]=\"closeIcon\"\n                 iconClass=\"light\"\n                 (click)=\"onCloseClick()\"></co-button>\n      <div class=\"popup-wrapper\" *ngIf=\"!isBlank\">\n        <div class=\"popup-title\"><h2 [textContent]=\"popupWindow?.settings.title\"></h2></div>\n        <div class=\"popup-content\" (mousedown)=\"$event.stopImmediatePropagation()\">\n          <ng-template #popupContent></ng-template>\n        </div>\n        <co-popup-buttons [popupWindow]=\"popupWindow\" (buttonClick)=\"onButtonClick($event)\"></co-popup-buttons>\n      </div>\n    </ng-container>\n    <ng-template #popupContent *ngIf=\"isBlank\"></ng-template>\n  ",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{position:fixed;display:flex;top:50%;left:50%;transform:translate(-50%,-50%)}:host.popup-error div.popup-wrapper{background:#CFD0D1}:host.popup-warning .secondary-font{color:#fff}:host.popup-warning div.popup-wrapper{background:#484F60}:host.popup-warning div.popup-title,:host.popup-warning div.popup-content{color:#fff}:host.popup-notification div.popup-wrapper,:host.popup-question div.popup-wrapper{background:#CFD0D1}co-button.popup-close,co-button.popup-downloadable{position:absolute;transform:translateY(-50%)}co-button.popup-close{right:5px}co-button.popup-downloadable{right:45px}.popup-wrapper{padding:30px;border-radius:5px;box-shadow:0 0 13px -2px #0003;background:#CFD0D1;min-width:320px}.popup-wrapper .popup-title{padding-bottom:20px;border-bottom:1px solid #DAD9D9}.popup-wrapper .popup-content{margin-top:20px;margin-bottom:20px;max-height:50vh;max-width:80vw;overflow:auto}\n"]
                 },] }
     ];
     PopupWindowShellComponent.ctorParameters = function () { return [
         { type: IconCacheService },
-        { type: core.ChangeDetectorRef },
-        { type: core.ViewContainerRef }
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ViewContainerRef }
     ]; };
     PopupWindowShellComponent.propDecorators = {
-        popupWindow: [{ type: core.Input }],
-        hasMobileSizings: [{ type: core.Input }, { type: core.HostBinding, args: ["class.mobile-sizings",] }],
-        _viewContainer: [{ type: core.ViewChild, args: ["popupContent", { read: core.ViewContainerRef },] }],
-        _appPopupButtons: [{ type: core.ViewChild, args: [PopupButtonsComponent,] }],
-        isError: [{ type: core.HostBinding, args: ["class.popup-error",] }],
-        isWarning: [{ type: core.HostBinding, args: ["class.popup-warning",] }],
-        isNotification: [{ type: core.HostBinding, args: ["class.popup-notification",] }],
-        isQuestion: [{ type: core.HostBinding, args: ["class.popup-question",] }],
-        isMovable: [{ type: core.HostBinding, args: ["class.movable",] }]
+        popupWindow: [{ type: i0.Input }],
+        hasMobileSizings: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.mobile-sizings",] }],
+        _viewContainer: [{ type: i0.ViewChild, args: ["popupContent", { read: i0.ViewContainerRef },] }],
+        _appPopupButtons: [{ type: i0.ViewChild, args: [PopupButtonsComponent,] }],
+        isError: [{ type: i0.HostBinding, args: ["class.popup-error",] }],
+        isWarning: [{ type: i0.HostBinding, args: ["class.popup-warning",] }],
+        isNotification: [{ type: i0.HostBinding, args: ["class.popup-notification",] }],
+        isQuestion: [{ type: i0.HostBinding, args: ["class.popup-question",] }],
+        isMovable: [{ type: i0.HostBinding, args: ["class.movable",] }]
     };
 
     // Represent the base for app popup windows, with common fields and methods that each popup window has.
@@ -9239,7 +9247,7 @@
     }());
     PopupWindowModel.closeDefaultOutputStr = "PopupWindowModel.closeDefault()";
 
-    var POPUP_WINDOW_DATA = new core.InjectionToken('POPUP_WINDOW_DATA');
+    var POPUP_WINDOW_DATA = new i0.InjectionToken('POPUP_WINDOW_DATA');
 
     // Class responsible for showing popups throughout the application and returning results from user interaction with those popups.
     var PopupShowerService = /** @class */ (function () {
@@ -9313,18 +9321,18 @@
                 parent: this._injector,
                 providers: injectionTokens
             };
-            return core.Injector.create(options);
+            return i0.Injector.create(options);
         };
         return PopupShowerService;
     }());
     PopupShowerService.decorators = [
-        { type: core.Injectable }
+        { type: i0.Injectable }
     ];
     PopupShowerService.ctorParameters = function () { return [
-        { type: core.ComponentFactoryResolver },
-        { type: core.ApplicationRef },
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ApplicationRef },
         { type: overlay.Overlay },
-        { type: core.Injector }
+        { type: i0.Injector }
     ]; };
 
     // for PromptService.promptString
@@ -9525,7 +9533,7 @@
         return PromptService;
     }());
     PromptService.decorators = [
-        { type: core.Injectable }
+        { type: i0.Injectable }
     ];
     PromptService.ctorParameters = function () { return [
         { type: PopupShowerService }
@@ -9548,7 +9556,7 @@
         return PopupModule;
     }());
     PopupModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         InputTextModule,
@@ -9672,31 +9680,31 @@
     }());
     SimpleGridColumnDirective._MinManualResizeWidthPx = 50;
     SimpleGridColumnDirective.decorators = [
-        { type: core.Directive, args: [{
+        { type: i0.Directive, args: [{
                     selector: "co-simple-grid-column"
                 },] }
     ];
     SimpleGridColumnDirective.ctorParameters = function () { return [
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     SimpleGridColumnDirective.propDecorators = {
-        headerTemplate: [{ type: core.ContentChild, args: ['headerTemplate',] }],
-        template: [{ type: core.ContentChild, args: ['template',] }],
-        editTemplate: [{ type: core.ContentChild, args: ['editTemplate',] }],
-        headerText: [{ type: core.Input }],
-        field: [{ type: core.Input }],
-        codeField: [{ type: core.Input }],
-        displayField: [{ type: core.Input }],
-        textAlign: [{ type: core.Input }],
-        format: [{ type: core.Input }],
-        resizable: [{ type: core.Input }],
-        required: [{ type: core.Input }],
-        autoFit: [{ type: core.Input }],
-        width: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        collection: [{ type: core.Input }],
-        order: [{ type: core.Input }],
-        singleColumn: [{ type: core.Input }]
+        headerTemplate: [{ type: i0.ContentChild, args: ['headerTemplate',] }],
+        template: [{ type: i0.ContentChild, args: ['template',] }],
+        editTemplate: [{ type: i0.ContentChild, args: ['editTemplate',] }],
+        headerText: [{ type: i0.Input }],
+        field: [{ type: i0.Input }],
+        codeField: [{ type: i0.Input }],
+        displayField: [{ type: i0.Input }],
+        textAlign: [{ type: i0.Input }],
+        format: [{ type: i0.Input }],
+        resizable: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        autoFit: [{ type: i0.Input }],
+        width: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        collection: [{ type: i0.Input }],
+        order: [{ type: i0.Input }],
+        singleColumn: [{ type: i0.Input }]
     };
 
     var BaseSimpleGridComponent = /** @class */ (function () {
@@ -9713,13 +9721,13 @@
              * (update collection) by itself
              */
             this.emitDragDrop = false;
-            this.onDrop = new core.EventEmitter();
-            this.selectRow = new core.EventEmitter();
-            this.dblClickRow = new core.EventEmitter();
-            this.saveRow = new core.EventEmitter();
-            this.deleteRow = new core.EventEmitter();
-            this.addRow = new core.EventEmitter();
-            this.rowVisible = new core.EventEmitter();
+            this.onDrop = new i0.EventEmitter();
+            this.selectRow = new i0.EventEmitter();
+            this.dblClickRow = new i0.EventEmitter();
+            this.saveRow = new i0.EventEmitter();
+            this.deleteRow = new i0.EventEmitter();
+            this.addRow = new i0.EventEmitter();
+            this.rowVisible = new i0.EventEmitter();
             this.columns = [];
             this.headerColumns = [];
             this._data = [];
@@ -9843,27 +9851,27 @@
         return BaseSimpleGridComponent;
     }());
     BaseSimpleGridComponent.decorators = [
-        { type: core.Directive }
+        { type: i0.Directive }
     ];
     BaseSimpleGridComponent.propDecorators = {
-        content: [{ type: core.ContentChildren, args: [SimpleGridColumnDirective,] }],
-        data: [{ type: core.Input }],
-        dragDropEnabled: [{ type: core.Input }],
-        resizable: [{ type: core.Input }],
-        inlineEdit: [{ type: core.Input }],
-        showToolbar: [{ type: core.Input }],
-        autoAddRow: [{ type: core.Input }],
-        emitDragDrop: [{ type: core.Input }],
-        extraColumns: [{ type: core.Input }],
-        onDrop: [{ type: core.Output }],
-        selectRow: [{ type: core.Output }],
-        dblClickRow: [{ type: core.Output }],
-        saveRow: [{ type: core.Output }],
-        deleteRow: [{ type: core.Output }],
-        addRow: [{ type: core.Output }],
-        rowVisible: [{ type: core.Output }],
-        handleMouseMove: [{ type: core.HostListener, args: ['document:mousemove', ['$event'],] }],
-        handleMouseUp: [{ type: core.HostListener, args: ['document:mouseup', ['$event'],] }]
+        content: [{ type: i0.ContentChildren, args: [SimpleGridColumnDirective,] }],
+        data: [{ type: i0.Input }],
+        dragDropEnabled: [{ type: i0.Input }],
+        resizable: [{ type: i0.Input }],
+        inlineEdit: [{ type: i0.Input }],
+        showToolbar: [{ type: i0.Input }],
+        autoAddRow: [{ type: i0.Input }],
+        emitDragDrop: [{ type: i0.Input }],
+        extraColumns: [{ type: i0.Input }],
+        onDrop: [{ type: i0.Output }],
+        selectRow: [{ type: i0.Output }],
+        dblClickRow: [{ type: i0.Output }],
+        saveRow: [{ type: i0.Output }],
+        deleteRow: [{ type: i0.Output }],
+        addRow: [{ type: i0.Output }],
+        rowVisible: [{ type: i0.Output }],
+        handleMouseMove: [{ type: i0.HostListener, args: ['document:mousemove', ['$event'],] }],
+        handleMouseUp: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
     };
 
     var SimpleGridComponent = /** @class */ (function (_super) {
@@ -10166,28 +10174,28 @@
         return SimpleGridComponent;
     }(BaseSimpleGridComponent));
     SimpleGridComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-simple-grid',
                     template: "\n    <co-grid-toolbar *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n                     [showEdit]=\"inlineEdit\"\n                     [showAdd]=\"showAdd\"\n                     [showDelete]=\"showDelete\"\n                     [deleteEnabled]=\"selectedRowIndex > -1\"\n                     (addClick)=\"addNewRow()\"\n                     (editClick)=\"editRow($event)\"\n                     (saveClick)=\"validateAndSave()\"\n                     (cancelClick)=\"cancelEditRow()\"\n                     (deleteClick)=\"removeRow()\"\n    ></co-grid-toolbar>\n    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; let index = index\"\n             [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n             [style.width.px]=\"column.width\"\n             [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n      </colgroup>\n      <thead>\n      <tr>\n        <th scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n          <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\"\n               [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n            <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n              <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #noHeaderTemplate>\n              <div class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n             class=\"simple-grid-drag-drop-list\"\n             [cdkDropListDisabled]=\"!dragDropEnabled\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex)\" (visible)=\"rowVisible.next(row)\">\n          <co-form class=\"simple-grid-row-form\">\n            <ng-container *ngIf=\"isSingleColumnRow(row)\">\n              <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.length\">\n                <co-simple-grid-cell\n                  [column]=\"columns[singleColumnIndex(row)]\"\n                  [row]=\"row\"\n                  [editMode]=\"false\"\n                ></co-simple-grid-cell>\n              </td>\n            </ng-container>\n            <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n              <ng-container *ngFor=\"let column of headerColumns; let columnIndex = index\">\n                <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n                  <co-simple-grid-cell\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n                    [fieldEditMode]=\"editCellIndex === columnIndex\"\n                    (cellClick)=\"handleCellClick(columnIndex)\"\n                  ></co-simple-grid-cell>\n                  <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n                </td>\n              </ng-container>\n            </ng-container>\n          </co-form>\n        </tr>\n      </tbody>\n    </table>\n    <co-pagination-bar *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n                       [itemsPerPage]=\"rowsPerPage\"\n                       [currentPage]=\"currentPage\"\n                       [totalItems]=\"data.length\"\n                       [autoHide]=\"true\"\n                       (previousClick)=\"goToPreviousPage()\"\n                       (nextClick)=\"goToNextPage()\"\n                       (pageClick)=\"setCurrentPage($event)\"\n                        ></co-pagination-bar>\n  ",
                     providers: [
                         FormMasterService
                     ],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     SimpleGridComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
+        { type: i0.ChangeDetectorRef },
         { type: FormMasterService }
     ]; };
     SimpleGridComponent.propDecorators = {
-        headerCells: [{ type: core.ViewChildren, args: ['headerCell',] }],
-        showAdd: [{ type: core.Input }],
-        showDelete: [{ type: core.Input }],
-        rightToolbar: [{ type: core.Input }],
-        rowsPerPage: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-simple-grid',] }],
-        handleKeyDown: [{ type: core.HostListener, args: ['keydown', ['$event'],] }]
+        headerCells: [{ type: i0.ViewChildren, args: ['headerCell',] }],
+        showAdd: [{ type: i0.Input }],
+        showDelete: [{ type: i0.Input }],
+        rightToolbar: [{ type: i0.Input }],
+        rowsPerPage: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-simple-grid',] }],
+        handleKeyDown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }]
     };
 
     var PaginationBarComponent = /** @class */ (function () {
@@ -10199,9 +10207,9 @@
             this.itemsPerPage = 20;
             this.paginationRange = 8;
             this.autoHide = false;
-            this.previousClick = new core.EventEmitter();
-            this.nextClick = new core.EventEmitter();
-            this.pageClick = new core.EventEmitter();
+            this.previousClick = new i0.EventEmitter();
+            this.nextClick = new i0.EventEmitter();
+            this.pageClick = new i0.EventEmitter();
             this._totalItems = 20;
             this.pages = [];
         }
@@ -10310,25 +10318,25 @@
         return PaginationBarComponent;
     }());
     PaginationBarComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-pagination-bar",
                     template: "\n    <ul class=\"pagination\" *ngIf=\"!shouldBeHidden()\">\n      <li *ngIf=\"directionLinks\" class=\"pagination-previous\" [class.disabled]=\"isOnFirstPage()\" (click)=\"onPreviousClick()\">\n        <a [class.disabled]=\"isOnFirstPage()\">{{ previousLabel }}</a>\n      </li>\n      <li *ngFor=\"let page of pages\" [class.current]=\"currentPage === page.value\" (click)=\"onPageClick(page.value)\">\n        <span>{{page.label}}</span>\n      </li>\n      <li *ngIf=\"directionLinks\" class=\"pagination-next\" [class.disabled]=\"isOnLastPage()\" (click)=\"onNextClick()\" >\n        <a [class.disabled]=\"isOnLastPage()\">{{ nextLabel }}</a>\n      </li>\n    </ul>\n    ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     PaginationBarComponent.propDecorators = {
-        directionLinks: [{ type: core.Input }],
-        previousLabel: [{ type: core.Input }],
-        nextLabel: [{ type: core.Input }],
-        currentPage: [{ type: core.Input }],
-        itemsPerPage: [{ type: core.Input }],
-        totalItems: [{ type: core.Input }],
-        paginationRange: [{ type: core.Input }],
-        autoHide: [{ type: core.Input }],
-        previousClick: [{ type: core.Output }],
-        nextClick: [{ type: core.Output }],
-        pageClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-pagination-bar",] }]
+        directionLinks: [{ type: i0.Input }],
+        previousLabel: [{ type: i0.Input }],
+        nextLabel: [{ type: i0.Input }],
+        currentPage: [{ type: i0.Input }],
+        itemsPerPage: [{ type: i0.Input }],
+        totalItems: [{ type: i0.Input }],
+        paginationRange: [{ type: i0.Input }],
+        autoHide: [{ type: i0.Input }],
+        previousClick: [{ type: i0.Output }],
+        nextClick: [{ type: i0.Output }],
+        pageClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-pagination-bar",] }]
     };
 
     var PaginationBarModule = /** @class */ (function () {
@@ -10337,7 +10345,7 @@
         return PaginationBarModule;
     }());
     PaginationBarModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule
                     ],
@@ -10443,7 +10451,7 @@
         return PaginatePipe;
     }());
     PaginatePipe.decorators = [
-        { type: core.Pipe, args: [{
+        { type: i0.Pipe, args: [{
                     name: 'paginate',
                     pure: false
                 },] }
@@ -10536,7 +10544,7 @@
     }());
     PaginationService.DEFAULT_ID = "DEFAULT_PAGINATION_ID";
     PaginationService.decorators = [
-        { type: core.Injectable }
+        { type: i0.Injectable }
     ];
     PaginationService.ctorParameters = function () { return []; };
 
@@ -10550,7 +10558,7 @@
             this.nextLabel = 'Volgende pagina';
             this.autoHide = false;
             // Emits the new page number.
-            this.pageChange = new core.EventEmitter();
+            this.pageChange = new i0.EventEmitter();
             this.showClass = true;
             this.totalItems = 1;
             this.itemsPerPage = 20;
@@ -10627,25 +10635,25 @@
         return PaginationComponent;
     }());
     PaginationComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: 'co-pagination',
                     template: "\n    <div class=\"pagination-component-main-wrapper\" *ngIf=\"!shouldBeHidden()\">\n      <div>\n        <ng-content></ng-content>\n      </div>\n\n      <co-pagination-bar\n        [currentPage]=\"getCurrentPage()\"\n        [totalItems]=\"totalItems\"\n        [itemsPerPage]=\"itemsPerPage\"\n        [directionLinks]=\"directionLinks\"\n        [previousLabel]=\"previousLabel\"\n        [nextLabel]=\"nextLabel\"\n        (previousClick)=\"goToPreviousPage()\"\n        (nextClick)=\"goToNextPage()\"\n        (pageClick)=\"setCurrentPage($event)\"\n      ></co-pagination-bar>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     PaginationComponent.ctorParameters = function () { return [
         { type: PaginationService }
     ]; };
     PaginationComponent.propDecorators = {
-        template: [{ type: core.ViewChild, args: ['template',] }],
-        id: [{ type: core.Input }],
-        maxSize: [{ type: core.Input }],
-        directionLinks: [{ type: core.Input }],
-        previousLabel: [{ type: core.Input }],
-        nextLabel: [{ type: core.Input }],
-        autoHide: [{ type: core.Input }],
-        pageChange: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-pagination',] }]
+        template: [{ type: i0.ViewChild, args: ['template',] }],
+        id: [{ type: i0.Input }],
+        maxSize: [{ type: i0.Input }],
+        directionLinks: [{ type: i0.Input }],
+        previousLabel: [{ type: i0.Input }],
+        nextLabel: [{ type: i0.Input }],
+        autoHide: [{ type: i0.Input }],
+        pageChange: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-pagination',] }]
     };
 
     var PaginationModule = /** @class */ (function () {
@@ -10654,7 +10662,7 @@
         return PaginationModule;
     }());
     PaginationModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         PaginationBarModule
@@ -10678,7 +10686,7 @@
             this._changeDetector = _changeDetector;
             this.defaultTextAlign = exports.ColumnAlign.Left;
             this.editMode = false;
-            this.cellClick = new core.EventEmitter();
+            this.cellClick = new i0.EventEmitter();
             this._fieldEditMode = false;
             this._focused = false;
         }
@@ -10801,26 +10809,26 @@
         return SimpleGridCellComponent;
     }());
     SimpleGridCellComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-simple-grid-cell",
                     template: "\n    <div class=\"simple-grid-column-cell-value\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n      <ng-container *ngIf=\"editMode; else noInlineEdit\">\n        <ng-container #editTemplate *ngIf=\"column.editTemplate; else noEditTemplate\"\n                      [ngTemplateOutlet]=\"column.editTemplate\"\n                      [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        <ng-template #noEditTemplate>\n          <ng-container *ngIf=\"column.template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"column.template\"\n                          [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <co-input-text [(model)]=\"row[column.field]\" [required]=\"column.required\"></co-input-text>\n          </ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template #noInlineEdit>\n        <ng-container *ngIf=\"column.template; else noTemplate\">\n          <ng-container [ngTemplateOutlet]=\"column.template\"\n                        [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        </ng-container>\n        <ng-template #noTemplate>\n          <span [textContent]=\"column.getFieldValue(row[column.field])\"></span>\n        </ng-template>\n      </ng-template>\n    </div>\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     SimpleGridCellComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef }
     ]; };
     SimpleGridCellComponent.propDecorators = {
-        editTemplateContent: [{ type: core.ViewChild, args: ["editTemplate", { read: BaseInputComponent },] }],
-        noEditTemplateContent: [{ type: core.ViewChild, args: ["noEditTemplate",] }],
-        noTemplateContent: [{ type: core.ViewChild, args: ["noTemplate",] }],
-        column: [{ type: core.Input }],
-        row: [{ type: core.Input }],
-        editMode: [{ type: core.Input }],
-        fieldEditMode: [{ type: core.Input }],
-        cellClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-simple-grid-cell",] }],
-        handleClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
+        editTemplateContent: [{ type: i0.ViewChild, args: ["editTemplate", { read: BaseInputComponent },] }],
+        noEditTemplateContent: [{ type: i0.ViewChild, args: ["noEditTemplate",] }],
+        noTemplateContent: [{ type: i0.ViewChild, args: ["noTemplate",] }],
+        column: [{ type: i0.Input }],
+        row: [{ type: i0.Input }],
+        editMode: [{ type: i0.Input }],
+        fieldEditMode: [{ type: i0.Input }],
+        cellClick: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-simple-grid-cell",] }],
+        handleClick: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
     };
 
     var ObserveVisibilityDirective = /** @class */ (function () {
@@ -10828,7 +10836,7 @@
             this._element = _element;
             this.debounceTime = 0;
             this.threshold = 0;
-            this.visible = new core.EventEmitter();
+            this.visible = new i0.EventEmitter();
             this._subject = new rxjs.Subject();
         }
         ObserveVisibilityDirective.prototype.ngOnInit = function () {
@@ -10903,17 +10911,17 @@
         return ObserveVisibilityDirective;
     }());
     ObserveVisibilityDirective.decorators = [
-        { type: core.Directive, args: [{
+        { type: i0.Directive, args: [{
                     selector: '[observeVisibility]',
                 },] }
     ];
     ObserveVisibilityDirective.ctorParameters = function () { return [
-        { type: core.ElementRef }
+        { type: i0.ElementRef }
     ]; };
     ObserveVisibilityDirective.propDecorators = {
-        debounceTime: [{ type: core.Input }],
-        threshold: [{ type: core.Input }],
-        visible: [{ type: core.Output }]
+        debounceTime: [{ type: i0.Input }],
+        threshold: [{ type: i0.Input }],
+        visible: [{ type: i0.Output }]
     };
 
     var ObserveVisibilityModule = /** @class */ (function () {
@@ -10922,7 +10930,7 @@
         return ObserveVisibilityModule;
     }());
     ObserveVisibilityModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         ObserveVisibilityDirective
                     ],
@@ -10938,7 +10946,7 @@
         return SimpleGridModule;
     }());
     SimpleGridModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         dragDrop.DragDropModule,
@@ -10978,8 +10986,8 @@
             this.showMoreLabel = 'Show more';
             this.showLessLabel = 'Show less';
             this.noResultsLabel = "No results";
-            this.collectionChange = new core.EventEmitter();
-            this.filterButtonClicked = new core.EventEmitter();
+            this.collectionChange = new i0.EventEmitter();
+            this.filterButtonClicked = new i0.EventEmitter();
             this.filteredCollection = [];
             this.limitTo = 10;
             this.filterText = "";
@@ -11038,7 +11046,10 @@
             this.collectionChange.emit(this.collection);
         };
         FilterItemComponent.prototype.valueSelected = function () {
-            return !!this.collection.find(function (c) { return c.checked; });
+            if (this.collection) {
+                return !!this.collection.find(function (c) { return c.checked; });
+            }
+            return false;
         };
         // Applies filter to the collection.
         FilterItemComponent.prototype.applyFilter = function (text) {
@@ -11090,33 +11101,33 @@
         return FilterItemComponent;
     }());
     FilterItemComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: i0.Component, args: [{
                     selector: "co-filter-item",
-                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (click)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"!singleSelect\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [name]=\"'radiogroup'\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
-                    encapsulation: core.ViewEncapsulation.None
+                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (click)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"!singleSelect\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
     FilterItemComponent.ctorParameters = function () { return [
         { type: IconCacheService }
     ]; };
     FilterItemComponent.propDecorators = {
-        collection: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        initialLimit: [{ type: core.Input }],
-        expanded: [{ type: core.Input }],
-        minSearchCharsToLoadCollection: [{ type: core.Input }],
-        collectionLoadFn: [{ type: core.Input }],
-        customContent: [{ type: core.Input }],
-        showAllResults: [{ type: core.Input }],
-        singleSelect: [{ type: core.Input }],
-        filterButtonLabel: [{ type: core.Input }],
-        searchPlaceholder: [{ type: core.Input }],
-        showMoreLabel: [{ type: core.Input }],
-        showLessLabel: [{ type: core.Input }],
-        noResultsLabel: [{ type: core.Input }],
-        collectionChange: [{ type: core.Output }],
-        filterButtonClicked: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-filter-item",] }]
+        collection: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        initialLimit: [{ type: i0.Input }],
+        expanded: [{ type: i0.Input }],
+        minSearchCharsToLoadCollection: [{ type: i0.Input }],
+        collectionLoadFn: [{ type: i0.Input }],
+        customContent: [{ type: i0.Input }],
+        showAllResults: [{ type: i0.Input }],
+        singleSelect: [{ type: i0.Input }],
+        filterButtonLabel: [{ type: i0.Input }],
+        searchPlaceholder: [{ type: i0.Input }],
+        showMoreLabel: [{ type: i0.Input }],
+        showLessLabel: [{ type: i0.Input }],
+        noResultsLabel: [{ type: i0.Input }],
+        collectionChange: [{ type: i0.Output }],
+        filterButtonClicked: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-filter-item",] }]
     };
 
     // A pipe for prepending strings to other strings in view templates.
@@ -11135,7 +11146,7 @@
         return PrependPipe;
     }());
     PrependPipe.decorators = [
-        { type: core.Pipe, args: [{ name: "prepend" },] }
+        { type: i0.Pipe, args: [{ name: "prepend" },] }
     ];
 
     var PrependPipeModule = /** @class */ (function () {
@@ -11144,7 +11155,7 @@
         return PrependPipeModule;
     }());
     PrependPipeModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         PrependPipe
                     ],
@@ -11160,7 +11171,7 @@
         return FilterItemModule;
     }());
     FilterItemModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     imports: [
                         common.CommonModule,
                         CollapsibleModule,
@@ -11172,7 +11183,8 @@
                         AppendPipeModule,
                         PrependPipeModule,
                         InputTextModule,
-                        InputRadioButtonModule
+                        InputRadioButtonModule,
+                        InputTextModule
                     ],
                     declarations: [
                         FilterItemComponent
@@ -11311,10 +11323,10 @@
         return ClickOutsideMasterService;
     }());
     ClickOutsideMasterService.decorators = [
-        { type: core.Injectable }
+        { type: i0.Injectable }
     ];
     ClickOutsideMasterService.ctorParameters = function () { return [
-        { type: core.NgZone }
+        { type: i0.NgZone }
     ]; };
 
     var ClickOutsideDirective = /** @class */ (function () {
@@ -11323,7 +11335,7 @@
             this.elementRef = elementRef;
             this._ngZone = _ngZone;
             this._master = _master;
-            this.clickOutside = new core.EventEmitter();
+            this.clickOutside = new i0.EventEmitter();
             this._enabled = true;
             this._initialized = false;
             this.onClick = function (event) {
@@ -11375,20 +11387,20 @@
         return ClickOutsideDirective;
     }());
     ClickOutsideDirective.decorators = [
-        { type: core.Directive, args: [{
+        { type: i0.Directive, args: [{
                     selector: "[clickOutside]",
                     exportAs: 'clickOutside'
                 },] }
     ];
     ClickOutsideDirective.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.NgZone },
+        { type: i0.ElementRef },
+        { type: i0.NgZone },
         { type: ClickOutsideMasterService }
     ]; };
     ClickOutsideDirective.propDecorators = {
-        enabled: [{ type: core.Input, args: ["clickOutside",] }],
-        alwaysTrigger: [{ type: core.Input }],
-        clickOutside: [{ type: core.Output }]
+        enabled: [{ type: i0.Input, args: ["clickOutside",] }],
+        alwaysTrigger: [{ type: i0.Input }],
+        clickOutside: [{ type: i0.Output }]
     };
     __decorate([
         InputBoolean()
@@ -11400,7 +11412,7 @@
         return ClickoutsideModule;
     }());
     ClickoutsideModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: i0.NgModule, args: [{
                     declarations: [
                         ClickOutsideDirective
                     ],
@@ -11413,6 +11425,28 @@
                 },] }
     ];
 
+    var ColorSequenceService = /** @class */ (function () {
+        function ColorSequenceService() {
+            this.colors = new Map();
+        }
+        ColorSequenceService.prototype.getRandomColor = function (id) {
+            if (this.colors.has(id)) {
+                return this.colors.get(id);
+            }
+            var randomColor = Math.floor(Math.random() * 16777215).toString(16);
+            var result = '#' + randomColor;
+            this.colors.set(id, result);
+            return result;
+        };
+        return ColorSequenceService;
+    }());
+    ColorSequenceService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ColorSequenceService_Factory() { return new ColorSequenceService(); }, token: ColorSequenceService, providedIn: "root" });
+    ColorSequenceService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+
     /*
      * Public API Surface of corecomponents
      */
@@ -11458,6 +11492,7 @@
     exports.CoToggleModule = CoToggleModule;
     exports.CollapsibleComponent = CollapsibleComponent;
     exports.CollapsibleModule = CollapsibleModule;
+    exports.ColorSequenceService = ColorSequenceService;
     exports.DropDownListComponent = DropDownListComponent;
     exports.DropDownModule = DropDownModule;
     exports.FilterItemComponent = FilterItemComponent;