@colijnit/corecomponents_v12 12.0.20 → 12.0.21

package/fesm2015/colijnit-corecomponents_v12.js

@@ -2647,10 +2647,17 @@ CollapsibleComponent.decorators = [
         <co-icon class="expand-icon" [iconData]="iconData"></co-icon>
       </div>
     </div>
-    <div class="collapsible-content" *ngIf="expanded">
+    <div class="collapsible-content" *ngIf="expanded" @showHideContent>
       <ng-content></ng-content>
     </div>
   `,
+                animations: [
+                    trigger('showHideContent', [
+                        state('*', style({ height: '*' })),
+                        state('void', style({ height: 0 })),
+                        transition('void <=> *', animate(200))
+                    ]),
+                ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None
             },] }
@@ -2811,10 +2818,13 @@ class BaseInputComponent {
         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 EventEmitter();
         this.blur = new EventEmitter();
         // emits when the enter button on keyboard was pressed while this form input had focussed
@@ -2833,12 +2843,19 @@ class BaseInputComponent {
         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 = (model) => __awaiter(this, void 0, void 0, function* () {
+            return Promise.resolve(true);
+        });
         BaseInputComponent.BaseFormInputComponentIndex++;
         this.name = BaseInputComponent.BaseFormInputComponentIndex.toString();
         if (this.formUserChangeListener) {
@@ -2856,7 +2873,12 @@ class BaseInputComponent {
         }
     }
     set model(value) {
+        if (!this._initialModelSet) {
+            this._initialModel = this._model;
+            this._initialModelSet = true;
+        }
         this._model = value;
+        this.canSaveOrCancel = this._model !== this._initialModel;
         this._clearErrorComponent();
     }
     get model() {
@@ -2997,6 +3019,30 @@ class BaseInputComponent {
     get validationDisabled() {
         return this.readonly || this.disabled || this.noValidation;
     }
+    onClick(event) {
+        if (this.canChange && !this.noClickFocus) {
+            this.requestFocus();
+            if (!this.excludeUserModelChange) {
+                this.markAsUserTouched();
+            }
+        }
+    }
+    onFocusIn() {
+        if (!this.excludeUserModelChange) {
+            this.markAsUserTouched();
+        }
+    }
+    handleDocumentScroll() {
+        this._positionValidationError();
+    }
+    handleWindowResize() {
+        this._positionValidationError();
+    }
+    handleKeyDown(event) {
+        if (this.showSaveCancel && this.canSaveOrCancel) {
+            this._handleKeyDown(event);
+        }
+    }
     get canChange() {
         return !this.readonly && !this.disabled;
     }
@@ -3013,18 +3059,6 @@ class BaseInputComponent {
         this._modelChangeSub = this.modelChange.subscribe((val) => {
             this.model = val;
         });
-        const iOptions = {
-            trackVisibility: true,
-            // 🆕 Set a minimum delay between notifications
-            delay: 100,
-            // root: document,
-            // rootMargin: "1px",
-            threshold: 1
-        };
-        this.intersectionObserver = new IntersectionObserver((entries, observer) => this._handleElementPositionChange(entries, observer), iOptions);
-        // if (this.speechInput) {
-        //     this._subscribeToSpeechInput();
-        // }
     }
     ngAfterViewInit() {
         this._prepareInput();
@@ -3042,8 +3076,8 @@ class BaseInputComponent {
     }
     ngOnDestroy() {
         if (this.input) {
-            this.input.removeEventListener('blur', () => this.doBlur());
-            this.input.removeEventListener('focus', () => this.doFocus());
+            this.input.removeEventListener('blur', (event) => this.doBlur(event));
+            this.input.removeEventListener('focus', (event) => this.doFocus(event));
         }
         this._destroyed = true;
         this._clearErrorComponent();
@@ -3070,18 +3104,30 @@ class BaseInputComponent {
         this.changeDetector = undefined;
         this.input = undefined;
     }
+    commitClick(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.keepFocus = true;
+            yield this.commit(this.model);
+            this.keepFocus = false;
+            this.doBlur(event);
+        });
+    }
+    cancelClick(event) {
+        this.keepFocus = true;
+        if (this._initialModelSet) {
+            this.model = this._initialModel;
+        }
+        this.keepFocus = false;
+    }
     showValidationError(error) {
         if (this.validationErrorContainer) {
             if (this._errorValidationComponent) {
                 this._clearErrorComponent();
             }
-            const clientRect = this.elementRef.nativeElement.getBoundingClientRect();
             const 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();
         }
     }
     /**
@@ -3099,32 +3145,33 @@ class BaseInputComponent {
             this.detectChanges();
         }
     }
-    onClick(event) {
-        if (this.canChange && !this.noClickFocus) {
-            this.requestFocus();
-            if (!this.excludeUserModelChange) {
-                this.markAsUserTouched();
-            }
-        }
-    }
-    onFocusIn() {
-        if (!this.excludeUserModelChange) {
-            this.markAsUserTouched();
-        }
-    }
     requestFocus() {
         if (this.canChange && this.input) {
             this.input.focus();
             this.focused = true;
         }
     }
-    doFocus() {
+    doFocus(event) {
+        if (this.disabled) {
+            return;
+        }
+        this._initialModelSet = false;
         this.focused = true;
+        this.canSaveOrCancel = false;
         this.focus.next();
     }
-    doBlur() {
-        this.focused = false;
-        this.blur.next();
+    doBlur(event) {
+        setTimeout(() => {
+            if (this.keepFocus) {
+                if (event) {
+                    event.preventDefault;
+                }
+                return false;
+            }
+            this.focused = false;
+            this.input.blur();
+            this.blur.next();
+        }, 200);
     }
     detectChanges() {
         if (!this._destroyed) {
@@ -3240,9 +3287,6 @@ class BaseInputComponent {
                 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
@@ -3309,8 +3353,8 @@ class BaseInputComponent {
             //try to find input element
             this.input = this._findInputNode(this.elementRef.nativeElement.children);
             if (this.input) {
-                this.input.addEventListener('blur', () => this.doBlur());
-                this.input.addEventListener('focus', () => this.doFocus());
+                this.input.addEventListener('blur', (event) => this.doBlur(event));
+                this.input.addEventListener('focus', (event) => this.doFocus(event));
             }
         }
     }
@@ -3325,10 +3369,62 @@ class BaseInputComponent {
             }
         }
     }
-    _handleElementPositionChange(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;
+    _positionValidationError() {
+        if (this.elementRef && this.elementRef.nativeElement && this._errorValidationComponent) {
+            const clientRect = this.elementRef.nativeElement.getBoundingClientRect();
+            this._errorValidationComponent.instance.top = clientRect.bottom;
+            this._errorValidationComponent.instance.left = clientRect.left;
+        }
+    }
+    _handleKeyDown(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (event.code) {
+                case 'Enter':
+                    event.preventDefault();
+                    yield this.commitClick();
+                    return false;
+                case 'Tab':
+                    const nextSiblingToFocus = event.shiftKey ? event.currentTarget.previousSibling : event.currentTarget.nextSibling;
+                    event.preventDefault();
+                    yield this.commitClick();
+                    if (nextSiblingToFocus) {
+                        try {
+                            this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
+                        }
+                        catch (e) {
+                        }
+                    }
+                    return false;
+                case 'Escape':
+                    this.cancelClick();
+                    event.preventDefault();
+                    return false;
+            }
+        });
+    }
+    _createNewFocusEvent(element) {
+        let 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;
+    }
+    _setFocusOnNextPossibleInput(element, previous) {
+        const elementColl = element.getElementsByTagName('input');
+        if (elementColl && elementColl.length > 0) {
+            const inputElement = elementColl[0];
+            if (inputElement.disabled || inputElement.readOnly) {
+                this._setFocusOnNextPossibleInput(previous ? element.previousSibling : element.nextSibling, previous);
+            }
+            else {
+                const focusEvent = this._createNewFocusEvent(element);
+                inputElement.focus();
+                inputElement.dispatchEvent(focusEvent);
+            }
         }
     }
 }
@@ -3348,6 +3444,7 @@ BaseInputComponent.ctorParameters = () => [
 BaseInputComponent.propDecorators = {
     validationErrorContainer: [{ type: ViewChild, args: ["validationError", { read: ViewContainerRef },] }],
     _ngModel: [{ type: ViewChild, args: [NgModel, { static: true },] }],
+    showSaveCancel: [{ type: Input }],
     model: [{ type: Input }],
     label: [{ type: Input }],
     noValidation: [{ type: Input }],
@@ -3396,7 +3493,10 @@ BaseInputComponent.propDecorators = {
     valid: [{ type: HostBinding, args: ["class.valid",] }],
     validationDisabled: [{ type: HostBinding, args: ["class.no-validation",] }],
     onClick: [{ type: HostListener, args: ["click", ["$event"],] }],
-    onFocusIn: [{ type: HostListener, args: ["focusin",] }]
+    onFocusIn: [{ type: HostListener, args: ["focusin",] }],
+    handleDocumentScroll: [{ type: HostListener, args: ["document:scroll",] }],
+    handleWindowResize: [{ type: HostListener, args: ["window:resize",] }],
+    handleKeyDown: [{ type: HostListener, args: ["keydown", ["$event"],] }]
 };
 __decorate([
     InputBoolean()
@@ -3627,19 +3727,20 @@ class FormComponent {
     isValid() {
         return this._init && this.formGroup.valid;
     }
-    onEnterKey(event) {
-        const 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();
+    // }
     reset() {
         this.submitted = false;
         this.formGroup.markAsUntouched();
@@ -3708,8 +3809,7 @@ FormComponent.propDecorators = {
     anySubmit: [{ type: Output }],
     validityChange: [{ type: Output }],
     readonlyChange: [{ type: Output }],
-    invalidSubmit: [{ type: Output }],
-    onEnterKey: [{ type: HostListener, args: ['keyup.enter', ['$event'],] }]
+    invalidSubmit: [{ type: Output }]
 };
 
 class DropDownListComponent extends BaseInputComponent {
@@ -4869,6 +4969,10 @@ InputTextComponent.decorators = [
            [required]="required"
            (ngModelChange)="modelChange.emit($event)"
     >
+    <div *ngIf="showSaveCancel && focused && canSaveOrCancel" class="input-save-cancel-button-wrapper" @showHideSaveCancel>
+      <div class="input-save-cancel-button save" (click)="commitClick($event)"></div>
+      <div class="input-save-cancel-button cancel" (click)="cancelClick($event)"></div>
+    </div>
     <div class="required-indicator"></div>
     <ng-template #validationError></ng-template>
   `,
@@ -4876,6 +4980,13 @@ InputTextComponent.decorators = [
                         provide: COMPONENT_INTERFACE_NAME,
                         useExisting: forwardRef(() => InputTextComponent)
                     }],
+                animations: [
+                    trigger('showHideSaveCancel', [
+                        state('*', style({ transform: 'scaleY(1)', opacity: 1 })),
+                        state('void', style({ transform: 'scaleY(0)', opacity: 0 })),
+                        transition('void <=> *', animate(200))
+                    ]),
+                ],
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -7260,6 +7371,7 @@ class Carousel3dComponent {
             this._createTiles();
         }
         this._checkNavigationButtons();
+        this._resizeCanvasToDisplaySize();
     }
     _init() {
         if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
@@ -7460,11 +7572,16 @@ class Carousel3dComponent {
         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();
+        setTimeout(() => {
+            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();
+        });
     }
     _render() {
         this._rendererCss.render(this._sceneCss, this._camera);
@@ -7536,5 +7653,5 @@ Carousel3dModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, PriceDisplayPipe, PriceDisplayPipeModule, 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, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, BaseSelectionGridComponent as ɵn, BaseInlineEditGridComponent as ɵo, BaseToolbarGridComponent as ɵp, BaseGridComponent as ɵq, AppendPipeModule as ɵr, AppendPipe as ɵs, ValidationErrorModule as ɵt, ValidationErrorComponent as ɵu, PopupShowerService as ɵv };
 //# sourceMappingURL=colijnit-corecomponents_v12.js.map