@colijnit/corecomponents_v12 12.0.16 → 12.0.19

package/fesm2015/colijnit-corecomponents_v12.js

@@ -1,4 +1,4 @@
-import { Injectable, Component, Input, HostBinding, NgModule, Optional, SkipSelf, InjectionToken, Directive, ElementRef, NgZone, Inject, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, Output, HostListener, Pipe, ViewChild, ChangeDetectorRef, forwardRef, NO_ERRORS_SCHEMA, ViewContainerRef, Injector, ComponentFactoryResolver, ApplicationRef, ContentChild, TemplateRef, ContentChildren } from '@angular/core';
+import { Injectable, Component, Input, HostBinding, NgModule, Optional, SkipSelf, InjectionToken, Directive, ElementRef, NgZone, Inject, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, Output, HostListener, Pipe, ViewChild, ChangeDetectorRef, ComponentFactoryResolver, ViewContainerRef, forwardRef, NO_ERRORS_SCHEMA, Injector, ApplicationRef, ContentChild, TemplateRef, ContentChildren } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -7,7 +7,6 @@ import { auditTime } from 'rxjs/operators';
 import { __decorate, __awaiter } from 'tslib';
 import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { DialogModule } from '@syncfusion/ej2-angular-popups';
 import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
 import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService, TimelineViewsService, TimelineMonthService, ScheduleModule } from '@syncfusion/ej2-angular-schedule';
@@ -18,12 +17,15 @@ import { CheckBoxSelectionService, DropDownListModule, MultiSelectModule, MultiS
 import { RowDDService, GridModule, PageService, SortService, FilterService, GroupService, ReorderService, ResizeService, ExcelExportService, PdfExportService, EditService, ToolbarService, ColumnChooserService, ColumnMenuService, ContextMenuService } from '@syncfusion/ej2-angular-grids';
 import { enableRipple } from '@syncfusion/ej2-base';
 import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
-import { TextBoxComponent, TextBoxAllModule, NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
+import { TextBoxAllModule, NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
 import { GroupingBarService, GroupingService, ToolbarService as ToolbarService$1, ConditionalFormattingService, FieldListService, NumberFormattingService, PivotViewModule } from '@syncfusion/ej2-angular-pivotview';
 import { OverlayConfig, Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ToolbarService as ToolbarService$2, LinkService, ImageService, HtmlEditorService, RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { PlaneBufferGeometry, Mesh, Vector2, Vector3, PlaneGeometry, MeshPhongMaterial, SpotLight, PerspectiveCamera, Scene, Color, AmbientLight, Fog, WebGLRenderer, Box3 } from 'three';
+import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import * as TWEEN from '@tweenjs/tween.js';
 
 // @returns true iff given value equals null or equals undefined
 function isNill(value) {
@@ -2232,7 +2234,6 @@ CoDialogModule.decorators = [
     { type: NgModule, args: [{
                 imports: [
                     CommonModule,
-                    BrowserAnimationsModule,
                     IconModule
                 ],
                 declarations: [CoDialogComponent],
@@ -2332,10 +2333,7 @@ class CoKanbanComponent {
     }
     ngAfterViewInit() {
         if (this.columns) {
-            setTimeout(() => {
-                this.kanban.columns = this.columns;
-                this.kanban.refreshHeader();
-            }, 1000);
+            this.kanban.columns = this.columns;
         }
     }
     dialogOpen(args) {
@@ -2770,17 +2768,36 @@ function maxStringLengthValidator(length) {
     };
 }
 
+class ValidationErrorComponent {
+    showClass() {
+        return true;
+    }
+}
+ValidationErrorComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-validation-error",
+                template: `
+    <div class="validation-error-content">
+        <div class="validation-error-message" [textContent]="error"></div>
+    </div>
+  `,
+                animations: [],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+ValidationErrorComponent.propDecorators = {
+    error: [{ type: Input }],
+    showClass: [{ type: 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.
  */
 class BaseInputComponent {
-    constructor(changeDetector, formUserChangeListener, 
-    // @Optional() protected speechInput?: SpeechInputService,
-    ngZoneWrapper, 
-    // @Optional() protected tooltipManager?: AppTooltipDynamicManagerService,
-    elementRef) {
+    constructor(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
         this.changeDetector = changeDetector;
+        this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
@@ -2830,6 +2847,7 @@ class BaseInputComponent {
     }
     set model(value) {
         this._model = value;
+        this._clearErrorComponent();
     }
     get model() {
         return this._model;
@@ -2940,7 +2958,6 @@ class BaseInputComponent {
         return this._myFormInputInstance;
     }
     get formSubmitted() {
-        return true;
         return this.formComponent && this.formComponent.submitted;
     }
     get hasNoLabel() {
@@ -2982,6 +2999,16 @@ class BaseInputComponent {
     get isDestroyed() {
         return this._destroyed;
     }
+    showValidationError(error) {
+        if (this.validationErrorContainer) {
+            if (this._errorValidationComponent) {
+                this._clearErrorComponent();
+            }
+            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
+            this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
+            this._errorValidationComponent.instance.error = error;
+        }
+    }
     ngOnInit() {
         this._modelChangeSub = this.modelChange.subscribe((val) => {
             this.model = val;
@@ -3005,6 +3032,7 @@ class BaseInputComponent {
     }
     ngOnDestroy() {
         this._destroyed = true;
+        this._clearErrorComponent();
         // if (this.tooltipManager && this.elementRef) {
         //     this.tooltipManager.destroyErrorTooltipOfElement(this.elementRef.nativeElement);
         // }
@@ -3173,6 +3201,15 @@ class BaseInputComponent {
             this.control.updateValueAndValidity();
         }
     }
+    _clearErrorComponent() {
+        if (this.validationErrorContainer) {
+            this.validationErrorContainer.clear();
+            if (this._errorValidationComponent) {
+                this._errorValidationComponent.destroy();
+                this._errorValidationComponent = undefined;
+            }
+        }
+    }
     // whether this.ngModel.control has safe access
     _controlExists() {
         return this.ngModel && !!this.control;
@@ -3241,11 +3278,13 @@ BaseInputComponent.decorators = [
 ];
 BaseInputComponent.ctorParameters = () => [
     { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService, decorators: [{ type: Optional }] },
     { type: NgZoneWrapperService, decorators: [{ type: Optional }] },
     { type: ElementRef, decorators: [{ type: Optional }] }
 ];
 BaseInputComponent.propDecorators = {
+    validationErrorContainer: [{ type: ViewChild, args: ["validationError", { read: ViewContainerRef },] }],
     model: [{ type: Input }],
     label: [{ type: Input }],
     noValidation: [{ type: Input }],
@@ -3276,7 +3315,7 @@ BaseInputComponent.propDecorators = {
     userModelChange: [{ type: Output }],
     hiddenChange: [{ type: Output }],
     _ngModel: [{ type: ViewChild, args: [NgModel, { static: true },] }],
-    focused: [{ type: HostBinding, args: ["class.focused",] }],
+    focused: [{ type: HostBinding, args: ["class.cc-input-focused",] }],
     formInput: [{ type: HostBinding, args: ["class.form-input",] }],
     customWidth: [{ type: Input }, { type: HostBinding, args: ["class.custom-width",] }],
     noTriangleGraphic: [{ type: Input }],
@@ -3328,78 +3367,6 @@ __decorate([
     InputBoolean()
 ], BaseInputComponent.prototype, "noFormGroupControl", void 0);
 
-class DropDownListComponent extends BaseInputComponent {
-    constructor() {
-        super(...arguments);
-        /**
-         * In the form { text: 'name', value: 'id' }
-         * Where 'text' is showing in the dropdown and 'id' used for the model binding
-         */
-        this.fields = {};
-    }
-    showClass() {
-        return true;
-    }
-    handleValueChanged(value) {
-        if (value !== this.model) {
-            this.modelChange.next(value);
-        }
-    }
-}
-DropDownListComponent.decorators = [
-    { type: Component, args: [{
-                selector: "co-drop-down-list",
-                template: `
-    <ejs-dropdownlist
-      [dataSource]="collection"
-      [value]="model"
-      [fields]="fields"
-      [placeholder]="placeHolder"
-      [cssClass]="'co-drop-down-list'"
-      [readonly]="readonly"
-      [itemTemplate]="itemTemplate"
-      [headerTemplate]="headerTemplate"
-      [valueTemplate]="valueTemplate"
-      (valueChange)="handleValueChanged($event)"
-    >
-    </ejs-dropdownlist>
-  `,
-                providers: [
-                    CheckBoxSelectionService,
-                    {
-                        provide: COMPONENT_INTERFACE_NAME,
-                        useExisting: forwardRef(() => DropDownListComponent)
-                    }
-                ],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-DropDownListComponent.propDecorators = {
-    collection: [{ type: Input }],
-    fields: [{ type: Input }],
-    placeHolder: [{ type: Input }],
-    itemTemplate: [{ type: Input }],
-    headerTemplate: [{ type: Input }],
-    valueTemplate: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-drop-down-list",] }]
-};
-
-class DropDownModule {
-}
-DropDownModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    BaseModule,
-                    CommonModule,
-                    DropDownListModule,
-                    MultiSelectModule
-                ],
-                declarations: [DropDownListComponent],
-                exports: [DropDownListComponent]
-            },] }
-];
-
 // Represents a positional model
 class ElementPosition {
     constructor(top, right, bottom, left) {
@@ -3639,33 +3606,15 @@ class FormComponent {
                     for (const errorKey in this.formGroup.controls[controlKey].errors) {
                         if (this.formGroup.controls[controlKey].errors.hasOwnProperty(errorKey)) {
                             const error = this.formGroup.controls[controlKey].errors[errorKey];
-                            const errorText = this._getValidationErrorText(error);
-                            const controlElement = comp.elementRef.nativeElement;
                             if (controlKey === key) {
-                                // this._tooltipService.spawnErrorTooltip(controlElement, errorText, this.keepInView ? this.keepInView : undefined);
+                                comp.showValidationError(error);
                             }
-                            comp.redErrorBackground = true;
                         }
                     }
                 }
             }
         }
     }
-    _getValidationErrorText(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);
-            }
-        }
-    }
     _setFirstInvalidElementOnMaster() {
         const elements = Array.from(this._componentMap);
         const len = elements.length;
@@ -3701,6 +3650,98 @@ FormComponent.propDecorators = {
     onEnterKey: [{ type: HostListener, args: ['keyup.enter', ['$event'],] }]
 };
 
+class DropDownListComponent extends BaseInputComponent {
+    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+        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._markAsOnPush();
+    }
+    showClass() {
+        return true;
+    }
+    handleValueChanged(value) {
+        if (value !== this.model) {
+            this.modelChange.next(value);
+        }
+    }
+}
+DropDownListComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-drop-down-list",
+                template: `
+    <ejs-dropdownlist
+      [dataSource]="collection"
+      [value]="model"
+      [fields]="fields"
+      [placeholder]="placeholder"
+      [readonly]="readonly"
+      [itemTemplate]="itemTemplate"
+      [headerTemplate]="headerTemplate"
+      [valueTemplate]="valueTemplate"
+      [ngModel]="model"
+      (ngModelChange)="modelChange.emit($event)"
+      (valueChange)="handleValueChanged($event)"
+      showClearButton="true"
+      floatLabelType="Auto"
+    >
+    </ejs-dropdownlist>
+    <div class="required-indicator"></div>
+    <ng-template #validationError></ng-template>
+  `,
+                providers: [
+                    CheckBoxSelectionService,
+                    {
+                        provide: COMPONENT_INTERFACE_NAME,
+                        useExisting: forwardRef(() => DropDownListComponent)
+                    }
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+DropDownListComponent.ctorParameters = () => [
+    { type: FormComponent, decorators: [{ type: Optional }] },
+    { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
+    { type: FormInputUserModelChangeListenerService },
+    { type: NgZoneWrapperService },
+    { type: ElementRef }
+];
+DropDownListComponent.propDecorators = {
+    collection: [{ type: Input }],
+    fields: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    itemTemplate: [{ type: Input }],
+    headerTemplate: [{ type: Input }],
+    valueTemplate: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-drop-down-list",] }]
+};
+
+class DropDownModule {
+}
+DropDownModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    BaseModule,
+                    CommonModule,
+                    DropDownListModule,
+                    MultiSelectModule,
+                    FormsModule
+                ],
+                declarations: [DropDownListComponent],
+                exports: [DropDownListComponent]
+            },] }
+];
+
 class FormModule {
 }
 FormModule.decorators = [
@@ -4077,9 +4118,15 @@ CoGridModule.decorators = [
 ];
 
 class InputCheckboxComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, formUserChangeListener, ngZoneWrapper) {
-        super(changeDetector, formUserChangeListener, ngZoneWrapper);
+    constructor(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
+        this.iconCacheService = iconCacheService;
+        this.changeDetector = changeDetector;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.formUserChangeListener = formUserChangeListener;
+        this.ngZoneWrapper = ngZoneWrapper;
+        this.elementRef = elementRef;
         this.modelChange = new EventEmitter();
     }
     showClass() {
@@ -4116,9 +4163,12 @@ InputCheckboxComponent.decorators = [
 ];
 InputCheckboxComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
+    { type: IconCacheService },
     { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
-    { type: NgZoneWrapperService }
+    { type: NgZoneWrapperService },
+    { type: ElementRef }
 ];
 InputCheckboxComponent.propDecorators = {
     name: [{ type: Input }],
@@ -4174,10 +4224,11 @@ AppendPipeModule.decorators = [
 ];
 
 class InputCheckboxMultiSelectComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
+        this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
@@ -4186,16 +4237,6 @@ class InputCheckboxMultiSelectComponent extends BaseInputComponent {
     showClass() {
         return true;
     }
-    ngOnDestroy() {
-        this.elementRef = undefined;
-        super.ngOnDestroy();
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-    }
 }
 InputCheckboxMultiSelectComponent.decorators = [
     { type: Component, args: [{
@@ -4222,6 +4263,7 @@ InputCheckboxMultiSelectComponent.decorators = [
 InputCheckboxMultiSelectComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
     { type: ElementRef }
@@ -4253,29 +4295,21 @@ InputCheckboxMultiSelectModule.decorators = [
 ];
 
 class InputComboBoxComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
         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._markAsOnPush();
     }
     showClass() {
         return true;
     }
-    ngOnDestroy() {
-        this.elementRef = undefined;
-        super.ngOnDestroy();
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-    }
     onFocus() {
         if (this.shopPopup && this.model === undefined) {
             this.combo.showPopup();
@@ -4286,41 +4320,44 @@ InputComboBoxComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-input-combo-box",
                 template: `
-        <ejs-combobox #combo [dataSource]="source"
-                      [fields]="fields"
-                      [placeholder]="placeholder"
-                      [autofill]="true"
-                      [ngModel]="model"
-                      (ngModelChange)="modelChange.emit($event)"
-                      (focus)="onFocus()"
-                      showClearButton="true"
-                      floatLabelType="Auto"
-        >
-        </ejs-combobox>
-    `,
+    <ejs-combobox #combo [dataSource]="collection"
+                  [fields]="fields"
+                  [placeholder]="placeholder"
+                  [autofill]="true"
+                  [ngModel]="model"
+                  (ngModelChange)="modelChange.emit($event)"
+                  (focus)="onFocus()"
+                  showClearButton="true"
+                  floatLabelType="Auto"
+    >
+    </ejs-combobox>
+    <div class="required-indicator"></div>
+    <ng-template #validationError></ng-template>
+  `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputComboBoxComponent)
                     }],
-                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 InputComboBoxComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
     { type: ElementRef }
 ];
 InputComboBoxComponent.propDecorators = {
     combo: [{ type: ViewChild, args: ["combo",] }],
-    source: [{ type: Input }],
+    collection: [{ type: Input }],
     fields: [{ type: Input }],
     selected: [{ type: Input }],
     placeholder: [{ type: Input }],
     shopPopup: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ["class.co-input-combo-box",] }]
+    showClass: [{ type: HostBinding, args: ["class.co-input-combo-box",] }],
+    customHeight: [{ type: HostBinding, args: ["class.custom-height",] }]
 };
 
 class InputComboBoxModule {
@@ -4341,11 +4378,12 @@ InputComboBoxModule.decorators = [
 ];
 
 class InputDatePickerComponent extends BaseInputComponent {
-    constructor(iconCacheService, formComponent, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, formUserChangeListener, ngZoneWrapper, elementRef);
-        this.iconCacheService = iconCacheService;
+    constructor(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
+        this.iconCacheService = iconCacheService;
         this.changeDetector = changeDetector;
+        this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
@@ -4400,18 +4438,20 @@ InputDatePickerComponent.decorators = [
                     [ngModel]="model"
                     (ngModelChange)="modelChange.emit($event)"
     ></ejs-datepicker>
+    <div class="required-indicator"></div>
+    <ng-template #validationError></ng-template>
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputDatePickerComponent)
                     }],
-                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 InputDatePickerComponent.ctorParameters = () => [
-    { type: IconCacheService },
     { type: FormComponent, decorators: [{ type: Optional }] },
+    { type: IconCacheService },
     { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
     { type: ElementRef }
@@ -4735,132 +4775,65 @@ const NUMBER_INPUTS_KEY_DOWN_WHITE_LIST = [
     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 = {}));
-
 class InputTextComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) {
-        super(changeDetector, formUserChangeListener, ngZoneWrapper, elementRef);
+    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
+        this.componentFactoryResolver = componentFactoryResolver;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
-        this.floatLabelType = FloatLabelTypeEnum.Auto;
+        this.Icons = 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 EventEmitter();
-        this.inputClick = new EventEmitter();
-        this.extraIconClick = new EventEmitter();
-        this.clearIconClick = new EventEmitter();
-        this.validEmailClick = false;
-        this.Icons = CoreComponentsIcon;
+        this.hasOwnLabel = true;
         super._markAsOnPush();
     }
     showClass() {
         return true;
     }
-    ngOnDestroy() {
-        this.elementRef = undefined;
-        super.ngOnDestroy();
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngAfterViewInit() {
-        if (this.textBox) {
-            this.changeDetector.detectChanges();
-        }
-        super.ngAfterViewInit();
-    }
-    setSelectionRange(range) {
-        if (range && this.input) {
-            this.input.setSelectionRange(range.lowerBound, range.upperBound);
-        }
-    }
 }
 InputTextComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-input-text, co-input-email, co-input-wizard",
+                selector: "co-input-text",
                 template: `
-    <ejs-textbox [floatLabelType]="floatLabelType"
-                 [placeholder]="placeholder"
-                 [type]="type"
-                 [readonly]="readonly"
-                 [ngModel]="model"
-                 [cssClass]="cssClass"
-                 (ngModelChange)="modelChange.emit($event)"
-                 [showClearButton]="showClearButton"
-                 (blur)="this.blur.emit()"
-                 (input)="this.inputClick.emit()"
-    ></ejs-textbox>
-    <ng-content></ng-content>
+    <label [textContent]="placeholder"></label>
+    <input [type]="type"
+           [ngModel]="model"
+           [readonly]="readonly"
+           [required]="required"
+           (ngModelChange)="modelChange.emit($event)"
+           (focus)="focused = true"
+           (blur)="focused = false"
+    >
+    <div class="required-indicator"></div>
+    <ng-template #validationError></ng-template>
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputTextComponent)
                     }],
-                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
 InputTextComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
     { type: NgZoneWrapperService },
     { type: ElementRef }
 ];
 InputTextComponent.propDecorators = {
-    textBox: [{ type: ViewChild, args: [TextBoxComponent,] }],
-    floatLabelType: [{ type: Input }],
     placeholder: [{ type: Input }],
     type: [{ type: Input }],
     showClearButton: [{ type: Input }],
-    cssClass: [{ type: Input }],
-    alwaysShowClearIcon: [{ type: Input }],
-    alwaysShowClearIconOnFocus: [{ type: Input }],
-    noEmailValidation: [{ type: Input }],
-    extraIcon: [{ type: Input }],
-    extraIconOnFocusOnly: [{ type: Input }],
     keyDownWhiteList: [{ type: Input }],
-    extraIconClass: [{ type: Input }],
-    inputType: [{ type: Input }],
-    ngModelOptions: [{ type: Input }],
-    blur: [{ type: Output }],
-    inputClick: [{ type: Output }],
-    extraIconClick: [{ type: Output }],
-    clearIconClick: [{ type: Output }],
-    showClass: [{ type: 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: HostBinding, args: ["class.co-input-text",] }],
+    hasOwnLabel: [{ type: HostBinding, args: ["class.has-own-label",] }]
+};
 
 // Input values for 'buttonShowMode' of NumberPickerComponent.
 var InputNumberPickerButtonShowMode;
@@ -4872,12 +4845,12 @@ var InputNumberPickerButtonShowMode;
 
 // A component that lets users pick a number by increasing and decreasing it with buttons, or by typing.
 class InputNumberPickerComponent extends BaseInputComponent {
-    constructor(iconCacheService, _ngZone, changeDetector, formUserChangeListener) {
-        super(changeDetector, formUserChangeListener);
+    constructor(formComponent, iconCacheService, _ngZone, componentFactoryResolver, changeDetector, formUserChangeListener) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener);
+        this.formComponent = formComponent;
         this.iconCacheService = iconCacheService;
         this._ngZone = _ngZone;
-        this.floatLabelType = FloatLabelTypeEnum.Never;
-        this.cssClass = "e-outline";
+        this.componentFactoryResolver = componentFactoryResolver;
         this.minusIcon = CoreComponentsIcon.MinusSimple;
         this.plusIcon = CoreComponentsIcon.PlusSimple;
         // Whether to show buttons 'always', 'onFocusOnly', or 'never'
@@ -5113,14 +5086,14 @@ InputNumberPickerComponent.decorators = [
             },] }
 ];
 InputNumberPickerComponent.ctorParameters = () => [
+    { type: FormComponent, decorators: [{ type: Optional }] },
     { type: IconCacheService, decorators: [{ type: Inject, args: [IconCacheService,] }] },
     { type: NgZone },
+    { type: ComponentFactoryResolver },
     { type: ChangeDetectorRef },
     { type: FormInputUserModelChangeListenerService }
 ];
 InputNumberPickerComponent.propDecorators = {
-    floatLabelType: [{ type: Input }],
-    cssClass: [{ type: Input }],
     model: [{ type: Input }],
     min: [{ type: Input }],
     step: [{ type: Input }],
@@ -5141,6 +5114,22 @@ __decorate([
     InputBoolean()
 ], InputNumberPickerComponent.prototype, "noValidation", void 0);
 
+class ValidationErrorModule {
+}
+ValidationErrorModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                declarations: [
+                    ValidationErrorComponent
+                ],
+                exports: [
+                    ValidationErrorComponent
+                ]
+            },] }
+];
+
 class InputTextModule {
 }
 InputTextModule.decorators = [
@@ -5152,13 +5141,15 @@ InputTextModule.decorators = [
                     IconModule,
                     AppendPipeModule,
                     TextBoxAllModule,
-                    NumericTextBoxModule
+                    NumericTextBoxModule,
+                    ValidationErrorModule
                 ],
-                schemas: [
-                    NO_ERRORS_SCHEMA
+                declarations: [
+                    InputTextComponent
                 ],
-                declarations: [InputTextComponent],
-                exports: [InputTextComponent]
+                exports: [
+                    InputTextComponent
+                ]
             },] }
 ];
 
@@ -5178,9 +5169,15 @@ InputNumberPickerModule.decorators = [
 ];
 
 class InputRadioButtonComponent extends BaseInputComponent {
-    constructor(formComponent, changeDetector, formUserChangeListener, ngZoneWrapper) {
-        super(changeDetector, formUserChangeListener, ngZoneWrapper);
+    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
+        this.changeDetector = changeDetector;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.formUserChangeListener = formUserChangeListener;
+        this.ngZoneWrapper = ngZoneWrapper;
+        this.elementRef = elementRef;
+        super._markAsOnPush();
     }
     showClass() {
         return true;
@@ -5212,8 +5209,10 @@ InputRadioButtonComponent.decorators = [
 InputRadioButtonComponent.ctorParameters = () => [
     { type: FormComponent, decorators: [{ type: Optional }] },
     { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
     { type: FormInputUserModelChangeListenerService },
-    { type: NgZoneWrapperService }
+    { type: NgZoneWrapperService },
+    { type: ElementRef }
 ];
 InputRadioButtonComponent.propDecorators = {
     value: [{ type: Input }],
@@ -5239,9 +5238,89 @@ InputRadioButtonModule.decorators = [
             },] }
 ];
 
+class InputTextareaComponent extends BaseInputComponent {
+    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+        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._markAsOnPush();
+    }
+    showClass() {
+        return true;
+    }
+}
+InputTextareaComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-input-textarea",
+                template: `
+    <label [textContent]="placeholder"></label>
+    <textarea type="textarea"
+              [ngModel]="model"
+              [readonly]="readonly"
+              [required]="required"
+              (ngModelChange)="modelChange.emit($event)"
+              (focus)="focused = true"
+              (blur)="focused = false"
+    ></textarea>
+    <div class="required-indicator"></div>
+    <ng-template #validationError></ng-template>
+  `,
+                providers: [{
+                        provide: COMPONENT_INTERFACE_NAME,
+                        useExisting: forwardRef(() => InputTextareaComponent)
+                    }],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+InputTextareaComponent.ctorParameters = () => [
+    { type: FormComponent, decorators: [{ type: Optional }] },
+    { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
+    { type: FormInputUserModelChangeListenerService },
+    { type: NgZoneWrapperService },
+    { type: ElementRef }
+];
+InputTextareaComponent.propDecorators = {
+    placeholder: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-input-textarea",] }],
+    hasOwnLabel: [{ type: HostBinding, args: ["class.has-own-label",] }],
+    customHeight: [{ type: HostBinding, args: ['class.custom-height',] }]
+};
+
+class InputTextareaModule {
+}
+InputTextareaModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ValidationErrorModule
+                ],
+                declarations: [
+                    InputTextareaComponent
+                ],
+                exports: [
+                    InputTextareaComponent
+                ]
+            },] }
+];
+
 class MultiSelectListComponent extends BaseInputComponent {
-    constructor() {
-        super(...arguments);
+    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+        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
@@ -5249,6 +5328,7 @@ class MultiSelectListComponent extends BaseInputComponent {
         this.fields = {};
         this.showSelectAll = true;
         this.mode = "Default";
+        super._markAsOnPush();
     }
     set showCheckbox(value) {
         if (value) {
@@ -5258,6 +5338,14 @@ class MultiSelectListComponent extends BaseInputComponent {
     showClass() {
         return true;
     }
+    handleModelChange(val) {
+        if (Array.isArray(val)) {
+            if (val.length < 1) {
+                val = undefined;
+            }
+        }
+        this.modelChange.next(val);
+    }
 }
 MultiSelectListComponent.decorators = [
     { type: Component, args: [{
@@ -5265,10 +5353,9 @@ MultiSelectListComponent.decorators = [
                 template: `
     <ejs-multiselect
       [dataSource]="collection"
-      [placeholder]="placeHolder"
+      [placeholder]="placeholder"
       [value]="model"
       [mode]="mode"
-      [cssClass]="'co-multi-select-list'"
       [fields]="fields"
       [readonly]="readonly"
       [itemTemplate]="itemTemplate"
@@ -5277,8 +5364,12 @@ MultiSelectListComponent.decorators = [
       [footerTemplate]="footerTemplate"
       [selectAllText]="'Select All'"
       [showSelectAll]=showSelectAll
-      (valueChange)="modelChange.emit($event)"
+      [ngModel]="model"
+      (ngModelChange)="handleModelChange($event)"
+      (valueChange)="handleModelChange($event)"
     ></ejs-multiselect>
+    <div class="required-indicator"></div>
+    <ng-template #validationError></ng-template>
   `,
                 providers: [
                     CheckBoxSelectionService,
@@ -5287,14 +5378,21 @@ MultiSelectListComponent.decorators = [
                         useExisting: forwardRef(() => MultiSelectListComponent)
                     }
                 ],
-                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+MultiSelectListComponent.ctorParameters = () => [
+    { type: FormComponent, decorators: [{ type: Optional }] },
+    { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
+    { type: FormInputUserModelChangeListenerService },
+    { type: NgZoneWrapperService },
+    { type: ElementRef }
+];
 MultiSelectListComponent.propDecorators = {
     collection: [{ type: Input }],
     fields: [{ type: Input }],
-    placeHolder: [{ type: Input }],
+    placeholder: [{ type: Input }],
     itemTemplate: [{ type: Input }],
     headerTemplate: [{ type: Input }],
     valueTemplate: [{ type: Input }],
@@ -5311,7 +5409,8 @@ MultiSelectListModule.decorators = [
                 imports: [
                     BaseModule,
                     CommonModule,
-                    MultiSelectModule
+                    MultiSelectModule,
+                    FormsModule
                 ],
                 declarations: [MultiSelectListComponent],
                 exports: [MultiSelectListComponent]
@@ -6731,13 +6830,21 @@ CoRichTextEditorModule.decorators = [
 
 ListBoxComponent.Inject(CheckBoxSelection);
 class InputListboxComponent extends BaseInputComponent {
-    constructor() {
-        super(...arguments);
+    constructor(formComponent, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
+        super(changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef);
+        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._markAsOnPush();
     }
     set singleSelect(value) {
         if (value) {
@@ -6772,14 +6879,23 @@ InputListboxComponent.decorators = [
         (ngModelChange)="modelChange.emit($event)"
       ></ejs-listbox>
     </div>
+    <div class="required-indicator"></div>
+    <ng-template #validationError></ng-template>
   `,
                 providers: [{
                         provide: COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputListboxComponent)
                     }],
-                changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
+InputListboxComponent.ctorParameters = () => [
+    { type: FormComponent, decorators: [{ type: Optional }] },
+    { type: ChangeDetectorRef },
+    { type: ComponentFactoryResolver },
+    { type: FormInputUserModelChangeListenerService },
+    { type: NgZoneWrapperService },
+    { type: ElementRef }
+];
 InputListboxComponent.propDecorators = {
     placeholder: [{ type: Input }],
     value: [{ type: Input }],
@@ -6788,7 +6904,8 @@ InputListboxComponent.propDecorators = {
     singleSelect: [{ type: Input }],
     showCheckbox: [{ type: Input }],
     showSelectAll: [{ type: Input }],
-    showClass: [{ type: HostBinding, args: ['class.co-input-listbox',] }]
+    showClass: [{ type: HostBinding, args: ['class.co-input-listbox',] }],
+    customHeight: [{ type: HostBinding, args: ['class.custom-height',] }]
 };
 
 enableRipple(true);
@@ -6973,6 +7090,382 @@ SimpleGridModule.decorators = [
             },] }
 ];
 
+class CarouselItem {
+    constructor(options, index, onClick) {
+        var _a, _b;
+        this._options = options || {};
+        this.index = index;
+        const width = ((_a = this._options.tileSize) === null || _a === void 0 ? void 0 : _a.x) || 0;
+        const 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", () => {
+            if (onClick) {
+                onClick(this.index);
+            }
+        }, false);
+        this.object = new CSS3DObject(this._element);
+        const geometry = new PlaneBufferGeometry(width, height);
+        this.mesh = new Mesh(geometry, options.tileMaterial);
+        this.mesh.castShadow = true;
+    }
+    setPosition(position) {
+        if (this.mesh) {
+            this.mesh.position.copy(position);
+        }
+        if (this.object) {
+            this.object.position.copy(position);
+        }
+    }
+    setContent(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) {
+            }
+        }
+    }
+    setVisible(visible) {
+        if (this.mesh) {
+            this.mesh.visible = visible;
+        }
+        if (this.object) {
+            this.object.visible = visible;
+        }
+    }
+}
+
+class Carousel3dComponent {
+    constructor() {
+        this.cameraHeight = 50;
+        this.shadow = false;
+        this.selectedIndex = 0;
+        this.indexSelected = new EventEmitter();
+        this._cameraZoom = 0;
+        this._backgroundColor = 0xffffff;
+        this._ambientLight = true;
+        this._tileSize = new Vector2();
+        this._tileMargin = 20;
+        this._targetPositions = [];
+        this._tileElements = [];
+        this._tileOffset = 0;
+        this._tiles3D = [];
+        this._planeColor = 0xffffff;
+        this._planeHeight = -46;
+        this._spotLightPosition = new Vector3(0, 250, -200);
+        this._fullCircle = false;
+        this._initialized = false;
+        this._elementsCreated = false;
+        this.canNavigateLeft = false;
+        this.canNavigateRight = false;
+    }
+    set children(children) {
+        this._elementsCreated = false;
+        this._tileElements = children.toArray();
+        this._buildCarousel();
+    }
+    showClass() {
+        return true;
+    }
+    ngAfterViewInit() {
+        this._buildCarousel();
+    }
+    ngOnDestroy() {
+        this.canvasContainer = undefined;
+        this.carouselWrapper = undefined;
+        this._clearScenes();
+    }
+    handleButtonLeftClick() {
+        this._tileOffset -= 1;
+        this._rotate(400);
+    }
+    handleButtonRightClick() {
+        this._tileOffset += 1;
+        this._rotate(400);
+    }
+    _buildCarousel() {
+        if (!this._initialized) {
+            this._init();
+        }
+        if (this._initialized && !this._elementsCreated) {
+            this._createTiles();
+        }
+        this._checkNavigationButtons();
+    }
+    _init() {
+        if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
+            return;
+        }
+        this._initCamera();
+        this._initScene();
+        this._initRenderer();
+        if (this.shadow) {
+            const geometry = new PlaneGeometry(10000, 10000);
+            const material = new MeshPhongMaterial({ color: this._planeColor, shininess: 100 });
+            const plane = new Mesh(geometry, material);
+            plane.receiveShadow = true;
+            plane.rotation.x = -Math.PI / 2;
+            plane.position.y = this._planeHeight;
+            this._scene.add(plane);
+            const spotLight = new 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", () => {
+            this._resizeCanvasToDisplaySize();
+        }, false);
+        this._initialized = true;
+    }
+    _initCamera() {
+        this._camera = new 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 Vector3());
+    }
+    _initScene() {
+        this._sceneCss = new Scene();
+        this._scene = new Scene();
+        this._scene.background = new Color(this._backgroundColor);
+        if (this._ambientLight) {
+            const light = new AmbientLight(0xaaaaaa); // soft white light
+            this._scene.add(light);
+            this._scene.fog = new Fog(this._backgroundColor, 70, 2500);
+        }
+    }
+    _initRenderer() {
+        this._rendererCss = new CSS3DRenderer();
+        this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+        this._rendererCss.domElement.style.position = "absolute";
+        this._renderer = new WebGLRenderer({ antialias: true });
+        this._renderer.setPixelRatio(window.devicePixelRatio);
+        this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+        this._renderer.shadowMap.enabled = true;
+    }
+    _disposeObject(obj) {
+        if (obj instanceof Mesh) {
+            if (obj.geometry) {
+                obj.geometry.dispose();
+            }
+            if (obj.material) {
+                Array.isArray(obj.material) ? obj.material.map(m => m.dispose()) : obj.material.dispose();
+            }
+            obj = undefined;
+        }
+        else {
+            obj.element = undefined;
+            obj = undefined;
+        }
+    }
+    _clearScenes() {
+        const meshes = this._tiles3D.map(t => t.mesh);
+        const cssObjs = this._tiles3D.map(t => t.object);
+        this._scene.remove(...meshes);
+        meshes.map(m => this._disposeObject(m));
+        meshes.length = 0;
+        this._sceneCss.remove(...cssObjs);
+        cssObjs.map(o => this._disposeObject(o));
+        cssObjs.length = 0;
+        this._tiles3D.length = 0;
+        this._targetPositions.length = 0;
+    }
+    _createTiles() {
+        this._clearScenes();
+        this._tileSize.x = this.tileWidth;
+        this._tileSize.y = this.tileHeight;
+        const tileWidth = this._tileSize.x + this._tileMargin;
+        const numItems = Math.max(this._tileElements.length, 20);
+        this._fullCircle = this._tileElements.length >= 20;
+        let angleTileDeg = 360 / numItems;
+        const circumference = numItems * tileWidth;
+        const radius = circumference / (Math.PI * 2);
+        const y = this.shadow ? 75 : 45;
+        const len = numItems;
+        let angleDeg = 90;
+        const position = new Vector3();
+        for (var i = 0; i < len; i++) {
+            const angle = angleDeg * (Math.PI / 180); // Radians
+            const x = radius * Math.cos(angle);
+            const z = -radius + radius * Math.sin(angle);
+            position.set(x, y, z);
+            this._targetPositions.push(position.clone());
+            if (i < this._tileElements.length) {
+                const tile = new CarouselItem({ tileSize: this._tileSize }, i, (idx) => 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();
+    }
+    _adjustCameraZoom() {
+        if (this._tiles3D.length === 0) {
+            return;
+        }
+        const object = this._tiles3D[0].mesh;
+        // offset = offset || 1.15;
+        // get bounding box of object - this will be used to setup controls and camera
+        const boundingBox = new Box3();
+        boundingBox.setFromObject(object);
+        const center = new Vector3();
+        boundingBox.getCenter(center);
+        const size = new Vector3();
+        boundingBox.getSize(size);
+        // get the max side of the bounding box (fits to width OR height as needed )
+        const maxDim = Math.max(size.x, size.y, size.z);
+        const fov = this._camera.fov * (Math.PI / 180);
+        // let cameraZ = Math.abs(maxDim / 4 * Math.tan(fov * 200));
+        let 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);
+    }
+    _checkNavigationButtons() {
+        const currentIdx = this._getSelectedIndex();
+        this.canNavigateLeft = (currentIdx > 0) || this._fullCircle;
+        this.canNavigateRight = (currentIdx < this._tileElements.length - 1) || this._fullCircle;
+    }
+    _animate() {
+        TWEEN.update();
+        setTimeout(() => {
+            this._renderer.setAnimationLoop(() => this._animate());
+        }, 200);
+    }
+    _getSelectedIndex() {
+        return Math.max(0, Math.min(this.selectedIndex, this._tileElements.length - 1));
+    }
+    _rotate(duration) {
+        TWEEN.removeAll();
+        for (let i = 0; i < this._tiles3D.length; i++) {
+            const tile = this._tiles3D[i];
+            if (Math.abs(this._tileOffset) > this._targetPositions.length) { // full circle
+                this._tileOffset = this._tileOffset > 0 ? 1 : -1;
+            }
+            let positionIdx = i - this._tileOffset;
+            if (positionIdx > this._targetPositions.length - 1) {
+                positionIdx = positionIdx - this._targetPositions.length;
+            }
+            else if (positionIdx < 0) {
+                positionIdx = this._targetPositions.length + positionIdx;
+            }
+            const target = this._targetPositions[positionIdx];
+            new TWEEN.Tween(tile.object.position)
+                .to(target, duration)
+                .easing(TWEEN.Easing.Quartic.Out)
+                .start();
+            new TWEEN.Tween(tile.mesh.position)
+                .to(target, duration)
+                .easing(TWEEN.Easing.Quartic.Out)
+                .start();
+        }
+        new TWEEN.Tween()
+            .to({}, duration * 2)
+            .onUpdate(() => {
+            this._render();
+        })
+            .start();
+        this.selectedIndex = this._tileOffset;
+        this._checkNavigationButtons();
+        this.indexSelected.next(this._getSelectedIndex());
+    }
+    _rotateTo(index) {
+        const current = this._getSelectedIndex();
+        this._tileOffset += index - current;
+        this._rotate(800);
+    }
+    _resizeCanvasToDisplaySize() {
+        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();
+    }
+    _render() {
+        this._rendererCss.render(this._sceneCss, this._camera);
+        this._renderer.render(this._scene, this._camera);
+    }
+}
+Carousel3dComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-carousel-3d",
+                template: `
+    <div class="carousel-3d-canvas-wrapper" #canvasContainer>
+      <div class="carousel-wrapper" #carouselWrapper>
+        <div class="carousel-navigate-button left">
+          <div class="carousel-navigate-button-wrapper" *ngIf="canNavigateLeft" (click)="handleButtonLeftClick()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+              <path
+                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>
+            </svg>
+          </div>
+        </div>
+        <div class="carousel-navigate-button right">
+          <div class="carousel-navigate-button-wrapper" *ngIf="canNavigateRight" (click)="handleButtonRightClick()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+              <path
+                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>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+Carousel3dComponent.propDecorators = {
+    canvasContainer: [{ type: ViewChild, args: ["canvasContainer", { read: ElementRef },] }],
+    carouselWrapper: [{ type: ViewChild, args: ["carouselWrapper", { read: ElementRef },] }],
+    children: [{ type: ContentChildren, args: ["carouselItem", { read: ElementRef, descendants: true },] }],
+    tileWidth: [{ type: Input }],
+    tileHeight: [{ type: Input }],
+    cameraHeight: [{ type: Input }],
+    shadow: [{ type: Input }],
+    selectedIndex: [{ type: Input }],
+    indexSelected: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-carousel-3d",] }]
+};
+
+class Carousel3dModule {
+}
+Carousel3dModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                declarations: [
+                    Carousel3dComponent
+                ],
+                exports: [
+                    Carousel3dComponent
+                ]
+            },] }
+];
+
 /*
  * Public API Surface of corecomponents
  */
@@ -6981,5 +7474,5 @@ SimpleGridModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, COMPONENT_INTERFACE_NAME, CoDialogComponent, CoDialogModule, CoDialogPromptComponent, CoDialogPromptModule, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoPivotComponent, CoPivotModule, CoRichTextEditorComponent, CoRichTextEditorModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColumnAlign, CoreComponentsIcon, DropDownListComponent, DropDownModule, FormComponent, FormModule, IconCacheService, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputTextComponent, InputTextModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PromptService, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, PriceDisplayPipeModule as ɵi, PriceDisplayPipe as ɵj, InputBoolean as ɵk, BaseModule as ɵl, FormInputUserModelChangeListenerService as ɵm, NgZoneWrapperService as ɵn, BaseInputComponent as ɵo, FormMasterService as ɵp, BaseSelectionGridComponent as ɵq, BaseInlineEditGridComponent as ɵr, BaseToolbarGridComponent as ɵs, BaseGridComponent as ɵt, AppendPipeModule as ɵu, AppendPipe as ɵv, PopupShowerService as ɵw };
+export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, COMPONENT_INTERFACE_NAME, Carousel3dComponent, Carousel3dModule, CoDialogComponent, CoDialogModule, CoDialogPromptComponent, CoDialogPromptModule, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoPivotComponent, CoPivotModule, CoRichTextEditorComponent, CoRichTextEditorModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColumnAlign, CoreComponentsIcon, DropDownListComponent, DropDownModule, FormComponent, FormMasterService, FormModule, IconCacheService, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PromptService, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, PriceDisplayPipeModule as ɵi, PriceDisplayPipe as ɵj, InputBoolean as ɵk, BaseModule as ɵl, FormInputUserModelChangeListenerService as ɵm, NgZoneWrapperService as ɵn, BaseInputComponent as ɵo, BaseSelectionGridComponent as ɵp, BaseInlineEditGridComponent as ɵq, BaseToolbarGridComponent as ɵr, BaseGridComponent as ɵs, AppendPipeModule as ɵt, AppendPipe as ɵu, ValidationErrorModule as ɵv, ValidationErrorComponent as ɵw, PopupShowerService as ɵx };
 //# sourceMappingURL=colijnit-corecomponents_v12.js.map