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

package/src/app/shared/form/field.component.html

@@ -0,0 +1,261 @@
+<ng-container [ngSwitch]="type">
+
+  <!-- integer -->
+  <mat-form-field *ngSwitchCase="'integer'" [floatLabel]="floatLabel" [class]="classList">
+    <input matInput #matInput
+           type="number"
+           autocomplete="off"
+           [readonly]="readonly"
+           [min]="definition.minValue"
+           [max]="definition.maxValue"
+           pattern="-?[0-9]*"
+           step="1"
+           [appAutofocus]="autofocus"
+           [placeholder]="placeholder"
+           (keyup.enter)="onKeyupEnter.emit($event)"
+           (keypress)="filterNumberInput($event, false)"
+           [formControl]="formControl"
+           [required]="required"
+           [tabIndex]="tabindex"
+           (click)="selectInputContent($event)">
+    <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+    <mat-error *ngIf="formControl.hasError('min')">
+      {{(compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate:formControl.errors['min'] }}</mat-error>
+    <mat-error *ngIf="formControl.hasError('max')">
+      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>
+    <mat-error *ngIf="formControl.hasError('pattern')">
+      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>
+    <mat-error *ngIf="formControl.hasError('integer')">
+      {{'ERROR.FIELD_NOT_VALID_INTEGER'| translate }}</mat-error>
+
+    <button matSuffix *ngIf="clearable"
+            mat-icon-button tabindex="-1"
+            type="button"
+            (click)="formControl.reset()"
+            [hidden]="formControl.disabled || (formControl|formGetValue|isNilOrBlank)">
+      <mat-icon>close</mat-icon>
+    </button>
+
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-form-field>
+
+  <!-- double -->
+  <mat-form-field *ngSwitchCase="'double'" [floatLabel]="floatLabel" [class]="classList">
+
+    <input matInput #matInput
+           type="number"
+           decimal="true"
+           autocomplete="off"
+           [min]="definition.minValue"
+           [max]="definition.maxValue"
+           [appAutofocus]="autofocus"
+           [readonly]="readonly"
+           [placeholder]="placeholder"
+           [step]="numberInputStep"
+           (keypress)="filterNumberInput($event, true)"
+           [formControl]="formControl"
+           [required]="required"
+           [tabIndex]="tabindex"
+           (click)="selectInputContent($event)">
+    <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+    <mat-error *ngIf="formControl.hasError('decimal')" translate>ERROR.FIELD_NOT_VALID_DECIMAL</mat-error>
+    <mat-error *ngIf="formControl.hasError('min')">
+      {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN')| translate:formControl.errors['min'] }}</mat-error>
+    <mat-error *ngIf="formControl.hasError('max')">
+      {{(compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate:formControl.errors['max'] }}</mat-error>
+    <mat-error *ngIf="formControl.hasError('maxDecimals')">
+      {{ (compact ? 'ERROR.FIELD_MAXIMUM_DECIMALS_COMPACT' : 'ERROR.FIELD_MAXIMUM_DECIMALS')| translate:{maxDecimals:
+      definition.maximumNumberDecimals} }}</mat-error>
+
+    <button matSuffix *ngIf="clearable"
+            mat-icon-button tabindex="-1"
+            type="button"
+            (click)="formControl.reset()"
+            [hidden]="formControl.disabled || (formControl|formGetValue|isNilOrBlank)">
+      <mat-icon>close</mat-icon>
+    </button>
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-form-field>
+
+  <!-- boolean -->
+  <mat-boolean-field *ngSwitchCase="'boolean'" #matInput
+                     [class]="classList"
+                     [formControl]="formControl"
+                     [placeholder]="placeholder"
+                     [floatLabel]="floatLabel"
+                     [required]="required"
+                     [compact]="compact"
+                     [tabindex]="tabindex"
+                     [readonly]="readonly">
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-boolean-field>
+
+  <!-- date -->
+  <mat-date-field *ngSwitchCase="'date'" #matInput
+                  [class]="classList"
+                  [formControl]="formControl"
+                  [placeholder]="compact ? ('COMMON.DATE_PLACEHOLDER'|translate): placeholder"
+                  [floatLabel]="floatLabel"
+                  [required]="required"
+                  [clearable]="clearable"
+                  [readonly]="readonly"
+                  [compact]="compact"
+                  [tabindex]="tabindex"
+                  [autofocus]="autofocus">
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-date-field>
+
+  <!-- date time -->
+  <mat-date-time-field *ngSwitchCase="'dateTime'" #matInput
+                       [class]="classList"
+                       [formControl]="formControl"
+                       [placeholder]="compact ? ('COMMON.DATE_TIME_PLACEHOLDER'|translate): placeholder"
+                       [floatLabel]="floatLabel"
+                       [required]="required"
+                       [clearable]="clearable"
+                       [readonly]="readonly"
+                       [compact]="compact"
+                       [tabindex]="tabindex"
+                       [autofocus]="autofocus">
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-date-time-field>
+
+  <!-- enum -->
+  <mat-form-field *ngSwitchCase="'enum'" [floatLabel]="floatLabel" [class]="classList">
+    <mat-select [formControl]="formControl"
+                [placeholder]="placeholder"
+                [required]="required"
+                [tabindex]="tabindex"
+                (keyup.enter)="onKeyupEnter.emit($event)">
+      <mat-option *ngFor="let item of _values" [value]="item.key">{{ item.value | translate }}</mat-option>
+    </mat-select>
+
+    <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-form-field>
+
+  <!-- multi enum -->
+  <mat-chips-field *ngSwitchCase="'enums'"
+                   [class]="classList"
+                   [placeholder]="placeholder"
+                   [floatLabel]="floatLabel"
+                   [formControl]="formControl"
+                   [clearable]="clearable"
+                   [items]="_values"
+                   [displayAttributes]="definition.autocomplete?.attributes || ['key', 'value']"
+                   [config]="definition.autocomplete"
+                   [showAllOnFocus]="true"
+                   [required]="required"
+                   [chipColor]="chipColor">
+    <ng-content select="[matPrefix]"></ng-content>
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-chips-field>
+
+  <!-- color -->
+  <mat-form-field *ngSwitchCase="'color'" [floatLabel]="floatLabel" [class]="classList">
+
+    <ion-icon margin-right name="color-fill" matPrefix></ion-icon>
+
+    <input matInput autocomplete="off"
+           [appAutofocus]="autofocus"
+           [formControl]="formControl"
+           [style.color]="getColorContrast(formControl.value)"
+           [style.background]="formControl.value"
+           [colorPicker]="formControl.value"
+           (colorPickerChange)="writeValue($event)"
+           [cpSaveClickOutside]="true"
+           cpPosition="top"
+           cpOutputFormat="hex"
+           [cpOKButton]="false"
+           [required]="required"/>
+    <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+  </mat-form-field>
+
+  <!-- string -->
+  <mat-form-field *ngSwitchCase="'string'" [floatLabel]="floatLabel" [class]="classList">
+    <input matInput #matInput
+           autocomplete="off"
+           [appAutofocus]="autofocus"
+           [formControl]="formControl"
+           [placeholder]="placeholder"
+           [required]="required"
+           [readonly]="readonly"
+           [tabIndex]="tabindex"
+           (click)="selectInputContent($event)"
+           (keypress)="filterAlphanumericalInput($event)"
+           (keyup.enter)="onKeyupEnter.emit($event)">
+    <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+
+    <button matSuffix *ngIf="clearable"
+            mat-icon-button tabindex="-1"
+            type="button"
+            (click)="formControl.reset()"
+            [hidden]="formControl.disabled || (formControl|formGetValue|isNilOrBlank)">
+      <mat-icon>close</mat-icon>
+    </button>
+
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-form-field>
+
+  <!-- auto-complete -->
+  <mat-autocomplete-field *ngSwitchCase="'entity'"
+                          #autocompleteField
+                          [class]="classList"
+                          [autofocus]="autofocus"
+                          [placeholder]="placeholder"
+                          [floatLabel]="floatLabel"
+                          [formControl]="formControl"
+                          [config]="definition.autocomplete"
+                          [required]="required"
+                          [tabindex]="tabindex"
+                          [clearable]="clearable"
+                          (keyup.enter)="onKeyupEnter.emit($event)"
+                          [displayWith]="getDisplayValueFn(definition)">
+    <ng-content select="[matPrefix]"></ng-content>
+    <ng-content select="[matSuffix]"></ng-content>
+  </mat-autocomplete-field>
+
+  <!-- multi auto-complete -->
+  <mat-chips-field *ngSwitchCase="'entities'"
+                    [class]="classList"
+                    [placeholder]="placeholder"
+                    [floatLabel]="floatLabel"
+                    [formControl]="formControl"
+                    [config]="definition.autocomplete"
+                    [required]="required"
+                    [chipColor]="chipColor"
+                    [clearable]="clearable"
+                    [displayWith]="getDisplayValueFn(definition)">
+    <ng-content select="[matPrefix]"></ng-content>
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </mat-chips-field>
+
+  <!-- other -->
+  <div *ngSwitchDefault>
+    <mat-error *ngIf="type">Unknown type {{type}} for option {{definition.key}}. Please report this error.</mat-error>
+    <mat-error *ngIf="!type">Error on option field. Please check console log for details.</mat-error>
+    <div matSuffix>
+      <ng-content select="[matSuffix]"></ng-content>
+    </div>
+  </div>
+
+</ng-container>

package/src/app/shared/form/field.component.scss

@@ -0,0 +1,7 @@
+:host {
+  display: inline-block;
+  position: relative;
+}
+button[hidden] {
+  display: none;
+}

package/src/app/shared/form/field.component.ts

@@ -0,0 +1,318 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef, InjectionToken, Injector,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+  ViewChild
+} from '@angular/core';
+import {ControlValueAccessor, UntypedFormControl, FormGroupDirective, NG_VALUE_ACCESSOR, Validators} from '@angular/forms';
+import {FloatLabelType} from '@angular/material/form-field';
+import {arrayDistinct, isBlankString, isNilOrBlank, isNotEmptyArray, isNotNil, isNotNilBoolean, isNotNilOrBlank, joinPropertiesPath, toBoolean} from '../functions';
+import { DisplayFn, FormFieldDefinition, FormFieldType } from './field.model';
+import {TranslateService} from '@ngx-translate/core';
+import {getColorContrast} from '../graph/colors.utils';
+import {asInputElement, filterNumberInput, selectInputContent} from '../inputs';
+import {toDateISOString} from '../dates';
+import {Property} from '../types';
+import {ThemePalette} from '@angular/material/core';
+import {PredefinedColors} from '@ionic/core';
+import { MatAutocompleteField } from '../material/autocomplete/material.autocomplete';
+import {isNonEmptyArray} from '@apollo/client/utilities';
+
+const noop = () => {
+};
+
+@Component({
+  selector: 'app-form-field',
+  styleUrls: ['./field.component.scss'],
+  templateUrl: './field.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AppFormField),
+      multi: true
+    }
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppFormField implements OnInit, ControlValueAccessor {
+
+  private _onChangeCallback: (_: any) => void = noop;
+  private _onTouchedCallback: () => void = noop;
+  private _definition: FormFieldDefinition;
+
+  protected _values: Property[];
+
+  protected type: FormFieldType;
+  protected numberInputStep: string;
+
+  @Input()
+  set definition(value: FormFieldDefinition) {
+    if (!value || this._definition === value) return; // Skip is same or nil
+    this._definition = value;
+    this._onDefinitionChanged(value);
+  }
+
+  get definition(): FormFieldDefinition {
+    return this._definition;
+  }
+
+  @Input() required: boolean;
+  @Input() readonly = false;
+  @Input() disabled: boolean;
+  @Input() formControl: UntypedFormControl;
+  @Input() formControlName: string;
+  @Input() placeholder: string;
+  @Input() compact = false;
+  @Input() floatLabel: FloatLabelType = 'auto';
+  @Input() tabindex: number;
+  @Input() autofocus: boolean;
+
+  @Input() clearable: boolean;
+  @Input() chipColor: ThemePalette | PredefinedColors = null;
+  @Input() debug = false;
+
+  @Input('class') classList: string;
+
+  @Output('keyup.enter')
+  onKeyupEnter = new EventEmitter<any>();
+
+  get value(): any {
+    return this.formControl.value;
+  }
+
+  @ViewChild('matInput') matInput: ElementRef;
+  @ViewChild('autocompleteField') autocompleteField: MatAutocompleteField;
+
+  constructor(
+    protected translate: TranslateService,
+    protected cd: ChangeDetectorRef,
+    protected injector: Injector,
+    @Optional() private formGroupDir: FormGroupDirective
+  ) {
+
+  }
+
+  ngOnInit() {
+
+    this.checkAndResolveFormControl();
+
+    if (!this._definition) throw new Error('Missing mandatory attribute \'definition\' in <app-form-field>.');
+    if (typeof this._definition !== 'object') throw new Error('Invalid attribute \'definition\' in <app-form-field>. Should be an object.');
+    this._onDefinitionChanged(this._definition, {emitEvent: false});
+
+  }
+
+  writeValue(obj: any): void {
+    if ((this.type === 'integer' || this.type === 'double') && Number.isNaN(obj)) {
+      // DEBUG
+      //if (this.debug) console.debug("WARN: trying to set NaN value, in an <app-form-field>! Reset to null");
+
+      obj = null;
+    }
+    else if (this.type === 'boolean' && typeof obj === 'string') {
+      obj = (obj !== 'false');
+    }
+    else if (this.type === 'date') {
+      obj = toDateISOString(obj);
+    }
+    else if (this.type === 'enums' && isNotNil(obj)) {
+      let changes = false;
+      if (typeof obj === 'string') {
+        obj = obj.split(',');
+        changes = true;
+      }
+      const updatedArray = (obj || []).map(item => {
+        if (typeof item === 'string') {
+          changes = true;
+          return this._values.find(v => v.key === item);
+        }
+        return item;
+      }).filter(isNotNil);
+      if (changes) {
+        obj = updatedArray;
+      }
+    }
+    else if (this.type === 'entity' && isNilOrBlank(obj)) {
+      obj = null;
+    }
+    if (obj !== this.formControl.value) {
+      // DEBUG
+      //if (this.debug) console.debug("Set <app-form-field> value: ", obj);
+
+      this.formControl.patchValue(obj, {emitEvent: false});
+      this._onChangeCallback(obj);
+    }
+
+    this.cd.markForCheck();
+  }
+
+  registerOnChange(fn: any): void {
+    this._onChangeCallback = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this._onTouchedCallback = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (this.disabled === isDisabled) return;
+    this.disabled = isDisabled;
+    this.cd.markForCheck();
+  }
+
+  markAsTouched() {
+    if (this.formControl.touched) {
+      this.cd.markForCheck();
+      this._onTouchedCallback();
+    }
+  }
+
+  filterAlphanumericalInput(event: KeyboardEvent) {
+    if (event.keyCode === 13 /*=Enter*/ && this.onKeyupEnter.observers.length > 0) {
+      this.onKeyupEnter.emit(event);
+      return;
+    }
+    // Add features (e.g. check against a pattern)
+  }
+
+  focus() {
+    if (this.matInput) this.matInput.nativeElement.focus();
+    else if (this.autocompleteField) this.autocompleteField.focus();
+  }
+
+  filterNumberInput = filterNumberInput;
+  selectInputContent = selectInputContent;
+
+  getDisplayValueFn(definition: FormFieldDefinition): DisplayFn {
+    if (definition.autocomplete && definition.autocomplete.displayWith) {
+      return (obj: any) => definition.autocomplete.displayWith(obj);
+    }
+    const attributes = definition.autocomplete && definition.autocomplete.attributes || ['label', 'name'];
+    return (obj: any) => obj && joinPropertiesPath(obj, attributes);
+  }
+
+  getColorContrast(color: string): string | undefined {
+    return isNotNilOrBlank(color) ? getColorContrast(color, true) : undefined;
+  }
+
+  /**
+   * Allow to reload values, if not detected
+   * @param value
+   */
+  reloadItems(value?: any) {
+    if (!this._definition) return;
+
+    this._onDefinitionChanged(this._definition);
+
+    if (this.autocompleteField) {
+      setTimeout(() => this.autocompleteField?.reloadItems(value));
+    }
+  }
+
+  /* -- protected method -- */
+
+  protected computeNumberInputStep(definition: FormFieldDefinition): string {
+
+    if (definition.maximumNumberDecimals > 0) {
+      let step = '0.';
+      if (definition.maximumNumberDecimals > 1) {
+        for (let i = 0; i < definition.maximumNumberDecimals - 1; i++) {
+          step += '0';
+        }
+      }
+      step += '1';
+      return step;
+    } else {
+      return '1';
+    }
+  }
+
+  protected computeValuesFromToken(token: InjectionToken<(string|Property)[]>): any[] {
+    const values = this.injector.get(token);
+    return Array.isArray(values) ? this.computeValues(values) : [];
+  }
+
+  protected computeValues(values: (string|Property)[]): Property[] {
+    if (!values) return [];
+    return values.map(v =>  (typeof v === 'string')
+      ? <Property>{key: v, value: v}
+      : <Property>{key: v.key, value: this.translate.instant(v.value)}
+    );
+  }
+
+  protected checkAndResolveFormControl() {
+    if (this.formControl) return; // OK, there is a control
+
+    if (this.formGroupDir) {
+      // Try to find using definition.key, as formControlName
+      if (!this.formControlName && this._definition.key) {
+        this.formControlName = this._definition.key;
+      }
+      const formControlName = (this.formGroupDir.directives || []).find(d => this.formControlName && d.name === this.formControlName);
+      this.formControl = formControlName && formControlName.control;
+      if (!this.formControl) {
+        this.formControl = this.formGroupDir.form.get(this.formControlName) as UntypedFormControl;
+      }
+    }
+
+    if (!this.formControl) {
+      throw new Error('Missing attribute \'formControl\' or \'formControlName\' in <app-form-field> component.');
+    }
+  }
+
+  protected _onDefinitionChanged(definition: FormFieldDefinition, opts?: {emitEvent?: boolean}) {
+
+    this.type = definition.type;
+    if (!this.type) throw new Error('Invalid attribute \'definition\' in <app-form-field>. Missing type !');
+
+    this.placeholder = this.placeholder || (this._definition.label && this.translate.instant(this._definition.label));
+    this.required = isNotNilBoolean(this.required) ? this.required : (this._definition.required || this.formControl?.validator === Validators.required || isBlankString(this.required));
+    this.disabled = toBoolean(this.disabled, toBoolean(this._definition.disabled, false));
+
+    // double
+    if (this.type === 'double') {
+      this.numberInputStep = this.computeNumberInputStep(definition);
+    }
+
+    // enum (or enums)
+    else if (this.type === 'enum' || this.type === 'enums') {
+      // Resolve enum values
+      if (definition.values instanceof InjectionToken) {
+        this._values = this.computeValuesFromToken(definition.values);
+      }
+      else {
+        this._values = this.computeValues(definition.values as (string[]|Property[]));
+      }
+    }
+
+    // Repaint
+    if (!opts || opts.emitEvent !== false) {
+      this.cd.markForCheck();
+    }
+
+    // Recompute tab index, because if type changed, then matInput can have changed
+    this.updateTabIndex(100);
+  }
+
+  protected updateTabIndex(timeout?: number) {
+    if (this.tabindex && this.tabindex !== -1) {
+      setTimeout(() => {
+        const element = asInputElement(this.matInput);
+        if (element) {
+          element.tabIndex = this.tabindex;
+          this.cd.markForCheck();
+        }
+        else if (this.autocompleteField) {
+          this.autocompleteField.tabindex = this.tabindex;
+        }
+      }, timeout || 0);
+    }
+  }
+}

package/src/app/shared/form/field.model.ts

@@ -0,0 +1,64 @@
+import {ObjectMap, Property} from '../types';
+import {isNotNil} from '../functions';
+import {InjectionToken} from '@angular/core';
+import {MatAutocompleteFieldConfig} from '../material/autocomplete/material.autocomplete.config';
+import {UserProfileLabel} from '../../core/services/model/person.model';
+
+export declare type DisplayFn = (obj: any) => string;
+
+export declare type EqualsFn = (o1: any, o2: any) => boolean;
+
+export declare type CompareFn = (o1: any, o2: any) => number;
+
+export declare type FormFieldType = 'integer' | 'double' | 'boolean' | 'string' | 'enum' | 'enums' | 'color' | 'peer' | 'entity' | 'entities' | 'date' | 'dateTime';
+
+export declare interface FormFieldDefinition<K = string, T = FormFieldType, E = any> {
+  key: K;
+  type: T;
+  label: string;
+  minValue?: number;
+  maxValue?: number;
+  maximumNumberDecimals?: number;
+  defaultValue?: any;
+  isTransient?: boolean; // Useful only for remote configuration
+  values?: (string|Property)[] | InjectionToken<(string|Property)[]>;
+  autocomplete?: MatAutocompleteFieldConfig<E>;
+  disabled?: boolean;
+  required?: boolean;
+  extra?: {
+    [key: string]: {
+      disabled?: boolean;
+      required: boolean;
+    };
+  };
+  minProfile?: UserProfileLabel;
+}
+export declare type FormFieldDefinitionMap = ObjectMap<FormFieldDefinition>;
+
+
+export abstract class FormFieldValuesHolder {
+  getAsBoolean(data: ObjectMap, definition: FormFieldDefinition): boolean {
+    const value = this.get(data, definition);
+    return isNotNil(value) ? (value && value !== 'false') : undefined;
+  }
+
+  getAsInt(data: any, definition: FormFieldDefinition): number {
+    const value = this.get(data, definition);
+    return isNotNil(value) ? parseInt(value) : undefined;
+  }
+
+  getAsNumbers(data: any, definition: FormFieldDefinition): number[] {
+    const value = this.get(data, definition);
+    if (typeof value === 'string') return value.split(',').map(parseFloat) || undefined;
+    return isNotNil(value) ? [parseFloat(value)] : undefined;
+  }
+
+  getAsStrings(data: any, definition: FormFieldDefinition): string[] {
+    const value = this.get(data, definition);
+    return value && value.split(',') || undefined;
+  }
+
+  get<T = string>(data: any, definition: FormFieldDefinition): T {
+    return isNotNil(data[definition.key]) ? data[definition.key] : (definition.defaultValue || undefined);
+  }
+}

package/src/app/shared/form/loading-spinner.ts

@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'app-loading-spinner',
+  template: `
+    <ion-spinner *ngIf="loading; else content" [color]="color" [name]="name"></ion-spinner>
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+  `
+})
+export class AppLoadingSpinner  {
+  @Input() loading = false;
+  @Input() color: string | undefined = 'secondary';
+  @Input() name: 'bubbles' | 'circles' | 'circular' | 'crescent' | 'dots' | 'lines' | 'lines-small' | undefined;
+}