@sumaris-net/ngx-components 2.6.4-alpha4 → 2.6.4-alpha5

package/src/app/shared/material/latlong/material.latlong.html

@@ -0,0 +1,127 @@
+<!-- readonly -->
+<mat-form-field *ngIf="readonly; else writable"
+                [floatLabel]="floatLabel"
+                [appearance]="appearance"
+                class="mat-form-field-disabled">
+
+  <div matPrefix>
+    <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+  </div>
+
+  <input matInput hidden type="text"
+         readonly
+         [placeholder]="placeholder"
+         [formControl]="formControl">
+  <ion-text>{{_format(formControl.value) }}</ion-text>
+
+  <div matSuffix>
+    <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+  </div>
+</mat-form-field>
+
+<!-- writable -->
+<ng-template #writable>
+
+  <ion-grid class="ion-no-padding">
+    <ion-row class="ion-no-padding no-wrap">
+      <ion-col class="text ion-no-padding">
+        <mat-form-field [floatLabel]="floatLabel"
+                        [appearance]="appearance"
+                        [class.mat-form-field-disabled]="formControl.disabled"
+                        [class.mat-form-field-invalid]="formControl.touched && formControl.invalid">
+
+          <mat-label *ngIf="placeholder">{{placeholder}}</mat-label>
+
+          <div matPrefix>
+            <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+          </div>
+
+          <input matInput #inputElement
+                 type="text"
+                 autocomplete="off"
+                 [textMask]="textMaskConfig"
+                 [formControl]="textFormControl"
+                 [placeholder]="inputPlaceholder|translate"
+                 (keypress)="onKeypress($event)"
+                 (keydown.tab)="moveCaretToSeparator($event, true)"
+                 (keydown.shift.tab)="moveCaretToSeparator($event, false)"
+                 (focus)="_onFocus($event)"
+                 (blur)="_onBlur($event)"
+                 [required]="required"
+                 [tabindex]="tabindex">
+
+          <div matSuffix *ngIf="!showSignControl">
+            <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+          </div>
+
+          <div class="mat-form-field-subscript mat-form-field-subscript-wrapper">
+
+            <!-- errors -->
+            <mat-error *ngIf="formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey" [ngSwitch]="errorKey">
+              <span *ngSwitchCase="'required'" translate>ERROR.FIELD_REQUIRED</span>
+              <span *ngSwitchCase="'latitude'" translate>ERROR.FIELD_NOT_VALID_LATITUDE</span>
+              <span *ngSwitchCase="'longitude'" translate>ERROR.FIELD_NOT_VALID_LONGITUDE</span>
+              <span *ngSwitchCase="'min'">{{'ERROR.FIELD_MIN_COMPACT'|translate: {min: _format(formControl.errors.min.min) } }}</span>
+              <span *ngSwitchCase="'max'">{{'ERROR.FIELD_MAX_COMPACT'|translate: {max: _format(formControl.errors.max.max) } }}</span>
+              <span *ngSwitchCase="'msg'">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>
+            </mat-error>
+            <ng-content select="mat-error"></ng-content>
+
+            <!-- mat hint -->
+            <div class="mat-form-field-hint-wrapper" [class.cdk-visually-hidden]="formControl.invalid">
+              <div class="mat-form-field-hint-spacer"></div>
+              <ng-content select="mat-hint"></ng-content>
+            </div>
+          </div>
+        </mat-form-field>
+      </ion-col>
+
+      <!-- sign -->
+      <ion-col class="sign ion-no-padding" [ngSwitch]="type" *ngIf="showSignControl">
+
+          <!-- sign on latitude -->
+          <mat-form-field *ngSwitchCase="'latitude'"
+                          floatLabel="never"
+                          [appearance]="appearance"
+                          [class.mat-form-field-invalid]="formControl.touched && signFormControl.invalid">
+            <mat-label *ngIf="placeholder && floatLabel != 'never'" translate>COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER</mat-label>
+            <mat-select [formControl]="signFormControl"
+                        [tabindex]="tabindex+1">
+              <mat-option [value]="1">{{'COMMON.LAT_LONG.LAT_SIGN_N'|translate}}</mat-option>
+              <mat-option [value]="-1" >{{'COMMON.LAT_LONG.LAT_SIGN_S'|translate}}</mat-option>
+            </mat-select>
+
+            <div matSuffix>
+              <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+            </div>
+          </mat-form-field>
+
+          <!-- sign on longitude -->
+          <mat-form-field floatLabel="never"
+                          *ngSwitchCase="'longitude'"
+                          [class.mat-form-field-invalid]="formControl.touched && signFormControl.invalid">
+            <mat-label *ngIf="placeholder && floatLabel != 'never'" translate>COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER</mat-label>
+            <mat-select [formControl]="signFormControl"
+                        [tabindex]="tabindex+2">
+              <mat-option [value]="1" translate>{{'COMMON.LAT_LONG.LONG_SIGN_E'|translate}}</mat-option>
+              <mat-option [value]="-1" translate>{{'COMMON.LAT_LONG.LONG_SIGN_W'|translate}}</mat-option>
+            </mat-select>
+
+            <div matSuffix>
+              <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+            </div>
+          </mat-form-field>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+</ng-template>
+
+<ng-template #matPrefixTemplate>
+  <ng-content select="[matPrefix]"></ng-content>
+</ng-template>
+
+
+<ng-template #matSuffixTemplate>
+  <ng-content select="[matSuffix]"></ng-content>
+</ng-template>

package/src/app/shared/material/latlong/material.latlong.module.ts

@@ -0,0 +1,40 @@
+import {NgModule} from '@angular/core';
+import {MatCommonModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+import {IonicModule} from '@ionic/angular';
+import {SharedPipesModule} from '../../pipes/pipes.module';
+import {MatLatLongField} from './material.latlong';
+import {ReactiveFormsModule} from '@angular/forms';
+import {TextMaskModule} from 'angular2-text-mask';
+import {MatSelectModule} from '@angular/material/select';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    SharedPipesModule,
+    MatCommonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatButtonModule,
+    TextMaskModule,
+    TranslateModule.forChild(),
+    MatSelectModule
+  ],
+  exports: [
+    MatLatLongField
+  ],
+  declarations: [
+    MatLatLongField
+  ]
+})
+export class SharedMatLatLongModule {
+}
+

package/src/app/shared/material/latlong/material.latlong.scss

@@ -0,0 +1,48 @@
+:host {
+  display: inline-block;
+  width: 100%;
+  min-width: 140px;
+  position: relative;
+  --ion-grid-column-padding: 0;
+}
+
+mat-form-field {
+  .datetime-md {
+    padding: 0 !important;
+  }
+}
+
+ion-row {
+  flex-wrap: nowrap;
+
+  ion-col.text {
+    min-width: 80px;
+  }
+  ion-col.sign {
+    min-width: 40px;
+    max-width: 55px;
+  }
+}
+
+mat-form-field {
+  width: 100%;
+
+  .mat-form-field-subscript-wrapper {
+    overflow: visible;
+    white-space: nowrap;
+    top: 100%;
+
+    .mat-form-field-hint-wrapper {
+      display: flex;
+
+      .mat-form-field-hint-spacer {
+        flex: 1 0 1em;
+      }
+    }
+  }
+}
+
+mat-error {
+  text-align: right;
+  width: 100%
+}

package/src/app/shared/material/latlong/material.latlong.ts

@@ -0,0 +1,421 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Input, OnDestroy, OnInit, Optional, Output, ViewChild} from '@angular/core';
+import {FloatLabelType, MatFormFieldAppearance} from '@angular/material/form-field';
+import {ControlValueAccessor, FormGroupDirective, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormControl, Validators} from '@angular/forms';
+import {SharedValidators} from '../../validator/validators';
+import {formatLatitude, formatLongitude, LAT_LONG_DEFAULT_MAX_DECIMALS, LatLongFormatFn, LatLongFormatOptions, LatLongPattern, parseLatitudeOrLongitude} from './latlong.utils';
+import {EMPTY_PLACEHOLDER_CHAR} from '../../constants';
+import {filter} from 'rxjs/operators';
+import {isNil, isNilOrNaN, isNotNil, isNotNilOrBlank} from '../../functions';
+import {getCaretPosition, moveInputCaretToSeparator, selectInputContent, selectInputRange} from '../../inputs';
+import {merge, Subscription} from 'rxjs';
+import {TextMaskConfig} from 'angular2-text-mask';
+import {DEFAULT_MAX_DECIMALS} from '../duration/duration.utils';
+
+const MASKS: {
+  [key: string]: {
+    [pattern: string]: Array<string|RegExp>;
+  };
+} = {
+  latitude: {
+    DDMMSS: [' ', /\d/, /\d/, '°', ' ', /\d/, /\d/, '\'', ' ', /\d/, /\d/, '.', /\d/, /\d/, '"'],
+    DDMM: [' ', /\d/, /\d/, '°', ' ', /\d/, /\d/, '.', /\d/, /\d/, /\d/, '\''],
+    DD: [/[+-]/, ' ', /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, '°']
+  },
+  longitude: {
+    DDMMSS: [/\d/, /\d/, /\d/, '°', ' ', /\d/, /\d/, '\'', ' ', /\d/, /\d/, '.', /\d/, /\d/, '"'],
+    DDMM: [/\d/, /\d/, /\d/, '°', ' ', /\d/, /\d/, '.', /\d/, /\d/, /\d/, '\''],
+    DD: [/[+-]/, /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, '°']
+  }
+};
+
+const noop = () => {
+};
+
+@Component({
+  selector: 'mat-latlong-field',
+  templateUrl: './material.latlong.html',
+  styleUrls: ['./material.latlong.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => MatLatLongField),
+    }
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MatLatLongField implements OnInit, OnDestroy, ControlValueAccessor {
+  private _onChangeCallback: (_: any) => void = noop;
+  private _onTouchedCallback: () => void = noop;
+  private _subscription = new Subscription();
+  private _formatOptions: LatLongFormatOptions;
+  private _disabling = false;
+  private _writing = false;
+
+  _readonly = false;
+  _formatFn: LatLongFormatFn;
+  textMaskConfig: TextMaskConfig;
+  textFormControl: UntypedFormControl;
+  signFormControl: UntypedFormControl;
+  mask: Array<string | RegExp> | ((raw: string) => Array<string | RegExp>) | false;
+  inputPlaceholder: string;
+  showSignControl: boolean;
+
+  get disabled(): any {
+    return this.readonly || this.formControl.disabled;
+  }
+
+  @Input() formControl: UntypedFormControl;
+  @Input() formControlName: string;
+  @Input() type: 'latitude' | 'longitude';
+  @Input('latLongPattern') pattern: LatLongPattern;
+  @Input() required = false;
+  @Input() floatLabel: FloatLabelType = 'auto';
+  @Input() appearance: MatFormFieldAppearance;
+  @Input() placeholder: string;
+  @Input() tabindex: number;
+  @Input() defaultSign: '-' | '+';
+  @Input() maxDecimals: number = LAT_LONG_DEFAULT_MAX_DECIMALS;
+  @Input() placeholderChar: string = EMPTY_PLACEHOLDER_CHAR;
+
+  @Input() set readonly(value: boolean){
+    this._readonly = value;
+    this.markForCheck();
+  }
+
+  get readonly(): boolean {
+    return this._readonly;
+  }
+
+  @Output() onBlur = new EventEmitter<FocusEvent>();
+  @Output() onFocus = new EventEmitter<FocusEvent>();
+
+  @ViewChild('inputElement') inputElement: ElementRef;
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private cd: ChangeDetectorRef,
+    @Optional() private formGroupDir: FormGroupDirective
+  ) {
+  }
+
+  ngOnInit() {
+    this.type = this.type || 'latitude';
+    this.pattern = this.pattern || 'DDMM';
+    this.mask = MASKS[this.type] && MASKS[this.type][this.pattern];
+    if (!this.mask) {
+      console.error('Invalid attribute value. Expected: type: \'latitude|longitude\' and latlongPattern: \'DD|DDMM|DDMMSS\'');
+      this.type = 'latitude';
+      this.pattern = 'DDMM';
+      this.mask = MASKS[this.type][this.pattern];
+    }
+
+    // Remove max decimals in the DDMMSS format
+    if (this.pattern === 'DD') {
+      console.warn(`Invalid attribute 'maxDecimals' - Must be '0' when using the 'DDMMSS' pattern.`);
+      this.maxDecimals = 7;
+    }
+    else if (this.pattern === 'DDMMSS') {
+      console.warn(`Invalid attribute 'maxDecimals' - Must be '0' when using the 'DDMMSS' pattern.`);
+      this.maxDecimals = 0;
+    }
+    else if (isNil(this.maxDecimals)) {
+      this.maxDecimals = DEFAULT_MAX_DECIMALS;
+    }
+    else if (this.maxDecimals < 0) {
+      console.error('Invalid attribute \'maxDecimals\'. Must a positive value.');
+      this.maxDecimals = DEFAULT_MAX_DECIMALS;
+    }
+    else if (this.maxDecimals !== DEFAULT_MAX_DECIMALS) {
+      console.warn(`Invalid attribute 'maxDecimals' - Expected value: ${DEFAULT_MAX_DECIMALS} but get: ${this.maxDecimals}. Other value not implemented.`);
+      this.maxDecimals = DEFAULT_MAX_DECIMALS;
+    }
+
+    this.showSignControl = this.pattern !== 'DD';
+
+    this._formatFn = this.type === 'latitude' ? formatLatitude : formatLongitude;
+    this._formatOptions = {pattern: this.pattern, maxDecimals: this.maxDecimals, hideSign: this.showSignControl};
+
+    this.inputPlaceholder = 'COMMON.LAT_LONG.' + (this.type === 'longitude' && 'D' || '') + this.pattern + '_PLACEHOLDER';
+
+    this.textFormControl = this.formBuilder.control(
+      this.required ? [null, Validators.required] : [null]
+    );
+    this.textMaskConfig = {mask: this.mask, keepCharPositions: true, placeholderChar: this.placeholderChar};
+
+    this.signFormControl = this.formBuilder.control(
+      this.required ? [null, Validators.required] : [null]
+    );
+
+    this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName) as UntypedFormControl;
+    if (!this.formControl) throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-latlong-field>.');
+
+    const existingValidators = this.formControl.validator;
+    if (existingValidators) {
+      this.formControl.setValidators([
+        existingValidators,
+        this.type === 'latitude' ? SharedValidators.latitude : SharedValidators.longitude
+      ]);
+    }
+    else {
+      this.formControl.setValidators(this.type === 'latitude' ? SharedValidators.latitude : SharedValidators.longitude);
+    }
+
+    this._subscription.add(
+      merge(
+        this.textFormControl.valueChanges,
+        this.signFormControl.valueChanges
+      )
+        .subscribe((_) => this.onFormChange(this.textFormControl.value))
+    );
+
+    // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
+    this._subscription.add(
+      this.formControl.statusChanges
+        .pipe(
+          filter((_) => !this.readonly && !this._writing && !this._disabling) // Skip
+        )
+        .subscribe((_) => this.markForCheck())
+    );
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
+
+  writeValue(obj: any): void {
+    if (this._writing) return;
+
+    const value = (typeof obj === 'string') ? parseFloat(obj.replace(/,/g, '.')) : obj;
+    this._writing = true;
+    const strValue = this._formatFn(value, {...this._formatOptions, placeholderChar: this.placeholderChar});
+    const sign = isNotNil(value) ? (value < 0 ? -1 : 1) :
+      // Use default sign, if any
+      (this.defaultSign ? (this.defaultSign === '-' ? -1 : 1) : null);
+
+    // DEBUG
+    // console.debug("strValue: " + strValue)
+    // console.debug("sign: " + sign)
+
+    this.textFormControl.patchValue(strValue, {emitEvent: false});
+    this.signFormControl.patchValue(sign, {emitEvent: false});
+    this._writing = false;
+    this.markForCheck();
+  }
+
+  registerOnChange(fn: any): void {
+    this._onChangeCallback = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this._onTouchedCallback = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (this._disabling) return;
+
+    this._disabling = true;
+    if (isDisabled) {
+      this.textFormControl.disable({onlySelf: true, emitEvent: false});
+      this.signFormControl.disable({onlySelf: true, emitEvent: false});
+    } else {
+      this.textFormControl.enable({onlySelf: true, emitEvent: false});
+      this.signFormControl.enable({onlySelf: true, emitEvent: false});
+    }
+    this._disabling = false;
+    this.markForCheck();
+  }
+
+  /**
+   * Format value to display as string (no placeholder char, and show sign)
+   * @param value
+   * @param opts
+   */
+  _format(value: number, opts?: Partial<LatLongFormatOptions>) {
+    return this._formatFn(value, {
+      ...this._formatOptions, hideSign: false, placeholderChar: ''
+    });
+  }
+
+  _onFocus(event: FocusEvent) {
+
+    // Apply the default sign, when pattern is DD and field is empty
+    const value = this.formControl.value;
+    if (isNilOrNaN(value)) {
+      if (this.defaultSign) {
+        // Compute the text value, using the default sign
+        const defaultSign = this.defaultSign === '-' ? -1 : 1;
+
+        if (this.pattern === 'DD') {
+          let valueStr = this._formatFn(defaultSign, {...this._formatOptions, placeholderChar: this.placeholderChar});
+          // Keep only the sign ('+' or '-') and placeholder chars, but NOT the '1'
+          valueStr = valueStr && valueStr.replace('1', this.placeholderChar);
+
+          // Wait end of focus animation (label should move to top)
+          setTimeout(() => {
+            // Set the value
+            this.inputElement.nativeElement.value = valueStr;
+
+            // Move cursor after the sign
+            const caretIndex = (this.type === 'latitude') ? 2 : 1;
+            selectInputRange(event.target, caretIndex);
+          }, 250);
+        }
+        else {
+          this.signFormControl.setValue(defaultSign);
+        }
+      }
+    }
+
+    // Select the content (if there is a value)
+    else {
+      selectInputContent(event);
+    }
+
+    this.onFocus.emit(event);
+    return true;
+  }
+
+  _onBlur(event: FocusEvent) {
+    const touched = this.checkIfTouched();
+    if (touched && isNil(this.formControl?.value)) {
+      this.inputElement.nativeElement.value = '';
+    }
+    this.onBlur.emit(event);
+  }
+
+  moveCaretToSeparator(event: any, forward: boolean): boolean {
+    // Move to the space separator
+    return moveInputCaretToSeparator(event, ' ', forward);
+  }
+
+  onKeypress(event: KeyboardEvent) {
+    // Number entered or one of the 4 direction up, down, left and right
+    if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) {
+      //console.debug('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
+      // OK
+    }
+    // Decimal separator entered
+    else if (event.key === '.' || event.key === ',') {
+      // DEBUG
+      // console.debug('input decimal separator entered :' + event.code);
+
+      // Move caret after point
+      moveInputCaretToSeparator(event, '.');
+
+      // OK
+    } else {
+      // Command entered (delete, backspace or one of the 4 direction up, down, left and right)
+      if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8 || event.keyCode == 9) {
+        // DEBUG
+        //console.debug('input command entered:' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
+
+        // OK
+      }
+      // Sign entered ('+' or '-')
+      else if (event.keyCode === 43 || event.keyCode === 45) {
+        // DEBUG
+        // console.debug('input sign entered:' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
+        const caretPosition = getCaretPosition(event.target);
+        if (this.pattern === 'DD' && caretPosition > 0) {
+          const sign = event.key;
+          // Wait key apply
+          const value = this.inputElement.nativeElement.value;
+          if (value && !value.startsWith(sign)) {
+            const newValue = sign + (value.length > 1 ? value.substr(1) : '');
+
+            // DEBUG
+            // console.debug("sign entered. Updating input value to:", newValue);
+
+            this.inputElement.nativeElement.value = newValue;
+            selectInputRange(this.inputElement.nativeElement, caretPosition);
+          }
+          event.preventDefault();
+        }
+
+        // OK
+      }
+      // Direction char (capitalized)
+      else if (event.key === 'N' || event.key === 'S' || event.key === 'E' || event.key === 'W') {
+        // DEBUG
+        // console.debug('input direction entered:' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
+
+        // OK
+      }
+      // Direction char
+      else if (event.key === 'n' || event.key === 's' || event.key === 'e' || event.key === 'w') {
+        // DEBUG
+        // console.debug('input direction entered:' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
+
+        // Capitalize (with a delay, to be sure the key has been applied to input text)
+        setTimeout(() => {
+          this.inputElement.nativeElement.value = this.inputElement.nativeElement.value.toUpperCase();
+        }, 10);
+
+        // OK
+      }
+
+      // Any other keyboard events
+      else {
+        // DEBUG
+        //console.debug('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode + ' ' + event.code );
+
+        // KO: cancel the event
+        event.preventDefault();
+      }
+    }
+  }
+
+
+  private onFormChange(strValue): void {
+    if (this._writing) return; // Skip if call by self
+    this._writing = true;
+
+    if (this.textFormControl.invalid || this.signFormControl.invalid) {
+      this.formControl.markAsPending();
+      this.formControl.setErrors({
+        ...this.formControl.errors,
+        ...this.textFormControl.errors,
+        ...this.signFormControl.errors
+      });
+      this._writing = false;
+      return;
+    }
+
+    const parsedValue = isNotNilOrBlank(strValue) ? parseLatitudeOrLongitude(strValue, this.pattern, 7 /*=precision of the converted double value */, this.placeholderChar) : null;
+
+    // DEBUG
+    //console.debug('parsedValue=', parsedValue);
+
+    if (isNaN(parsedValue)) {
+      this.formControl.markAsPending();
+      this.formControl.setErrors(this.type === 'latitude' ? {latitude: true} : {longitude: true});
+      this._writing = false;
+      return;
+    }
+    const sign = (this.pattern === 'DD') ? 1 /*ignore sign*/ : (this.signFormControl.value || 1);
+    const value = isNotNil(parsedValue) ? sign * parsedValue : null;
+
+    // Get the model value
+    //console.debug("[mat-latlon] Setting value {" + value + "} parsed from {" + strValue + "}");
+    this.formControl.patchValue(value, {emitEvent: false});
+    this._writing = false;
+    this.markForCheck();
+
+    this._onChangeCallback(value);
+  }
+
+  private checkIfTouched(): boolean {
+    if (this.formControl.touched || this.textFormControl.touched) {
+      this.markForCheck();
+      this._onTouchedCallback();
+      return true;
+    }
+    return false;
+  }
+
+  private markForCheck() {
+    this.cd.markForCheck();
+  }
+}
+