@colijnit/corecomponents_v12 12.0.18 → 12.0.21

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/common/http'), require('@angular/platform-browser'), require('rxjs'), require('rxjs/operators'), require('@syncfusion/ej2-angular-splitbuttons'), require('@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'), 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', '@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', '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.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, global.three, global.CSS3DRenderer, global.TWEEN));
-})(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, three, CSS3DRenderer, TWEEN) { '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;
@@ -2606,7 +2606,6 @@
         { type: core.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        animations$1.BrowserAnimationsModule,
                         IconModule
                     ],
                     declarations: [CoDialogComponent],
@@ -2973,7 +2972,14 @@
     CollapsibleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-collapsible",
-                    template: "\n    <div class=\"collapsible-header\" [class.end]=\"expandButtonLast\" (click)=\"changeExpanded()\">\n      <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"!expandButtonLast\">\n        <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n      </div>\n      <div class=\"collapsible-title\" [textContent]=\"headerTitle\"></div>\n      <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"expandButtonLast\">\n        <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n      </div>\n    </div>\n    <div class=\"collapsible-content\" *ngIf=\"expanded\">\n      <ng-content></ng-content>\n    </div>\n  ",
+                    template: "\n    <div class=\"collapsible-header\" [class.end]=\"expandButtonLast\" (click)=\"changeExpanded()\">\n      <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"!expandButtonLast\">\n        <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n      </div>\n      <div class=\"collapsible-title\" [textContent]=\"headerTitle\"></div>\n      <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"expandButtonLast\">\n        <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n      </div>\n    </div>\n    <div class=\"collapsible-content\" *ngIf=\"expanded\" @showHideContent>\n      <ng-content></ng-content>\n    </div>\n  ",
+                    animations: [
+                        animations.trigger('showHideContent', [
+                            animations.state('*', animations.style({ height: '*' })),
+                            animations.state('void', animations.style({ height: 0 })),
+                            animations.transition('void <=> *', animations.animate(200))
+                        ]),
+                    ],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.ViewEncapsulation.None
                 },] }
@@ -3102,7 +3108,9 @@
     }
 
     var ValidationErrorComponent = /** @class */ (function () {
-        function ValidationErrorComponent() {
+        function ValidationErrorComponent(icons) {
+            this.icons = icons;
+            this.Icons = exports.CoreComponentsIcon;
         }
         ValidationErrorComponent.prototype.showClass = function () {
             return true;
@@ -3112,13 +3120,18 @@
     ValidationErrorComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-validation-error",
-                    template: "\n    <div class=\"validation-error-content\">\n        <div class=\"validation-error-message\" [textContent]=\"error\"></div>\n    </div>\n  ",
+                    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',] }]
     };
 
@@ -3134,10 +3147,13 @@
             this.formUserChangeListener = formUserChangeListener;
             this.ngZoneWrapper = ngZoneWrapper;
             this.elementRef = elementRef;
+            this.showSaveCancel = false;
             this.noValidation = false;
             this.forceRequired = false; // a force outside of [cfgName]'s influence
             // Goal: ability to emulate the red background of input fields (form-submitted invalid state)
             this.redErrorBackground = false;
+            // @Output()
+            // public commit: EventEmitter<any> = new EventEmitter<any>();
             this.nativeBlur = new core.EventEmitter();
             this.blur = new core.EventEmitter();
             // emits when the enter button on keyboard was pressed while this form input had focussed
@@ -3156,12 +3172,21 @@
             this.fullWidth = false;
             this.excludeUserModelChange = false;
             this.noFormGroupControl = false;
+            this.keepFocus = false;
+            this.canSaveOrCancel = false;
             this._markedAsUserTouched = false;
             this._destroyed = false;
             this._hasOnPushCdStrategy = false;
+            this._initialModelSet = false;
             this._forceReadonly = undefined;
             this._validators = [];
             this._asyncValidators = [];
+            // descendents should override this
+            this.commit = function (model) { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, Promise.resolve(true)];
+                });
+            }); };
             BaseInputComponent.BaseFormInputComponentIndex++;
             this.name = BaseInputComponent.BaseFormInputComponentIndex.toString();
             if (this.formUserChangeListener) {
@@ -3187,7 +3212,12 @@
                 return this._model;
             },
             set: function (value) {
+                if (!this._initialModelSet) {
+                    this._initialModel = this._model;
+                    this._initialModelSet = true;
+                }
                 this._model = value;
+                this.canSaveOrCancel = this._model !== this._initialModel;
                 this._clearErrorComponent();
             },
             enumerable: false,
@@ -3408,6 +3438,30 @@
             enumerable: false,
             configurable: true
         });
+        BaseInputComponent.prototype.onClick = function (event) {
+            if (this.canChange && !this.noClickFocus) {
+                this.requestFocus();
+                if (!this.excludeUserModelChange) {
+                    this.markAsUserTouched();
+                }
+            }
+        };
+        BaseInputComponent.prototype.onFocusIn = function () {
+            if (!this.excludeUserModelChange) {
+                this.markAsUserTouched();
+            }
+        };
+        BaseInputComponent.prototype.handleDocumentScroll = function () {
+            this._positionValidationError();
+        };
+        BaseInputComponent.prototype.handleWindowResize = function () {
+            this._positionValidationError();
+        };
+        BaseInputComponent.prototype.handleKeyDown = function (event) {
+            if (this.showSaveCancel && this.canSaveOrCancel) {
+                this._handleKeyDown(event);
+            }
+        };
         Object.defineProperty(BaseInputComponent.prototype, "canChange", {
             get: function () {
                 return !this.readonly && !this.disabled;
@@ -3436,27 +3490,15 @@
             enumerable: false,
             configurable: true
         });
-        BaseInputComponent.prototype.showValidationError = function (error) {
-            if (this.validationErrorContainer) {
-                if (this._errorValidationComponent) {
-                    this._clearErrorComponent();
-                }
-                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
-                this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
-                this._errorValidationComponent.instance.error = error;
-            }
-        };
         BaseInputComponent.prototype.ngOnInit = function () {
             var _this = this;
             this._modelChangeSub = this.modelChange.subscribe(function (val) {
                 _this.model = val;
             });
-            // if (this.speechInput) {
-            //     this._subscribeToSpeechInput();
-            // }
         };
         BaseInputComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
+            this._prepareInput();
             this._updateControlValidatorsAndOwnFlags();
             this._addOrRemoveSelfFromForm();
             if (this.formComponent) {
@@ -3470,6 +3512,11 @@
             }
         };
         BaseInputComponent.prototype.ngOnDestroy = function () {
+            var _this = this;
+            if (this.input) {
+                this.input.removeEventListener('blur', function (event) { return _this.doBlur(event); });
+                this.input.removeEventListener('focus', function (event) { return _this.doFocus(event); });
+            }
             this._destroyed = true;
             this._clearErrorComponent();
             // if (this.tooltipManager && this.elementRef) {
@@ -3493,7 +3540,41 @@
             // this._removeSelfFromForm();
             this.elementRef = undefined;
             this.changeDetector = undefined;
-            // this.input = undefined;
+            this.input = undefined;
+        };
+        BaseInputComponent.prototype.commitClick = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.keepFocus = true;
+                            return [4 /*yield*/, this.commit(this.model)];
+                        case 1:
+                            _a.sent();
+                            this.keepFocus = false;
+                            this.doBlur(event);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        BaseInputComponent.prototype.cancelClick = function (event) {
+            this.keepFocus = true;
+            if (this._initialModelSet) {
+                this.model = this._initialModel;
+            }
+            this.keepFocus = false;
+        };
+        BaseInputComponent.prototype.showValidationError = function (error) {
+            if (this.validationErrorContainer) {
+                if (this._errorValidationComponent) {
+                    this._clearErrorComponent();
+                }
+                var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
+                this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
+                this._errorValidationComponent.instance.error = error;
+                this._positionValidationError();
+            }
         };
         /**
          * Emits a modelChange event with given value, indicating that the model of this form input
@@ -3510,28 +3591,34 @@
                 this.detectChanges();
             }
         };
-        BaseInputComponent.prototype.onClick = function (event) {
-            if (this.canChange && !this.noClickFocus) {
-                this.requestFocus();
-                if (!this.excludeUserModelChange) {
-                    this.markAsUserTouched();
-                }
-            }
-        };
-        BaseInputComponent.prototype.onFocusIn = function () {
-            if (!this.excludeUserModelChange) {
-                this.markAsUserTouched();
-            }
-        };
         BaseInputComponent.prototype.requestFocus = function () {
             if (this.canChange && this.input) {
                 this.input.focus();
                 this.focused = true;
             }
         };
-        BaseInputComponent.prototype.doBlur = function () {
-            this.input.blur();
-            this.focused = false;
+        BaseInputComponent.prototype.doFocus = function (event) {
+            if (this.disabled) {
+                return;
+            }
+            this._initialModelSet = false;
+            this.focused = true;
+            this.canSaveOrCancel = false;
+            this.focus.next();
+        };
+        BaseInputComponent.prototype.doBlur = function (event) {
+            var _this = this;
+            setTimeout(function () {
+                if (_this.keepFocus) {
+                    if (event) {
+                        event.preventDefault;
+                    }
+                    return false;
+                }
+                _this.focused = false;
+                _this.input.blur();
+                _this.blur.next();
+            }, 200);
         };
         BaseInputComponent.prototype.detectChanges = function () {
             if (!this._destroyed) {
@@ -3584,7 +3671,7 @@
             if (notNill(this.forcedMaxLength) || maxLength === this._maxLength) {
                 return;
             }
-            if (maxLength > 0) { // not maxLength is 0
+            if (!isNaN(maxLength)) {
                 this._maxLength = maxLength;
                 this._updateControlValidatorsAndOwnFlags();
             }
@@ -3664,7 +3751,7 @@
             }
         };
         BaseInputComponent.prototype._setNativeMaxLength = function (maxlength) {
-            if (this.input) {
+            if (this.input && !isNaN(maxlength)) {
                 this.input.maxLength = maxlength;
             }
         };
@@ -3710,6 +3797,102 @@
                 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 (event) { return _this.doBlur(event); });
+                    this.input.addEventListener('focus', function (event) { return _this.doFocus(event); });
+                }
+            }
+        };
+        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._positionValidationError = function () {
+            if (this.elementRef && this.elementRef.nativeElement && this._errorValidationComponent) {
+                var clientRect = this.elementRef.nativeElement.getBoundingClientRect();
+                this._errorValidationComponent.instance.top = clientRect.bottom;
+                this._errorValidationComponent.instance.left = clientRect.left;
+            }
+        };
+        BaseInputComponent.prototype._handleKeyDown = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, nextSiblingToFocus;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = event.code;
+                            switch (_a) {
+                                case 'Enter': return [3 /*break*/, 1];
+                                case 'Tab': return [3 /*break*/, 3];
+                                case 'Escape': return [3 /*break*/, 5];
+                            }
+                            return [3 /*break*/, 6];
+                        case 1:
+                            event.preventDefault();
+                            return [4 /*yield*/, this.commitClick()];
+                        case 2:
+                            _b.sent();
+                            return [2 /*return*/, false];
+                        case 3:
+                            nextSiblingToFocus = event.shiftKey ? event.currentTarget.previousSibling : event.currentTarget.nextSibling;
+                            event.preventDefault();
+                            return [4 /*yield*/, this.commitClick()];
+                        case 4:
+                            _b.sent();
+                            if (nextSiblingToFocus) {
+                                try {
+                                    this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
+                                }
+                                catch (e) {
+                                }
+                            }
+                            return [2 /*return*/, false];
+                        case 5:
+                            this.cancelClick();
+                            event.preventDefault();
+                            return [2 /*return*/, false];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        BaseInputComponent.prototype._createNewFocusEvent = function (element) {
+            var eventType = "onfocusin" in element ? "focusin" : "focus", bubbles = "onfocusin" in element, focusEvent;
+            if ("createEvent" in document) {
+                focusEvent = document.createEvent("Event");
+                focusEvent.initEvent(eventType, bubbles, true);
+            }
+            else if ("Event" in window) {
+                focusEvent = new Event(eventType, { bubbles: bubbles, cancelable: true });
+            }
+            return focusEvent;
+        };
+        BaseInputComponent.prototype._setFocusOnNextPossibleInput = function (element, previous) {
+            var elementColl = element.getElementsByTagName('input');
+            if (elementColl && elementColl.length > 0) {
+                var inputElement = elementColl[0];
+                if (inputElement.disabled || inputElement.readOnly) {
+                    this._setFocusOnNextPossibleInput(previous ? element.previousSibling : element.nextSibling, previous);
+                }
+                else {
+                    var focusEvent = this._createNewFocusEvent(element);
+                    inputElement.focus();
+                    inputElement.dispatchEvent(focusEvent);
+                }
+            }
+        };
         return BaseInputComponent;
     }());
     BaseInputComponent.BaseFormInputComponentIndex = 0;
@@ -3727,6 +3910,8 @@
     ]; };
     BaseInputComponent.propDecorators = {
         validationErrorContainer: [{ type: core.ViewChild, args: ["validationError", { read: core.ViewContainerRef },] }],
+        _ngModel: [{ type: core.ViewChild, args: [forms.NgModel, { static: true },] }],
+        showSaveCancel: [{ type: core.Input }],
         model: [{ type: core.Input }],
         label: [{ type: core.Input }],
         noValidation: [{ type: core.Input }],
@@ -3756,7 +3941,6 @@
         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.cc-input-focused",] }],
         formInput: [{ type: core.HostBinding, args: ["class.form-input",] }],
         customWidth: [{ type: core.Input }, { type: core.HostBinding, args: ["class.custom-width",] }],
@@ -3776,7 +3960,10 @@
         valid: [{ type: core.HostBinding, args: ["class.valid",] }],
         validationDisabled: [{ type: core.HostBinding, args: ["class.no-validation",] }],
         onClick: [{ type: core.HostListener, args: ["click", ["$event"],] }],
-        onFocusIn: [{ type: core.HostListener, args: ["focusin",] }]
+        onFocusIn: [{ type: core.HostListener, args: ["focusin",] }],
+        handleDocumentScroll: [{ type: core.HostListener, args: ["document:scroll",] }],
+        handleWindowResize: [{ type: core.HostListener, args: ["window:resize",] }],
+        handleKeyDown: [{ type: core.HostListener, args: ["keydown", ["$event"],] }]
     };
     __decorate([
         InputBoolean()
@@ -4015,19 +4202,20 @@
         FormComponent.prototype.isValid = function () {
             return this._init && this.formGroup.valid;
         };
-        FormComponent.prototype.onEnterKey = function (event) {
-            var target = event.target;
-            if (['TEXTAREA', 'SELECT'].indexOf(target.tagName) !== -1) {
-                return;
-            }
-            if (target.isContentEditable) {
-                return;
-            }
-            if (target.tagName === 'BUTTON-COLIJN' && target.getAttribute('type') === 'submit') {
-                return;
-            }
-            this.submit();
-        };
+        // @HostListener('keyup.enter', ['$event'])
+        // onEnterKey(event: KeyboardEvent): void {
+        //     const target: HTMLElement = <HTMLElement>event.target;
+        //     if (['TEXTAREA', 'SELECT'].indexOf(target.tagName) !== -1) {
+        //         return;
+        //     }
+        //     if (target.isContentEditable) {
+        //         return;
+        //     }
+        //     if (target.tagName === 'BUTTON-COLIJN' && target.getAttribute('type') === 'submit') {
+        //         return;
+        //     }
+        //     this.submit();
+        // }
         FormComponent.prototype.reset = function () {
             this.submitted = false;
             this.formGroup.markAsUntouched();
@@ -4098,8 +4286,7 @@
         anySubmit: [{ type: core.Output }],
         validityChange: [{ type: core.Output }],
         readonlyChange: [{ type: core.Output }],
-        invalidSubmit: [{ type: core.Output }],
-        onEnterKey: [{ type: core.HostListener, args: ['keyup.enter', ['$event'],] }]
+        invalidSubmit: [{ type: core.Output }]
     };
 
     var DropDownListComponent = /** @class */ (function (_super) {
@@ -5288,11 +5475,18 @@
     InputTextComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-text",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n           (focus)=\"focused = true\"\n           (blur)=\"focused = false\"\n    >\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    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 *ngIf=\"showSaveCancel && focused && canSaveOrCancel\" class=\"input-save-cancel-button-wrapper\" @showHideSaveCancel>\n      <div class=\"input-save-cancel-button save\" (click)=\"commitClick($event)\"></div>\n      <div class=\"input-save-cancel-button cancel\" (click)=\"cancelClick($event)\"></div>\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 InputTextComponent; })
                         }],
+                    animations: [
+                        animations.trigger('showHideSaveCancel', [
+                            animations.state('*', animations.style({ transform: 'scaleY(1)', opacity: 1 })),
+                            animations.state('void', animations.style({ transform: 'scaleY(0)', opacity: 0 })),
+                            animations.transition('void <=> *', animations.animate(200))
+                        ]),
+                    ],
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -5618,7 +5812,8 @@
     ValidationErrorModule.decorators = [
         { type: core.NgModule, args: [{
                     imports: [
-                        common.CommonModule
+                        common.CommonModule,
+                        IconModule
                     ],
                     declarations: [
                         ValidationErrorComponent
@@ -5765,7 +5960,7 @@
     InputTextareaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-textarea",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <textarea type=\"textarea\"\n              [ngModel]=\"model\"\n              [readonly]=\"readonly\"\n              [required]=\"required\"\n              (ngModelChange)=\"modelChange.emit($event)\"\n              (focus)=\"focused = true\"\n              (blur)=\"focused = false\"\n    ></textarea>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    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; })
@@ -7746,6 +7941,7 @@
                 this._createTiles();
             }
             this._checkNavigationButtons();
+            this._resizeCanvasToDisplaySize();
         };
         Carousel3dComponent.prototype._init = function () {
             var _this = this;
@@ -7952,11 +8148,17 @@
             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();
+            var _this = this;
+            setTimeout(function () {
+                if (!_this.canvasContainer || !_this.canvasContainer.nativeElement) {
+                    return;
+                }
+                _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);
@@ -8076,6 +8278,8 @@
     exports.PopupMessageDisplayComponent = PopupMessageDisplayComponent;
     exports.PopupModule = PopupModule;
     exports.PopupWindowShellComponent = PopupWindowShellComponent;
+    exports.PriceDisplayPipe = PriceDisplayPipe;
+    exports.PriceDisplayPipeModule = PriceDisplayPipeModule;
     exports.PromptService = PromptService;
     exports.SimpleGridColumnDirective = SimpleGridColumnDirective;
     exports.SimpleGridComponent = SimpleGridComponent;
@@ -8091,22 +8295,20 @@
     exports["ɵf"] = CoScrollableDirective;
     exports["ɵg"] = StopClickModule;
     exports["ɵh"] = StopClickDirective;
-    exports["ɵi"] = PriceDisplayPipeModule;
-    exports["ɵj"] = PriceDisplayPipe;
-    exports["ɵk"] = InputBoolean;
-    exports["ɵl"] = BaseModule;
-    exports["ɵm"] = FormInputUserModelChangeListenerService;
-    exports["ɵn"] = NgZoneWrapperService;
-    exports["ɵo"] = BaseInputComponent;
-    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;
+    exports["ɵi"] = InputBoolean;
+    exports["ɵj"] = BaseModule;
+    exports["ɵk"] = FormInputUserModelChangeListenerService;
+    exports["ɵl"] = NgZoneWrapperService;
+    exports["ɵm"] = BaseInputComponent;
+    exports["ɵn"] = BaseSelectionGridComponent;
+    exports["ɵo"] = BaseInlineEditGridComponent;
+    exports["ɵp"] = BaseToolbarGridComponent;
+    exports["ɵq"] = BaseGridComponent;
+    exports["ɵr"] = AppendPipeModule;
+    exports["ɵs"] = AppendPipe;
+    exports["ɵt"] = ValidationErrorModule;
+    exports["ɵu"] = ValidationErrorComponent;
+    exports["ɵv"] = PopupShowerService;
 
     Object.defineProperty(exports, '__esModule', { value: true });