WIP

APP/src/components/phone-input/phone-input.component.html

@@ -0,0 +1,4 @@
+<input #inputBox="ngModel" nbInput fullWidth [id]="id" name='phoneInput{{uuid}}' class='{{class}}'
+  placeholder='{{placeholder}}' [disabled]="_disabled" [readonly]="readonly" [(ngModel)]="value" validate
+  [mask]="allowExtension?(maskExpression+extensionMask):maskExpression" [invalidMsg]="'Invalid Phone/Fax format'"
+  (blur)="onBlur()">

APP/src/components/phone-input/phone-input.component.spec.ts

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

APP/src/components/phone-input/phone-input.component.ts

@@ -0,0 +1,146 @@
+import { Component, OnInit, ChangeDetectionStrategy, forwardRef, ViewChild, ElementRef, Output, Input, EventEmitter, Renderer2 } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlContainer, NgForm, NgModel } from '@angular/forms';
+import { ApplyMaskService } from '../../services/apply-mask.service';
+import { Util } from 'leaflet';
+import { StringUtils } from '../../utilities/string-utils';
+import { UuidUtils } from '../../utilities/uuid-utils';
+import { NbPopoverDirective } from '@nebular/theme';
+@Component({
+  selector: 'rbj-phone-input',
+  templateUrl: './phone-input.component.html',
+  styleUrls: ['./phone-input.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PhoneInputComponent),
+      multi: true
+    }
+  ],
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+})
+export class PhoneInputComponent implements OnInit {
+
+  @ViewChild('inputBox', { static: true }) input: NgModel;
+  @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
+  private _value: string;
+  private _initialized: boolean;
+  private _legalInput: boolean = false;
+  private _allowExtension: boolean = true;
+  private _lastBlurValue: string;
+  _readOnly: boolean;
+
+
+  onChange = (value: string) => { };
+  onTouched = () => { };
+  uuid: string = UuidUtils.generate();
+  name: string;
+  outputWithSymbol: boolean = true;
+  isValid: boolean = true;
+
+
+  @Input() id?: string = ''
+  @Input() placeholder: string;
+  @Input() class: string;
+  @Input() size: string = 'medium';
+  @Input() maskExpression: string = '(000) 000-0000';
+  @Input() extensionMask: string = ' ??????????';
+  _disabled = false;
+  @Input()
+  public set readonly(value) {
+    this._readOnly = typeof value !== 'undefined' && value !== false;
+  }
+  public get readonly(): boolean {
+    return this._readOnly;
+  }
+
+  @Input()
+  public set allowExtension(value) {
+    this._allowExtension = typeof value !== 'undefined' && value !== false;
+  }
+  public get allowExtension(): boolean {
+    return this._allowExtension;
+  }
+
+
+  @Output() inputChange = new EventEmitter<string>();
+  @Output() focus = new EventEmitter();
+
+  constructor(
+    private renderer: Renderer2,
+    private el: ElementRef, private applyMaskService: ApplyMaskService) { }
+
+  ngAfterViewInit() {
+    this.renderer.removeAttribute(this.el.nativeElement, 'id')
+  }
+  //#region Implements
+  writeValue(value: string): void {
+    if (value) {
+      if (value == "(   )    -") value = "";
+
+      this.value = this.outputWithSymbol ? value : value.replace(/[^\d]/g, '');
+      //this.setDisplayFormat(this.value);
+    } else {
+      this.value = null;
+    }
+    this._lastBlurValue = this.value;
+    //this.onChange(this.value);
+  }
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this._disabled = isDisabled;
+  }
+  //#endregion
+
+
+  public get value(): string {
+    return this._value;
+  }
+  public set value(v: string) {
+
+    if (this._initialized) {
+      if (v != this._value) {
+        this._value = v;
+      }
+    } else {
+      this._initialized = true;
+      this._value = v;
+    }
+  }
+
+  onFocus() {
+
+    if (this.input.invalid) {
+
+      this.popover.show();
+    } else {
+
+      this.popover.hide();
+    }
+  }
+  onFocusOut() {
+    if (this.input.invalid) {
+      setTimeout(() => {
+        this.el.nativeElement.querySelector('input').focus();
+      }, 200);
+    } else {
+
+      this.popover.hide();
+    }
+  }
+  ShowPopover() {
+  }
+
+  ngOnInit() {
+  }
+  onBlur() {
+    if (this._lastBlurValue != this.value) {
+      this.onChange(this.value);
+      this._lastBlurValue = this.value;
+    }
+  }
+}

APP/src/components/phone-input/phone-input.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PhoneInputComponent } from './phone-input.component';
+import { FormsModule } from '@angular/forms';
+import { NbInputModule, NbPopoverModule, NbIconModule } from '@nebular/theme';
+import { MaskDirectiveModule } from '../../directives/mask-directive/mask-directive.module';
+
+@NgModule({
+  declarations: [PhoneInputComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    NbInputModule,
+    MaskDirectiveModule,
+    NbPopoverModule,
+    NbIconModule
+  ],
+  exports: [PhoneInputComponent]
+})
+export class PhoneInputModule { }