@sumaris-net/ngx-components 18.5.1 → 18.5.2

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -7662,27 +7662,27 @@ function suggestFromArray(items, value, filter, sortBy, sortDirection, opts) {
     const total = filteredItems.length || 0;
     // Pagination (truncate if need)
     let pageData = filteredItems;
-    if (filter) {
-        if ((filter.offset || 0) > 0) {
-            pageData = pageData.slice(filter.offset);
-        }
-        if (isNotNil(filter.size) && pageData.length > filter.size) {
-            pageData = pageData.slice(0, filter.size);
-        }
+    const offset = filter?.offset ?? opts?.offset ?? 0;
+    const size = filter?.size ?? opts?.size;
+    if ((offset || 0) > 0) {
+        pageData = pageData.slice(offset);
+    }
+    if (isNotNil(size) && pageData.length > filter.size) {
+        pageData = pageData.slice(0, size);
     }
     const result = {
         data: pageData,
         total,
     };
     // Add fetch more capability, if total was fetched
-    const nextOffset = ((filter && filter.offset) || 0) + pageData.length;
+    const nextOffset = offset + pageData.length;
     if (nextOffset < total) {
-        result.fetchMore = async (_) => suggestFromArray(filteredItems, undefined /*OPTIMISATION: already applied*/, {
+        result.fetchMore = async (_) => suggestFromArray(filteredItems, undefined /*OPTIMISATION: already filtered*/, {
             ...filter,
             offset: nextOffset,
             skipSort: true, // OPTIMISATION: already sorted
             excludedIds: undefined, // OPTIMISATION: already filtered
-        });
+        }, sortBy, sortDirection, opts);
     }
     return result;
 }
@@ -30502,6 +30502,8 @@ class AppPropertiesForm extends AppForm {
     addButtonText = 'COMMON.BTN_ADD';
     addButtonTitle = '';
     showAddButton = true;
+    panelClass;
+    panelWidth;
     /**
      * @deprecated Use addButtonTitle instead
      * @param value
@@ -30566,7 +30568,8 @@ class AppPropertiesForm extends AppForm {
             equals: (v1, v2) => (v1?.key || v1) === (v2?.key || v2),
             displayWith: (value) => {
                 // DEBUG
-                //console.debug('[app-properties-form] Displaying value', value);
+                if (this.debug)
+                    console.debug('[app-properties-form] Displaying value', value);
                 // Value is an object (a Property)
                 if (value && typeof value === 'object') {
                     return value.value;
@@ -30581,7 +30584,9 @@ class AppPropertiesForm extends AppForm {
             columnNames: [this.translate.instant('SETTINGS.PROPERTY_KEY')],
             splitSearchText: false,
             showAllOnFocus: true,
-            selectInputContentOnFocus: !this.mobile,
+            selectInputContentOnFocus: true,
+            panelClass: this.panelClass,
+            panelWidth: this.panelWidth,
         };
         this._state.hold(this._state.select('definitions'), (definitions) => {
             if (this.loaded)
@@ -30593,7 +30598,8 @@ class AppPropertiesForm extends AppForm {
         if (!definitions)
             return [];
         // DEBUG
-        //console.debug('[app-properties-form] Processing definitions...', definitions);
+        if (this.debug)
+            console.debug('[app-properties-form] Processing definitions...', definitions);
         // Prepare definition (e.g. resolve tokens if any)
         definitions = FormFieldDefinitionUtils.prepareDefinitions(this.injector, definitions || []);
         // Fill options map
@@ -30662,7 +30668,8 @@ class AppPropertiesForm extends AppForm {
     async suggestDefinitionKeys(value, filter, sortBy, sortDirection, opts) {
         let items = await firstNotNilPromise(this._definitionKeys$, { stop: this.destroySubject });
         // DEBUG
-        //console.debug('[app-properties-form] Suggesting definition keys', value, items);
+        if (this.debug)
+            console.debug('[app-properties-form] Suggesting definition keys', value, items);
         // Get as key
         if (typeof value === 'string' && !RegExpUtils.hasWildcardCharacter(value)) {
             const obj = items.find((o) => o.key === value);
@@ -30684,7 +30691,7 @@ class AppPropertiesForm extends AppForm {
         // Any match
         if (!value.startsWith('*'))
             value = '*' + value;
-        return suggestFromArray(items, value, filter, sortBy, sortDirection, opts);
+        return suggestFromArray(items, value, { searchAttribute: 'value', ...filter }, sortBy, sortDirection, opts);
     }
     markForCheck() {
         this.cd.markForCheck();
@@ -30693,7 +30700,7 @@ class AppPropertiesForm extends AppForm {
         return isNil(obj?.key) || isNil(obj.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppPropertiesForm, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: i2.DateAdapter }, { token: i0.ChangeDetectorRef }, { token: PropertyValidator }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppPropertiesForm, selector: "app-properties-form", inputs: { formArrayName: "formArrayName", formArray: "formArray", options: "options", chipColor: "chipColor", mobile: ["mobile", "mobile", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", showHintKey: ["showHintKey", "showHintKey", booleanAttribute], hintKeyPrefix: "hintKeyPrefix", showMoreButton: ["showMoreButton", "showMoreButton", booleanAttribute], addButtonText: "addButtonText", addButtonTitle: "addButtonTitle", showAddButton: ["showAddButton", "showAddButton", booleanAttribute], showMoreButtonTitle: "showMoreButtonTitle", definitions: "definitions" }, providers: [{ provide: PropertyValidator, useClass: PropertyValidator }, RxState], usesInheritance: true, ngImport: i0, template: "<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n  @if (loadingSubject | async) {\n    <ion-list [inset]=\"mobile\">\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n    </ion-list>\n  } @else {\n    <ion-list formArrayName=\"properties\" [inset]=\"mobile\">\n      <!-- Show more options -->\n      @if ((_definitionKeys$ | async | isNotEmptyArray) && formArray?.length === 0) {\n        <ion-item lines=\"none\">\n          <ion-button color=\"light\" [title]=\"addButtonTitle | translate\" (click)=\"_helper.add()\">\n            <ion-label>{{ addButtonText | translate }}</ion-label>\n            <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n          </ion-button>\n        </ion-item>\n      }\n\n      @for (fieldForm of fieldForms; track i; let i = $index) {\n        <ion-item lines=\"none\" [class.outline]=\"appearance === 'outline'\">\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row [formGroupName]=\"i\" class=\"ion-no-padding\">\n              @let definition = getDefinitionAt(i);\n              <!-- property key -->\n              @if (fieldForm | formGetControl: 'key'; as control) {\n                <ion-col\n                  size=\"12\"\n                  size-sm=\"6\"\n                  [title]=\"(definition | propertyGet: 'label' | translate) || ''\"\n                  class=\"ion-no-padding\"\n                >\n                  <mat-autocomplete-field\n                    floatLabel=\"auto\"\n                    [formControl]=\"control\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"showHintKey ? 'fixed' : subscriptSizing\"\n                    (selectionChange)=\"updateDefinitionAt(i)\"\n                    [tabindex]=\"tabindex + i * 2\"\n                    [config]=\"_autocompleteConfig\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_KEY' | translate\"\n                    [required]=\"true\"\n                    (focus)=\"_focusedControlIndex = i\"\n                    [readonly]=\"definition?.disabled\"\n                    [mobile]=\"mobile\"\n                  >\n                    <mat-hint [class.cdk-visually-hidden]=\"!showHintKey\">\n                      @let keyValue = control.value;\n                      {{ hintKeyPrefix || '' }}{{ keyValue?.key || keyValue || '' }}\n                    </mat-hint>\n                  </mat-autocomplete-field>\n                </ion-col>\n              }\n\n              <!-- property value -->\n              <ion-col size=\"\" size-sm=\"\" class=\"ion-no-padding ion-padding-start-xs\">\n                @if (definition) {\n                  <app-form-field\n                    floatLabel=\"auto\"\n                    [label]=\"mobile ? ('SETTINGS.PROPERTY_VALUE' | translate) : ' '\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"subscriptSizing\"\n                    [definition]=\"definition\"\n                    [formControl]=\"fieldForm | formGetControl: 'value'\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                    [chipColor]=\"chipColor\"\n                    [required]=\"true\"\n                    [hideRequiredMarker]=\"true\"\n                    [tabindex]=\"tabindex + i * 2 + 1\"\n                    [readonly]=\"definition?.disabled\"\n                  ></app-form-field>\n                } @else {\n                  <!-- unknown definition -->\n                  <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\n                    @if (mobile) {\n                      <mat-label>{{ 'SETTINGS.PROPERTY_VALUE' | translate }}</mat-label>\n                    }\n                    <input\n                      type=\"text\"\n                      matInput\n                      [formControl]=\"fieldForm | formGetControl: 'value'\"\n                      [placeholder]=\"mobile ? '' : ('SETTINGS.PROPERTY_VALUE' | translate)\"\n                      [required]=\"true\"\n                      [tabindex]=\"20 + i * 2 + 1\"\n                    />\n                  </mat-form-field>\n                }\n              </ion-col>\n\n              <ion-col size=\"auto\" class=\"ion-no-padding\">\n                @if (_helper.isLast(i)) {\n                  <button\n                    type=\"button\"\n                    mat-icon-button\n                    color=\"light\"\n                    [disabled]=\"\n                      disabled || (fieldForm.value | asBoolean: isEmptyProperty) || (_definitionKeys | isEmptyArray)\n                    \"\n                    [title]=\"'SETTINGS.BTN_ADD_PROPERTY' | translate\"\n                    (click)=\"_helper.add()\"\n                    [tabindex]=\"20 + i * 2 + 2\"\n                  >\n                    <mat-icon>add</mat-icon>\n                  </button>\n                }\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  color=\"light\"\n                  [disabled]=\"definition?.disabled || disabled\"\n                  [title]=\"'COMMON.BTN_DELETE' | translate\"\n                  (click)=\"removeAt(i)\"\n                  [tabindex]=\"-1\"\n                >\n                  <mat-icon>close</mat-icon>\n                </button>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-item>\n      }\n    </ion-list>\n  }\n</form>\n\n<ng-template #propertyRowSkeleton>\n  <ion-item lines=\"none\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n        <!-- property key -->\n        <ion-col size=\"6\" class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n            <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n          </mat-form-field>\n        </ion-col>\n        <!-- value -->\n        <ion-col class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n          </mat-form-field>\n        </ion-col>\n        <!-- buttons -->\n        <ion-col size=\"auto\">\n          <button type=\"button\" mat-icon-button color=\"light\" disabled>\n            <mat-icon>close</mat-icon>\n          </button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n</ng-template>\n", styles: [":host ion-item ion-row ion-col{--ion-padding-start: 0;min-width:48px}:host ion-item.outline{overflow:visible}:host ion-item.outline ion-grid,:host ion-item.outline ion-row,:host ion-item.outline ion-col{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: AsBooleanPipe, name: "asBoolean" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AppPropertiesForm, selector: "app-properties-form", inputs: { formArrayName: "formArrayName", formArray: "formArray", options: "options", chipColor: "chipColor", mobile: ["mobile", "mobile", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", showHintKey: ["showHintKey", "showHintKey", booleanAttribute], hintKeyPrefix: "hintKeyPrefix", showMoreButton: ["showMoreButton", "showMoreButton", booleanAttribute], addButtonText: "addButtonText", addButtonTitle: "addButtonTitle", showAddButton: ["showAddButton", "showAddButton", booleanAttribute], panelClass: "panelClass", panelWidth: "panelWidth", showMoreButtonTitle: "showMoreButtonTitle", definitions: "definitions" }, providers: [{ provide: PropertyValidator, useClass: PropertyValidator }, RxState], usesInheritance: true, ngImport: i0, template: "<!-- Properties -->\n<form [formGroup]=\"form\" class=\"form-container\">\n  @if (loadingSubject | async) {\n    <ion-list [inset]=\"mobile\">\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"propertyRowSkeleton\"></ng-container>\n    </ion-list>\n  } @else {\n    <ion-list formArrayName=\"properties\" [inset]=\"mobile\">\n      <!-- Show more options -->\n      @if ((_definitionKeys$ | async | isNotEmptyArray) && formArray?.length === 0) {\n        <ion-item lines=\"none\">\n          <ion-button color=\"light\" [title]=\"addButtonTitle | translate\" (click)=\"_helper.add()\">\n            <ion-label>{{ addButtonText | translate }}</ion-label>\n            <mat-icon slot=\"end\">arrow_drop_down</mat-icon>\n          </ion-button>\n        </ion-item>\n      }\n\n      @for (fieldForm of fieldForms; track i; let i = $index) {\n        <ion-item lines=\"none\" [class.outline]=\"appearance === 'outline'\">\n          <ion-grid class=\"ion-no-padding\">\n            <ion-row [formGroupName]=\"i\" class=\"ion-no-padding\">\n              @let definition = getDefinitionAt(i);\n              <!-- property key -->\n              @if (fieldForm | formGetControl: 'key'; as control) {\n                <ion-col\n                  size=\"12\"\n                  size-sm=\"6\"\n                  [title]=\"(definition | propertyGet: 'label' | translate) || ''\"\n                  class=\"ion-no-padding\"\n                >\n                  <mat-autocomplete-field\n                    floatLabel=\"auto\"\n                    [formControl]=\"control\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"showHintKey ? 'fixed' : subscriptSizing\"\n                    (selectionChange)=\"updateDefinitionAt(i)\"\n                    [tabindex]=\"tabindex + i * 2\"\n                    [config]=\"_autocompleteConfig\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_KEY' | translate\"\n                    [required]=\"true\"\n                    (focus)=\"_focusedControlIndex = i\"\n                    [readonly]=\"definition?.disabled\"\n                    [mobile]=\"mobile\"\n                  >\n                    <mat-hint [class.cdk-visually-hidden]=\"!showHintKey\">\n                      @let keyValue = control.value;\n                      {{ hintKeyPrefix || '' }}{{ keyValue?.key || keyValue || '' }}\n                    </mat-hint>\n                  </mat-autocomplete-field>\n                </ion-col>\n              }\n\n              <!-- property value -->\n              <ion-col size=\"\" size-sm=\"\" class=\"ion-no-padding ion-padding-start-xs\">\n                @if (definition) {\n                  <app-form-field\n                    floatLabel=\"auto\"\n                    [label]=\"mobile ? ('SETTINGS.PROPERTY_VALUE' | translate) : ' '\"\n                    [appearance]=\"appearance\"\n                    [subscriptSizing]=\"subscriptSizing\"\n                    [definition]=\"definition\"\n                    [formControl]=\"fieldForm | formGetControl: 'value'\"\n                    [placeholder]=\"'SETTINGS.PROPERTY_VALUE' | translate\"\n                    [chipColor]=\"chipColor\"\n                    [required]=\"true\"\n                    [hideRequiredMarker]=\"true\"\n                    [tabindex]=\"tabindex + i * 2 + 1\"\n                    [readonly]=\"definition?.disabled\"\n                  ></app-form-field>\n                } @else {\n                  <!-- unknown definition -->\n                  <mat-form-field [appearance]=\"appearance\" [subscriptSizing]=\"subscriptSizing\">\n                    @if (mobile) {\n                      <mat-label>{{ 'SETTINGS.PROPERTY_VALUE' | translate }}</mat-label>\n                    }\n                    <input\n                      type=\"text\"\n                      matInput\n                      [formControl]=\"fieldForm | formGetControl: 'value'\"\n                      [placeholder]=\"mobile ? '' : ('SETTINGS.PROPERTY_VALUE' | translate)\"\n                      [required]=\"true\"\n                      [tabindex]=\"20 + i * 2 + 1\"\n                    />\n                  </mat-form-field>\n                }\n              </ion-col>\n\n              <ion-col size=\"auto\" class=\"ion-no-padding\">\n                @if (_helper.isLast(i)) {\n                  <button\n                    type=\"button\"\n                    mat-icon-button\n                    color=\"light\"\n                    [disabled]=\"\n                      disabled || (fieldForm.value | asBoolean: isEmptyProperty) || (_definitionKeys | isEmptyArray)\n                    \"\n                    [title]=\"'SETTINGS.BTN_ADD_PROPERTY' | translate\"\n                    (click)=\"_helper.add()\"\n                    [tabindex]=\"20 + i * 2 + 2\"\n                  >\n                    <mat-icon>add</mat-icon>\n                  </button>\n                }\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  color=\"light\"\n                  [disabled]=\"definition?.disabled || disabled\"\n                  [title]=\"'COMMON.BTN_DELETE' | translate\"\n                  (click)=\"removeAt(i)\"\n                  [tabindex]=\"-1\"\n                >\n                  <mat-icon>close</mat-icon>\n                </button>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </ion-item>\n      }\n    </ion-list>\n  }\n</form>\n\n<ng-template #propertyRowSkeleton>\n  <ion-item lines=\"none\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row class=\"ion-no-padding\">\n        <!-- property key -->\n        <ion-col size=\"6\" class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n            <ion-icon name=\"arrow-dropdown\" matSuffix></ion-icon>\n          </mat-form-field>\n        </ion-col>\n        <!-- value -->\n        <ion-col class=\"ion-no-padding\">\n          <mat-form-field [subscriptSizing]=\"subscriptSizing\">\n            <input matInput hidden disabled />\n            <ion-skeleton-text animated style=\"width: 60%\"></ion-skeleton-text>\n          </mat-form-field>\n        </ion-col>\n        <!-- buttons -->\n        <ion-col size=\"auto\">\n          <button type=\"button\" mat-icon-button color=\"light\" disabled>\n            <mat-icon>close</mat-icon>\n          </button>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n</ng-template>\n", styles: [":host ion-item ion-row ion-col{--ion-padding-start: 0;min-width:48px}:host ion-item.outline{overflow:visible}:host ion-item.outline ion-grid,:host ion-item.outline ion-row,:host ion-item.outline ion-col{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NotEmptyArrayPipe, name: "isNotEmptyArray" }, { kind: "pipe", type: EmptyArrayPipe, name: "isEmptyArray" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: AsBooleanPipe, name: "asBoolean" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppPropertiesForm, decorators: [{
             type: Component,
@@ -30730,6 +30737,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], showAddButton: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], panelClass: [{
+                type: Input
+            }], panelWidth: [{
+                type: Input
             }], showMoreButtonTitle: [{
                 type: Input
             }], definitions: [{
@@ -31069,7 +31080,7 @@ class SettingsPage extends AppForm {
         }
         await this.save();
     }
-    toggleShowOptionKey() {
+    toggleShowOptionKeys() {
         this.showOptionKeys = !this.showOptionKeys;
         this.markForCheck();
     }
@@ -31081,11 +31092,11 @@ class SettingsPage extends AppForm {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SettingsPage, deps: [{ token: i0.Injector }, { token: PlatformService }, { token: i2$1.NavController }, { token: LocalSettingsValidatorService }, { token: i2$1.AlertController }, { token: i1$1.TranslateService }, { token: i1$3.UntypedFormBuilder }, { token: AccountService }, { token: LocalSettingsService }, { token: i0.ChangeDetectorRef }, { token: NetworkService }, { token: APP_LOCALES }, { token: APP_SETTINGS_MENU_ITEMS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SettingsPage, selector: "page-settings", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          <mat-icon *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n          <mat-label translate>{{ item.title }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label translate>{{ item.title }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\n    <mat-divider></mat-divider>\n\n    <button\n      mat-menu-item\n      #menuTrigger=\"matMenuTrigger\"\n      (mouseenter)=\"menuTrigger.openMenu()\"\n      [matMenuTriggerFor]=\"debugMenu\"\n    >\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKey()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n          </ion-item>\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\" translate>SETTINGS.DESCRIPTION</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n                  </mat-checkbox>\n\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal()\"\n                  tabindex=\"-1\"\n                  [title]=\"'SETTINGS.BTN_CHANGE_PEER' | translate\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_REACHABLE\n                </mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.latLongFormat.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i12$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesForm, selector: "app-properties-form", inputs: ["formArrayName", "formArray", "options", "chipColor", "mobile", "appearance", "subscriptSizing", "showHintKey", "hintKeyPrefix", "showMoreButton", "addButtonText", "addButtonTitle", "showAddButton", "showMoreButtonTitle", "definitions"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SettingsPage, selector: "page-settings", host: { listeners: { "window:beforeunload": "handleRefresh($event)" } }, providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          <mat-icon *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n          <mat-label translate>{{ item.title }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label translate>{{ item.title }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\n    <mat-divider></mat-divider>\n\n    <button\n      mat-menu-item\n      #menuTrigger=\"matMenuTrigger\"\n      (mouseenter)=\"menuTrigger.openMenu()\"\n      [matMenuTriggerFor]=\"debugMenu\"\n    >\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n          </ion-item>\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\" translate>SETTINGS.DESCRIPTION</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n                  </mat-checkbox>\n\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal()\"\n                  tabindex=\"-1\"\n                  [title]=\"'SETTINGS.BTN_CHANGE_PEER' | translate\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_REACHABLE\n                </mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.latLongFormat.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2$1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i12$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: AppPropertiesForm, selector: "app-properties-form", inputs: ["formArrayName", "formArray", "options", "chipColor", "mobile", "appearance", "subscriptSizing", "showHintKey", "hintKeyPrefix", "showMoreButton", "addButtonText", "addButtonTitle", "showAddButton", "panelClass", "panelWidth", "showMoreButtonTitle", "definitions"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SettingsPage, decorators: [{
             type: Component,
-            args: [{ selector: 'page-settings', providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          <mat-icon *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n          <mat-label translate>{{ item.title }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label translate>{{ item.title }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\n    <mat-divider></mat-divider>\n\n    <button\n      mat-menu-item\n      #menuTrigger=\"matMenuTrigger\"\n      (mouseenter)=\"menuTrigger.openMenu()\"\n      [matMenuTriggerFor]=\"debugMenu\"\n    >\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKey()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n          </ion-item>\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\" translate>SETTINGS.DESCRIPTION</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n                  </mat-checkbox>\n\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal()\"\n                  tabindex=\"-1\"\n                  [title]=\"'SETTINGS.BTN_CHANGE_PEER' | translate\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_REACHABLE\n                </mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.latLongFormat.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n" }]
+            args: [{ selector: 'page-settings', providers: [{ provide: ValidatorService, useExisting: LocalSettingsValidatorService }], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let hasValidate = !loading && (dirty || saving);\n<app-toolbar\n  [title]=\"'SETTINGS.TITLE' | translate\"\n  color=\"primary\"\n  [hasValidate]=\"hasValidate\"\n  [hasClose]=\"!hasValidate\"\n  (onValidate)=\"save($event)\"\n  (onClose)=\"close($event)\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- options menu -->\n    <ion-button [matMenuTriggerFor]=\"optionsMenu\" [disabled]=\"loading || saving\">\n      <mat-icon slot=\"icon-only\">more_vert</mat-icon>\n    </ion-button>\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Options menu -->\n<mat-menu #optionsMenu=\"matMenu\">\n  <!-- Clear cache -->\n  <button mat-menu-item [disabled]=\"saving\" (click)=\"clearCache($event)\">\n    <mat-icon><ion-icon name=\"trash-outline\"></ion-icon></mat-icon>\n    <ion-label translate>SETTINGS.BTN_CLEAR_CACHE</ion-label>\n  </button>\n\n  <!-- Reset -->\n  <button mat-menu-item [disabled]=\"saving || !dirty\" (click)=\"cancel($event)\">\n    <mat-icon><ion-icon name=\"refresh\"></ion-icon></mat-icon>\n    <mat-label translate>COMMON.BTN_RESET</mat-label>\n  </button>\n\n  <!-- additional items -->\n  @if (!loading) {\n    @for (item of menuItems; track item) {\n      @if (item.path) {\n        <a mat-menu-item class=\"{{ item.cssClass }} {{ item.color }}\" (click)=\"executeAction($event, item)\">\n          <mat-icon *ngIf=\"item.icon\"><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n          <mat-icon *ngIf=\"item.matIcon\">{{ item.matIcon }}</mat-icon>\n          <mat-label translate>{{ item.title }}</mat-label>\n        </a>\n      } @else if (!item.action) {\n        <!-- divider -->\n        <mat-divider class=\"{{ item.cssClass }} {{ item.color }}\">\n          <mat-label translate>{{ item.title }}</mat-label>\n        </mat-divider>\n      }\n    }\n  }\n\n  <!-- debug -->\n  @if (isAdmin) {\n    <mat-divider></mat-divider>\n\n    <button\n      mat-menu-item\n      #menuTrigger=\"matMenuTrigger\"\n      (mouseenter)=\"menuTrigger.openMenu()\"\n      [matMenuTriggerFor]=\"debugMenu\"\n    >\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n\n    <mat-menu #debugMenu=\"matMenu\">\n      <!-- enable debug -->\n      <button mat-menu-item (click)=\"devToggleDebug()\">\n        <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</mat-label>\n      </button>\n\n      <!-- show option key-->\n      <button mat-menu-item (click)=\"toggleShowOptionKeys()\">\n        <mat-icon>{{ showOptionKeys ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <mat-label translate>SETTINGS.BTN_SHOW_OPTION_KEY</mat-label>\n      </button>\n    </mat-menu>\n  }\n</mat-menu>\n\n<ion-content>\n  <form [formGroup]=\"form\" novalidate (ngSubmit)=\"save($event)\" class=\"form-container\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <!-- left  margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n\n        <ion-col class=\"ion-padding\">\n          <!-- error -->\n          <ion-item *ngIf=\"errorSubject | async; let error\" lines=\"none\">\n            <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n            <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n          </ion-item>\n\n          <ion-list-header class=\"hidden-xs hidden-xxs\" translate>SETTINGS.DESCRIPTION</ion-list-header>\n\n          <ion-list [inset]=\"mobile\" [class.cdk-visually-hidden]=\"!isLogin\">\n            <ion-item lines=\"none\">\n              <!-- account inheritance (desktop) -->\n              @if (!mobile) {\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- check box (if desktop) -->\n                  <mat-checkbox (change)=\"setAccountInheritance($event.checked)\" [checked]=\"accountInheritance\">\n                    <span translate>SETTINGS.INHERIT_FROM_ACCOUNT</span>\n                  </mat-checkbox>\n\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              } @else {\n                <!-- account inheritance (if mobile) -->\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.INHERIT_FROM_ACCOUNT</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setAccountInheritance($event.checked)\"\n                    [checked]=\"accountInheritance\"\n                  ></mat-slide-toggle>\n                  <mat-error *ngIf=\"form.controls.accountInheritance.hasError('required')\" translate>\n                    ERROR.FIELD_REQUIRED\n                  </mat-error>\n                </mat-form-field>\n              }\n            </ion-item>\n\n            <!-- help on account -->\n            @if (accountInheritance) {\n              <ion-item [button]=\"true\" lines=\"none\" (click)=\"openAccountPage()\">\n                @if (!mobile) {\n                  <ion-icon slot=\"start\" name=\"help-circle-outline\"></ion-icon>\n                }\n                <ion-label>\n                  <small [innerHTML]=\"'SETTINGS.INHERIT_FROM_ACCOUNT_HELP' | translate\"></small>\n                </ion-label>\n                <ion-text color=\"tertiary\" translate>SETTINGS.BTN_SHOW_ACCOUNT</ion-text>\n                <ion-icon slot=\"end\" color=\"tertiary\" name=\"chevron-forward\"></ion-icon>\n              </ion-item>\n            }\n          </ion-list>\n\n          <ion-list-header><h3 translate>SETTINGS.DISPLAY_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- locale -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"language\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LOCALE' | translate }}</mat-label>\n                <mat-select formControlName=\"locale\" required>\n                  <mat-option *ngFor=\"let item of locales\" [value]=\"item.key\">\n                    {{ item.value }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.locale.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- dark mode (if allow by the environment token) -->\n            @if (settings.allowDarkMode) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <ion-icon matPrefix name=\"moon\"></ion-icon>\n\n                  <input matInput hidden formControlName=\"darkMode\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.BTN_DARK_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"toggleDarkMode($event.checked)\"\n                    [checked]=\"darkMode\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Network entry -->\n          <ion-list-header><h3 translate>SETTINGS.NETWORK_DIVIDER</h3></ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Peer address -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"cloud\"></ion-icon>\n\n                <mat-label>{{ 'SETTINGS.PEER_URL' | translate }}</mat-label>\n                <input matInput type=\"text\" formControlName=\"peerUrl\" required />\n\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  matSuffix\n                  (click)=\"showSelectPeerModal()\"\n                  tabindex=\"-1\"\n                  [title]=\"'SETTINGS.BTN_CHANGE_PEER' | translate\"\n                >\n                  <mat-icon>search</mat-icon>\n                </button>\n\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerAlive')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_REACHABLE\n                </mat-error>\n                <mat-error *ngIf=\"form.controls.peerUrl.hasError('peerNotCompatible')\" translate>\n                  SETTINGS.ERROR.PEER_NOT_COMPATIBLE\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- Offline mode (if mobile) -->\n            @if (mobile) {\n              <ion-item lines=\"none\">\n                <mat-form-field>\n                  <input matInput hidden formControlName=\"accountInheritance\" type=\"text\" />\n\n                  <!-- slide toggle  -->\n                  <ion-text translate>SETTINGS.OFFLINE_MODE</ion-text>\n                  <mat-slide-toggle\n                    matSuffix\n                    (change)=\"setForceOffline($event.checked)\"\n                    [checked]=\"network.offline\"\n                  ></mat-slide-toggle>\n                </mat-form-field>\n              </ion-item>\n            }\n          </ion-list>\n\n          <!-- Data entry -->\n          <ion-list-header>\n            <h3 translate>SETTINGS.DATA_ENTRY_DIVIDER</h3>\n          </ion-list-header>\n\n          <ion-list [inset]=\"mobile\">\n            <!-- Usage mode -->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"id-card\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.USAGE_MODE' | translate }}</mat-label>\n                <mat-select formControlName=\"usageMode\" required>\n                  <mat-option *ngFor=\"let item of usageModes\" [value]=\"item\">\n                    {{ 'SETTINGS.USAGE_MODES.' + item | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.usageMode.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n\n            <!-- lat/long format-->\n            <ion-item lines=\"none\">\n              <mat-form-field>\n                <ion-icon matPrefix name=\"locate\"></ion-icon>\n                <mat-label>{{ 'SETTINGS.LAT_LONG_FORMAT' | translate }}</mat-label>\n                <mat-select formControlName=\"latLongFormat\" required>\n                  <mat-option *ngFor=\"let item of latLongFormats\" [value]=\"item\">\n                    {{ 'COMMON.LAT_LONG.ENUM.' + item | uppercase | translate }}\n                  </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"form.controls.latLongFormat.hasError('required')\" translate>\n                  ERROR.FIELD_REQUIRED\n                </mat-error>\n              </mat-form-field>\n            </ion-item>\n          </ion-list>\n\n          <!-- fields options -->\n          <app-properties-form\n            #propertiesForm\n            formArrayName=\"properties\"\n            [definitions]=\"propertyDefinitions\"\n            [options]=\"{ allowEmptyArray: true }\"\n            [mobile]=\"mobile\"\n            [showHintKey]=\"showOptionKeys\"\n            addButtonText=\"COMMON.BTN_SHOW_MORE\"\n            addButtonTitle=\"SETTINGS.BTN_SHOW_MORE_HELP\"\n            [debug]=\"debug\"\n          ></app-properties-form>\n        </ion-col>\n\n        <!-- right margin -->\n        <ion-col size=\"0\" size-lg=\"1\" size-xl=\"2\">&nbsp;</ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n</ion-content>\n\n<ion-footer hidden-xs hidden-sm hidden-mobile>\n  <app-form-buttons-bar\n    (onCancel)=\"cancel()\"\n    (onSave)=\"save($event)\"\n    [disabled]=\"!form.dirty || saving\"\n  ></app-form-buttons-bar>\n</ion-footer>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: PlatformService }, { type: i2$1.NavController }, { type: LocalSettingsValidatorService }, { type: i2$1.AlertController }, { type: i1$1.TranslateService }, { type: i1$3.UntypedFormBuilder }, { type: AccountService }, { type: LocalSettingsService }, { type: i0.ChangeDetectorRef }, { type: NetworkService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_LOCALES]
@@ -45151,7 +45162,7 @@ class PropertiesFormTestPage {
         return suggestFromArray(FAKE_ENTITIES, value, filter, sortBy, sortDirection, options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesFormTestPage, deps: [{ token: i1$3.FormBuilder }, { token: PropertyValidator }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesFormTestPage, selector: "app-properties-form-test", viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, read: AppPropertiesForm, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Properties form test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <mat-checkbox #showHint [checked]=\"true\">Show hint key?</mat-checkbox>\n  <br />\n  <form [formGroup]=\"form\">\n    <app-properties-form\n      #propertiesForm\n      formArrayName=\"properties\"\n      [definitions]=\"propertyDefinitions\"\n      [options]=\"{ allowEmptyArray: true }\"\n      [showHintKey]=\"showHint.checked\"\n    ></app-properties-form>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: AppPropertiesForm, selector: "app-properties-form", inputs: ["formArrayName", "formArray", "options", "chipColor", "mobile", "appearance", "subscriptSizing", "showHintKey", "hintKeyPrefix", "showMoreButton", "addButtonText", "addButtonTitle", "showAddButton", "showMoreButtonTitle", "definitions"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesFormTestPage, selector: "app-properties-form-test", viewQueries: [{ propertyName: "propertiesForm", first: true, predicate: ["propertiesForm"], descendants: true, read: AppPropertiesForm, static: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Properties form test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n  <mat-checkbox #showHint [checked]=\"true\">Show hint key?</mat-checkbox>\n  <br />\n  <form [formGroup]=\"form\">\n    <app-properties-form\n      #propertiesForm\n      formArrayName=\"properties\"\n      [definitions]=\"propertyDefinitions\"\n      [options]=\"{ allowEmptyArray: true }\"\n      [showHintKey]=\"showHint.checked\"\n    ></app-properties-form>\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: AppPropertiesForm, selector: "app-properties-form", inputs: ["formArrayName", "formArray", "options", "chipColor", "mobile", "appearance", "subscriptSizing", "showHintKey", "hintKeyPrefix", "showMoreButton", "addButtonText", "addButtonTitle", "showAddButton", "panelClass", "panelWidth", "showMoreButtonTitle", "definitions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesFormTestPage, decorators: [{
             type: Component,