Added Phone Number Component and Editor

Author: malvin-softheon

projects/forge-lib/src/lib/modules/form-builder/components/builder/builder.component.ts

@@ -16,6 +16,7 @@ import { Form } from '../../../../shared/models/form';
 import { ComponentTypes } from '../../../../shared/constants/component-types';
 import { CurrencyComponent } from '../../../../shared/form-components/concrete/currency/currency.component';
 import { DateTimeComponent } from '../../../../shared/form-components/concrete/date-time/date-time.component';
+import { PhoneNumberComponent } from '../../../../shared/form-components/concrete/phone-number/phone-number.component';
 
 @Component({
   selector: 'forge-form-builder',
@@ -45,7 +46,8 @@ export class BuilderComponent implements OnInit {
     ComponentTypes.Attachment,
     ComponentTypes.CheckboxGroup,
     ComponentTypes.Currency,
-    ComponentTypes.DateTime
+    ComponentTypes.DateTime,
+    ComponentTypes.PhoneNumber
   ];
 
   /**
@@ -150,6 +152,9 @@ export class BuilderComponent implements OnInit {
       } case ComponentTypes.DateTime: {
         this.addComponent(new DateTimeComponent(), `${ComponentTypes.DateTime}_${this.index++}`);
         break;
+      } case ComponentTypes.PhoneNumber: {
+        this.addComponent(new PhoneNumberComponent(), `${ComponentTypes.PhoneNumber}_${this.index++}`);
+        break;
       }
     }
   }

projects/forge-lib/src/lib/modules/form-builder/components/field-editor/field-editor.component.ts

@@ -238,6 +238,14 @@ export class FieldEditorComponent implements OnInit {
         this.showAbstractData = true;
         this.showAbstractValidation = true;
       }
+      case ComponentTypes.PhoneNumber: {
+        this.displayName = 'PhoneNumberEditorDisplayComponent';
+        this.dataName = 'PhoneNumberEditorDataComponent';
+        this.validationName = 'PhoneNumberEditorValidationComponent';
+        this.showAbstractDisplay = true;
+        this.showAbstractData = true;
+        this.showAbstractValidation = true;
+      }
     }
 
     this.createDynamicComponents(this.displayName, this.vcDisplay);

projects/forge-lib/src/lib/modules/form-builder/form-builder-components.module.ts

@@ -20,6 +20,7 @@ import { MaxValidatorDirective } from '../../shared/validators/maxValidator';
 import { MinValidatorDirective } from '../../shared/validators/minValidator';
 import { CurrencyComponent } from '../../shared/form-components/concrete/currency/currency.component';
 import { DateTimeComponent } from '../../shared/form-components/concrete/date-time/date-time.component';
+import { PhoneNumberComponent } from '../../shared/form-components/concrete/phone-number/phone-number.component';
 
 @NgModule({
     imports: [
@@ -42,7 +43,8 @@ import { DateTimeComponent } from '../../shared/form-components/concrete/date-ti
         AttachmentComponent,
         MultiSelectComponent,
         CurrencyComponent,
-        DateTimeComponent
+        DateTimeComponent,
+        PhoneNumberComponent
     ],
     exports: [
         TextFieldComponent,
@@ -59,7 +61,8 @@ import { DateTimeComponent } from '../../shared/form-components/concrete/date-ti
         AttachmentComponent,
         MultiSelectComponent,
         CurrencyComponent,
-        DateTimeComponent
+        DateTimeComponent,
+        PhoneNumberComponent
     ],
     entryComponents: [
         TextFieldComponent,
@@ -73,7 +76,8 @@ import { DateTimeComponent } from '../../shared/form-components/concrete/date-ti
         AttachmentComponent,
         MultiSelectComponent,
         CurrencyComponent,
-        DateTimeComponent
+        DateTimeComponent,
+        PhoneNumberComponent
     ]
 })
 export class FormBuilderComponentsModule { }

projects/forge-lib/src/lib/modules/form-builder/form-builder-editors.module.ts

@@ -33,6 +33,9 @@ import { CurrencyEditorValidationComponent } from '../../shared/form-editor-comp
 import { DateTimeEditorDataComponent } from '../../shared/form-editor-components/concrete/date-time-editor/data/date-time-editor-data.component';
 import { DateTimeEditorDisplayComponent } from '../../shared/form-editor-components/concrete/date-time-editor/display/date-time-editor-display.component';
 import { DateTimeEditorValidationComponent } from '../../shared/form-editor-components/concrete/date-time-editor/validation/date-time-editor-validation.component';
+import { PhoneNumberEditorDataComponent } from '../../shared/form-editor-components/concrete/phone-number-editor/data/phone-number-editor-data.component';
+import { PhoneNumberEditorDisplayComponent } from '../../shared/form-editor-components/concrete/phone-number-editor/display/phone-number-editor-display.component';
+import { PhoneNumberEditorValidationComponent } from '../../shared/form-editor-components/concrete/phone-number-editor/validation/phone-number-editor-validation.component';
 
 @NgModule({
     imports: [
@@ -69,7 +72,10 @@ import { DateTimeEditorValidationComponent } from '../../shared/form-editor-comp
         CurrencyEditorValidationComponent,
         DateTimeEditorDataComponent,
         DateTimeEditorDisplayComponent,
-        DateTimeEditorValidationComponent
+        DateTimeEditorValidationComponent,
+        PhoneNumberEditorDataComponent,
+        PhoneNumberEditorDisplayComponent,
+        PhoneNumberEditorValidationComponent
     ],
     exports: [
         TextFieldEditorDisplayComponent,
@@ -101,7 +107,10 @@ import { DateTimeEditorValidationComponent } from '../../shared/form-editor-comp
         CurrencyEditorValidationComponent,
         DateTimeEditorDataComponent,
         DateTimeEditorDisplayComponent,
-        DateTimeEditorValidationComponent
+        DateTimeEditorValidationComponent,
+        PhoneNumberEditorDataComponent,
+        PhoneNumberEditorDisplayComponent,
+        PhoneNumberEditorValidationComponent
     ],
     entryComponents: [
         TextFieldEditorDisplayComponent,
@@ -133,7 +142,10 @@ import { DateTimeEditorValidationComponent } from '../../shared/form-editor-comp
         CurrencyEditorValidationComponent,
         DateTimeEditorDataComponent,
         DateTimeEditorDisplayComponent,
-        DateTimeEditorValidationComponent
+        DateTimeEditorValidationComponent,
+        PhoneNumberEditorDataComponent,
+        PhoneNumberEditorDisplayComponent,
+        PhoneNumberEditorValidationComponent
     ]
 })
 export class FormBuilderEditorsModule { }

projects/forge-lib/src/lib/shared/constants/component-types.ts

@@ -31,4 +31,7 @@ export class ComponentTypes {
 
     /** Date time component type */
     public static readonly DateTime: string = 'Date Time';
+
+    /** Phone number component type */
+    public static readonly PhoneNumber: string = 'Phone Number';
 }

projects/forge-lib/src/lib/shared/form-components/concrete/phone-number/phone-number-display.ts

@@ -0,0 +1,11 @@
+import { FormDisplay } from "../../abstract/form-display";
+
+/**
+ * Phone number display attributes
+ */
+export class PhoneNumberDisplay extends FormDisplay {
+    /**
+     * Input mask
+     */
+    public inputMask: string;
+}

projects/forge-lib/src/lib/shared/form-components/concrete/phone-number/phone-number.component.html

@@ -0,0 +1,26 @@
+<div flex-container-row>
+  <div sws-form input-active full-width>
+    <input [id]="'input_' + id" forgeNumber [(ngModel)]="value" sws-form__input type="text" #name="ngModel"
+      [name]="'input_' + id" [disabled]="display.disabled" [required]="validation.required"
+      onkeyup="this.setAttribute('value', this.value);">
+    <label sws-form__label [id]="'label_' + id" [for]="'label_' + id"
+      *ngIf="!display.hideLabel">{{display.label}}</label>
+    <div *ngIf="name.invalid && (name.dirty || name.touched)">'
+      <div *ngIf="validation.customErrorMessage">
+        <span sws-label--danger m-t-30>{{validation.customErrorMessage}}</span>
+      </div>
+      <div *ngIf="!validation.customErrorMessage">
+      </div>
+    </div>
+    <div sws-form__bar></div>
+  </div>
+  <div [id]="'tooltip_' + id" sws-tooltip-right--light m-t-20 *ngIf="display.tooltip">
+    <div sws-icon-flat--secondary rounded>
+      <i class="fas fa-lightbulb"></i>
+    </div>
+    <div sws-tooltip--text>
+      <p> {{display.tooltip}} </p>
+    </div>
+  </div>
+</div>
+<p *ngIf="display.description">{{display.description}}</p>

projects/forge-lib/src/lib/shared/form-components/concrete/phone-number/phone-number.component.scss

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PhoneNumberComponent } from './phone-number.component';
+
+describe('PhoneNumberComponent', () => {
+  let component: PhoneNumberComponent;
+  let fixture: ComponentFixture<PhoneNumberComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PhoneNumberComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PhoneNumberComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/forge-lib/src/lib/shared/form-components/concrete/phone-number/phone-number.component.spec.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { TextFieldComponent } from '../text-field/text-field.component';
+import { ComponentTypes } from '../../../constants/component-types';
+
+/**
+ * Phone number component
+ */
+@Component({
+  selector: 'forge-renderer-phone-number',
+  templateUrl: './phone-number.component.html',
+  styleUrls: ['./phone-number.component.scss']
+})
+export class PhoneNumberComponent extends TextFieldComponent implements OnInit {
+  /**
+   * Component type
+   */
+  public type = ComponentTypes.PhoneNumber;
+
+  /**
+   * Initializes the component
+   */
+  public ngOnInit(): void {
+    if (!this.display.label) {
+      this.display.label = 'Phone Number';
+      this.display.inputMask = '(000) 000-0000';
+    }
+
+    this.value = this.data.defaultValue;
+  }
+}