@colijnit/corecomponents_v12 12.0.20 → 12.0.21

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -2972,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
                 },] }
@@ -3140,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
@@ -3162,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) {
@@ -3193,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,
@@ -3414,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;
@@ -3447,18 +3495,6 @@
             this._modelChangeSub = this.modelChange.subscribe(function (val) {
                 _this.model = val;
             });
-            var iOptions = {
-                trackVisibility: true,
-                // 🆕 Set a minimum delay between notifications
-                delay: 100,
-                // root: document,
-                // rootMargin: "1px",
-                threshold: 1
-            };
-            this.intersectionObserver = new IntersectionObserver(function (entries, observer) { return _this._handleElementPositionChange(entries, observer); }, iOptions);
-            // if (this.speechInput) {
-            //     this._subscribeToSpeechInput();
-            // }
         };
         BaseInputComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
@@ -3478,8 +3514,8 @@
         BaseInputComponent.prototype.ngOnDestroy = function () {
             var _this = this;
             if (this.input) {
-                this.input.removeEventListener('blur', function () { return _this.doBlur(); });
-                this.input.removeEventListener('focus', function () { return _this.doFocus(); });
+                this.input.removeEventListener('blur', function (event) { return _this.doBlur(event); });
+                this.input.removeEventListener('focus', function (event) { return _this.doFocus(event); });
             }
             this._destroyed = true;
             this._clearErrorComponent();
@@ -3506,18 +3542,38 @@
             this.changeDetector = 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 clientRect = this.elementRef.nativeElement.getBoundingClientRect();
                 var componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
                 this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
-                this._errorValidationComponent.instance.top = clientRect.bottom;
-                this._errorValidationComponent.instance.left = clientRect.left;
                 this._errorValidationComponent.instance.error = error;
-                this.intersectionObserver.observe(this.elementRef.nativeElement);
+                this._positionValidationError();
             }
         };
         /**
@@ -3535,32 +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.doFocus = function () {
+        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 () {
-            this.focused = false;
-            this.blur.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) {
@@ -3678,9 +3736,6 @@
                     this._errorValidationComponent.destroy();
                     this._errorValidationComponent = undefined;
                 }
-                if (this.elementRef && this.elementRef.nativeElement) {
-                    this.intersectionObserver.unobserve(this.elementRef.nativeElement);
-                }
             }
         };
         // whether this.ngModel.control has safe access
@@ -3748,8 +3803,8 @@
                 //try to find input element
                 this.input = this._findInputNode(this.elementRef.nativeElement.children);
                 if (this.input) {
-                    this.input.addEventListener('blur', function () { return _this.doBlur(); });
-                    this.input.addEventListener('focus', function () { return _this.doFocus(); });
+                    this.input.addEventListener('blur', function (event) { return _this.doBlur(event); });
+                    this.input.addEventListener('focus', function (event) { return _this.doFocus(event); });
                 }
             }
         };
@@ -3764,10 +3819,78 @@
                 }
             }
         };
-        BaseInputComponent.prototype._handleElementPositionChange = function (entries, observer) {
-            if (this._errorValidationComponent && entries && entries.length > 0) {
-                this._errorValidationComponent.instance.top = entries[0].boundingClientRect.bottom;
-                this._errorValidationComponent.instance.left = entries[0].boundingClientRect.left;
+        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;
@@ -3788,6 +3911,7 @@
     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 }],
@@ -3836,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()
@@ -4075,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();
@@ -4158,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) {
@@ -5348,11 +5475,18 @@
     InputTextComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-text",
-                    template: "\n    <label [textContent]=\"placeholder\"></label>\n    <input #input\n           [type]=\"type\"\n           [ngModel]=\"model\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           (ngModelChange)=\"modelChange.emit($event)\"\n    >\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    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
                 },] }
     ];
@@ -7807,6 +7941,7 @@
                 this._createTiles();
             }
             this._checkNavigationButtons();
+            this._resizeCanvasToDisplaySize();
         };
         Carousel3dComponent.prototype._init = function () {
             var _this = this;
@@ -8013,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);
@@ -8137,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;
@@ -8152,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 });