@colijnit/corecomponents_v12 12.0.17 → 12.0.20

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1,8 +1,28 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('@angular/animations'), require('@angular/platform-browser/animations'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-kanban'), require('@syncfusion/ej2-angular-schedule'), require('@syncfusion/ej2-angular-navigations'), require('@syncfusion/ej2-angular-buttons'), require('@angular/forms'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-grids'), require('@syncfusion/ej2-base'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-pivotview'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/cdk/drag-drop')) :
-    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', '@angular/animations', '@angular/platform-browser/animations', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-kanban', '@syncfusion/ej2-angular-schedule', '@syncfusion/ej2-angular-navigations', '@syncfusion/ej2-angular-buttons', '@angular/forms', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-grids', '@syncfusion/ej2-base', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-pivotview', '@angular/cdk/overlay', '@angular/cdk/portal', '@syncfusion/ej2-angular-richtexteditor', '@angular/cdk/drag-drop'], 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.ng.animations, global.ng.platformBrowser.animations, global.ej2AngularPopups, global.ej2AngularKanban, global.ej2AngularSchedule, global.ej2AngularNavigations, global.ej2AngularButtons, global.ng.forms, global.ej2AngularDropdowns, global.ej2AngularGrids, global.ej2Base, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularPivotview, global.ng.cdk.overlay, global.ng.cdk.portal, global.ej2AngularRichtexteditor, global.ng.cdk.dragDrop));
-})(this, (function (exports, core, common, http, platformBrowser, rxjs, operators, ej2AngularSplitbuttons, animations, animations$1, ej2AngularPopups, ej2AngularKanban, ej2AngularSchedule, ej2AngularNavigations, ej2AngularButtons, forms, ej2AngularDropdowns, ej2AngularGrids, ej2Base, ej2AngularCalendars, ej2AngularInputs, ej2AngularPivotview, overlay, portal, ej2AngularRichtexteditor, dragDrop) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('@angular/animations'), require('@syncfusion/ej2-angular-popups'), require('@syncfusion/ej2-angular-kanban'), require('@syncfusion/ej2-angular-schedule'), require('@syncfusion/ej2-angular-navigations'), require('@syncfusion/ej2-angular-buttons'), require('@angular/forms'), require('@syncfusion/ej2-angular-dropdowns'), require('@syncfusion/ej2-angular-grids'), require('@syncfusion/ej2-base'), require('@syncfusion/ej2-angular-calendars'), require('@syncfusion/ej2-angular-inputs'), require('@syncfusion/ej2-angular-pivotview'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@syncfusion/ej2-angular-richtexteditor'), require('@angular/cdk/drag-drop'), require('three'), require('three/examples/jsm/renderers/CSS3DRenderer'), require('@tweenjs/tween.js')) :
+    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', '@angular/animations', '@syncfusion/ej2-angular-popups', '@syncfusion/ej2-angular-kanban', '@syncfusion/ej2-angular-schedule', '@syncfusion/ej2-angular-navigations', '@syncfusion/ej2-angular-buttons', '@angular/forms', '@syncfusion/ej2-angular-dropdowns', '@syncfusion/ej2-angular-grids', '@syncfusion/ej2-base', '@syncfusion/ej2-angular-calendars', '@syncfusion/ej2-angular-inputs', '@syncfusion/ej2-angular-pivotview', '@angular/cdk/overlay', '@angular/cdk/portal', '@syncfusion/ej2-angular-richtexteditor', '@angular/cdk/drag-drop', 'three', 'three/examples/jsm/renderers/CSS3DRenderer', '@tweenjs/tween.js'], 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.ng.animations, global.ej2AngularPopups, global.ej2AngularKanban, global.ej2AngularSchedule, global.ej2AngularNavigations, global.ej2AngularButtons, global.ng.forms, global.ej2AngularDropdowns, global.ej2AngularGrids, global.ej2Base, global.ej2AngularCalendars, global.ej2AngularInputs, global.ej2AngularPivotview, global.ng.cdk.overlay, global.ng.cdk.portal, global.ej2AngularRichtexteditor, global.ng.cdk.dragDrop, global.three, global.CSS3DRenderer, global.TWEEN));
+})(this, (function (exports, core, common, http, platformBrowser, rxjs, operators, ej2AngularSplitbuttons, animations, ej2AngularPopups, ej2AngularKanban, ej2AngularSchedule, ej2AngularNavigations, ej2AngularButtons, forms, ej2AngularDropdowns, ej2AngularGrids, ej2Base, ej2AngularCalendars, ej2AngularInputs, ej2AngularPivotview, overlay, portal, ej2AngularRichtexteditor, dragDrop, three, CSS3DRenderer, TWEEN) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var TWEEN__namespace = /*#__PURE__*/_interopNamespace(TWEEN);
 
     // @returns true iff given value equals null or equals undefined
     function isNill(value) {
@@ -2586,7 +2606,6 @@
         { type: core.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        animations$1.BrowserAnimationsModule,
                         IconModule
                     ],
                     declarations: [CoDialogComponent],
@@ -3081,18 +3100,43 @@
         };
     }
 
+    var ValidationErrorComponent = /** @class */ (function () {
+        function ValidationErrorComponent(icons) {
+            this.icons = icons;
+            this.Icons = exports.CoreComponentsIcon;
+        }
+        ValidationErrorComponent.prototype.showClass = function () {
+            return true;
+        };
+        return ValidationErrorComponent;
+    }());
+    ValidationErrorComponent.decorators = [
+        { type: core.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
+                },] }
+    ];
+    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',] }]
+    };
+
     /**
      * Abstract base class for all concrete form input components that contain a native <input> element. Provides common data and functionality, such as
      * adding self as a control to the parent form.
      */
     var BaseInputComponent = /** @class */ (function () {
-        function BaseInputComponent(changeDetector, formUserChangeListener, 
-        // @Optional() protected speechInput?: SpeechInputService,
-        ngZoneWrapper, 
-        // @Optional() protected tooltipManager?: AppTooltipDynamicManagerService,
-        elementRef) {
+        function BaseInputComponent(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
             var _this = this;
             this.changeDetector = changeDetector;
+            this.componentFactoryResolver = componentFactoryResolver;
             this.formUserChangeListener = formUserChangeListener;
             this.ngZoneWrapper = ngZoneWrapper;
             this.elementRef = elementRef;
@@ -3150,6 +3194,7 @@
             },
             set: function (value) {
                 this._model = value;
+                this._clearErrorComponent();
             },
             enumerable: false,
             configurable: true
@@ -3301,7 +3346,6 @@
         });
         Object.defineProperty(BaseInputComponent.prototype, "formSubmitted", {
             get: function () {
-                return true;
                 return this.formComponent && this.formComponent.submitted;
             },
             enumerable: false,
@@ -3403,12 +3447,22 @@
             this._modelChangeSub = this.modelChange.subscribe(function (val) {
                 _this.model = val;
             });
+            var iOptions = {
+                trackVisibility: true,
+                // 🆕 Set a minimum delay between notifications
+                delay: 100,
+                // root: document,
+                // rootMargin: "1px",
+                threshold: 1
+            };
+            this.intersectionObserver = new IntersectionObserver(function (entries, observer) { return _this._handleElementPositionChange(entries, observer); }, iOptions);
             // if (this.speechInput) {
             //     this._subscribeToSpeechInput();
             // }
         };
         BaseInputComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
+            this._prepareInput();
             this._updateControlValidatorsAndOwnFlags();
             this._addOrRemoveSelfFromForm();
             if (this.formComponent) {
@@ -3422,7 +3476,13 @@
             }
         };
         BaseInputComponent.prototype.ngOnDestroy = function () {
+            var _this = this;
+            if (this.input) {
+                this.input.removeEventListener('blur', function () { return _this.doBlur(); });
+                this.input.removeEventListener('focus', function () { return _this.doFocus(); });
+            }
             this._destroyed = true;
+            this._clearErrorComponent();
             // if (this.tooltipManager && this.elementRef) {
             //     this.tooltipManager.destroyErrorTooltipOfElement(this.elementRef.nativeElement);
             // }
@@ -3444,7 +3504,21 @@
             // this._removeSelfFromForm();
             this.elementRef = undefined;
             this.changeDetector = undefined;
-            // this.input = undefined;
+            this.input = undefined;
+        };
+        BaseInputComponent.prototype.showValidationError = function (error) {
+            if (this.validationErrorContainer) {
+                if (this._errorValidationComponent) {
+                    this._clearErrorComponent();
+                }
+                var clientRect = this.elementRef.nativeElement.getBoundingClientRect();
+                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
+                this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
+                this._errorValidationComponent.instance.top = clientRect.bottom;
+                this._errorValidationComponent.instance.left = clientRect.left;
+                this._errorValidationComponent.instance.error = error;
+                this.intersectionObserver.observe(this.elementRef.nativeElement);
+            }
         };
         /**
          * Emits a modelChange event with given value, indicating that the model of this form input
@@ -3480,9 +3554,13 @@
                 this.focused = true;
             }
         };
+        BaseInputComponent.prototype.doFocus = function () {
+            this.focused = true;
+            this.focus.next();
+        };
         BaseInputComponent.prototype.doBlur = function () {
-            this.input.blur();
             this.focused = false;
+            this.blur.next();
         };
         BaseInputComponent.prototype.detectChanges = function () {
             if (!this._destroyed) {
@@ -3535,7 +3613,7 @@
             if (notNill(this.forcedMaxLength) || maxLength === this._maxLength) {
                 return;
             }
-            if (maxLength > 0) { // not maxLength is 0
+            if (!isNaN(maxLength)) {
                 this._maxLength = maxLength;
                 this._updateControlValidatorsAndOwnFlags();
             }
@@ -3593,6 +3671,18 @@
                 this.control.updateValueAndValidity();
             }
         };
+        BaseInputComponent.prototype._clearErrorComponent = function () {
+            if (this.validationErrorContainer) {
+                this.validationErrorContainer.clear();
+                if (this._errorValidationComponent) {
+                    this._errorValidationComponent.destroy();
+                    this._errorValidationComponent = undefined;
+                }
+                if (this.elementRef && this.elementRef.nativeElement) {
+                    this.intersectionObserver.unobserve(this.elementRef.nativeElement);
+                }
+            }
+        };
         // whether this.ngModel.control has safe access
         BaseInputComponent.prototype._controlExists = function () {
             return this.ngModel && !!this.control;
@@ -3606,7 +3696,7 @@
             }
         };
         BaseInputComponent.prototype._setNativeMaxLength = function (maxlength) {
-            if (this.input) {
+            if (this.input && !isNaN(maxlength)) {
                 this.input.maxLength = maxlength;
             }
         };
@@ -3652,6 +3742,34 @@
                 this.formComponent.addFormInput(this.myFormInputInstance ? this.myFormInputInstance : this);
             }
         };
+        BaseInputComponent.prototype._prepareInput = function () {
+            var _this = this;
+            if (this.elementRef && this.elementRef.nativeElement) {
+                //try to find input element
+                this.input = this._findInputNode(this.elementRef.nativeElement.children);
+                if (this.input) {
+                    this.input.addEventListener('blur', function () { return _this.doBlur(); });
+                    this.input.addEventListener('focus', function () { return _this.doFocus(); });
+                }
+            }
+        };
+        BaseInputComponent.prototype._findInputNode = function (nodes) {
+            for (var i = 0; i < nodes.length; i++) {
+                var node = nodes[i];
+                if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
+                    return node;
+                }
+                else if (node.children.length > 0) {
+                    return this._findInputNode(node.children);
+                }
+            }
+        };
+        BaseInputComponent.prototype._handleElementPositionChange = function (entries, observer) {
+            if (this._errorValidationComponent && entries && entries.length > 0) {
+                this._errorValidationComponent.instance.top = entries[0].boundingClientRect.bottom;
+                this._errorValidationComponent.instance.left = entries[0].boundingClientRect.left;
+            }
+        };
         return BaseInputComponent;
     }());
     BaseInputComponent.BaseFormInputComponentIndex = 0;
@@ -3662,11 +3780,14 @@
     ];
     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 }] }
     ]; };
     BaseInputComponent.propDecorators = {
+        validationErrorContainer: [{ type: core.ViewChild, args: ["validationError", { read: core.ViewContainerRef },] }],
+        _ngModel: [{ type: core.ViewChild, args: [forms.NgModel, { static: true },] }],
         model: [{ type: core.Input }],
         label: [{ type: core.Input }],
         noValidation: [{ type: core.Input }],
@@ -3696,8 +3817,7 @@
         modelChange: [{ type: core.Output }],
         userModelChange: [{ type: core.Output }],
         hiddenChange: [{ type: core.Output }],
-        _ngModel: [{ type: core.ViewChild, args: [forms.NgModel, { static: true },] }],
-        focused: [{ type: core.HostBinding, args: ["class.focused",] }],
+        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",] }],
         noTriangleGraphic: [{ type: core.Input }],
@@ -3749,70 +3869,6 @@
         InputBoolean()
     ], BaseInputComponent.prototype, "noFormGroupControl", void 0);
 
-    var DropDownListComponent = /** @class */ (function (_super) {
-        __extends(DropDownListComponent, _super);
-        function DropDownListComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            /**
-             * In the form { text: 'name', value: 'id' }
-             * Where 'text' is showing in the dropdown and 'id' used for the model binding
-             */
-            _this.fields = {};
-            return _this;
-        }
-        DropDownListComponent.prototype.showClass = function () {
-            return true;
-        };
-        DropDownListComponent.prototype.handleValueChanged = function (value) {
-            if (value !== this.model) {
-                this.modelChange.next(value);
-            }
-        };
-        return DropDownListComponent;
-    }(BaseInputComponent));
-    DropDownListComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: "co-drop-down-list",
-                    template: "\n    <ejs-dropdownlist\n      [dataSource]=\"collection\"\n      [value]=\"model\"\n      [fields]=\"fields\"\n      [placeholder]=\"placeHolder\"\n      [cssClass]=\"'co-drop-down-list'\"\n      [readonly]=\"readonly\"\n      [itemTemplate]=\"itemTemplate\"\n      [headerTemplate]=\"headerTemplate\"\n      [valueTemplate]=\"valueTemplate\"\n      (valueChange)=\"handleValueChanged($event)\"\n    >\n    </ejs-dropdownlist>\n  ",
-                    providers: [
-                        ej2AngularDropdowns.CheckBoxSelectionService,
-                        {
-                            provide: COMPONENT_INTERFACE_NAME,
-                            useExisting: core.forwardRef(function () { return DropDownListComponent; })
-                        }
-                    ],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None
-                },] }
-    ];
-    DropDownListComponent.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 }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-drop-down-list",] }]
-    };
-
-    var DropDownModule = /** @class */ (function () {
-        function DropDownModule() {
-        }
-        return DropDownModule;
-    }());
-    DropDownModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        BaseModule,
-                        common.CommonModule,
-                        ej2AngularDropdowns.DropDownListModule,
-                        ej2AngularDropdowns.MultiSelectModule
-                    ],
-                    declarations: [DropDownListComponent],
-                    exports: [DropDownListComponent]
-                },] }
-    ];
-
     // Represents a positional model
     var ElementPosition = /** @class */ (function () {
         function ElementPosition(top, right, bottom, left) {
@@ -4061,33 +4117,15 @@
                         for (var errorKey in this.formGroup.controls[controlKey].errors) {
                             if (this.formGroup.controls[controlKey].errors.hasOwnProperty(errorKey)) {
                                 var error = this.formGroup.controls[controlKey].errors[errorKey];
-                                var errorText = this._getValidationErrorText(error);
-                                var controlElement = comp.elementRef.nativeElement;
                                 if (controlKey === key) {
-                                    // this._tooltipService.spawnErrorTooltip(controlElement, errorText, this.keepInView ? this.keepInView : undefined);
+                                    comp.showValidationError(error);
                                 }
-                                comp.redErrorBackground = true;
                             }
                         }
                     }
                 }
             }
         };
-        FormComponent.prototype._getValidationErrorText = function (validationError) {
-            return "";
-            if (StringUtils.IsString(validationError)) {
-                // return this._dictionary.get(validationError);
-            }
-            else if (validationError.message) {
-                if (validationError.placeholder) {
-                    // see e.g. maxStringLengthValidator, where we return this {message: string, placeholder: string} object shape as validation error obj
-                    // return this._dictionary.get(validationError.message, true, validationError.placeholder);
-                }
-                else {
-                    // return this._dictionary.get(validationError.message);
-                }
-            }
-        };
         FormComponent.prototype._setFirstInvalidElementOnMaster = function () {
             var elements = Array.from(this._componentMap);
             var len = elements.length;
@@ -4124,6 +4162,85 @@
         onEnterKey: [{ type: core.HostListener, args: ['keyup.enter', ['$event'],] }]
     };
 
+    var DropDownListComponent = /** @class */ (function (_super) {
+        __extends(DropDownListComponent, _super);
+        function DropDownListComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+            _this.formComponent = formComponent;
+            _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
+            _this.formUserChangeListener = formUserChangeListener;
+            _this.ngZoneWrapper = ngZoneWrapper;
+            _this.elementRef = elementRef;
+            /**
+             * In the form { text: 'name', value: 'id' }
+             * Where 'text' is showing in the dropdown and 'id' used for the model binding
+             */
+            _this.fields = {};
+            _super.prototype._markAsOnPush.call(_this);
+            return _this;
+        }
+        DropDownListComponent.prototype.showClass = function () {
+            return true;
+        };
+        DropDownListComponent.prototype.handleValueChanged = function (value) {
+            if (value !== this.model) {
+                this.modelChange.next(value);
+            }
+        };
+        return DropDownListComponent;
+    }(BaseInputComponent));
+    DropDownListComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-drop-down-list",
+                    template: "\n    <ejs-dropdownlist\n      [dataSource]=\"collection\"\n      [value]=\"model\"\n      [fields]=\"fields\"\n      [placeholder]=\"placeholder\"\n      [readonly]=\"readonly\"\n      [itemTemplate]=\"itemTemplate\"\n      [headerTemplate]=\"headerTemplate\"\n      [valueTemplate]=\"valueTemplate\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"modelChange.emit($event)\"\n      (valueChange)=\"handleValueChanged($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; })
+                        }
+                    ],
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    DropDownListComponent.ctorParameters = function () { return [
+        { type: FormComponent, decorators: [{ type: core.Optional }] },
+        { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
+        { type: FormInputUserModelChangeListenerService },
+        { type: NgZoneWrapperService },
+        { type: core.ElementRef }
+    ]; };
+    DropDownListComponent.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 }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-drop-down-list",] }]
+    };
+
+    var DropDownModule = /** @class */ (function () {
+        function DropDownModule() {
+        }
+        return DropDownModule;
+    }());
+    DropDownModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        BaseModule,
+                        common.CommonModule,
+                        ej2AngularDropdowns.DropDownListModule,
+                        ej2AngularDropdowns.MultiSelectModule,
+                        forms.FormsModule
+                    ],
+                    declarations: [DropDownListComponent],
+                    exports: [DropDownListComponent]
+                },] }
+    ];
+
     var FormModule = /** @class */ (function () {
         function FormModule() {
         }
@@ -4518,9 +4635,15 @@
 
     var InputCheckboxComponent = /** @class */ (function (_super) {
         __extends(InputCheckboxComponent, _super);
-        function InputCheckboxComponent(formComponent, changeDetector, formUserChangeListener, ngZoneWrapper) {
-            var _this = _super.call(this, changeDetector, formUserChangeListener, ngZoneWrapper) || this;
+        function InputCheckboxComponent(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
+            _this.iconCacheService = iconCacheService;
+            _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
+            _this.formUserChangeListener = formUserChangeListener;
+            _this.ngZoneWrapper = ngZoneWrapper;
+            _this.elementRef = elementRef;
             _this.modelChange = new core.EventEmitter();
             return _this;
         }
@@ -4552,9 +4675,12 @@
     ];
     InputCheckboxComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: core.Optional }] },
+        { type: IconCacheService },
         { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
-        { type: NgZoneWrapperService }
+        { type: NgZoneWrapperService },
+        { type: core.ElementRef }
     ]; };
     InputCheckboxComponent.propDecorators = {
         name: [{ type: core.Input }],
@@ -4620,10 +4746,11 @@
 
     var InputCheckboxMultiSelectComponent = /** @class */ (function (_super) {
         __extends(InputCheckboxMultiSelectComponent, _super);
-        function InputCheckboxMultiSelectComponent(formComponent, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputCheckboxMultiSelectComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
             _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
@@ -4633,16 +4760,6 @@
         InputCheckboxMultiSelectComponent.prototype.showClass = function () {
             return true;
         };
-        InputCheckboxMultiSelectComponent.prototype.ngOnDestroy = function () {
-            this.elementRef = undefined;
-            _super.prototype.ngOnDestroy.call(this);
-        };
-        InputCheckboxMultiSelectComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        InputCheckboxMultiSelectComponent.prototype.ngAfterViewInit = function () {
-            _super.prototype.ngAfterViewInit.call(this);
-        };
         return InputCheckboxMultiSelectComponent;
     }(BaseInputComponent));
     InputCheckboxMultiSelectComponent.decorators = [
@@ -4660,6 +4777,7 @@
     InputCheckboxMultiSelectComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: core.Optional }] },
         { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
         { type: core.ElementRef }
@@ -4695,30 +4813,22 @@
 
     var InputComboBoxComponent = /** @class */ (function (_super) {
         __extends(InputComboBoxComponent, _super);
-        function InputComboBoxComponent(formComponent, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputComboBoxComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
             _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
             _this.shopPopup = true;
+            _this.customHeight = true;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
         InputComboBoxComponent.prototype.showClass = function () {
             return true;
         };
-        InputComboBoxComponent.prototype.ngOnDestroy = function () {
-            this.elementRef = undefined;
-            _super.prototype.ngOnDestroy.call(this);
-        };
-        InputComboBoxComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        InputComboBoxComponent.prototype.ngAfterViewInit = function () {
-            _super.prototype.ngAfterViewInit.call(this);
-        };
         InputComboBoxComponent.prototype.onFocus = function () {
             if (this.shopPopup && this.model === undefined) {
                 this.combo.showPopup();
@@ -4729,30 +4839,31 @@
     InputComboBoxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-combo-box",
-                    template: "\n        <ejs-combobox #combo [dataSource]=\"source\"\n                      [fields]=\"fields\"\n                      [placeholder]=\"placeholder\"\n                      [autofill]=\"true\"\n                      [ngModel]=\"model\"\n                      (ngModelChange)=\"modelChange.emit($event)\"\n                      (focus)=\"onFocus()\"\n                      showClearButton=\"true\"\n                      floatLabelType=\"Auto\"\n        >\n        </ejs-combobox>\n    ",
+                    template: "\n    <ejs-combobox #combo [dataSource]=\"collection\"\n                  [fields]=\"fields\"\n                  [placeholder]=\"placeholder\"\n                  [autofill]=\"true\"\n                  [ngModel]=\"model\"\n                  (ngModelChange)=\"modelChange.emit($event)\"\n                  (focus)=\"onFocus()\"\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; })
                         }],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     InputComboBoxComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: core.Optional }] },
         { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
         { type: core.ElementRef }
     ]; };
     InputComboBoxComponent.propDecorators = {
         combo: [{ type: core.ViewChild, args: ["combo",] }],
-        source: [{ type: core.Input }],
+        collection: [{ type: core.Input }],
         fields: [{ type: core.Input }],
         selected: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
         shopPopup: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-combo-box",] }]
+        showClass: [{ type: core.HostBinding, args: ["class.co-input-combo-box",] }],
+        customHeight: [{ type: core.HostBinding, args: ["class.custom-height",] }]
     };
 
     var InputComboBoxModule = /** @class */ (function () {
@@ -4777,11 +4888,12 @@
 
     var InputDatePickerComponent = /** @class */ (function (_super) {
         __extends(InputDatePickerComponent, _super);
-        function InputDatePickerComponent(iconCacheService, formComponent, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) || this;
-            _this.iconCacheService = iconCacheService;
+        function InputDatePickerComponent(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
+            _this.iconCacheService = iconCacheService;
             _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
@@ -4830,18 +4942,18 @@
     InputDatePickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-date",
-                    template: "\n    <ejs-datepicker #ejsDatePicker\n                    floatLabelType=\"Auto\"\n                    [format]=\"dateFormat\"\n                    [placeholder]=\"placeholder\"\n                    [ngModel]=\"model\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-datepicker>\n  ",
+                    template: "\n    <ejs-datepicker #ejsDatePicker\n                    floatLabelType=\"Auto\"\n                    [format]=\"dateFormat\"\n                    [placeholder]=\"placeholder\"\n                    [ngModel]=\"model\"\n                    (ngModelChange)=\"modelChange.emit($event)\"\n    ></ejs-datepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME, useExisting: core.forwardRef(function () { return InputDatePickerComponent; })
                         }],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     InputDatePickerComponent.ctorParameters = function () { return [
-        { type: IconCacheService },
         { type: FormComponent, decorators: [{ type: core.Optional }] },
+        { type: IconCacheService },
         { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
         { type: core.ElementRef }
@@ -5210,122 +5322,56 @@
         KeyboardCode.NumpadNine
     ];
 
-    var InputTextType;
-    (function (InputTextType) {
-        InputTextType["Text"] = "text";
-        InputTextType["Email"] = "email";
-    })(InputTextType || (InputTextType = {}));
-
-    var FloatLabelTypeEnum;
-    (function (FloatLabelTypeEnum) {
-        FloatLabelTypeEnum["Never"] = "Never";
-        FloatLabelTypeEnum["Always"] = "Always";
-        FloatLabelTypeEnum["Auto"] = "Auto";
-    })(FloatLabelTypeEnum || (FloatLabelTypeEnum = {}));
-
     var InputTextComponent = /** @class */ (function (_super) {
         __extends(InputTextComponent, _super);
-        function InputTextComponent(formComponent, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) {
-            var _this = _super.call(this, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+        function InputTextComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
             _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
             _this.formUserChangeListener = formUserChangeListener;
             _this.ngZoneWrapper = ngZoneWrapper;
             _this.elementRef = elementRef;
-            _this.floatLabelType = FloatLabelTypeEnum.Auto;
+            _this.Icons = exports.CoreComponentsIcon;
             _this.placeholder = "";
             _this.type = "text";
             _this.showClearButton = undefined;
-            _this.alwaysShowClearIcon = false;
-            _this.alwaysShowClearIconOnFocus = false;
-            _this.noEmailValidation = false;
-            _this.extraIconOnFocusOnly = false;
-            _this.inputType = InputTextType.Text;
-            _this.blur = new core.EventEmitter();
-            _this.inputClick = new core.EventEmitter();
-            _this.extraIconClick = new core.EventEmitter();
-            _this.clearIconClick = new core.EventEmitter();
-            _this.validEmailClick = false;
-            _this.Icons = exports.CoreComponentsIcon;
+            _this.hasOwnLabel = true;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
         InputTextComponent.prototype.showClass = function () {
             return true;
         };
-        InputTextComponent.prototype.ngOnDestroy = function () {
-            this.elementRef = undefined;
-            _super.prototype.ngOnDestroy.call(this);
-        };
-        InputTextComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        InputTextComponent.prototype.ngAfterViewInit = function () {
-            if (this.textBox) {
-                this.changeDetector.detectChanges();
-            }
-            _super.prototype.ngAfterViewInit.call(this);
-        };
-        InputTextComponent.prototype.setSelectionRange = function (range) {
-            if (range && this.input) {
-                this.input.setSelectionRange(range.lowerBound, range.upperBound);
-            }
-        };
         return InputTextComponent;
     }(BaseInputComponent));
     InputTextComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: "co-input-text, co-input-email, co-input-wizard",
-                    template: "\n    <ejs-textbox [floatLabelType]=\"floatLabelType\"\n                 [placeholder]=\"placeholder\"\n                 [type]=\"type\"\n                 [readonly]=\"readonly\"\n                 [ngModel]=\"model\"\n                 [cssClass]=\"cssClass\"\n                 (ngModelChange)=\"modelChange.emit($event)\"\n                 [showClearButton]=\"showClearButton\"\n                 (blur)=\"this.blur.emit()\"\n                 (input)=\"this.inputClick.emit()\"\n    ></ejs-textbox>\n    <ng-content></ng-content>\n  ",
+                    selector: "co-input-text",
+                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     providers: [{
                             provide: COMPONENT_INTERFACE_NAME,
                             useExisting: core.forwardRef(function () { return InputTextComponent; })
                         }],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
     InputTextComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: core.Optional }] },
         { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
         { type: NgZoneWrapperService },
         { type: core.ElementRef }
     ]; };
     InputTextComponent.propDecorators = {
-        textBox: [{ type: core.ViewChild, args: [ej2AngularInputs.TextBoxComponent,] }],
-        floatLabelType: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
         type: [{ type: core.Input }],
         showClearButton: [{ type: core.Input }],
-        cssClass: [{ type: core.Input }],
-        alwaysShowClearIcon: [{ type: core.Input }],
-        alwaysShowClearIconOnFocus: [{ type: core.Input }],
-        noEmailValidation: [{ type: core.Input }],
-        extraIcon: [{ type: core.Input }],
-        extraIconOnFocusOnly: [{ type: core.Input }],
         keyDownWhiteList: [{ type: core.Input }],
-        extraIconClass: [{ type: core.Input }],
-        inputType: [{ type: core.Input }],
-        ngModelOptions: [{ type: core.Input }],
-        blur: [{ type: core.Output }],
-        inputClick: [{ type: core.Output }],
-        extraIconClick: [{ type: core.Output }],
-        clearIconClick: [{ type: core.Output }],
-        showClass: [{ type: core.HostBinding, args: ["class.co-input-text",] }]
-    };
-    __decorate([
-        InputBoolean()
-    ], InputTextComponent.prototype, "alwaysShowClearIcon", void 0);
-    __decorate([
-        InputBoolean()
-    ], InputTextComponent.prototype, "alwaysShowClearIconOnFocus", void 0);
-    __decorate([
-        InputBoolean()
-    ], InputTextComponent.prototype, "noEmailValidation", void 0);
-    __decorate([
-        InputBoolean()
-    ], InputTextComponent.prototype, "extraIconOnFocusOnly", void 0);
+        showClass: [{ type: core.HostBinding, args: ["class.co-input-text",] }],
+        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }]
+    };
 
     // Input values for 'buttonShowMode' of NumberPickerComponent.
     var InputNumberPickerButtonShowMode;
@@ -5338,12 +5384,12 @@
     // A component that lets users pick a number by increasing and decreasing it with buttons, or by typing.
     var InputNumberPickerComponent = /** @class */ (function (_super) {
         __extends(InputNumberPickerComponent, _super);
-        function InputNumberPickerComponent(iconCacheService, _ngZone, changeDetector, formUserChangeListener) {
-            var _this = _super.call(this, changeDetector, formUserChangeListener) || this;
+        function InputNumberPickerComponent(formComponent, iconCacheService, _ngZone, componentFactoryResolver, changeDetector, formUserChangeListener) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener) || this;
+            _this.formComponent = formComponent;
             _this.iconCacheService = iconCacheService;
             _this._ngZone = _ngZone;
-            _this.floatLabelType = FloatLabelTypeEnum.Never;
-            _this.cssClass = "e-outline";
+            _this.componentFactoryResolver = componentFactoryResolver;
             _this.minusIcon = exports.CoreComponentsIcon.MinusSimple;
             _this.plusIcon = exports.CoreComponentsIcon.PlusSimple;
             // Whether to show buttons 'always', 'onFocusOnly', or 'never'
@@ -5596,14 +5642,14 @@
                 },] }
     ];
     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: FormInputUserModelChangeListenerService }
     ]; };
     InputNumberPickerComponent.propDecorators = {
-        floatLabelType: [{ type: core.Input }],
-        cssClass: [{ type: core.Input }],
         model: [{ type: core.Input }],
         min: [{ type: core.Input }],
         step: [{ type: core.Input }],
@@ -5624,6 +5670,26 @@
         InputBoolean()
     ], InputNumberPickerComponent.prototype, "noValidation", void 0);
 
+    var ValidationErrorModule = /** @class */ (function () {
+        function ValidationErrorModule() {
+        }
+        return ValidationErrorModule;
+    }());
+    ValidationErrorModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        IconModule
+                    ],
+                    declarations: [
+                        ValidationErrorComponent
+                    ],
+                    exports: [
+                        ValidationErrorComponent
+                    ]
+                },] }
+    ];
+
     var InputTextModule = /** @class */ (function () {
         function InputTextModule() {
         }
@@ -5638,13 +5704,15 @@
                         IconModule,
                         AppendPipeModule,
                         ej2AngularInputs.TextBoxAllModule,
-                        ej2AngularInputs.NumericTextBoxModule
+                        ej2AngularInputs.NumericTextBoxModule,
+                        ValidationErrorModule
                     ],
-                    schemas: [
-                        core.NO_ERRORS_SCHEMA
+                    declarations: [
+                        InputTextComponent
                     ],
-                    declarations: [InputTextComponent],
-                    exports: [InputTextComponent]
+                    exports: [
+                        InputTextComponent
+                    ]
                 },] }
     ];
 
@@ -5668,9 +5736,15 @@
 
     var InputRadioButtonComponent = /** @class */ (function (_super) {
         __extends(InputRadioButtonComponent, _super);
-        function InputRadioButtonComponent(formComponent, changeDetector, formUserChangeListener, ngZoneWrapper) {
-            var _this = _super.call(this, changeDetector, formUserChangeListener, ngZoneWrapper) || this;
+        function InputRadioButtonComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
             _this.formComponent = formComponent;
+            _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
+            _this.formUserChangeListener = formUserChangeListener;
+            _this.ngZoneWrapper = ngZoneWrapper;
+            _this.elementRef = elementRef;
+            _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
         InputRadioButtonComponent.prototype.showClass = function () {
@@ -5696,8 +5770,10 @@
     InputRadioButtonComponent.ctorParameters = function () { return [
         { type: FormComponent, decorators: [{ type: core.Optional }] },
         { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
         { type: FormInputUserModelChangeListenerService },
-        { type: NgZoneWrapperService }
+        { type: NgZoneWrapperService },
+        { type: core.ElementRef }
     ]; };
     InputRadioButtonComponent.propDecorators = {
         value: [{ type: core.Input }],
@@ -5726,10 +5802,84 @@
                 },] }
     ];
 
+    var InputTextareaComponent = /** @class */ (function (_super) {
+        __extends(InputTextareaComponent, _super);
+        function InputTextareaComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+            _this.formComponent = formComponent;
+            _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
+            _this.formUserChangeListener = formUserChangeListener;
+            _this.ngZoneWrapper = ngZoneWrapper;
+            _this.elementRef = elementRef;
+            _this.placeholder = "";
+            _this.hasOwnLabel = true;
+            _this.customHeight = true;
+            _super.prototype._markAsOnPush.call(_this);
+            return _this;
+        }
+        InputTextareaComponent.prototype.showClass = function () {
+            return true;
+        };
+        return InputTextareaComponent;
+    }(BaseInputComponent));
+    InputTextareaComponent.decorators = [
+        { type: core.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    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    providers: [{
+                            provide: COMPONENT_INTERFACE_NAME,
+                            useExisting: core.forwardRef(function () { return InputTextareaComponent; })
+                        }],
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    InputTextareaComponent.ctorParameters = function () { return [
+        { type: FormComponent, decorators: [{ type: core.Optional }] },
+        { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
+        { type: FormInputUserModelChangeListenerService },
+        { type: NgZoneWrapperService },
+        { type: core.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",] }],
+        customHeight: [{ type: core.HostBinding, args: ['class.custom-height',] }]
+    };
+
+    var InputTextareaModule = /** @class */ (function () {
+        function InputTextareaModule() {
+        }
+        return InputTextareaModule;
+    }());
+    InputTextareaModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.FormsModule,
+                        ValidationErrorModule
+                    ],
+                    declarations: [
+                        InputTextareaComponent
+                    ],
+                    exports: [
+                        InputTextareaComponent
+                    ]
+                },] }
+    ];
+
     var MultiSelectListComponent = /** @class */ (function (_super) {
         __extends(MultiSelectListComponent, _super);
-        function MultiSelectListComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+        function MultiSelectListComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+            _this.formComponent = formComponent;
+            _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
+            _this.formUserChangeListener = formUserChangeListener;
+            _this.ngZoneWrapper = ngZoneWrapper;
+            _this.elementRef = elementRef;
             /**
              * In the form { text: 'name', value: 'id' }
              * Where 'text' is showing in the dropdown and 'id' used for the model binding
@@ -5737,6 +5887,7 @@
             _this.fields = {};
             _this.showSelectAll = true;
             _this.mode = "Default";
+            _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
         Object.defineProperty(MultiSelectListComponent.prototype, "showCheckbox", {
@@ -5751,12 +5902,20 @@
         MultiSelectListComponent.prototype.showClass = function () {
             return true;
         };
+        MultiSelectListComponent.prototype.handleModelChange = function (val) {
+            if (Array.isArray(val)) {
+                if (val.length < 1) {
+                    val = undefined;
+                }
+            }
+            this.modelChange.next(val);
+        };
         return MultiSelectListComponent;
     }(BaseInputComponent));
     MultiSelectListComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-multi-select-list",
-                    template: "\n    <ejs-multiselect\n      [dataSource]=\"collection\"\n      [placeholder]=\"placeHolder\"\n      [value]=\"model\"\n      [mode]=\"mode\"\n      [cssClass]=\"'co-multi-select-list'\"\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      (valueChange)=\"modelChange.emit($event)\"\n    ></ejs-multiselect>\n  ",
+                    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,
                         {
@@ -5764,14 +5923,21 @@
                             useExisting: core.forwardRef(function () { return MultiSelectListComponent; })
                         }
                     ],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
+    MultiSelectListComponent.ctorParameters = function () { return [
+        { type: FormComponent, decorators: [{ type: core.Optional }] },
+        { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
+        { type: FormInputUserModelChangeListenerService },
+        { type: NgZoneWrapperService },
+        { type: core.ElementRef }
+    ]; };
     MultiSelectListComponent.propDecorators = {
         collection: [{ type: core.Input }],
         fields: [{ type: core.Input }],
-        placeHolder: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
         itemTemplate: [{ type: core.Input }],
         headerTemplate: [{ type: core.Input }],
         valueTemplate: [{ type: core.Input }],
@@ -5791,7 +5957,8 @@
                     imports: [
                         BaseModule,
                         common.CommonModule,
-                        ej2AngularDropdowns.MultiSelectModule
+                        ej2AngularDropdowns.MultiSelectModule,
+                        forms.FormsModule
                     ],
                     declarations: [MultiSelectListComponent],
                     exports: [MultiSelectListComponent]
@@ -7283,13 +7450,21 @@
     ej2AngularDropdowns.ListBoxComponent.Inject(ej2AngularDropdowns.CheckBoxSelection);
     var InputListboxComponent = /** @class */ (function (_super) {
         __extends(InputListboxComponent, _super);
-        function InputListboxComponent() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+        function InputListboxComponent(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+            var _this = _super.call(this, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) || this;
+            _this.formComponent = formComponent;
+            _this.changeDetector = changeDetector;
+            _this.componentFactoryResolver = componentFactoryResolver;
+            _this.formUserChangeListener = formUserChangeListener;
+            _this.ngZoneWrapper = ngZoneWrapper;
+            _this.elementRef = elementRef;
             // public set model(value: string[] | number[]) {
             //   this._model = value;
             // }
             _this.collection = [];
+            _this.customHeight = true;
             _this.selectionSettings = { mode: 'Multiple' };
+            _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
         Object.defineProperty(InputListboxComponent.prototype, "singleSelect", {
@@ -7327,14 +7502,21 @@
     InputListboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'co-input-listbox',
-                    template: "\n    <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n    <div class=\"co-input-listbox-content\">\n      <ejs-listbox\n        [ngModel]=\"value\"\n        [dataSource]=\"collection\"\n        [fields]=\"fields\"\n        [selectionSettings]=\"selectionSettings\"\n        (ngModelChange)=\"modelChange.emit($event)\"\n      ></ejs-listbox>\n    </div>\n  ",
+                    template: "\n    <div class=\"co-input-listbox-header\" [textContent]=\"placeholder\"></div>\n    <div class=\"co-input-listbox-content\">\n      <ejs-listbox\n        [ngModel]=\"value\"\n        [dataSource]=\"collection\"\n        [fields]=\"fields\"\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; })
                         }],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
+    InputListboxComponent.ctorParameters = function () { return [
+        { type: FormComponent, decorators: [{ type: core.Optional }] },
+        { type: core.ChangeDetectorRef },
+        { type: core.ComponentFactoryResolver },
+        { type: FormInputUserModelChangeListenerService },
+        { type: NgZoneWrapperService },
+        { type: core.ElementRef }
+    ]; };
     InputListboxComponent.propDecorators = {
         placeholder: [{ type: core.Input }],
         value: [{ type: core.Input }],
@@ -7343,7 +7525,8 @@
         singleSelect: [{ type: core.Input }],
         showCheckbox: [{ type: core.Input }],
         showSelectAll: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-input-listbox',] }]
+        showClass: [{ type: core.HostBinding, args: ['class.co-input-listbox',] }],
+        customHeight: [{ type: core.HostBinding, args: ['class.custom-height',] }]
     };
 
     ej2Base.enableRipple(true);
@@ -7510,6 +7693,377 @@
                 },] }
     ];
 
+    var CarouselItem = /** @class */ (function () {
+        function CarouselItem(options, index, onClick) {
+            var _this = this;
+            var _a, _b;
+            this._options = options || {};
+            this.index = index;
+            var width = ((_a = this._options.tileSize) === null || _a === void 0 ? void 0 : _a.x) || 0;
+            var height = ((_b = this._options.tileSize) === null || _b === void 0 ? void 0 : _b.y) || 0;
+            this._element = document.createElement('div');
+            // this._element.style.backgroundColor = this._options.tileBackgroundColor;
+            this._element.style.width = width + "px";
+            this._element.style.height = height + "px";
+            this._element.addEventListener("click", function () {
+                if (onClick) {
+                    onClick(_this.index);
+                }
+            }, false);
+            this.object = new CSS3DRenderer.CSS3DObject(this._element);
+            var geometry = new three.PlaneBufferGeometry(width, height);
+            this.mesh = new three.Mesh(geometry, options.tileMaterial);
+            this.mesh.castShadow = true;
+        }
+        CarouselItem.prototype.setPosition = function (position) {
+            if (this.mesh) {
+                this.mesh.position.copy(position);
+            }
+            if (this.object) {
+                this.object.position.copy(position);
+            }
+        };
+        CarouselItem.prototype.setContent = function (content) {
+            if (this._element) {
+                // remove any exising tile content before setting new content
+                while (this._element.lastElementChild) {
+                    this._element.removeChild(this._element.lastElementChild);
+                }
+                try {
+                    this._element.appendChild(content);
+                }
+                catch (err) {
+                }
+            }
+        };
+        CarouselItem.prototype.setVisible = function (visible) {
+            if (this.mesh) {
+                this.mesh.visible = visible;
+            }
+            if (this.object) {
+                this.object.visible = visible;
+            }
+        };
+        return CarouselItem;
+    }());
+
+    var Carousel3dComponent = /** @class */ (function () {
+        function Carousel3dComponent() {
+            this.cameraHeight = 50;
+            this.shadow = false;
+            this.selectedIndex = 0;
+            this.indexSelected = new core.EventEmitter();
+            this._cameraZoom = 0;
+            this._backgroundColor = 0xffffff;
+            this._ambientLight = true;
+            this._tileSize = new three.Vector2();
+            this._tileMargin = 20;
+            this._targetPositions = [];
+            this._tileElements = [];
+            this._tileOffset = 0;
+            this._tiles3D = [];
+            this._planeColor = 0xffffff;
+            this._planeHeight = -46;
+            this._spotLightPosition = new three.Vector3(0, 250, -200);
+            this._fullCircle = false;
+            this._initialized = false;
+            this._elementsCreated = false;
+            this.canNavigateLeft = false;
+            this.canNavigateRight = false;
+        }
+        Object.defineProperty(Carousel3dComponent.prototype, "children", {
+            set: function (children) {
+                this._elementsCreated = false;
+                this._tileElements = children.toArray();
+                this._buildCarousel();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Carousel3dComponent.prototype.showClass = function () {
+            return true;
+        };
+        Carousel3dComponent.prototype.ngAfterViewInit = function () {
+            this._buildCarousel();
+        };
+        Carousel3dComponent.prototype.ngOnDestroy = function () {
+            this.canvasContainer = undefined;
+            this.carouselWrapper = undefined;
+            this._clearScenes();
+        };
+        Carousel3dComponent.prototype.handleButtonLeftClick = function () {
+            this._tileOffset -= 1;
+            this._rotate(400);
+        };
+        Carousel3dComponent.prototype.handleButtonRightClick = function () {
+            this._tileOffset += 1;
+            this._rotate(400);
+        };
+        Carousel3dComponent.prototype._buildCarousel = function () {
+            if (!this._initialized) {
+                this._init();
+            }
+            if (this._initialized && !this._elementsCreated) {
+                this._createTiles();
+            }
+            this._checkNavigationButtons();
+        };
+        Carousel3dComponent.prototype._init = function () {
+            var _this = this;
+            if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
+                return;
+            }
+            this._initCamera();
+            this._initScene();
+            this._initRenderer();
+            if (this.shadow) {
+                var geometry = new three.PlaneGeometry(10000, 10000);
+                var material = new three.MeshPhongMaterial({ color: this._planeColor, shininess: 100 });
+                var plane = new three.Mesh(geometry, material);
+                plane.receiveShadow = true;
+                plane.rotation.x = -Math.PI / 2;
+                plane.position.y = this._planeHeight;
+                this._scene.add(plane);
+                var spotLight = new three.SpotLight(0xffffff, 0.5);
+                spotLight.position.copy(this._spotLightPosition);
+                spotLight.castShadow = true;
+                spotLight.shadow.mapSize.width = 512;
+                spotLight.shadow.mapSize.height = 512;
+                spotLight.shadow.camera.near = 50;
+                spotLight.shadow.camera.far = 1200;
+                spotLight.shadow.camera.fov = 30;
+                spotLight.penumbra = 1;
+                this._scene.add(spotLight);
+            }
+            this.carouselWrapper.nativeElement.appendChild(this._rendererCss.domElement);
+            this.canvasContainer.nativeElement.appendChild(this.carouselWrapper.nativeElement);
+            this.canvasContainer.nativeElement.appendChild(this._renderer.domElement);
+            this._render();
+            this._animate();
+            window.addEventListener("resize", function () {
+                _this._resizeCanvasToDisplaySize();
+            }, false);
+            this._initialized = true;
+        };
+        Carousel3dComponent.prototype._initCamera = function () {
+            this._camera = new three.PerspectiveCamera(50, this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight, 1, 10000);
+            this._camera.position.z = 600 - this._cameraZoom;
+            this._camera.position.y = this.cameraHeight;
+            this._camera.lookAt(new three.Vector3());
+        };
+        Carousel3dComponent.prototype._initScene = function () {
+            this._sceneCss = new three.Scene();
+            this._scene = new three.Scene();
+            this._scene.background = new three.Color(this._backgroundColor);
+            if (this._ambientLight) {
+                var light = new three.AmbientLight(0xaaaaaa); // soft white light
+                this._scene.add(light);
+                this._scene.fog = new three.Fog(this._backgroundColor, 70, 2500);
+            }
+        };
+        Carousel3dComponent.prototype._initRenderer = function () {
+            this._rendererCss = new CSS3DRenderer.CSS3DRenderer();
+            this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+            this._rendererCss.domElement.style.position = "absolute";
+            this._renderer = new three.WebGLRenderer({ antialias: true });
+            this._renderer.setPixelRatio(window.devicePixelRatio);
+            this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+            this._renderer.shadowMap.enabled = true;
+        };
+        Carousel3dComponent.prototype._disposeObject = function (obj) {
+            if (obj instanceof three.Mesh) {
+                if (obj.geometry) {
+                    obj.geometry.dispose();
+                }
+                if (obj.material) {
+                    Array.isArray(obj.material) ? obj.material.map(function (m) { return m.dispose(); }) : obj.material.dispose();
+                }
+                obj = undefined;
+            }
+            else {
+                obj.element = undefined;
+                obj = undefined;
+            }
+        };
+        Carousel3dComponent.prototype._clearScenes = function () {
+            var _a, _b;
+            var _this = this;
+            var meshes = this._tiles3D.map(function (t) { return t.mesh; });
+            var cssObjs = this._tiles3D.map(function (t) { return t.object; });
+            (_a = this._scene).remove.apply(_a, __spreadArray([], __read(meshes)));
+            meshes.map(function (m) { return _this._disposeObject(m); });
+            meshes.length = 0;
+            (_b = this._sceneCss).remove.apply(_b, __spreadArray([], __read(cssObjs)));
+            cssObjs.map(function (o) { return _this._disposeObject(o); });
+            cssObjs.length = 0;
+            this._tiles3D.length = 0;
+            this._targetPositions.length = 0;
+        };
+        Carousel3dComponent.prototype._createTiles = function () {
+            var _this = this;
+            this._clearScenes();
+            this._tileSize.x = this.tileWidth;
+            this._tileSize.y = this.tileHeight;
+            var tileWidth = this._tileSize.x + this._tileMargin;
+            var numItems = Math.max(this._tileElements.length, 20);
+            this._fullCircle = this._tileElements.length >= 20;
+            var angleTileDeg = 360 / numItems;
+            var circumference = numItems * tileWidth;
+            var radius = circumference / (Math.PI * 2);
+            var y = this.shadow ? 75 : 45;
+            var len = numItems;
+            var angleDeg = 90;
+            var position = new three.Vector3();
+            for (var i = 0; i < len; i++) {
+                var angle = angleDeg * (Math.PI / 180); // Radians
+                var x = radius * Math.cos(angle);
+                var z = -radius + radius * Math.sin(angle);
+                position.set(x, y, z);
+                this._targetPositions.push(position.clone());
+                if (i < this._tileElements.length) {
+                    var tile = new CarouselItem({ tileSize: this._tileSize }, i, function (idx) { return _this._rotateTo(idx); });
+                    tile.setPosition(position);
+                    tile.setContent(this._tileElements[i].nativeElement);
+                    this._scene.add(tile.mesh);
+                    this._sceneCss.add(tile.object);
+                    this._tiles3D.push(tile);
+                }
+                angleDeg = angleDeg - angleTileDeg; // CW instead of CCW
+            }
+            this._adjustCameraZoom();
+            this._tileOffset = this.selectedIndex;
+            this._rotate(0);
+            this._render();
+        };
+        Carousel3dComponent.prototype._adjustCameraZoom = function () {
+            if (this._tiles3D.length === 0) {
+                return;
+            }
+            var object = this._tiles3D[0].mesh;
+            // offset = offset || 1.15;
+            // get bounding box of object - this will be used to setup controls and camera
+            var boundingBox = new three.Box3();
+            boundingBox.setFromObject(object);
+            var center = new three.Vector3();
+            boundingBox.getCenter(center);
+            var size = new three.Vector3();
+            boundingBox.getSize(size);
+            // get the max side of the bounding box (fits to width OR height as needed )
+            var maxDim = Math.max(size.x, size.y, size.z);
+            var fov = this._camera.fov * (Math.PI / 180);
+            // let cameraZ = Math.abs(maxDim / 4 * Math.tan(fov * 200));
+            var cameraZ = Math.abs((maxDim / 2) / Math.tan(fov / 2));
+            // cameraZ *= offset; // zoom out a little so that objects don't fill the screen
+            this._camera.position.z = cameraZ;
+            this._camera.lookAt(center);
+        };
+        Carousel3dComponent.prototype._checkNavigationButtons = function () {
+            var currentIdx = this._getSelectedIndex();
+            this.canNavigateLeft = (currentIdx > 0) || this._fullCircle;
+            this.canNavigateRight = (currentIdx < this._tileElements.length - 1) || this._fullCircle;
+        };
+        Carousel3dComponent.prototype._animate = function () {
+            var _this = this;
+            TWEEN__namespace.update();
+            setTimeout(function () {
+                _this._renderer.setAnimationLoop(function () { return _this._animate(); });
+            }, 200);
+        };
+        Carousel3dComponent.prototype._getSelectedIndex = function () {
+            return Math.max(0, Math.min(this.selectedIndex, this._tileElements.length - 1));
+        };
+        Carousel3dComponent.prototype._rotate = function (duration) {
+            var _this = this;
+            TWEEN__namespace.removeAll();
+            for (var i = 0; i < this._tiles3D.length; i++) {
+                var tile = this._tiles3D[i];
+                if (Math.abs(this._tileOffset) > this._targetPositions.length) { // full circle
+                    this._tileOffset = this._tileOffset > 0 ? 1 : -1;
+                }
+                var positionIdx = i - this._tileOffset;
+                if (positionIdx > this._targetPositions.length - 1) {
+                    positionIdx = positionIdx - this._targetPositions.length;
+                }
+                else if (positionIdx < 0) {
+                    positionIdx = this._targetPositions.length + positionIdx;
+                }
+                var target = this._targetPositions[positionIdx];
+                new TWEEN__namespace.Tween(tile.object.position)
+                    .to(target, duration)
+                    .easing(TWEEN__namespace.Easing.Quartic.Out)
+                    .start();
+                new TWEEN__namespace.Tween(tile.mesh.position)
+                    .to(target, duration)
+                    .easing(TWEEN__namespace.Easing.Quartic.Out)
+                    .start();
+            }
+            new TWEEN__namespace.Tween()
+                .to({}, duration * 2)
+                .onUpdate(function () {
+                _this._render();
+            })
+                .start();
+            this.selectedIndex = this._tileOffset;
+            this._checkNavigationButtons();
+            this.indexSelected.next(this._getSelectedIndex());
+        };
+        Carousel3dComponent.prototype._rotateTo = function (index) {
+            var current = this._getSelectedIndex();
+            this._tileOffset += index - current;
+            this._rotate(800);
+        };
+        Carousel3dComponent.prototype._resizeCanvasToDisplaySize = function () {
+            this._camera.aspect = this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight;
+            this._camera.updateProjectionMatrix();
+            this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+            this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+            this._render();
+        };
+        Carousel3dComponent.prototype._render = function () {
+            this._rendererCss.render(this._sceneCss, this._camera);
+            this._renderer.render(this._scene, this._camera);
+        };
+        return Carousel3dComponent;
+    }());
+    Carousel3dComponent.decorators = [
+        { type: core.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
+                },] }
+    ];
+    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",] }]
+    };
+
+    var Carousel3dModule = /** @class */ (function () {
+        function Carousel3dModule() {
+        }
+        return Carousel3dModule;
+    }());
+    Carousel3dModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        Carousel3dComponent
+                    ],
+                    exports: [
+                        Carousel3dComponent
+                    ]
+                },] }
+    ];
+
     /*
      * Public API Surface of corecomponents
      */
@@ -7525,6 +8079,8 @@
     exports.ButtonDropDownModule = ButtonDropDownModule;
     exports.ButtonModule = ButtonModule;
     exports.COMPONENT_INTERFACE_NAME = COMPONENT_INTERFACE_NAME;
+    exports.Carousel3dComponent = Carousel3dComponent;
+    exports.Carousel3dModule = Carousel3dModule;
     exports.CoDialogComponent = CoDialogComponent;
     exports.CoDialogModule = CoDialogModule;
     exports.CoDialogPromptComponent = CoDialogPromptComponent;
@@ -7548,6 +8104,7 @@
     exports.DropDownListComponent = DropDownListComponent;
     exports.DropDownModule = DropDownModule;
     exports.FormComponent = FormComponent;
+    exports.FormMasterService = FormMasterService;
     exports.FormModule = FormModule;
     exports.IconCacheService = IconCacheService;
     exports.IconComponent = IconComponent;
@@ -7570,6 +8127,8 @@
     exports.InputRadioButtonModule = InputRadioButtonModule;
     exports.InputTextComponent = InputTextComponent;
     exports.InputTextModule = InputTextModule;
+    exports.InputTextareaComponent = InputTextareaComponent;
+    exports.InputTextareaModule = InputTextareaModule;
     exports.LevelIndicatorComponent = LevelIndicatorComponent;
     exports.LevelIndicatorModule = LevelIndicatorModule;
     exports.MultiSelectListComponent = MultiSelectListComponent;
@@ -7600,14 +8159,15 @@
     exports["ɵm"] = FormInputUserModelChangeListenerService;
     exports["ɵn"] = NgZoneWrapperService;
     exports["ɵo"] = BaseInputComponent;
-    exports["ɵp"] = FormMasterService;
-    exports["ɵq"] = BaseSelectionGridComponent;
-    exports["ɵr"] = BaseInlineEditGridComponent;
-    exports["ɵs"] = BaseToolbarGridComponent;
-    exports["ɵt"] = BaseGridComponent;
-    exports["ɵu"] = AppendPipeModule;
-    exports["ɵv"] = AppendPipe;
-    exports["ɵw"] = PopupShowerService;
+    exports["ɵp"] = BaseSelectionGridComponent;
+    exports["ɵq"] = BaseInlineEditGridComponent;
+    exports["ɵr"] = BaseToolbarGridComponent;
+    exports["ɵs"] = BaseGridComponent;
+    exports["ɵt"] = AppendPipeModule;
+    exports["ɵu"] = AppendPipe;
+    exports["ɵv"] = ValidationErrorModule;
+    exports["ɵw"] = ValidationErrorComponent;
+    exports["ɵx"] = PopupShowerService;
 
     Object.defineProperty(exports, '__esModule', { value: true });