@colijnit/corecomponents_v12 12.2.17 → 12.2.19

package/projects/corecomponents/src/lib/components/base/base-input.component.ts

@@ -0,0 +1,988 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  ComponentFactory,
+  ComponentFactoryResolver,
+  ComponentRef, ContentChild,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Injectable,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Output,
+  ViewChild,
+  ViewContainerRef
+} from "@angular/core";
+import {AsyncValidatorFn, FormControl, NgModel, ValidatorFn} from "@angular/forms";
+import {isNill} from "../../core/function/is-nill.function";
+import {notNill} from "../../core/function/not-nill.function";
+import {InputBoolean, InputBooleanDecorator} from "../../core/decorator/input-boolean.decorator";
+import {requiredValidator} from "../../core/validator/required.validator";
+import {precisionScaleValidator} from "../../core/validator/precision-scale.validator";
+import {maxStringLengthValidator} from "../../core/validator/max-string-length.validator";
+import {StringUtils} from "../../core/utils/string-utils";
+import {Subscription} from "rxjs";
+import {FormInputUserModelChangeListenerService} from "../../core/service/form-input-user-change-listener.service";
+import {NumberUtils} from "../../core/utils/number-utils";
+import {NgZoneWrapperService} from "../../core/service/ng-zone-wrapper.service";
+import {CoreComponentsIcon} from "../../core/enum/core-components-icon.enum";
+import {FormComponent} from "../form/form.component";
+import {ValidationErrorComponent} from "../validation-error/validation-error.component";
+import {ScreenConfigAdapterComponent} from "../../interfaces/screen-config-adapter.component.interface";
+import {OverlayService} from '../../service/overlay.service';
+import {CommitButtonsComponent} from './commit-buttons/commit-buttons.component';
+
+/**
+ * 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.
+ */
+@Directive()
+@Injectable()
+export abstract class BaseInputComponent<T> implements OnInit, OnDestroy, AfterViewInit, ScreenConfigAdapterComponent {
+  public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
+
+  @ViewChild("validationError", {read: ViewContainerRef})
+  public validationErrorContainer: ViewContainerRef;
+
+  @ViewChild(NgModel, {static: true})
+  public _ngModel: NgModel;
+
+  public get ngModel(): NgModel {
+    if (this._myFormInputInstance) {
+      return this._myFormInputInstance.ngModel;
+    } else {
+      return this._ngModel;
+    }
+  }
+
+  public static BaseFormInputComponentIndex: number = 0;
+  public static HiddenClass: string = "hidden";
+
+  @Input()
+  public showSaveCancel: boolean = false;
+
+  @Input()
+  public set model(value: T) {
+    if (!this._initialModelSet) {
+      this._initialModel = this._model;
+      this._initialModelSet = true;
+    }
+    this._model = value;
+    this.canSaveOrCancel = this._model !== this._initialModel;
+    this._modelDirtyForCommit = this._model !== this._initialModel;
+    this._clearErrorComponent();
+    this.modelSet();
+  }
+
+  public get model(): T {
+    return this._model;
+  }
+
+  @Input()
+  public label: string;
+
+  @Input() @InputBoolean()
+  public noValidation: boolean = false;
+
+  @Input() @InputBoolean()
+  public initFocus: boolean;
+
+  @Input() @InputBoolean()
+  public noClickFocus: boolean;
+
+  // used to link field to business object for deep-validation
+  @Input()
+  public businessObjectId: any;
+
+  // @Input()
+  // public errorMessage: ValidationMessage;
+
+  public name: string;
+
+  @Input()
+  public set disabled(disabled: boolean) {
+    if (disabled === this._disabled) {
+      return;
+    }
+    this._disabled = InputBooleanDecorator.InputValueToBoolean(disabled);
+    this._updateControlValidatorsAndOwnFlags();
+  }
+
+  public get disabled(): boolean {
+    return this._disabled;
+  }
+
+  @Input()
+  public set maxLength(maxLength: number) {
+    this.setMaxLength(maxLength);
+  }
+
+  public get maxLength(): number {
+    return notNill(this.forcedMaxLength) ? this.forcedMaxLength : this._maxLength;
+  }
+
+  @Input()
+  public forcedMaxLength: number;
+
+  @Input()
+  public set readonly(readonly: boolean) {
+    if (this._forceReadonly !== undefined || readonly === this._readonly) {
+      return;
+    }
+    this._readonly = InputBooleanDecorator.InputValueToBoolean(readonly);
+    this._updateControlValidatorsAndOwnFlags();
+    if (this._hasOnPushCdStrategy) {
+      this.detectChanges();
+    }
+  }
+
+  public get readonly(): boolean {
+    return this.forceReadonly || this._readonly;
+  }
+
+  @Input()
+  public set forceReadonly(forceReadonly: boolean) {
+    if (forceReadonly === this._forceReadonly) {
+      return;
+    }
+    this._forceReadonly = InputBooleanDecorator.InputValueToBoolean(forceReadonly);
+    this._updateControlValidatorsAndOwnFlags();
+  }
+
+  public get forceReadonly(): boolean {
+    return this._forceReadonly;
+  }
+
+  @Input()
+  public set required(required: boolean) {
+    if (required === this._required) {
+      return;
+    }
+    this._required = InputBooleanDecorator.InputValueToBoolean(required);
+    this._updateControlValidatorsAndOwnFlags();
+  }
+
+  public get required(): boolean {
+    return this.forceRequired || this._required;
+  }
+
+  @Input() @InputBoolean()
+  public forceRequired: boolean = false;  // a force outside of [cfgName]'s influence
+
+  @Input()
+  public set validators(validators: ValidatorFn[]) {
+    if (validators === this._validators) {
+      return;
+    }
+    this._validators = validators;
+    this._updateControlValidatorsAndOwnFlags();
+  }
+
+  public get validators(): ValidatorFn[] {
+    return this._validators;
+  }
+
+  @Input()
+  public set asyncValidators(validators: AsyncValidatorFn[]) {
+    this._asyncValidators = validators;
+    this._updateControlValidatorsAndOwnFlags();
+  }
+
+  public get asyncValidators(): AsyncValidatorFn[] {
+    return this._asyncValidators;
+  }
+
+  @Input() @HostBinding("class." + BaseInputComponent.HiddenClass)
+  public set hidden(hidden: boolean) {
+    if (hidden === this._hidden) {
+      return;
+    }
+
+    this._hidden = hidden;
+
+    this._addOrRemoveSelfFromForm();
+
+    if (!this._destroyed) {
+      if (hidden) {
+        this.changeDetector.detach();
+      } else {
+        this.changeDetector.reattach();
+        if (this._hasOnPushCdStrategy) {
+          this.detectChangesAfterAngular();
+        }
+      }
+    }
+
+    this.hiddenChange.emit(hidden);
+  }
+
+  public get hidden(): boolean {
+    return this._hidden;
+  }
+
+  // no custom setter logic as with the other 'screen config props', because concrete form input components handle this themselves.
+  @Input()
+  public set decimals(value: number) {
+    this._decimals = value;
+  }
+
+  public get decimals(): number {
+    return this._decimals;
+  }
+
+  @Input()
+  public icon: CoreComponentsIcon;
+
+  @Input()
+  public customCssClass: string;
+
+  // Goal: ability to emulate the red background of input fields (form-submitted invalid state)
+  @Input() @HostBinding("class.cc-red-error-background")
+  public redErrorBackground: boolean = false;
+
+  @Input()
+  set myFormInputInstance(value: BaseInputComponent<T>) {
+    if (value === this._myFormInputInstance) {
+      return;
+    }
+    this._myFormInputInstance = value;
+    this._updateControlValidatorsAndOwnFlags();
+  }
+
+  get myFormInputInstance(): BaseInputComponent<T> {
+    return this._myFormInputInstance;
+  }
+
+  @Input()
+  public commitOnBlur: boolean = true;
+
+  // @Output()
+  // public commit: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  public readonly nativeBlur: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public readonly blur: EventEmitter<any> = new EventEmitter();
+
+  // emits when the enter button on keyboard was pressed while this form input had focussed
+  @Output()
+  public readonly enter: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public readonly focus: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public readonly keyDown: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public readonly keyUp: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public readonly modelChange: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  public readonly userModelChange: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  public readonly hiddenChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @HostBinding("class.cc-input-focused")
+  public focused: boolean = false;
+
+  public formComponent: FormComponent;
+
+  @HostBinding("class.form-input")
+  public formInput: boolean = true;
+
+  @Input() @InputBoolean() @HostBinding("class.custom-width")
+  public customWidth: boolean = false;
+
+  @Input() @InputBoolean() @HostBinding('class.custom-height')
+  public customHeight: boolean = false;
+
+  @Input() @InputBoolean()
+  public noTriangleGraphic: boolean = false;
+
+  @Input() @InputBoolean()
+  public keepFocussed: boolean = false;
+
+  @Input() @InputBoolean() @HostBinding("class.half-width")
+  public halfWidth: boolean = false;
+
+  @Input() @InputBoolean() @HostBinding("class.full-width-important")
+  public fullWidth: boolean = false;
+
+  @Input() @InputBoolean()
+  public excludeUserModelChange: boolean = false;
+
+  @Input() @InputBoolean()
+  public noFormGroupControl: boolean = false;
+
+  @HostBinding("class.form-submitted")
+  public get formSubmitted(): boolean {
+    return this.formComponent && this.formComponent.submitted;
+  }
+
+  @HostBinding("class.hasnolabel")
+  public get hasNoLabel(): boolean {
+    return isNill(this.label);
+  }
+
+  @HostBinding("class.hasvalue")
+  public get hasValue(): boolean {
+    return (!Array.isArray(this.model) && !!this.model || StringUtils.IsStringWithLength(this.model) || NumberUtils.IsNumber(this.model)) ||
+        (Array.isArray(this.model) && this.model.length > 0);
+  }
+
+  @HostBinding("class.invalid")
+  public get invalid(): boolean {
+    return this._checkState() && !this.control.valid;
+  }
+
+  @HostBinding("class.disabled")
+  public get isDisabled(): boolean {
+    return this._disabled;
+  }
+
+  @HostBinding("class.read-only")
+  public get isReadonly(): boolean {
+    return this.readonly;
+  }
+
+  @HostBinding("class.required")
+  public get isRequired(): boolean {
+    return this.required;
+  }
+
+  @HostBinding("class.cc-touched-invalid")
+  public get touchedInvalid(): boolean {
+    return this._controlExists() && this.control.touched && !this.control.valid;
+  }
+
+  @HostBinding("class.valid")
+  public get valid(): boolean {
+    return this._checkState() && this.control.valid;
+  }
+
+  @HostBinding("class.no-validation")
+  public get validationDisabled(): boolean {
+    return this.readonly || this.disabled || this.noValidation;
+  }
+
+  @HostListener("click", ["$event"])
+  onClick(event: MouseEvent): void {
+    if (this.canChange && !this.noClickFocus) {
+      this.requestFocus();
+      if (!this.excludeUserModelChange) {
+        this.markAsUserTouched();
+      }
+    }
+  }
+
+  @HostListener("focusin")
+  onFocusIn(): void {
+    if (!this.excludeUserModelChange) {
+      this.markAsUserTouched();
+    }
+  }
+
+  // @HostListener("document:scroll")
+  // public handleDocumentScroll(): void {
+  //   this._positionValidationError();
+  // }
+
+  // @HostListener("window:resize")
+  // public handleWindowResize(): void {
+  //   this._positionValidationError();
+  // }
+
+  @HostListener("keydown", ["$event"])
+  public handleKeyDown(event: KeyboardEvent): void {
+    this.keyDown.next(event);
+    if (this.showSaveCancel && this.canSaveOrCancel) {
+      this._handleKeyDown(event);
+    }
+    // this._positionValidationError();
+  }
+
+  public get canChange(): boolean {
+    return !this.readonly && !this.disabled;
+  }
+
+  public get control(): FormControl {
+    return this._myFormInputInstance ? this._myFormInputInstance.control : this.ngModel && this.ngModel.control;
+  }
+
+  public get formInputInstance(): BaseInputComponent<T> {
+    return this._myFormInputInstance || this;
+  }
+
+  public get isDestroyed(): boolean {
+    return this._destroyed;
+  }
+
+  public input: HTMLInputElement | HTMLTextAreaElement;
+
+  public keepFocus: boolean = false;
+
+  public set canSaveOrCancel(value: boolean) {
+    this._canSaveOrCancel = value;
+    if (this.showSaveCancel && this.focused && this._canSaveOrCancel) {
+      if (!this._commitButtonsComponentRef) {
+        this._commitButtonsComponentRef = this.overlayService.createComponent(CommitButtonsComponent,
+            {
+              parentForOverlay: this.elementRef,
+              committing: false,
+              commitFinished: false
+            }, {
+              commitClick: (event) => this._handleCommit(event),
+              cancelClick: (event) => this.cancelClick(event)
+            });
+      }
+    } else {
+      this.overlayService.removeComponent(this._commitButtonsComponentRef);
+      this._commitButtonsComponentRef = undefined;
+    }
+  }
+
+  public get canSaveOrCancel(): boolean {
+    return this._canSaveOrCancel;
+  }
+
+  // @implements ConfigurationAdapterComponent
+  public objectConfigName: string;
+  public validationError: string = "";
+
+  protected _markedAsUserTouched: boolean = false;
+
+  protected _destroyed: boolean = false;
+  protected _hasOnPushCdStrategy: boolean = false;
+  protected _model: T;
+  protected _modelDirtyForCommit: boolean = false;
+  protected _initialModel: T;
+  protected _initialModelSet: boolean = false;
+
+  private _myFormInputInstance: BaseInputComponent<T>;
+  private _errorValidationComponent: ComponentRef<ValidationErrorComponent>;
+  private _decimals: number;
+  private _hidden: boolean;
+  private _disabled: boolean;
+  private _maxLength: number;
+  private _readonly: boolean;
+  private _required: boolean;
+
+  private _forceReadonly: boolean = undefined;
+
+  private _validators: ValidatorFn[] = [];
+  private _asyncValidators: AsyncValidatorFn[] = [];
+
+  private _speechSub: Subscription;
+  private _modelChangeSub: Subscription;
+  private _formAnySubmitSub: Subscription;
+  private _formReadonlyChangeSub: Subscription;
+  private _clearMarkedAsUserTouchedSub: Subscription;
+  private _canSaveOrCancel: boolean = false;
+
+  private _commitButtonsComponentRef: ComponentRef<any>;
+  private _validationComponentRef: ComponentRef<any>;
+
+  constructor(
+    protected changeDetector: ChangeDetectorRef,
+    protected componentFactoryResolver: ComponentFactoryResolver,
+    protected overlayService: OverlayService,
+    @Optional() protected formUserChangeListener?: FormInputUserModelChangeListenerService,
+    @Optional() protected ngZoneWrapper?: NgZoneWrapperService,
+    @Optional() public elementRef?: ElementRef,
+  ) {
+    BaseInputComponent.BaseFormInputComponentIndex++;
+    this.name = BaseInputComponent.BaseFormInputComponentIndex.toString();
+
+    if (this.formUserChangeListener) {
+      this._clearMarkedAsUserTouchedSub = this.formUserChangeListener.clearAllMarkedAsUserTouched.subscribe(() => {
+        this._markedAsUserTouched = false;
+      });
+    }
+  }
+
+  ngOnInit(): void {
+    this._modelChangeSub = this.modelChange.subscribe((val: any) => {
+      this.model = val;
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this._prepareInput();
+
+    this._updateControlValidatorsAndOwnFlags();
+
+    this._addOrRemoveSelfFromForm();
+
+    if (this.formComponent) {
+      this.readonly = this.readonly || this.formComponent.readonly;
+      this._formReadonlyChangeSub = this.formComponent.readonlyChange.subscribe((isFormReadonly: boolean) => {
+        this.readonly = isFormReadonly;
+      });
+    }
+
+    if (this.initFocus) {
+      setTimeout(this.requestFocus.bind(this));
+    }
+  }
+
+  ngOnDestroy(): void {
+    this._removeSelfFromForm();
+
+    if (this.input) {
+      this.input.removeEventListener('blur', (event) => this.doBlur(event));
+      this.input.removeEventListener('focus', (event) => this.doFocus(event));
+    }
+
+    this._destroyed = true;
+    this._clearErrorComponent();
+
+    // if (this.tooltipManager && this.elementRef) {
+    //     this.tooltipManager.destroyErrorTooltipOfElement(this.elementRef.nativeElement);
+    // }
+
+    if (this._modelChangeSub) {
+      this._modelChangeSub.unsubscribe();
+    }
+    if (this._speechSub) {
+      this._speechSub.unsubscribe();
+    }
+    if (this._formAnySubmitSub) {
+      this._formAnySubmitSub.unsubscribe();
+    }
+    if (this._formReadonlyChangeSub) {
+      this._formReadonlyChangeSub.unsubscribe();
+    }
+    if (this._clearMarkedAsUserTouchedSub) {
+      this._clearMarkedAsUserTouchedSub.unsubscribe();
+    }
+    // this._removeSelfFromForm();
+    this.elementRef = undefined;
+    this.changeDetector = undefined;
+    this.input = undefined;
+  }
+
+  // descendents should override this
+  public commit = async (model: any): Promise<boolean> => {
+    return Promise.resolve(true);
+  }
+
+  public cancelClick(event?: MouseEvent): void {
+    this.keepFocus = true;
+    if (this._initialModelSet) {
+      this.model = this._initialModel;
+    }
+    this.keepFocus = false;
+  }
+
+  public showValidationError(error: string): void {
+    this.validationError = error;
+    this._validationComponentRef = this.overlayService.createComponent(ValidationErrorComponent, {parentForOverlay: this.elementRef, error: error});
+  }
+
+  /**
+   * Emits a modelChange event with given value, indicating that the model of this form input
+   * has changed and its new value is given value. Also emits userModelChange if markedAsUserTouched.
+   */
+  public setModel(value: any): void {
+    this.model = value;
+    this.modelChange.emit(value);
+
+    if (this.control) {
+      this.control.markAsDirty({onlySelf: true});
+    }
+    if (this.formComponent) {
+      this.formComponent.formGroup.markAsDirty({onlySelf: true});
+    }
+
+    if (this._markedAsUserTouched && this.formUserChangeListener) {
+      this.formUserChangeListener.userModelChange.next(value);
+      this.userModelChange.next(value);
+    }
+
+    if (this._hasOnPushCdStrategy) {
+      this.detectChanges();
+    }
+  }
+
+  public requestFocus(): void {
+    if (this.canChange && this.input) {
+      this.input.focus();
+      this.focused = true;
+      if (this._hasOnPushCdStrategy) {
+        this.markForCheck();
+      }
+    }
+  }
+
+  public doFocus(event?: any): any {
+    if (this.disabled) {
+      return;
+    }
+    this._initialModelSet = false;
+    this.focused = true;
+    this.canSaveOrCancel = false;
+    if (this._hasOnPushCdStrategy) {
+      this.markForCheck();
+    }
+    this.focus.next();
+  }
+
+  public async doBlur(event?: any, handleCommit: boolean = true): Promise<any> {
+    if (this.showSaveCancel && handleCommit && this._modelDirtyForCommit) {
+      await this._handleCommit(event, false);
+    }
+    setTimeout(() => {
+      if (this.keepFocus || this.keepFocussed) {
+        if (event) {
+          event.preventDefault;
+        }
+        return false;
+      }
+      this.focused = false;
+      if (this._hasOnPushCdStrategy) {
+        this.markForCheck();
+      }
+      if (this.input) {
+        this.input.blur();
+      }
+      this.blur.next();
+    }, 200);
+  }
+
+  public detectChanges(): void {
+    if (!this._destroyed) {
+      this.changeDetector.detectChanges();
+    }
+  }
+
+  public markForCheck(): void {
+    if (!this._destroyed) {
+      this.changeDetector.markForCheck();
+    }
+  }
+
+  public detectChangesAfterAngular(): void {
+    if (!!this.ngZoneWrapper) {
+      this.ngZoneWrapper.setTimeoutOutsideAngular(() => {
+        if (!this._destroyed) {
+          if (this._hasOnPushCdStrategy) {
+            this.changeDetector.markForCheck();
+          }
+          this.changeDetector.detectChanges();
+        }
+      });
+    }
+  }
+
+  /**
+   * Links the given formComp.submit event to the firing of detectChanges() of given change detector. This is a 'utility-like' method,
+   * but we manage the actual subscription (with UNSUBSCRIBE()!) on this base class.
+   * @param formComp The form whose submit we want to link with the call of .detectChanges() on given change detector ref.
+   * @param changeDetectorRef This should be given as param. I choose not to make this part of our (BaseFormInputComponent) constructor,
+   * because we already have 21 extenders.
+   */
+  // public linkFormAnySubmitWithDetectChanges(formComp: FormComponent, changeDetectorRef: ChangeDetectorRef): void {
+  //     if (formComp && changeDetectorRef) {
+  //         this._formAnySubmitSub = formComp.anySubmit.subscribe((() => {
+  //             if (!this._destroyed) {
+  //                 changeDetectorRef.detectChanges();
+  //             }
+  //         }));
+  //     }
+  // }
+
+  public markAsUserTouched(): void {
+    this._markedAsUserTouched = true;
+    this.redErrorBackground = false; // not sure if this is the right place to do that
+  }
+
+  public clearMarkedAsUserTouched(): void {
+    this._markedAsUserTouched = false;
+  }
+
+  protected modelSet(): void {
+
+  }
+
+  //used for descendents, because descendents can't set super properties, see InputNumberComponent
+  protected setMaxLength(maxLength: number): void {
+    if (notNill(this.forcedMaxLength) || maxLength === this._maxLength) {
+      return;
+    }
+
+    if (!isNaN(maxLength)) {
+      this._maxLength = maxLength;
+      this._updateControlValidatorsAndOwnFlags();
+    }
+  }
+
+  protected _markAsOnPush(): void {
+    this._hasOnPushCdStrategy = true;
+  }
+
+  protected _checkState(): boolean {
+    if (this.ngModel) {
+      return this.formSubmitted || (this._controlExists() && this.control.touched);
+    } else {
+      return false;
+    }
+  }
+
+  // Place validators onto our Angular's FormControl.
+  protected _updateControlValidatorsAndOwnFlags(): void {
+    const er: ElementRef = this.myFormInputInstance ? this.myFormInputInstance.elementRef : this.elementRef;
+    // if (this.tooltipManager && er) {
+    //     this.tooltipManager.destroyErrorTooltipOfElement(er.nativeElement);
+    // }
+    this._setNativeRequired(this.required);
+    this._setNativeMaxLength(this.maxLength);
+    this._setNativeDisabled(this.disabled);
+    this._setNativeReadOnly(this.readonly || this.forceReadonly);
+
+    this.redErrorBackground = false;
+    if (this._controlExists()) {
+      const validators: ValidatorFn[] = [];
+
+      // add required
+      if (this.required) {
+        validators.push(requiredValidator);
+      }
+
+      // add maxlength
+      if (notNill(this._maxLength)) {
+        if (this.decimals) {
+          validators.push(precisionScaleValidator(this._maxLength, this.decimals));
+        } else {
+          validators.push(maxStringLengthValidator(this._maxLength));
+        }
+      }
+
+      // add @Input()-ed validators
+      validators.push(...this._validators);
+
+      if (this._validators) {
+        this._validators.forEach(validator => {
+          if (validator === requiredValidator) {
+            this._required = true;
+            this._setNativeRequired(true);
+          }
+        });
+      }
+
+      this.control.setValidators(validators);
+      this.control.setAsyncValidators(this._asyncValidators);
+      this.control.updateValueAndValidity();
+    }
+  }
+
+  private async _handleCommit(event?: MouseEvent, doBlur: boolean = true): Promise<boolean> {
+    if (!this.showSaveCancel || (!this._modelDirtyForCommit)) {
+      return true;
+    }
+    this.keepFocus = true;
+    if (this._commitButtonsComponentRef) {
+      this._commitButtonsComponentRef.instance.commitFinished = false;
+      this._commitButtonsComponentRef.instance.committing = true;
+    }
+    this._modelDirtyForCommit = false;
+    const success: boolean = await this.commit(this.model);
+    this.keepFocus = false;
+    await this._commitFinished();
+    if (success && doBlur) {
+      this.doBlur(event, false);
+    }
+    return success;
+  }
+
+  private _commitFinished(): Promise<void> {
+    return new Promise((resolve: Function) => {
+      if (this._commitButtonsComponentRef) {
+        this._commitButtonsComponentRef.instance.commitFinished = true;
+        this._commitButtonsComponentRef.instance.committing = false;
+        setTimeout(() => {
+          // this._commitButtonsComponentRef.instance.commitFinished = false;
+          this.overlayService.removeComponent(this._commitButtonsComponentRef);
+          resolve();
+        }, 800);
+      } else {
+        resolve();
+      }
+    });
+  }
+
+  private _clearErrorComponent(): void {
+    this.overlayService.removeComponent(this._validationComponentRef);
+  }
+
+
+  // whether this.ngModel.control has safe access
+  private _controlExists(): boolean {
+    return this.ngModel && !!this.control;
+  }
+
+  private _controlIsValid(): boolean {
+    return this._controlExists() && this.control.valid;
+  }
+
+  private _setNativeDisabled(disabled: boolean): void {
+    if (this.input) {
+      this.input.disabled = disabled;
+    }
+  }
+
+  private _setNativeMaxLength(maxlength: number): void {
+    if (this.input && !isNaN(maxlength)) {
+      this.input.maxLength = maxlength;
+    }
+  }
+
+  protected _setNativeReadOnly(readonly: boolean): void {
+    if (this.input) {
+      this.input.readOnly = readonly;
+    }
+  }
+
+  private _setNativeRequired(required: boolean): void {
+    if (this.input) {
+      this.input.required = required;
+    }
+  }
+
+  private _subscribeToSpeechInput(): void {
+    // this._speechSub = this.speechInput.speechInput.subscribe((data) => {
+    //     if (this.focused && this._controlExists()) {
+    //         const val: string = this.control.value;
+    //         this.setModel((StringUtils.IsString(val) ? val : '') + data);
+    //     }
+    // });
+  }
+
+  private _addOrRemoveSelfFromForm(): void {
+    if (this.hidden) {
+      this._removeSelfFromForm();
+    } else {
+      this._addSelfToForm();
+    }
+  }
+
+  private _updateSelfInForm(): void {
+    if (this.formComponent) {
+      this.formComponent.updateFormInput(this);
+    }
+  }
+
+  private _removeSelfFromForm(): void {
+    if (this.formComponent && this.ngModel) {
+      this.formComponent.removeFormInput(this);
+    }
+  }
+
+  private _addSelfToForm(): void {
+    if (this.formComponent && this.ngModel && !this.noFormGroupControl) {
+      this.formComponent.removeFormInput(this); // preventing there are two controls in formgroup when myFormInputInstance is (being) set
+      this.formComponent.addFormInput(this.myFormInputInstance ? this.myFormInputInstance : this);
+    }
+  }
+
+  private _prepareInput(): void {
+    if (this.elementRef && this.elementRef.nativeElement) {
+      //try to find input element
+      this._findInputNode(this.elementRef.nativeElement.children);
+      if (this.input) {
+        this.input.addEventListener('blur', (event) => this.doBlur(event));
+        this.input.addEventListener('focus', (event) => this.doFocus(event));
+      }
+    }
+  }
+
+  private _findInputNode(nodes): void {
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
+        this.input = node;
+        break;
+      } else if (node.children.length > 0) {
+        this._findInputNode(node.children);
+      }
+    }
+  }
+
+  private _positionValidationError(): void {
+    if (this.elementRef && this.elementRef.nativeElement && this._errorValidationComponent) {
+      const clientRect: ClientRect = this.elementRef.nativeElement.getBoundingClientRect();
+      this._errorValidationComponent.instance.top = clientRect.bottom;
+      this._errorValidationComponent.instance.left = clientRect.left;
+    }
+  }
+
+  protected async _handleKeyDown(event: KeyboardEvent): Promise<any> {
+    switch (event.code) {
+      case 'Enter':
+      case 'NumpadEnter':
+        if (!event.shiftKey) {
+            event.preventDefault();
+            await this._handleCommit();
+            return false;
+        }
+        return true;
+      case 'Tab':
+        const nextSiblingToFocus = event.shiftKey ? (event.currentTarget as any).previousSibling : (event.currentTarget as any).nextSibling;
+        event.preventDefault();
+        const success: boolean = await this._handleCommit();
+        if (success) {
+          if (nextSiblingToFocus) {
+            try {
+              this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
+            } catch (e) {
+            }
+          }
+        }
+        return false;
+      case 'Escape':
+        this.cancelClick();
+        event.preventDefault();
+        return false;
+    }
+  }
+
+  private _createNewFocusEvent(element: any): Event {
+    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;
+  }
+
+  private _setFocusOnNextPossibleInput(element: any, previous: boolean): void {
+    let elementColl = element.getElementsByTagName('input');
+    if (!elementColl || elementColl.length < 1) {
+     elementColl = element.getElementsByTagName('textarea');
+    }
+    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);
+      }
+    }
+  }
+}