@sumaris-net/ngx-components 18.14.0 → 18.14.1

package/src/app/core/services/testing/user-settings.config.ts

@@ -1,77 +0,0 @@
-import { FormFieldDefinition } from '../../../shared/form/field.model';
-
-// This test options should be visible in the account page
-export const TEST_USER_SETTINGS_OPTIONS = Object.freeze({
-  DUMMY_OPTION_1: <FormFieldDefinition>{
-    key: 'sumaris.option.dummy1',
-    label: 'ACCOUNT.SETTINGS.DUMMY_1',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  DUMMY_OPTION_2: <FormFieldDefinition>{
-    key: 'sumaris.option.dummy2',
-    label: 'ACCOUNT.SETTINGS.DUMMY_2',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  DUMMY_OPTION_3: <FormFieldDefinition>{
-    key: 'sumaris.option.dummy3',
-    label: 'ACCOUNT.SETTINGS.DUMMY_3',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  DUMMY_OPTION_4: <FormFieldDefinition>{
-    key: 'sumaris.option.dummy4',
-    label: 'ACCOUNT.SETTINGS.DUMMY_4',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  DUMMY_OPTION_5: <FormFieldDefinition>{
-    key: 'sumaris.option.dummy5',
-    label: 'ACCOUNT.SETTINGS.DUMMY_5',
-    type: 'boolean',
-    defaultValue: false,
-  },
-
-  DUMMY_OPTION_6: <FormFieldDefinition>{
-    key: 'sumaris.option.dummy6',
-    label: 'ACCOUNT.SETTINGS.DUMMY_6',
-    type: 'enum',
-    values: [
-      {
-        key: 'a',
-        value: 'Value A',
-      },
-      {
-        key: 'b',
-        value: 'Value B',
-      },
-      {
-        key: 'c',
-        value: 'Value C',
-      },
-    ],
-    defaultValue: null,
-  },
-
-  DUMMY_OPTION_7: <FormFieldDefinition>{
-    key: 'sumaris.option.dummy7',
-    label: 'ACCOUNT.SETTINGS.DUMMY_7',
-    type: 'enums',
-    values: [
-      {
-        key: 'a',
-        value: 'Value A',
-      },
-      {
-        key: 'b',
-        value: 'Value B',
-      },
-      {
-        key: 'c',
-        value: 'Value C',
-      },
-    ],
-    defaultValue: null,
-  },
-});

package/src/app/core/services/validator/account.validator.ts

@@ -1,50 +0,0 @@
-import { Injectable } from '@angular/core';
-import { UntypedFormBuilder } from '@angular/forms';
-import { Account } from '../model/account.model';
-import { AccountService } from '../account.service';
-import { UserSettingsValidatorService } from './user-settings.validator';
-import { PersonValidatorOptions, PersonValidatorService } from '../../../admin/services/validator/person.validator';
-import { TranslateService } from '@ngx-translate/core';
-
-export interface AccountValidatorOptions extends PersonValidatorOptions {
-  withSettings?: boolean;
-  withTokens?: boolean;
-}
-
-@Injectable({ providedIn: 'root' })
-export class AccountValidatorService<
-  T extends Account = Account,
-  O extends AccountValidatorOptions = AccountValidatorOptions,
-> extends PersonValidatorService<T, O> {
-  constructor(
-    protected formBuilder: UntypedFormBuilder,
-    protected translate: TranslateService,
-    protected accountService: AccountService,
-    protected userSettingsValidatorService: UserSettingsValidatorService
-  ) {
-    super(formBuilder, translate, accountService);
-  }
-
-  getFormGroupConfig(data?: T, opts?: O): { [key: string]: any[] } {
-    opts = this.fillDefaultOptions(opts);
-
-    const formConfig = super.getFormGroupConfig(data, opts);
-
-    if (opts.withSettings) {
-      formConfig.settings = this.userSettingsValidatorService.getFormGroup(data?.settings);
-    }
-    if (opts.withTokens) {
-      formConfig.tokens = [data?.tokens || null];
-    }
-
-    return formConfig;
-  }
-
-  protected fillDefaultOptions(opts?: O): O {
-    return {
-      withSettings: true,
-      withTokens: true,
-      ...super.fillDefaultOptions(opts),
-    };
-  }
-}

package/src/app/core/services/validator/base.validator.class.ts

@@ -1,51 +0,0 @@
-import { ValidatorService } from '@e-is/ngx-material-table';
-import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { IValidatorService } from '../../../shared/services/validator-service.class';
-import { Directive } from '@angular/core';
-import { AppFormUtils } from '../../form/form.utils';
-import { changeCaseToUnderscore } from '../../../shared/functions';
-import { TranslateService } from '@ngx-translate/core';
-import { FormErrors } from '../../../shared/forms';
-
-@Directive()
-export abstract class AppValidatorService<T = any, O = any> extends ValidatorService implements IValidatorService<T> {
-  protected constructor(
-    protected formBuilder: UntypedFormBuilder,
-    protected translate?: TranslateService
-  ) {
-    super();
-  }
-
-  getRowValidator(): UntypedFormGroup {
-    return this.getFormGroup();
-  }
-
-  getFormGroup(data?: T, opts?: O): UntypedFormGroup {
-    return this.formBuilder.group(this.getFormGroupConfig(data));
-  }
-
-  getFormGroupConfig(data?: T, opts?: O): { [key: string]: any[] } {
-    return {};
-  }
-
-  getI18nFormErrors(control: AbstractControl): string[] {
-    const errors = AppFormUtils.getFormErrors(control);
-    return this.getI18nErrors(errors);
-  }
-
-  getI18nErrors(errors: FormErrors): string[] {
-    return Object.keys(errors || {}).map((errorKey) => this.getI18nError(errorKey, errors[errorKey]));
-  }
-
-  protected getI18nError(errorKey: string, errorContent?: any): string {
-    const i18nKey = 'ERROR.FIELD_' + changeCaseToUnderscore(errorKey).toUpperCase();
-    const i18nMessage = this.translate.instant(i18nKey, errorContent);
-    if (i18nKey !== i18nMessage) return i18nMessage;
-    if (typeof errorContent === 'string') return errorContent;
-
-    // Not translated: show error
-    console.error(`[validator] Cannot translate error key '${errorKey}'. Please override getI18nError() in your validator`);
-
-    return changeCaseToUnderscore(errorKey);
-  }
-}

package/src/app/core/services/validator/local-settings.validator.ts

@@ -1,59 +0,0 @@
-import { Injectable } from '@angular/core';
-import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidationErrors, Validators } from '@angular/forms';
-import { LocalSettings } from '../model/settings.model';
-import { SharedValidators } from '../../../shared/validator/validators';
-import { NetworkService } from '../network.service';
-import { AppValidatorService } from './base.validator.class';
-import { toBoolean } from '../../../shared/functions';
-import { PropertyValidator } from '../../form/properties/property.validator';
-import { FormFieldDefinition } from '../../../shared/form/field.model';
-
-@Injectable({ providedIn: 'root' })
-export class LocalSettingsValidatorService extends AppValidatorService<LocalSettings> {
-  constructor(
-    formBuilder: UntypedFormBuilder,
-    private propertyValidator: PropertyValidator,
-    private networkService: NetworkService
-  ) {
-    super(formBuilder);
-  }
-
-  getFormGroup(data?: LocalSettings, opts?: { definitions?: FormFieldDefinition[] }): UntypedFormGroup {
-    return this.formBuilder.group(
-      {
-        accountInheritance: [toBoolean(data?.accountInheritance, true), Validators.required],
-        locale: [data?.locale || null, Validators.required],
-        darkMode: [toBoolean(data?.darkMode, null)],
-        autoDarkMode: [toBoolean(data?.autoDarkMode, true)],
-        latLongFormat: [data?.latLongFormat || null, Validators.required],
-        usageMode: [data?.usageMode || 'DESK', Validators.required],
-        peerUrl: [data?.peerUrl || null, Validators.required],
-        properties: this.propertyValidator.getFormArray(data?.properties, opts),
-      },
-      {
-        asyncValidators: (group: UntypedFormGroup) => this.peerAlive(group.get('peerUrl')),
-      }
-    );
-  }
-
-  /* -- protected methods -- */
-
-  protected async peerAlive(peerUrlControl: AbstractControl): Promise<ValidationErrors | null> {
-    if (this.networkService.online) {
-      const alive = await this.networkService.checkPeerAlive(peerUrlControl.value);
-      // KO: add a validation error
-      if (!alive) {
-        const errors: ValidationErrors = peerUrlControl.errors || {};
-        errors['peerAlive'] = true;
-        peerUrlControl.setErrors(errors);
-        peerUrlControl.markAsTouched({ onlySelf: true });
-        // Return the error (should be apply to the parent form)
-        return { peerAlive: true };
-      }
-    }
-
-    // OK: remove the existing error on control
-    SharedValidators.clearError(peerUrlControl, 'peerAlive');
-    return null;
-  }
-}

package/src/app/core/services/validator/user-settings.validator.ts

@@ -1,22 +0,0 @@
-import { Injectable } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { AppValidatorService } from './base.validator.class';
-import { UserSettings } from '../model/account.model';
-
-@Injectable({ providedIn: 'root' })
-export class UserSettingsValidatorService extends AppValidatorService<UserSettings> {
-  constructor(formBuilder: UntypedFormBuilder) {
-    super(formBuilder);
-  }
-
-  getFormGroup(data?: UserSettings): UntypedFormGroup {
-    return this.formBuilder.group({
-      id: [data?.id || null],
-      updateDate: [data?.updateDate || null],
-      locale: [data?.locale || null, Validators.required],
-      latLongFormat: [data?.latLongFormat || null, Validators.required],
-      content: [data?.content || null],
-      nonce: [data?.nonce || null],
-    });
-  }
-}

package/src/app/core/services/validator/user-token.validator.ts

@@ -1,54 +0,0 @@
-import { Injectable } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
-import { AppValidatorService } from './base.validator.class';
-
-import { UserToken } from '../model/token.model';
-import { isEmptyArray, isNotNilOrBlank, toNumber } from '../../../shared/functions';
-
-@Injectable({ providedIn: 'root' })
-export class UserTokenValidatorService extends AppValidatorService<UserToken> {
-  constructor(formBuilder: UntypedFormBuilder) {
-    super(formBuilder);
-  }
-
-  getFormGroup(data?: UserToken): UntypedFormGroup {
-    return this.formBuilder.group({
-      id: [toNumber(data?.id, null)],
-      pubkey: [data?.pubkey || null, Validators.required],
-      token: [data?.token || null],
-      name: [data?.name || null, Validators.compose([Validators.required, Validators.maxLength(100)])],
-      flags: [data?.flags || null],
-      scopes: [data?.scopes || null, UserTokenValidatorService.notEmptyArray],
-      expirationDate: [data?.expirationDate || null],
-      lastUsedDate: [data?.lastUsedDate || null],
-      creationDate: [data?.creationDate || null],
-      updateDate: [data?.updateDate || null],
-    });
-  }
-
-  updateFormGroup(formGroup: UntypedFormGroup, existingNames: string[]) {
-    formGroup.controls.name.validator = Validators.compose([
-      Validators.required,
-      Validators.maxLength(100),
-      UserTokenValidatorService.notAlreadyExists(existingNames),
-    ]);
-  }
-
-  static notAlreadyExists(existingNames: string[]): ValidatorFn {
-    return (control) => {
-      const value = control.value;
-      if (isNotNilOrBlank(value) && existingNames?.includes(value)) {
-        return { notAlreadyExists: true };
-      }
-      return null;
-    };
-  }
-
-  static notEmptyArray(control: UntypedFormControl): ValidationErrors | null {
-    const value = control.value;
-    if (isEmptyArray(value)) {
-      return { notEmptyArray: true };
-    }
-    return null;
-  }
-}

package/src/app/core/settings/settings.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../../shared/shared.module';
-import { SettingsPage } from './settings.page';
-import { TranslateModule } from '@ngx-translate/core';
-import { AppFormButtonsBarModule } from '../form/buttons/form-buttons-bar.module';
-import { AppPropertiesFormModule } from '../form/properties/properties.module';
-import { RxPush } from '@rx-angular/template/push';
-
-@NgModule({
-  imports: [SharedModule, AppFormButtonsBarModule, TranslateModule.forChild(), AppPropertiesFormModule, RxPush],
-
-  declarations: [SettingsPage],
-  exports: [TranslateModule, SettingsPage],
-})
-export class AppSettingsPageModule {}

package/src/app/core/settings/settings.page.html

@@ -1,300 +0,0 @@
-@let hasValidate = !loading && (dirty || saving);
-<app-toolbar
-  [title]="'SETTINGS.TITLE' | translate"
-  color="primary"
-  [hasValidate]="hasValidate"
-  [hasClose]="!hasValidate"
-  (onValidate)="save($event)"
-  (onClose)="close($event)"
->
-  <ion-buttons slot="end">
-    <!-- options menu -->
-    <ion-button [matMenuTriggerFor]="optionsMenu" [disabled]="loading || saving">
-      <mat-icon slot="icon-only">more_vert</mat-icon>
-    </ion-button>
-  </ion-buttons>
-</app-toolbar>
-
-<!-- Options menu -->
-<mat-menu #optionsMenu="matMenu">
-  <!-- Clear cache -->
-  <button mat-menu-item [disabled]="saving" (click)="clearCache($event)">
-    <mat-icon><ion-icon name="trash-outline"></ion-icon></mat-icon>
-    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>
-  </button>
-
-  <!-- Reset -->
-  <button mat-menu-item [disabled]="saving || !dirty" (click)="cancel($event)">
-    <mat-icon><ion-icon name="refresh"></ion-icon></mat-icon>
-    <mat-label translate>COMMON.BTN_RESET</mat-label>
-  </button>
-
-  <!-- additional items -->
-  @if (!loading) {
-    @for (item of menuItems; track item) {
-      @if (item.path) {
-        <a mat-menu-item class="{{ item.cssClass }} {{ item.color }}" (click)="executeAction($event, item)">
-          <mat-icon *ngIf="item.icon"><ion-icon [name]="item.icon"></ion-icon></mat-icon>
-          <mat-icon *ngIf="item.matIcon">{{ item.matIcon }}</mat-icon>
-          <mat-label translate>{{ item.title }}</mat-label>
-        </a>
-      } @else if (!item.action) {
-        <!-- divider -->
-        <mat-divider class="{{ item.cssClass }} {{ item.color }}">
-          <mat-label translate>{{ item.title }}</mat-label>
-        </mat-divider>
-      }
-    }
-  }
-
-  <!-- debug -->
-  @if (isAdmin) {
-    <mat-divider></mat-divider>
-
-    <button
-      mat-menu-item
-      #menuTrigger="matMenuTrigger"
-      (mouseenter)="menuTrigger.openMenu()"
-      [matMenuTriggerFor]="debugMenu"
-    >
-      <mat-icon><ion-icon name="bug"></ion-icon></mat-icon>
-      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>
-    </button>
-
-    <mat-menu #debugMenu="matMenu">
-      <!-- enable debug -->
-      <button mat-menu-item (click)="devToggleDebug()">
-        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
-        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>
-      </button>
-
-      <!-- show option key-->
-      <button mat-menu-item (click)="toggleShowOptionKeys()">
-        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
-        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>
-      </button>
-    </mat-menu>
-  }
-</mat-menu>
-
-<ion-content>
-  <form [formGroup]="form" novalidate (ngSubmit)="save($event)" class="form-container">
-    <ion-grid class="ion-no-padding">
-      <ion-row>
-        <!-- left  margin -->
-        <ion-col size="0" size-lg="1" size-xl="2">&nbsp;</ion-col>
-
-        <ion-col class="ion-padding">
-          <!-- error -->
-          <ion-item *ngIf="errorSubject | async; let error" lines="none">
-            <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
-            <ion-label color="danger" class="error" [innerHTML]="error | translate"></ion-label>
-          </ion-item>
-
-          <ion-list-header class="hidden-xs hidden-xxs" translate>SETTINGS.DESCRIPTION</ion-list-header>
-
-          <ion-list [inset]="mobile" [class.cdk-visually-hidden]="!isLogin">
-            <ion-item lines="none">
-              <!-- account inheritance (desktop) -->
-              @if (!mobile) {
-                <mat-form-field>
-                  <input matInput hidden formControlName="accountInheritance" type="text" />
-
-                  <!-- check box (if desktop) -->
-                  <mat-checkbox (change)="setAccountInheritance($event.checked)" [checked]="accountInheritance">
-                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>
-                  </mat-checkbox>
-
-                  <mat-error *ngIf="form.controls.accountInheritance.hasError('required')" translate>
-                    ERROR.FIELD_REQUIRED
-                  </mat-error>
-                </mat-form-field>
-              } @else {
-                <!-- account inheritance (if mobile) -->
-                <mat-form-field>
-                  <input matInput hidden formControlName="accountInheritance" type="text" />
-
-                  <!-- slide toggle  -->
-                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>
-                  <mat-slide-toggle
-                    matSuffix
-                    (change)="setAccountInheritance($event.checked)"
-                    [checked]="accountInheritance"
-                  ></mat-slide-toggle>
-                  <mat-error *ngIf="form.controls.accountInheritance.hasError('required')" translate>
-                    ERROR.FIELD_REQUIRED
-                  </mat-error>
-                </mat-form-field>
-              }
-            </ion-item>
-
-            <!-- help on account -->
-            @if (accountInheritance) {
-              <ion-item [button]="true" lines="none" (click)="openAccountPage()">
-                @if (!mobile) {
-                  <ion-icon slot="start" name="help-circle-outline"></ion-icon>
-                }
-                <ion-label>
-                  <small [innerHTML]="'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate"></small>
-                </ion-label>
-                <ion-text color="tertiary" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>
-                <ion-icon slot="end" color="tertiary" name="chevron-forward"></ion-icon>
-              </ion-item>
-            }
-          </ion-list>
-
-          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>
-
-          <ion-list [inset]="mobile">
-            <!-- locale -->
-            <ion-item lines="none">
-              <mat-form-field>
-                <ion-icon matPrefix name="language"></ion-icon>
-                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>
-                <mat-select formControlName="locale" required>
-                  <mat-option *ngFor="let item of locales" [value]="item.key">
-                    {{ item.value }}
-                  </mat-option>
-                </mat-select>
-                <mat-error *ngIf="form.controls.locale.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
-              </mat-form-field>
-            </ion-item>
-
-            <!-- dark mode (if allow by the environment token) -->
-            @if (settings.allowDarkMode) {
-              <ion-item lines="none">
-                <mat-form-field>
-                  <ion-icon matPrefix name="moon"></ion-icon>
-
-                  <input matInput hidden formControlName="darkMode" type="text" />
-
-                  <!-- slide toggle  -->
-                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>
-                  <mat-slide-toggle
-                    matSuffix
-                    (change)="toggleDarkMode($event.checked)"
-                    [checked]="darkMode"
-                  ></mat-slide-toggle>
-                </mat-form-field>
-              </ion-item>
-            }
-          </ion-list>
-
-          <!-- Network entry -->
-          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>
-
-          <ion-list [inset]="mobile">
-            <!-- Peer address -->
-            <ion-item lines="none">
-              <mat-form-field>
-                <ion-icon matPrefix name="cloud"></ion-icon>
-
-                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>
-                <input matInput type="text" formControlName="peerUrl" required />
-
-                <button
-                  mat-icon-button
-                  type="button"
-                  matSuffix
-                  (click)="showSelectPeerModal()"
-                  tabindex="-1"
-                  [title]="'SETTINGS.BTN_CHANGE_PEER' | translate"
-                >
-                  <mat-icon>search</mat-icon>
-                </button>
-
-                <mat-error *ngIf="form.controls.peerUrl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
-                <mat-error *ngIf="form.controls.peerUrl.hasError('peerAlive')" translate>
-                  SETTINGS.ERROR.PEER_NOT_REACHABLE
-                </mat-error>
-                <mat-error *ngIf="form.controls.peerUrl.hasError('peerNotCompatible')" translate>
-                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE
-                </mat-error>
-              </mat-form-field>
-            </ion-item>
-
-            <!-- Offline mode (if mobile) -->
-            @if (mobile) {
-              <ion-item lines="none">
-                <mat-form-field>
-                  <input matInput hidden formControlName="accountInheritance" type="text" />
-
-                  <!-- slide toggle  -->
-                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>
-                  <mat-slide-toggle
-                    matSuffix
-                    (change)="setForceOffline($event.checked)"
-                    [checked]="network.offline"
-                  ></mat-slide-toggle>
-                </mat-form-field>
-              </ion-item>
-            }
-          </ion-list>
-
-          <!-- Data entry -->
-          <ion-list-header>
-            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>
-          </ion-list-header>
-
-          <ion-list [inset]="mobile">
-            <!-- Usage mode -->
-            <ion-item lines="none">
-              <mat-form-field>
-                <ion-icon matPrefix name="id-card"></ion-icon>
-                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>
-                <mat-select formControlName="usageMode" required>
-                  <mat-option *ngFor="let item of usageModes" [value]="item">
-                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}
-                  </mat-option>
-                </mat-select>
-                <mat-error *ngIf="form.controls.usageMode.hasError('required')" translate>
-                  ERROR.FIELD_REQUIRED
-                </mat-error>
-              </mat-form-field>
-            </ion-item>
-
-            <!-- lat/long format-->
-            <ion-item lines="none">
-              <mat-form-field>
-                <ion-icon matPrefix name="locate"></ion-icon>
-                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>
-                <mat-select formControlName="latLongFormat" required>
-                  <mat-option *ngFor="let item of latLongFormats" [value]="item">
-                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}
-                  </mat-option>
-                </mat-select>
-                <mat-error *ngIf="form.controls.latLongFormat.hasError('required')" translate>
-                  ERROR.FIELD_REQUIRED
-                </mat-error>
-              </mat-form-field>
-            </ion-item>
-          </ion-list>
-
-          <!-- fields options -->
-          <app-properties-form
-            #propertiesForm
-            formArrayName="properties"
-            [definitions]="propertyDefinitions"
-            [options]="{ allowEmptyArray: true }"
-            [mobile]="mobile"
-            [showHintKey]="showOptionKeys"
-            addButtonText="COMMON.BTN_SHOW_MORE"
-            addButtonTitle="SETTINGS.BTN_SHOW_MORE_HELP"
-            [debug]="debug"
-          ></app-properties-form>
-        </ion-col>
-
-        <!-- right margin -->
-        <ion-col size="0" size-lg="1" size-xl="2">&nbsp;</ion-col>
-      </ion-row>
-    </ion-grid>
-  </form>
-</ion-content>
-
-<ion-footer hidden-xs hidden-sm hidden-mobile>
-  <app-form-buttons-bar
-    (onCancel)="cancel()"
-    (onSave)="save($event)"
-    [disabled]="!form.dirty || saving"
-  ></app-form-buttons-bar>
-</ion-footer>