@colijnit/sharedcomponents 261.1.0 → 261.1.2

package/projects/sharedcomponents/src/lib/components/form-builder/form-builder-user-form/form-builder-user-form.component.ts

@@ -0,0 +1,296 @@
+import {ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnDestroy, Output, ViewChild, ViewEncapsulation} from '@angular/core';
+import {FormQuestionType} from '@colijnit/mainapi/build/enum/form-question.type';
+import {TableName} from '@colijnit/mainapi/build/enum/table-name.enum';
+import {Form} from '@colijnit/mainapi/build/model/form.bo';
+import {FormResponse} from '@colijnit/mainapi/build/model/form-response.bo';
+import {InputBoolean} from '../../../decorator/input-boolean.decorator';
+import {FormQuestion} from '@colijnit/mainapi/build/model/form-question.bo';
+import {NULL_FORM_FULL_OBJECT, NULL_FORM_RESPONSE_OBJECT} from '../../../model/util/forms-null-object';
+import {FormQuestionAnswer} from '@colijnit/mainapi/build/model/form-question-answer.bo';
+import {FormQuestionResponse} from '@colijnit/mainapi/build/model/form-question-response.bo';
+import {CoDocument} from '@colijnit/mainapi/build/model/co-document.bo';
+import {ArrayUtils} from '../../../utils/array-utils';
+import {BusinessObjectFactory} from '@colijnit/ioneconnector/build/service/business-object-factory';
+import {FormUtils} from '../../../utils/form-utils';
+import {Icon} from '../../../enum/icon.enum';
+import {IconCacheService} from '../../../service/icon-cache.service';
+import {UserFormMode} from '../../../enum/user-form-mode.enum';
+import {SharedConnectorService} from '../../../service/shared-connector.service';
+import {FilesUploadComponent} from '../../files-upload/files-upload.component';
+import {PromptService} from '@colijnit/corecomponents_v12';
+import {ValidationErrors} from '@angular/forms';
+
+@Component({
+  selector: 'co-form-builder-user-form',
+  template: `
+      <co-dialog [headerTemplate]="headerTemplate" [footerTemplate]="footerTemplate" (closeClick)="handleCancelForm()">
+          <div class="main-content-wrapper">
+              <div class="section-wrapper mini-scrollbar" #sectionWrapper>
+                  <co-form #coForm (validSubmit)="onValid()" [keepInView]="sectionWrapper">
+                      <ng-container *ngFor="let question of cloneForm.questions; let index = index">
+                          <co-form-builder-question
+                                  [mode]="mode"
+                                  [questionIndex]="index"
+                                  [question]="question"
+                                  [active]="form.questions.indexOf(question) === form.questions.indexOf(activeQuestion)"
+                                  [readonly]="readonly"
+                                  [(formResponse)]="formResponse.formQuestionResponses"
+                                  (updateQuestion)="enabledNextQuestion($event.question, $event.answer)">
+                          </co-form-builder-question>
+                      </ng-container>
+                  </co-form>
+              </div>
+              <div class="section-wrapper mini-scrollbar" #sectionWrapper>
+                  <co-input-checkbox [model]="formResponse?.isFinal" (modelChange)="handleDefinitiveChange($event)" [label]="'DEFINITIVE' | sharedLocalize"></co-input-checkbox>
+              </div>
+          </div>
+      </co-dialog>
+      <ng-template #headerTemplate>
+          <div class="header-wrapper">
+              <span class="form-title" [textContent]="form?.formName"></span>
+          </div>
+      </ng-template>
+      <ng-template #footerTemplate>
+          <div class="footer-wrapper">
+              <div class="attachments-wrapper">
+                  <div class="row">
+                      <input type="file" accept="image/*" capture="environment" (change)="handleDocumentsAdded($event)">
+                      <co-files-upload #filesUploadComponent
+                                       class="co-files-upload"
+                                       [documents]="formResponse.documents"
+                                       (documentsAdded)="handleDocumentsAdded($event)"
+                                       (documentChangeEvent)="handleDocumentChanged($event)"
+                                       (documentDeleted)="handleDocumentDeleted($event)"
+                      ></co-files-upload>
+                  </div>
+              </div>
+              <div class="row">
+                  <co-button class="save-button" (click)="commitUserForm()" [iconData]="iconCacheService.getIcon(icons.CheckDuotone)"></co-button>
+                  <co-button class="close-button" [iconData]="iconCacheService.getIcon(icons.CrossSkinny)" (click)="handleCancelForm()"></co-button>
+              </div>
+          </div>
+
+      </ng-template>
+
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class FormBuilderUserFormComponent implements OnDestroy {
+
+  public readonly formQuestionType: typeof FormQuestionType = FormQuestionType;
+  public readonly TableName: typeof TableName = TableName;
+  public readonly icons: typeof Icon = Icon;
+
+  public mode: UserFormMode = UserFormMode.Create;
+  public documents: CoDocument[] = [];
+
+  private _form: Form;
+
+  @ViewChild('filesUploadComponent')
+  public filesUploadComponent: FilesUploadComponent;
+
+  @Input()
+  public showPopup: boolean = false;
+
+  @Input()
+  public set form(form: Form) {
+    this._form = form;
+    this._prepareNewForm();
+    this._changeDetectorRef.detectChanges();
+  }
+
+  public get form(): Form {
+    return this._form;
+  }
+
+  @Input()
+  public userForm: FormResponse;
+
+  @Input()
+  public table: TableName;
+
+  @Input()
+  public key: string;
+
+  @Input()
+  @InputBoolean()
+  public readonly: boolean = false;
+
+  @Input()
+  public enableQuestions: boolean = true;
+
+  @Input()
+  public lineUUID: string = "";
+
+  @Output()
+  public readonly cancelForm: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output()
+  public readonly saveForm: EventEmitter<FormResponse> = new EventEmitter<FormResponse>();
+
+  @Output()
+  public readonly definitiveChange: EventEmitter<{ value: boolean, lineUUID: string }> = new EventEmitter<{ value: boolean, lineUUID: string }>();
+
+  @Output()
+  public readonly createNewFormResponse: EventEmitter<FormResponse> = new EventEmitter<FormResponse>();
+
+  @Output()
+  public readonly errorMessage: EventEmitter<string> = new EventEmitter<string>();
+
+  public cloneForm: Form = NULL_FORM_FULL_OBJECT;
+  public formResponse: FormResponse;
+
+  public activeQuestion: FormQuestion;
+  public gotoQuestion: number;
+
+  @HostBinding('class.co-form-builder-user-form')
+  public showClass() {
+    return true;
+  }
+
+  constructor(
+    private _detectorRef: ChangeDetectorRef,
+    private _boFactory: BusinessObjectFactory,
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _sharedConnectorService: SharedConnectorService,
+    public iconCacheService: IconCacheService
+  ) {
+  }
+
+  ngOnDestroy(): void {
+    this._detectorRef = undefined;
+  }
+
+  public enabledNextQuestion(question: FormQuestion, answer?: FormQuestionAnswer | number): void {
+    this.activeQuestion = question;
+    if (typeof answer === 'number') {
+      answer = question.formQuestionAnswers.find(a => a.answerId === answer);
+    }
+    const gotoQuestion: number = answer ? answer.gotoQuestionId : question.gotoQuestionId;
+    const currentIndex: number = this.cloneForm.questions.findIndex(q => q.questionId === question.questionId);
+    let nextQuestion: FormQuestion = this.cloneForm.questions[currentIndex + 1];
+    if (gotoQuestion) {
+      nextQuestion = this.cloneForm.questions.find(q => q.questionId === gotoQuestion);
+    }
+    if (nextQuestion) {
+      nextQuestion.active = false;
+      this.gotoQuestion = nextQuestion.sequence;
+    } else {
+      this.gotoQuestion = undefined;
+    }
+  }
+
+  public onValid(): void {
+    this.saveForm.next(this.formResponse);
+  }
+
+  public async handleCancelForm(): Promise<void> {
+    if (this.userForm && this.userForm.responseId) {
+      try {
+        await this._sharedConnectorService.unlockFormResponse(this.userForm.responseId);
+      } catch (e: any) {
+        this.errorMessage.emit(<string>e);
+      }
+    }
+    this.cloneForm = undefined;
+    this.userForm = undefined;
+    this.formResponse = undefined;
+    this.cancelForm.next();
+  }
+
+  public handleDocumentDeleted(doc: CoDocument): void {
+    ArrayUtils.RemoveElement(doc, this.formResponse.documents);
+  }
+
+  public handleDocumentChanged(doc: CoDocument): void {
+    this.formResponse.documents.push(doc);
+  }
+
+  public handleDocumentsAdded(docs: CoDocument[]): void {
+    docs.forEach((document: CoDocument) => {
+      this.formResponse.documents.push(document);
+    });
+  }
+
+  private async _prepareNewForm(): Promise<void> {
+    this.cloneForm = <Form>this._boFactory.makeWithRawBackendData(Form, this.form);
+    if (!this.userForm?.responseId) {
+      this.formResponse = <FormResponse>this._boFactory.makeWithRawBackendData(FormResponse, this.userForm);
+      this.formResponse.formId = this.form.formId;
+      this.formResponse.table = this.table;
+      this.formResponse.key = this.key;
+      FormUtils.MergeResponseWithForm(this.cloneForm, this.formResponse);
+    } else {
+      this.mode = UserFormMode.Edit;
+      this._prepareExistingForm();
+      try {
+        await this._sharedConnectorService.lockFormResponse(this.userForm.responseId);
+      } catch (e: any) {
+        this.errorMessage.emit(<string>e);
+      }
+    }
+
+    this._loadDocs();
+    if (this.enableQuestions) {
+      this._enableQuestions();
+    }
+  }
+
+  private _prepareExistingForm(): void {
+    this.cloneForm = <Form>this._boFactory.makeWithRawBackendData(Form, this.form);
+    this.formResponse = <FormResponse>this._boFactory.makeWithRawBackendData(FormResponse, this.userForm);
+    FormUtils.MergeResponseWithForm(this.cloneForm, this.formResponse);
+
+    if (this.enableQuestions) {
+      this._enableQuestions();
+    }
+  }
+
+  private _enableQuestions(): void {
+    for (const currentIndex in this.cloneForm.questions) {
+      if (this.cloneForm.questions[currentIndex]) {
+        const nextQuestion: FormQuestion = this.cloneForm.questions[currentIndex];
+        if (nextQuestion) {
+          nextQuestion.active = false;
+          this.gotoQuestion = nextQuestion.sequence;
+        } else {
+          this.gotoQuestion = undefined;
+        }
+      }
+    }
+  }
+
+  private _loadDocs(): void {
+    if (!this.formResponse.documents) {
+      this.formResponse.documents = [];
+    }
+    this.formResponse.documents.forEach((doc: CoDocument) => {
+      if (doc.documentId && !doc.documentBody) {
+        this._sharedConnectorService.getDocumentContent(doc.documentId).then((content: string) => {
+          doc.documentBody = content;
+        });
+      }
+    });
+    this._changeDetectorRef.detectChanges();
+  }
+
+  public handleDefinitiveChange(definitive: boolean) {
+    this.formResponse.isFinal = definitive;
+    this.definitiveChange.next({value: definitive, lineUUID: this.lineUUID});
+  }
+
+  public commitUserForm() {
+    FormUtils.MergeResponseWithForm(this.cloneForm, this.formResponse);
+    switch (this.mode) {
+      case UserFormMode.Create:
+        this.saveForm.next(this.formResponse);
+        this.handleCancelForm();
+        break;
+      case UserFormMode.Edit:
+            this.saveForm.next(this.formResponse);
+            this.handleCancelForm();
+        break;
+    }
+  }
+
+}

package/projects/sharedcomponents/src/lib/components/form-builder/form-builder-user-form/form-builder-user-form.module.ts

@@ -0,0 +1,53 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormBuilderUserFormComponent} from './form-builder-user-form.component';
+import {
+  ButtonModule,
+  CoDialogModule,
+  FormModule,
+  IconModule,
+  InputCheckboxModule,
+  InputDatePickerModule,
+  InputRadioButtonModule,
+  InputTextareaModule,
+  InputTextModule,
+  InputTimeModule,
+  ListOfValuesModule
+} from '@colijnit/corecomponents_v12';
+import {UserFormInputScaleModule} from './components/user-form-input-scale/user-form-input-scale.module';
+import {SharedComponentsTranslationModule} from '../../../translation/shared-components-translation.module';
+import {FilesUploadModule} from '../../files-upload/files-upload.module';
+import {FileUploadPopupModule} from '../../file-upload-popup/file-upload-popup.module';
+import {FileUploadModule} from '../../file-upload/file-upload.module';
+import {FormBuilderQuestionComponent} from './form-builder-question.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormModule,
+    InputTextModule,
+    InputTextareaModule,
+    InputRadioButtonModule,
+    InputCheckboxModule,
+    ListOfValuesModule,
+    UserFormInputScaleModule,
+    InputDatePickerModule,
+    InputTimeModule,
+    SharedComponentsTranslationModule,
+    CoDialogModule,
+    ButtonModule,
+    IconModule,
+    FilesUploadModule,
+    FileUploadPopupModule,
+    FileUploadModule
+  ],
+  declarations: [
+    FormBuilderUserFormComponent,
+    FormBuilderQuestionComponent
+  ],
+  exports: [
+    FormBuilderUserFormComponent
+  ]
+})
+export class FormBuilderUserFormModule {
+}

package/projects/sharedcomponents/src/lib/components/image-display/image-display.component.ts

@@ -0,0 +1,42 @@
+import {Component, forwardRef, HostBinding, Input, ViewEncapsulation} from '@angular/core';
+import {SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigAdapterComponent} from '@colijnit/corecomponents_v12';
+
+@Component({
+  selector: "co-image-display",
+  template: `
+    <img class="image" *ngIf="!!model" [src]="model">
+    <div class="no-image" *ngIf="!model">
+      <div class="img"></div>
+      <div class="no-image-label" [textContent]="label | sharedLocalize"></div>
+    </div>
+  `,
+  providers: [{
+    provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
+    useExisting: forwardRef(() => ImageDisplayComponent)}
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class ImageDisplayComponent implements ScreenConfigAdapterComponent {
+  // Image data URI string. Meant for direct use in [src] attribute of an <img> tag.
+  @Input()
+  public model: string;
+
+  // The (localized) text to show when there is no image. Defaults to 'NO_IMAGE'.
+  @Input()
+  public label: string = "NO_IMAGE";
+
+  @HostBinding('class.co-image-display')
+  public showClass() {
+    return true;
+  }
+
+  public objectConfigName: string;
+  @HostBinding("class.co-transaction-hidden")
+  public hidden: boolean;
+  public required: boolean;
+  public forceReadonly: boolean;
+  public readonly: boolean;
+  public maxLength: number;
+  public decimals: number;
+  public redErrorBackground: boolean;
+}

package/projects/sharedcomponents/src/lib/components/image-display/image-display.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {ImageDisplayComponent} from './image-display.component';
+import {CoreComponentsTranslationModule} from '@colijnit/corecomponents_v12';
+import {CommonModule} from '@angular/common';
+import {SharedComponentsTranslationModule} from '../../translation/shared-components-translation.module';
+
+@NgModule({
+    imports: [
+        CoreComponentsTranslationModule,
+        CommonModule,
+        SharedComponentsTranslationModule
+    ],
+  declarations: [
+    ImageDisplayComponent
+  ],
+  exports: [
+    ImageDisplayComponent
+  ]
+})
+export class ImageDisplayModule {
+
+}

package/projects/sharedcomponents/src/lib/components/key-pad/key-pad.component.ts

@@ -0,0 +1,216 @@
+import {Component, EventEmitter, HostBinding, HostListener, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
+import {Icon} from '../../enum/icon.enum';
+import {IconCacheService} from '../../service/icon-cache.service';
+import {KeyboardCode} from '../../enum/keyboard-code.enum';
+
+@Component({
+  selector: 'co-key-pad',
+  template: `
+    <div class="key-pad-wrapper">
+      <div class="key-pad-model-wrapper" *ngIf="showValue">
+        <co-responsive-text class="key-pad-model" [text]="internalModel" [class.negative]="isNegative"></co-responsive-text>
+      </div>
+      <div class="key-pad-button-wrapper">
+        <div class="key-pad-button button-7" (click)="handleButtonClick('7')"><co-responsive-text class="key-pad-button-text" [text]="'7'"></co-responsive-text></div>
+        <div class="key-pad-button button-8" (click)="handleButtonClick('8')"><co-responsive-text class="key-pad-button-text" [text]="'8'"></co-responsive-text></div>
+        <div class="key-pad-button button-9" (click)="handleButtonClick('9')"><co-responsive-text class="key-pad-button-text" [text]="'9'"></co-responsive-text></div>
+        <div class="key-pad-button button-bs" (click)="handleBsClick($event)">
+          <co-icon [iconData]="iconCacheService.getIcon(icons.DeleteLeftRegular)"></co-icon>
+        </div>
+        <div class="key-pad-button button-4" (click)="handleButtonClick('4')"><co-responsive-text class="key-pad-button-text" [text]="'4'"></co-responsive-text></div>
+        <div class="key-pad-button button-5" (click)="handleButtonClick('5')"><co-responsive-text class="key-pad-button-text" [text]="'5'"></co-responsive-text></div>
+        <div class="key-pad-button button-6" (click)="handleButtonClick('6')"><co-responsive-text class="key-pad-button-text" [text]="'6'"></co-responsive-text></div>
+        <div class="key-pad-button button-minus" (click)="handleMinusClick($event)"><co-responsive-text class="key-pad-button-text" [text]="'-'"></co-responsive-text></div>
+        <div class="key-pad-button button-1" (click)="handleButtonClick('1')"><co-responsive-text class="key-pad-button-text" [text]="'1'"></co-responsive-text></div>
+        <div class="key-pad-button button-2" (click)="handleButtonClick('2')"><co-responsive-text class="key-pad-button-text" [text]="'2'"></co-responsive-text></div>
+        <div class="key-pad-button button-3" (click)="handleButtonClick('3')"><co-responsive-text class="key-pad-button-text" [text]="'3'"></co-responsive-text></div>
+        <div class="key-pad-button button-enter" (click)="handleEnterClick($event)">
+          <co-responsive-text class="key-pad-button-text" [text]="'enter'"></co-responsive-text>
+        </div>
+        <div class="key-pad-button button-0" (click)="handleButtonClick('0')"><co-responsive-text class="key-pad-button-text" [text]="'0'"></co-responsive-text></div>
+        <div class="key-pad-button button-dot" (click)="handleButtonClick('.')"><co-responsive-text class="key-pad-button-text" [text]="'.'"></co-responsive-text></div>
+      </div>
+    </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class KeyPadComponent {
+  public icons: typeof Icon = Icon;
+
+  @Input()
+  public set model(value: number) {
+    this._model = value;
+    this._internalModel = this._model + "";
+  }
+
+  public get model(): number {
+    return this._model;
+  }
+
+  @Input()
+  public showValue: boolean = true;
+
+  @Input()
+  public resetModelOnInit: boolean = true;
+
+  @Input()
+  public emitModelChangeOnEnter: boolean = true;
+
+  @Output()
+  public modelChange: EventEmitter<number> = new EventEmitter<number>();
+
+  @Output()
+  public internalModelChange: EventEmitter<string> = new EventEmitter<string>();
+
+  @Output()
+  public enterClick: EventEmitter<void> = new EventEmitter<void>();
+
+  @HostBinding('class.co-key-pad')
+  public showClass() {
+    return true;
+  }
+
+  @HostListener('window:keydown', ['$event'])
+  public handleKeyDown(event: KeyboardEvent) {
+    if (document.activeElement instanceof HTMLBodyElement) {
+      this._keyDown(event);
+    }
+  }
+
+  private readonly _validKeyMap: Map<KeyboardCode | string, string> = new Map<KeyboardCode, string>([
+    [KeyboardCode.Digit0, "0"],
+    [KeyboardCode.Digit1, "1"],
+    [KeyboardCode.Digit2, "2"],
+    [KeyboardCode.Digit3, "3"],
+    [KeyboardCode.Digit4, "4"],
+    [KeyboardCode.Digit5, "5"],
+    [KeyboardCode.Digit6, "6"],
+    [KeyboardCode.Digit7, "7"],
+    [KeyboardCode.Digit8, "8"],
+    [KeyboardCode.Digit9, "9"],
+    [KeyboardCode.Numpad0, "0"],
+    [KeyboardCode.Numpad1, "1"],
+    [KeyboardCode.Numpad2, "2"],
+    [KeyboardCode.Numpad3, "3"],
+    [KeyboardCode.Numpad4, "4"],
+    [KeyboardCode.Numpad5, "5"],
+    [KeyboardCode.Numpad6, "6"],
+    [KeyboardCode.Numpad7, "7"],
+    [KeyboardCode.Numpad8, "8"],
+    [KeyboardCode.Numpad9, "9"],
+    [KeyboardCode.NumpadDecimal, "."],
+    [KeyboardCode.Period, "."]
+  ])
+
+  private _init: boolean = true;
+
+  constructor(public iconCacheService: IconCacheService) {
+  }
+
+  public set internalModel(value: string) {
+    this._internalModel = value;
+    this.isNegative = parseFloat(this._internalModel) < 0;
+    this.internalModelChange.emit(this._internalModel);
+  }
+
+  public get internalModel(): string {
+    return this._internalModel;
+  }
+
+  public isNegative: boolean = false;
+
+  private _model: number = 0;
+  private _internalModel: string = "0";
+  private _maxCharacters: number = 11;
+
+  public handleMinusClick(event: MouseEvent | KeyboardEvent): void {
+    const model: number = parseFloat(this.internalModel);
+    if (model !== 0) {
+      if (model < 0) {
+        this.internalModel = Math.abs(model) + "";
+      } else {
+        this.internalModel = -model + "";
+      }
+    }
+    this._emitModelChange();
+  }
+
+  public handleClearClick(event: MouseEvent | KeyboardEvent): void {
+    this.internalModel = "0";
+    this._emitModelChange();
+  }
+
+  public handleBsClick(event: MouseEvent | KeyboardEvent): void {
+    let wish: string = this.internalModel;
+    wish = wish.slice(0, wish.length - 1) || "0";
+    if (!isNaN(parseFloat(wish))) {
+      this.internalModel = parseFloat(wish) + "";
+    }
+    this._emitModelChange();
+  }
+
+  public handleButtonClick(chr: string): void {
+    this._updateModel(chr);
+  }
+
+  public handleEnterClick(event: MouseEvent | KeyboardEvent): void {
+    this._emitModelChange(true);
+    this.enterClick.emit();
+  }
+
+  private _updateModel(value: string): void {
+    if (this.resetModelOnInit && this._init) {
+      this._internalModel = "0";
+      this._init = false;
+    }
+    if (value === undefined || value === null ||
+      (value === '.' && this.internalModel.indexOf('.') > -1) ||
+      this.internalModel.length >= this._maxCharacters) {
+      return;
+    }
+    this.internalModel = this.internalModel !== "0" ? this.internalModel + value : value;
+    this._emitModelChange();
+  }
+
+  private _keyDown(event: KeyboardEvent): void {
+    if (this._isEnter(event)) {
+      this.handleEnterClick(event);
+    } else if (this._isMinus(event)) {
+      this.handleMinusClick(event);
+    } else if (this._isEscape(event)) {
+      this.handleClearClick(event);
+    } else if (this._isBackspace(event)) {
+      this.handleBsClick(event);
+    } else {
+      this._updateModel(this._validKeyMap.get(event.code));
+    }
+  }
+
+  private _isEnter(event: KeyboardEvent): boolean {
+    return event.code === KeyboardCode.Enter || event.code === KeyboardCode.NumpadEnter;
+  }
+
+  private _isMinus(event: KeyboardEvent): boolean {
+    return event.code === KeyboardCode.Minus || event.code === KeyboardCode.NumpadSubtract;
+  }
+
+  private _isEscape(event: KeyboardEvent): boolean {
+    return event.code === KeyboardCode.Escape;
+  }
+
+  private _isBackspace(event: KeyboardEvent): boolean {
+    return event.code === KeyboardCode.Backspace;
+  }
+
+  private _emitModelChange(enter: boolean = false): void {
+    if ((enter && this.emitModelChangeOnEnter) || (!enter && !this.emitModelChangeOnEnter)) {
+      const model: number = parseFloat(this.internalModel);
+      if (!isNaN(model)) {
+        if (enter && this.emitModelChangeOnEnter) {
+          this.model = model;
+        }
+        this.modelChange.emit(model);
+      }
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/key-pad/key-pad.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {KeyPadComponent} from './key-pad.component';
+import {IconModule, ResponsiveTextModule} from '@colijnit/corecomponents_v12';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IconModule,
+    ResponsiveTextModule
+  ],
+  declarations: [
+    KeyPadComponent
+  ],
+  exports: [
+    KeyPadComponent
+  ]
+})
+export class KeyPadModule {
+}