@provoly/dashboard 1.3.7 → 1.3.9

package/fesm2022/provoly-dashboard-admin.mjs

@@ -7,24 +7,25 @@ import { CommonModule, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Output, Input, Injectable, ViewContainerRef, ViewChild, TemplateRef, ChangeDetectionStrategy, Optional, Inject, NgModule } from '@angular/core';
 import * as i3$1 from '@angular/forms';
-import { Validators, FormControl, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Validators, FormGroup, FormControl, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@ngrx/effects';
 import { concatLatestFrom, createEffect, ofType, EffectsModule } from '@ngrx/effects';
 import * as i1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, StoreModule } from '@ngrx/store';
 import * as i4 from '@provoly/dashboard';
-import { ClassSelectors, FieldSelectors, FieldType, ClassActions, FieldActions, SubscriptionnerDirective, ConfigSelectors, ConfigActions, DEFAULT_ICON_URL, IconPosition, compareOperationFunctions, ItemUtils, CategoryActions, CategorySelectors, DataSourceActions, DataSourceSelectors, FIELD_OPTIONS, DEFAULT_CATEGORY_UUID, getShareLevel, PryDatasetType, ENV_OPTIONS, GeometricFieldTypes, DashboardSelectors, PryShareMode, PRY_ACCESS_TOKEN, META_OPTIONS, RelationTypesSelectors, RelationTypesActions, BaseMenuComponent, BaseLayoutComponent, PRY_ACCESS_GUARD, PryDialogConfirmComponent, PrySortModule, PryIconModule, PryModalModule, PryI18nModule, PryCoreModule, PrySelectModule, PryToggleModule, PryOverlayModule, PryShareModule } from '@provoly/dashboard';
+import { ClassSelectors, FieldType, ClassActions, FieldActions, SubscriptionnerDirective, ConfigSelectors, FieldSelectors, ConfigActions, DEFAULT_ICON_URL, IconPosition, compareOperationFunctions, ItemUtils, CategoryActions, CategorySelectors, DataSourceActions, DataSourceSelectors, FIELD_I18N, DEFAULT_CATEGORY_UUID, getShareLevel, PryDatasetType, ENV_OPTIONS, GeometricFieldTypes, DashboardSelectors, PryShareMode, PRY_ACCESS_TOKEN, META_OPTIONS, RelationTypesSelectors, RelationTypesActions, BaseMenuComponent, BaseLayoutComponent, PRY_ACCESS_GUARD, PryDialogConfirmComponent, PrySortModule, PryIconModule, PryModalModule, PryI18nModule, PryCoreModule, PrySelectModule, PryToggleModule, PryOverlayModule, PryShareModule } from '@provoly/dashboard';
 import * as i5$1 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
 import * as i6 from '@provoly/dashboard/components/metadata-editor';
 import { MetadataSelectors, MetadataActions, PryExpandPanelModule } from '@provoly/dashboard/components/metadata-editor';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { switchMap, mergeMap, combineLatest, of, map, filter, BehaviorSubject, combineLatestWith, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounceTime, startWith, Subject, zip, withLatestFrom, takeUntil, catchError, tap } from 'rxjs';
+import { switchMap, mergeMap, combineLatest, of, map, filter, BehaviorSubject, combineLatestWith, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounceTime, startWith, Subject, withLatestFrom, takeUntil, catchError, tap } from 'rxjs';
 import { v4 } from 'uuid';
 import equal from 'fast-deep-equal/es6';
 import { distinctUntilChanged, map as map$1, filter as filter$1, mergeMap as mergeMap$1, catchError as catchError$1 } from 'rxjs/operators';
 import { TemplatePortal } from '@angular/cdk/portal';
+import { dateFormatOptions } from '@provoly/dashboard/components/data-format';
 import { concatLatestFrom as concatLatestFrom$1 } from '@ngrx/operators';
 import * as i1$1 from '@angular/common/http';
 import { PryDatasetModule } from '@provoly/dashboard/dataset';
@@ -352,9 +353,7 @@ class AttributeConditionComponent {
         this.attribute$ = this.condition$.pipe(filter((cond) => cond !== null && cond !== undefined), mergeMap((cond) => combineLatest([of(cond), this.store.select(ClassSelectors.classByAttributeId(cond.attribute ?? ''))])), map(([cond, klass]) => {
             return klass?.attributes.find((a) => a.id === cond.attribute);
         }));
-        this.field$ = this.attribute$.pipe(filter((attr) => attr !== undefined), switchMap((attr) => {
-            return this.store.select(FieldSelectors.fieldById(attr.field));
-        }));
+        this.field$ = this.attribute$.pipe(filter((attr) => attr !== undefined), map((attr) => attr.field));
         this.operatorOptions$ = this.field$.pipe(filter((field) => field !== undefined), map((field) => {
             const fieldType = field.type;
             if (fieldType === FieldType.STRING || fieldType === FieldType.KEYWORD) {
@@ -1076,7 +1075,7 @@ class AdminClassesCustomizeTooltipComponent extends SubscriptionnerDirective {
         return config;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminClassesCustomizeTooltipComponent, deps: [{ token: i4.TooltipFactoryService }, { token: i0.Injector }, { token: i4.PryI18nService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: { currentClass: "currentClass" }, outputs: { backPressed: "backPressed" }, viewQueries: [{ propertyName: "example", first: true, predicate: ["example"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div>\n  <div class=\"m-form-label-field -width-xl\">\n    <label class=\"a-label\" for=\"tooltip_type\">{{ '@pry.admin.customize.type' | i18n }}</label>\n    <pry-select\n      id=\"tooltip_type\"\n      (ngModelChange)=\"tooltipTypeChanged($event)\"\n      [ngModel]=\"currentClassConfig.type\"\n      [items]=\"possibleTooltipTypes$ | async\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n    ></pry-select>\n  </div>\n\n  <div>\n    <pry-checkbox [(ngModel)]=\"advancedTooltip\">{{ '@pry.admin.customize.advanced' | i18n }}</pry-checkbox>\n  </div>\n\n  <div class=\"m-form-label-field -width-xl\" *ngIf=\"!advancedTooltip && currentClassConfig.type === 'attribute'\">\n    <label class=\"a-label\" for=\"customize_simplified\">{{ '@pry.admin.customize.simplified' | i18n }}</label>\n    <pry-select\n      id=\"customize_simplified\"\n      (ngModelChange)=\"changeAttributes($event)\"\n      [ngModel]=\"currentClassConfig.options.attributes\"\n      [items]=\"attributesOfClass$ | async\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"id\"\n    ></pry-select>\n  </div>\n\n  <ng-container *ngIf=\"advancedTooltip\">\n    <textarea\n      cols=\"100\"\n      rows=\"15\"\n      class=\"a-form-field\"\n      [(ngModel)]=\"strOptions\"\n      (focusout)=\"optionsChanged()\"\n    ></textarea>\n  </ng-container>\n</div>\n\n<div class=\"m-tooltip m-tooltip--example\" [class.-hidden]=\"noTooltip\">\n  <div #example></div>\n</div>\n\n<div class=\"m-btn-group -width-md\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTemplate()\">\n    {{ '@pry.admin.customize.update' | i18n }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: { currentClass: "currentClass" }, outputs: { backPressed: "backPressed" }, viewQueries: [{ propertyName: "example", first: true, predicate: ["example"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div>\n  <div class=\"m-form-label-field -width-xl\">\n    <label class=\"a-label\" for=\"tooltip_type\">{{ '@pry.admin.customize.type' | i18n }}</label>\n    <pry-select\n      id=\"tooltip_type\"\n      (ngModelChange)=\"tooltipTypeChanged($event)\"\n      [ngModel]=\"currentClassConfig.type\"\n      [items]=\"possibleTooltipTypes$ | async\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n    ></pry-select>\n  </div>\n\n  <div>\n    <pry-checkbox [(ngModel)]=\"advancedTooltip\">{{ '@pry.admin.customize.advanced' | i18n }}</pry-checkbox>\n  </div>\n\n  <div class=\"m-form-label-field -width-xl\" *ngIf=\"!advancedTooltip && currentClassConfig.type === 'attribute'\">\n    <label class=\"a-label\" for=\"customize_simplified\">{{ '@pry.admin.customize.simplified' | i18n }}</label>\n    <pry-select\n      id=\"customize_simplified\"\n      (ngModelChange)=\"changeAttributes($event)\"\n      [ngModel]=\"currentClassConfig.options.attributes\"\n      [items]=\"attributesOfClass$ | async\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"id\"\n    ></pry-select>\n  </div>\n\n  <ng-container *ngIf=\"advancedTooltip\">\n    <textarea\n      cols=\"100\"\n      rows=\"15\"\n      class=\"a-form-field\"\n      [(ngModel)]=\"strOptions\"\n      (focusout)=\"optionsChanged()\"\n    ></textarea>\n  </ng-container>\n</div>\n\n<div class=\"m-tooltip m-tooltip--example\" [class.-hidden]=\"noTooltip\">\n  <div #example></div>\n</div>\n\n<div class=\"m-btn-group -width-md\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTemplate()\">\n    {{ '@pry.admin.customize.update' | i18n }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminClassesCustomizeTooltipComponent, decorators: [{
             type: Component,
@@ -1215,7 +1214,7 @@ class AdminClassesCustomizeSymbolComponent extends SubscriptionnerDirective {
         this.store.dispatch(ConfigActions.updateIcons({ definitions: { [this.currentClass?.id ?? '']: this.definitions } }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminClassesCustomizeSymbolComponent, deps: [{ token: i4.PryI18nService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: { currentClass: "currentClass" }, outputs: { backPressed: "backPressed" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"m-rule-wrapper\">\n  <li\n    *ngFor=\"let definition of definitions; let i = index\"\n    [class.m-rule--default]=\"definition.isDefault\"\n    class=\"m-rule\"\n  >\n    <div class=\"m-rule__header\">\n      <h3 class=\"a-h3\">\n        {{ '@pry.admin.rule' | i18n : { id: i + 1 } }}\n        <span>{{ definition.isDefault ? ('@pry.admin.defaultRule' | i18n) : '' }}</span>\n      </h3>\n\n      <div *ngIf=\"!definition.isDefault\" class=\"m-rule__actions\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i <= 1\"\n          [disabled]=\"i <= 1\"\n          (click)=\"move(i, i - 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_haut\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i >= definitions.length - 1\"\n          [disabled]=\"i >= definitions.length - 1\"\n          (click)=\"move(i, i + 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_bas\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"removeRule(i)\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <div>\n      <pry-select-image [iconUrl]=\"definition.iconUrl\" (changed)=\"changeForImage($event, i)\"></pry-select-image>\n\n      <ng-container *ngIf=\"definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"size\">{{ '@pry.admin.size' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeSize($event)\"\n            [items]=\"sizes\"\n            [ngModel]=\"definition.iconSize[0]\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            id=\"size\"\n          ></pry-select>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"display_mode\">{{ '@pry.admin.displayModeImage' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changePosition($event, i)\"\n            [items]=\"positions\"\n            [ngModel]=\"definition.position\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            id=\"display_mode\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <pry-checkbox [ngModel]=\"!!definition.rule\" (click)=\"toggleRule(i)\">{{\n            '@pry.admin.classes.condition' | i18n\n          }}</pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div *ngIf=\"!!definition.rule && !definition.isDefault\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_attrname\">{{ '@pry.admin.classes.attrName' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeAttrName($event, i)\"\n            [items]=\"fieldsForClass\"\n            [ngModel]=\"definition.rule.attributeName\"\n            bindLabel=\"name\"\n            bindValue=\"name\"\n            id=\"classes_attrname\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_operation\">{{ '@pry.admin.classes.operation' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeOperation($event, i)\"\n            [items]=\"operations\"\n            [ngModel]=\"definition.rule.operation\"\n            bindLabel=\"label\"\n            bindValue=\"name\"\n            id=\"classes_operation\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_value\">{{ '@pry.admin.classes.value' | i18n }}</label>\n          <input\n            id=\"classes_value\"\n            type=\"text\"\n            class=\"a-form-field\"\n            (ngModelChange)=\"changeValue($event, i)\"\n            [ngModel]=\"definition.rule.value\"\n          />\n        </div>\n      </div>\n    </div>\n  </li>\n</ul>\n\n<button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"addRule()\">\n  <pry-icon iconSvg=\"add\"></pry-icon>\n  Ajouter une r\u00E8gle\n</button>\n\n<div class=\"m-btn-group -width-lg\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"restoreSymbols(); goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button\n    class=\"a-btn a-btn--primary\"\n    [innerHTML]=\"'@pry.admin.customize.updateIcons' | i18n\"\n    (click)=\"valid()\"\n  ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: { currentClass: "currentClass" }, outputs: { backPressed: "backPressed" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"m-rule-wrapper\">\n  <li\n    *ngFor=\"let definition of definitions; let i = index\"\n    [class.m-rule--default]=\"definition.isDefault\"\n    class=\"m-rule\"\n  >\n    <div class=\"m-rule__header\">\n      <h3 class=\"a-h3\">\n        {{ '@pry.admin.rule' | i18n : { id: i + 1 } }}\n        <span>{{ definition.isDefault ? ('@pry.admin.defaultRule' | i18n) : '' }}</span>\n      </h3>\n\n      <div *ngIf=\"!definition.isDefault\" class=\"m-rule__actions\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i <= 1\"\n          [disabled]=\"i <= 1\"\n          (click)=\"move(i, i - 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_haut\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i >= definitions.length - 1\"\n          [disabled]=\"i >= definitions.length - 1\"\n          (click)=\"move(i, i + 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_bas\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"removeRule(i)\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <div>\n      <pry-select-image [iconUrl]=\"definition.iconUrl\" (changed)=\"changeForImage($event, i)\"></pry-select-image>\n\n      <ng-container *ngIf=\"definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"size\">{{ '@pry.admin.size' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeSize($event)\"\n            [items]=\"sizes\"\n            [ngModel]=\"definition.iconSize[0]\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            id=\"size\"\n          ></pry-select>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"display_mode\">{{ '@pry.admin.displayModeImage' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changePosition($event, i)\"\n            [items]=\"positions\"\n            [ngModel]=\"definition.position\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            id=\"display_mode\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <pry-checkbox [ngModel]=\"!!definition.rule\" (click)=\"toggleRule(i)\">{{\n            '@pry.admin.classes.condition' | i18n\n          }}</pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div *ngIf=\"!!definition.rule && !definition.isDefault\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_attrname\">{{ '@pry.admin.classes.attrName' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeAttrName($event, i)\"\n            [items]=\"fieldsForClass\"\n            [ngModel]=\"definition.rule.attributeName\"\n            bindLabel=\"name\"\n            bindValue=\"name\"\n            id=\"classes_attrname\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_operation\">{{ '@pry.admin.classes.operation' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeOperation($event, i)\"\n            [items]=\"operations\"\n            [ngModel]=\"definition.rule.operation\"\n            bindLabel=\"label\"\n            bindValue=\"name\"\n            id=\"classes_operation\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_value\">{{ '@pry.admin.classes.value' | i18n }}</label>\n          <input\n            id=\"classes_value\"\n            type=\"text\"\n            class=\"a-form-field\"\n            (ngModelChange)=\"changeValue($event, i)\"\n            [ngModel]=\"definition.rule.value\"\n          />\n        </div>\n      </div>\n    </div>\n  </li>\n</ul>\n\n<button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"addRule()\">\n  <pry-icon iconSvg=\"add\"></pry-icon>\n  Ajouter une r\u00E8gle\n</button>\n\n<div class=\"m-btn-group -width-lg\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"restoreSymbols(); goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button\n    class=\"a-btn a-btn--primary\"\n    [innerHTML]=\"'@pry.admin.customize.updateIcons' | i18n\"\n    (click)=\"valid()\"\n  ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminClassesCustomizeSymbolComponent, decorators: [{
             type: Component,
@@ -1525,7 +1524,7 @@ class AdminAttributesFormComponent extends SubscriptionnerDirective {
         this.dialog = dialog;
         this.nameAlreadyExists = false;
         this.technicalNameAlreadyExists = false;
-        this.fieldTypeDescription = FIELD_OPTIONS;
+        this.FIELD_I18N = FIELD_I18N;
         this.store.dispatch(FieldActions.load());
         this.fields$ = this.store.select(FieldSelectors.fields);
         this.store.dispatch(CategoryActions.load());
@@ -1582,12 +1581,10 @@ class AdminAttributesFormComponent extends SubscriptionnerDirective {
                 this.technicalNameAlreadyExists = value;
             }));
         }
-        this.selectedFieldTypeDescription$ = this.attrForm.get('field')?.valueChanges.pipe(startWith(this.attrForm.get('field')?.value), distinctUntilChanged$1(), switchMap((selectedFieldId) => {
-            return this.fields$.pipe(map((fields) => {
-                const fieldDescription = this.fieldTypeDescription.find((fieldType) => fieldType.varType === fields.find((field) => field.id === selectedFieldId)?.type);
-                return fieldDescription ? this.i18nService.instant(fieldDescription.description) : '';
-            }));
-        }));
+        this.selectedFieldTypeDescription$ = combineLatest([
+            this.attrForm.get('field').valueChanges.pipe(startWith(this.attrForm.get('field')?.value)),
+            this.fields$
+        ]).pipe(map(([selectedFieldId, fields]) => FIELD_I18N.information + fields.find((field) => field.id === selectedFieldId)?.type));
     }
     goBack() {
         const redirectPath = this.selectedAttribute ? '../..' : '..';
@@ -1636,11 +1633,11 @@ class AdminAttributesFormComponent extends SubscriptionnerDirective {
         this.subscriptions.add(ref.component.closeModal.subscribe(() => ref.close()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminAttributesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i4.PryI18nService }, { token: i4.PryDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, usesInheritance: true, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n: { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n: { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n: { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chip\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n        [attr.data-tooltip]=\"description\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"openModal()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, usesInheritance: true, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n: { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n: { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" for=\"attr_name\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n: { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chip\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n        [attr.data-tooltip]=\"(selectedFieldTypeDescription$ | async) ?? '' | i18n\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"type\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"openModal()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminAttributesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-attributes-form', template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n: { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n: { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n: { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chip\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n        [attr.data-tooltip]=\"description\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"openModal()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'pry-admin-attributes-form', template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n: { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n: { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" for=\"attr_name\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n: { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chip\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n        [attr.data-tooltip]=\"(selectedFieldTypeDescription$ | async) ?? '' | i18n\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"type\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"openModal()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i4.PryI18nService }, { type: i4.PryDialogService }], propDecorators: { selectedClass: [{
                 type: Input
             }], interClass: [{
@@ -1748,12 +1745,13 @@ class AdminClassesViewComponent {
         this.sub.unsubscribe();
     }
     getAttrExtended() {
-        return combineLatest([this.attributes$, this.fields$, this.categories$]).pipe(filter(([attributes, fields, categories]) => fields.length > 0 && categories.length > 0), map(([attributes, fields, categories]) => {
+        return combineLatest([this.attributes$, this.categories$]).pipe(filter(([attributes, categories]) => categories.length > 0), map(([attributes, categories]) => {
             return attributes.map((attr) => ({
                 ...attr,
-                fieldName: fields.find((field) => field.id === attr.field)?.name || this.i18n.instant('@pry.admin.attributes.unknownField'),
-                categoryName: attr.category ?
-                    categories.find((category) => category.id === attr.category)?.name ?? this.i18n.instant('@pry.admin.attributes.unknownCategory')
+                fieldName: attr.field.name,
+                categoryName: attr.category
+                    ? categories.find((category) => category.id === attr.category)?.name ??
+                        this.i18n.instant('@pry.admin.attributes.unknownCategory')
                     : this.i18n.instant('@pry.admin.attributes.noCategory')
             }));
         }));
@@ -2420,114 +2418,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
 
 const FieldsActions = {
     updateToolbox: createAction('[Admin/Fields] Update Toolbox Class'),
+    failure: createAction('[Admin/Fields] failure action', props()),
     saveField: createAction('[Admin/Fields] Save Field', props()),
     saveFieldSuccess: createAction('[Admin/Fields Api] Save Field Success', props()),
-    saveFieldFailure: createAction('[Admin/Fields Api] Save Field Failure', props()),
-    selectField: createAction('[Admin/Fields] Select Field', props()),
-    unselectField: createAction('[Admin/Fields] unselect Field'),
+    updateField: createAction('[Admin/Fields] Update Field', props()),
+    updateFieldSuccess: createAction('[Admin/Fields Api] Update Field Success', props()),
     confirmFieldDeletion: createAction('[Admin/Fields] Open Modal for Deleting Field', props()),
     deleteField: createAction('[Admin/Fields] Delete Field', props()),
     deleteFieldSuccess: createAction('[Admin/Fields] Delete Field Success'),
-    deleteFieldFailure: createAction('[Admin/Fields] Delete Field Failure', props())
+    selectField: createAction('[Admin/Fields] Select Field', props()),
+    unselectField: createAction('[Admin/Fields] unselect Field')
 };
 
 const CRS_OPTIONS = [
     { label: 'WGS84 (EPSG:4326)', code: 'EPSG:4326' },
     { label: 'Lambert93 (EPSG: 2154)', code: 'EPSG:2154' }
 ];
-class AdminFieldsFormComponent {
-    constructor(store, router, route, formBuilder, i18nService) {
+class AdminFieldsFormComponent extends SubscriptionnerDirective {
+    constructor(store, router, route, i18n) {
+        super();
         this.store = store;
         this.router = router;
         this.route = route;
-        this.formBuilder = formBuilder;
-        this.i18nService = i18nService;
-        this.sub = new Subscription();
-        this.isSubmitted = false;
-        this.fieldTypeTranslations = [];
+        this.i18n = i18n;
+        this.dateFormats = Object.keys(dateFormatOptions.value);
         this.CRS_OPTIONS = CRS_OPTIONS;
-        this.fieldTypeTranslations = FIELD_OPTIONS.map((translate) => ({
-            varType: translate.varType,
-            translation: this.i18nService.instant(translate.translation),
-            description: this.i18nService.instant(translate.description)
-        }));
-        this.fieldTypeTranslations.sort((a, b) => a['translation'].localeCompare(b['translation']));
+        this.FieldType = FieldType;
+        this.FIELD_I18N = FIELD_I18N;
         this.store.dispatch(FieldActions.load());
-        this.goBackPath = this.router.createUrlTree(['..'], { relativeTo: this.route }).toString();
-        this.goBackPathEdit = this.router.createUrlTree(['../..'], { relativeTo: this.route }).toString();
-        this.fieldForm = this.formBuilder.group({
-            id: [v4()],
-            name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(100), noWhitespaceValidator]],
-            type: [this.fieldTypeTranslations[0]['varType']]
-        });
-    }
-    ngOnInit() {
         this.fieldNames$ = this.store
             .select(FieldSelectors.fields)
             .pipe(map((fields) => fields.map((field) => field.name.toLowerCase())));
-        this.nameAlreadyExists$ = combineLatest([
-            this.fieldForm.get('name')?.valueChanges,
-            this.fieldNames$
-        ]).pipe(map(([value, fieldNames]) => fieldNames.includes(value.toLowerCase()) && value != this.currentField?.name));
-        this.sub.add(this.nameAlreadyExists$.subscribe((value) => {
+        this.fieldTypes = Object.values(FieldType)
+            .filter((type) => type !== FieldType.GEOMETRYCOLLECTION)
+            .sort((a, b) => {
+            const [labelA, labelB] = [this.i18n.instant(FIELD_I18N.label + a), this.i18n.instant(FIELD_I18N.label + b)];
+            return labelA.localeCompare(labelB);
+        });
+        this.form = new FormGroup({
+            name: new FormControl('', {
+                validators: [Validators.required, Validators.minLength(3), Validators.maxLength(100), noWhitespaceValidator],
+                nonNullable: true
+            }),
+            type: new FormControl(this.fieldTypes[0], { nonNullable: true }),
+            formatOptions: new FormGroup({})
+        });
+        this.subscriptions.add(this.type?.valueChanges.subscribe((type) => this.setFormatOptionControls(type)));
+        this.form.patchValue({ type: this.fieldTypes[0] });
+        this.nameAlreadyExists$ = combineLatest([this.name.valueChanges, this.fieldNames$]).pipe(map(([value, fieldNames]) => fieldNames.includes(value.toLowerCase()) && value != this.currentField?.name));
+        this.subscriptions.add(this.nameAlreadyExists$.subscribe((value) => {
             if (value) {
-                this.fieldForm.controls['name'].setErrors({ 'same-name': true });
+                this.name?.setErrors({ 'same-name': true });
             }
             return value;
         }));
+        this.goBackPath = this.router.createUrlTree(['..'], { relativeTo: this.route }).toString();
+        this.goBackPathEdit = this.router.createUrlTree(['../..'], { relativeTo: this.route }).toString();
+    }
+    ngOnInit() {
         if (this.currentField) {
-            this.fieldForm.patchValue({
-                id: this.currentField.id,
+            this.form.patchValue({
                 name: this.currentField.name,
                 type: this.currentField.type
             });
-            this.fieldForm.controls['type'].disable();
+            this.type.disable();
             if (this.isGeographicType) {
-                this.fieldForm.addControl('crs', new FormControl(this.currentField.crs, [Validators.required]));
-                this.fieldForm.controls['crs'].disable();
+                this.form.addControl('crs', new FormControl(this.currentField.crs, { validators: [Validators.required], nonNullable: true }));
+                this.crs?.disable();
             }
+            this.setFormatOptionValues();
         }
-        this.selectedFieldTypeDescription$ = this.fieldForm.get('type')?.valueChanges.pipe(startWith(this.currentField?.type ?? this.fieldTypeTranslations[0]['varType']), distinctUntilChanged(), map((selectedType) => this.fieldTypeTranslations.find((translation) => translation['varType'] === selectedType)?.['description'] ??
-            ''));
-        this.fieldForm.get('type').valueChanges.subscribe((type) => {
+        this.subscriptions.add(this.type.valueChanges.subscribe((type) => {
             if (this.isGeographicType) {
-                this.fieldForm.addControl('crs', new FormControl(CRS_OPTIONS[0].code, [Validators.required]));
+                this.form.addControl('crs', new FormControl(CRS_OPTIONS[0].code, { validators: [Validators.required], nonNullable: true }));
             }
             else {
-                this.fieldForm.removeControl('crs');
+                this.form.removeControl('crs');
             }
-        });
+        }));
     }
-    get isGeographicType() {
-        return GeometricFieldTypes.includes(this.fieldForm.get('type')?.value);
+    get name() {
+        return this.form.get('name');
     }
-    ngOnDestroy() {
-        this.sub.unsubscribe();
+    get type() {
+        return this.form.get('type');
+    }
+    get crs() {
+        return this.form.get('crs');
+    }
+    get formatOptions() {
+        return this.form.get('formatOptions');
+    }
+    get isGeographicType() {
+        return GeometricFieldTypes.includes(this.type?.value);
     }
     goBack() {
         this.store.dispatch(AdminActions.routeTo({ path: this.getPath(), params: undefined }));
     }
-    addField() {
-        this.fieldForm.patchValue({
-            name: this.fieldForm.value.name.trim()
+    getFormValue() {
+        return {
+            name: this.name.value,
+            type: this.type.value,
+            crs: this.crs?.value,
+            unit: this.formatOptions?.value.unit ?? undefined,
+            decimalPrecision: this.formatOptions?.value.decimalPrecision ?? undefined,
+            isLocaleFormat: this.formatOptions?.value.isLocaleFormat ?? undefined,
+            format: this.formatOptions?.value.dateFormat ?? undefined
+        };
+    }
+    submit() {
+        this.form.patchValue({
+            name: this.name?.value?.trim()
         });
-        this.isSubmitted = true;
-        if (this.fieldForm.valid) {
-            this.isSubmitted = false;
-            let fieldToSave = this.fieldForm.getRawValue();
-            this.store.dispatch(FieldsActions.saveField({ field: fieldToSave, route: this.getPath() }));
+        if (this.form.valid) {
+            this.currentField ? this.updateField() : this.saveField();
+        }
+    }
+    saveField() {
+        this.store.dispatch(FieldsActions.saveField({
+            field: { id: v4(), ...this.getFormValue() },
+            route: this.getPath()
+        }));
+    }
+    updateField() {
+        this.store.dispatch(FieldsActions.updateField({
+            field: { id: this.currentField.id, ...this.getFormValue() },
+            route: this.getPath()
+        }));
+    }
+    setFormatOptionControls(type) {
+        switch (type) {
+            case FieldType.INTEGER:
+            case FieldType.LONG:
+                this.formatOptions?.addControl('isLocaleFormat', new FormControl(true));
+                this.formatOptions?.setControl('unit', new FormControl(null));
+                this.formatOptions?.removeControl('decimalPrecision');
+                this.formatOptions?.removeControl('dateFormat');
+                break;
+            case FieldType.DECIMAL:
+                this.formatOptions?.addControl('isLocaleFormat', new FormControl(true));
+                this.formatOptions?.setControl('unit', new FormControl(null));
+                this.formatOptions?.setControl('decimalPrecision', new FormControl(2));
+                this.formatOptions?.removeControl('dateFormat');
+                break;
+            case FieldType.INSTANT:
+                this.formatOptions?.removeControl('isLocaleFormat');
+                this.formatOptions?.removeControl('unit');
+                this.formatOptions?.removeControl('decimalPrecision');
+                this.formatOptions?.setControl('dateFormat', new FormControl(null));
+                break;
+            default:
+                this.form.removeControl('formatOptions');
+                break;
+        }
+    }
+    setFormatOptionValues() {
+        switch (this.currentField?.type) {
+            case FieldType.INTEGER:
+            case FieldType.LONG:
+                this.formatOptions?.patchValue({
+                    isLocaleFormat: this.currentField?.isLocaleFormat,
+                    unit: this.currentField?.unit
+                });
+                break;
+            case FieldType.DECIMAL:
+                this.formatOptions?.patchValue({
+                    isLocaleFormat: this.currentField?.isLocaleFormat,
+                    unit: this.currentField?.unit,
+                    decimalPrecision: this.currentField?.decimalPrecision
+                });
+                break;
+            case FieldType.INSTANT:
+                this.formatOptions?.patchValue({ dateFormat: this.currentField?.format });
+                break;
+            default:
+                break;
         }
     }
     getPath() {
         return this.currentField ? this.goBackPathEdit : this.goBackPath;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminFieldsFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminFieldsFormComponent, selector: "pry-admin-fields-form", inputs: { currentField: "currentField" }, ngImport: i0, template: "<div>\n  <form class=\"o-form\" [formGroup]=\"fieldForm\" (ngSubmit)=\"addField()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"isSubmitted && fieldForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        required\n      />\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"field_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.minLength' | i18n : { len: 3 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('maxlength')\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('whitespace') && !fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"type\"\n          [items]=\"fieldTypeTranslations\"\n          bindValue=\"varType\"\n          bindLabel=\"translation\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <div\n          *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n          class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n          [attr.data-tooltip]=\"description\"\n          data-tooltip-position=\"right\"\n        >\n          <span>i</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\" *ngIf=\"isGeographicType\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.crs' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"crs\"\n          [items]=\"CRS_OPTIONS\"\n          bindValue=\"code\"\n          bindLabel=\"label\"\n          [isForm]=\"true\"\n          id=\"crs\"\n        ></pry-select>\n      </div>\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('crs') && fieldForm.get('crs')?.invalid\"\n        id=\"crs-error\"\n        for=\"crs\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminFieldsFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: AdminFieldsFormComponent, selector: "pry-admin-fields-form", inputs: { currentField: "currentField" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"name?.dirty && name?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"name?.dirty && name?.invalid\"\n      />\n      @if (name?.dirty && name?.invalid) {\n        <label id=\"name-error\" for=\"field_name\" class=\"a-label a-label--help -error\">\n          @if (name?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (name?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n          @if (name?.hasError('minlength')) {\n            <span>{{ '@pry.admin.minLength' | i18n: { len: 3 } }}</span>\n          }\n          @if (name?.hasError('maxlength')) {\n            <span>{{ '@pry.admin.maxLength' | i18n: { len: 100 } }}</span>\n          }\n          @if (name?.hasError('whitespace') && !name?.hasError('minlength')) {\n            <span>{{ '@pry.admin.noWhitespace' | i18n }}</span>\n          }\n        </label>\n      }\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"field_type\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          id=\"field_type\"\n          class=\"u-flex-grow-1\"\n          formControlName=\"type\"\n          [items]=\"fieldTypes\"\n          [i18nPrefix]=\"FIELD_I18N.label\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <div\n          class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n          [attr.data-tooltip]=\"FIELD_I18N.information + this.type?.value | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <span>i</span>\n        </div>\n      </div>\n    </div>\n\n    @if (isGeographicType) {\n      <div class=\"m-form-label-field -width-sm\">\n        <label class=\"a-label\" for=\"crs\">\n          {{ '@pry.admin.fields.crs' | i18n }} *\n          <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n        </label>\n        <div class=\"u-display-flex\">\n          <pry-select\n            class=\"-width-sm\"\n            formControlName=\"crs\"\n            [items]=\"CRS_OPTIONS\"\n            bindValue=\"code\"\n            bindLabel=\"label\"\n            [isForm]=\"true\"\n            id=\"crs\"\n          ></pry-select>\n        </div>\n        @if (crs?.dirty && crs?.invalid) {\n          <label id=\"crs-error\" for=\"crs\" class=\"a-label a-label--help -error\">\n            @if (crs?.hasError('required')) {\n              <span>{{ '@pry.admin.required' | i18n }}</span>\n            }\n          </label>\n        }\n      </div>\n    }\n\n    @if (formatOptions) {\n      <div formGroupName=\"formatOptions\">\n        <h3 class=\"a-h3\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n        @if (type?.value === FieldType.INTEGER || type?.value === FieldType.LONG || type?.value === FieldType.DECIMAL) {\n          <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n        } @else if (type?.value === FieldType.INSTANT) {\n          <ng-container *ngTemplateOutlet=\"dateFormatOptions\"></ng-container>\n        }\n\n        <ng-template #numberFormatOptions>\n          @if (type?.value === FieldType.DECIMAL) {\n            <div class=\"m-form-label-field -width-sm\">\n              <label class=\"a-label\" for=\"field_format_comma\">{{\n                '@pry.admin.fields.formatOptions.decimalPrecision' | i18n\n              }}</label>\n              <input formControlName=\"decimalPrecision\" id=\"field_format_comma\" type=\"number\" class=\"a-form-field\" />\n            </div>\n          }\n          <div class=\"m-form-label-field -width-sm\">\n            <pry-checkbox\n              formControlName=\"isLocaleFormat\"\n              inputId=\"field_format_locale_number_format\"\n              [inhibit]=\"false\"\n            >\n              {{ '@pry.admin.fields.formatOptions.isLocaleFormat' | i18n }}\n            </pry-checkbox>\n          </div>\n          <div class=\"m-form-label-field -width-sm\">\n            <label class=\"a-label\" for=\"field_format_unit\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</label>\n            <input formControlName=\"unit\" id=\"field_format_unit\" type=\"text\" class=\"a-form-field\" />\n          </div>\n        </ng-template>\n\n        <ng-template #dateFormatOptions>\n          <div class=\"m-form-label-field -width-sm\">\n            <label class=\"a-label\" for=\"field_format_date\">{{\n              '@pry.admin.fields.formatOptions.dateFormat' | i18n\n            }}</label>\n            <pry-select\n              formControlName=\"dateFormat\"\n              id=\"field_format_date\"\n              [items]=\"dateFormats\"\n              [isForm]=\"true\"\n              i18nPrefix=\"@pry.admin.fields.formatOptions.dateFormatOptions.\"\n              [clearable]=\"true\"\n            ></pry-select>\n          </div>\n        </ng-template>\n      </div>\n    }\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminFieldsFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-fields-form', template: "<div>\n  <form class=\"o-form\" [formGroup]=\"fieldForm\" (ngSubmit)=\"addField()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"isSubmitted && fieldForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        required\n      />\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"field_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.minLength' | i18n : { len: 3 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('maxlength')\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('whitespace') && !fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"type\"\n          [items]=\"fieldTypeTranslations\"\n          bindValue=\"varType\"\n          bindLabel=\"translation\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <div\n          *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n          class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n          [attr.data-tooltip]=\"description\"\n          data-tooltip-position=\"right\"\n        >\n          <span>i</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\" *ngIf=\"isGeographicType\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.crs' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"crs\"\n          [items]=\"CRS_OPTIONS\"\n          bindValue=\"code\"\n          bindLabel=\"label\"\n          [isForm]=\"true\"\n          id=\"crs\"\n        ></pry-select>\n      </div>\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('crs') && fieldForm.get('crs')?.invalid\"\n        id=\"crs-error\"\n        for=\"crs\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i4.PryI18nService }], propDecorators: { currentField: [{
+            args: [{ selector: 'pry-admin-fields-form', template: "<div>\n  <form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"name?.dirty && name?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"name?.dirty && name?.invalid\"\n      />\n      @if (name?.dirty && name?.invalid) {\n        <label id=\"name-error\" for=\"field_name\" class=\"a-label a-label--help -error\">\n          @if (name?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (name?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n          @if (name?.hasError('minlength')) {\n            <span>{{ '@pry.admin.minLength' | i18n: { len: 3 } }}</span>\n          }\n          @if (name?.hasError('maxlength')) {\n            <span>{{ '@pry.admin.maxLength' | i18n: { len: 100 } }}</span>\n          }\n          @if (name?.hasError('whitespace') && !name?.hasError('minlength')) {\n            <span>{{ '@pry.admin.noWhitespace' | i18n }}</span>\n          }\n        </label>\n      }\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"field_type\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          id=\"field_type\"\n          class=\"u-flex-grow-1\"\n          formControlName=\"type\"\n          [items]=\"fieldTypes\"\n          [i18nPrefix]=\"FIELD_I18N.label\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <div\n          class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n          [attr.data-tooltip]=\"FIELD_I18N.information + this.type?.value | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <span>i</span>\n        </div>\n      </div>\n    </div>\n\n    @if (isGeographicType) {\n      <div class=\"m-form-label-field -width-sm\">\n        <label class=\"a-label\" for=\"crs\">\n          {{ '@pry.admin.fields.crs' | i18n }} *\n          <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n        </label>\n        <div class=\"u-display-flex\">\n          <pry-select\n            class=\"-width-sm\"\n            formControlName=\"crs\"\n            [items]=\"CRS_OPTIONS\"\n            bindValue=\"code\"\n            bindLabel=\"label\"\n            [isForm]=\"true\"\n            id=\"crs\"\n          ></pry-select>\n        </div>\n        @if (crs?.dirty && crs?.invalid) {\n          <label id=\"crs-error\" for=\"crs\" class=\"a-label a-label--help -error\">\n            @if (crs?.hasError('required')) {\n              <span>{{ '@pry.admin.required' | i18n }}</span>\n            }\n          </label>\n        }\n      </div>\n    }\n\n    @if (formatOptions) {\n      <div formGroupName=\"formatOptions\">\n        <h3 class=\"a-h3\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n        @if (type?.value === FieldType.INTEGER || type?.value === FieldType.LONG || type?.value === FieldType.DECIMAL) {\n          <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n        } @else if (type?.value === FieldType.INSTANT) {\n          <ng-container *ngTemplateOutlet=\"dateFormatOptions\"></ng-container>\n        }\n\n        <ng-template #numberFormatOptions>\n          @if (type?.value === FieldType.DECIMAL) {\n            <div class=\"m-form-label-field -width-sm\">\n              <label class=\"a-label\" for=\"field_format_comma\">{{\n                '@pry.admin.fields.formatOptions.decimalPrecision' | i18n\n              }}</label>\n              <input formControlName=\"decimalPrecision\" id=\"field_format_comma\" type=\"number\" class=\"a-form-field\" />\n            </div>\n          }\n          <div class=\"m-form-label-field -width-sm\">\n            <pry-checkbox\n              formControlName=\"isLocaleFormat\"\n              inputId=\"field_format_locale_number_format\"\n              [inhibit]=\"false\"\n            >\n              {{ '@pry.admin.fields.formatOptions.isLocaleFormat' | i18n }}\n            </pry-checkbox>\n          </div>\n          <div class=\"m-form-label-field -width-sm\">\n            <label class=\"a-label\" for=\"field_format_unit\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</label>\n            <input formControlName=\"unit\" id=\"field_format_unit\" type=\"text\" class=\"a-form-field\" />\n          </div>\n        </ng-template>\n\n        <ng-template #dateFormatOptions>\n          <div class=\"m-form-label-field -width-sm\">\n            <label class=\"a-label\" for=\"field_format_date\">{{\n              '@pry.admin.fields.formatOptions.dateFormat' | i18n\n            }}</label>\n            <pry-select\n              formControlName=\"dateFormat\"\n              id=\"field_format_date\"\n              [items]=\"dateFormats\"\n              [isForm]=\"true\"\n              i18nPrefix=\"@pry.admin.fields.formatOptions.dateFormatOptions.\"\n              [clearable]=\"true\"\n            ></pry-select>\n          </div>\n        </ng-template>\n      </div>\n    }\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i4.PryI18nService }], propDecorators: { currentField: [{
                 type: Input
             }] } });
 
@@ -2587,11 +2664,18 @@ class AdminFieldsComponent {
         this.route = route;
         this.sortActive = 'name';
         this.sortDirection = 'asc';
+        this.FIELD_I18N = FIELD_I18N;
         this.store.dispatch(ClassActions.load());
         this.store.dispatch(FieldActions.load());
         this.store.dispatch(FieldsActions.unselectField());
         this.currentFieldId$ = this.store.select(FieldsSelectors.selectedFieldId);
-        this.fields$ = this.store.select(FieldSelectors.fields).pipe(switchMap((fields) => zip(fields.map((field) => zip(of(field), this.store.select(ClassSelectors.attributesByFieldId(field.id)))))), map((superFields) => superFields.map(([field, attributes]) => ({ ...field, attributes: attributes?.length ?? 0 }))));
+        this.fields$ = combineLatest([
+            this.store.select(FieldSelectors.fields),
+            this.store.select(ClassSelectors.classes)
+        ]).pipe(map(([fields, classes]) => fields.map((f) => ({
+            ...f,
+            attributeCount: classes.reduce((p, c) => p + c.attributes.filter((a) => a.field.id === f.id).length, 0)
+        }))));
         const path = this.router.createUrlTree(['.', 'new'], { relativeTo: this.route });
         this.store.dispatch(AdminActions.mainActions({
             actions: [
@@ -2611,15 +2695,12 @@ class AdminFieldsComponent {
         this.store.dispatch(AdminActions.selectComponentType({ componentType: 'AdminFieldsSelectComponent' }));
         this.store.dispatch(AdminActions.fetchFieldAssociations({ id: field.id }));
     }
-    getTranslationType(type) {
-        return FIELD_OPTIONS.find((el) => el.varType === type)?.translation || 'undefined';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminFieldsComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminFieldsComponent, selector: "pry-admin-fields", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.fields.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.fields.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.fields.name' | i18n }}</th>\n        <th prySortHeader=\"type\">{{ '@pry.admin.fields.type' | i18n }}</th>\n        <th prySortHeader=\"attributes\">{{ '@pry.admin.fields.attributes' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        *ngFor=\"let field of fields$ | async | prySortData: sortActive : sortDirection\"\n        (click)=\"selectField(field)\"\n        [class.is-selected]=\"(currentFieldId$ | async) === field.id\"\n      >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-field-' + field.id\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"(currentFieldId$ | async) === field.id\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-field-' + field.id\"\n          >\n            <span class=\"u-visually-hidden\">{{ field.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ field.name }}</td>\n        <td>{{ getTranslationType(field.type) | i18n }}</td>\n        <td>{{ field.attributes }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: AdminFieldsComponent, selector: "pry-admin-fields", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.fields.list' | i18n }}</h1>\n  @if (fields$ | async; as fields) {\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"name\"\n      prySortDirection=\"asc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.admin.fields.list' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.fields.name' | i18n }}</th>\n          <th prySortHeader=\"type\">{{ '@pry.admin.fields.type' | i18n }}</th>\n          <th prySortHeader=\"attributes\">{{ '@pry.admin.fields.attributes' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (field of fields | prySortData: sortActive : sortDirection; track field.id) {\n          <tr (click)=\"selectField(field)\" [class.is-selected]=\"(currentFieldId$ | async) === field.id\">\n            <td class=\"view-details\">\n              <button\n                [id]=\"'button-field-' + field.id\"\n                type=\"button\"\n                class=\"a-btn a-btn--icon-only\"\n                title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n                [attr.aria-expanded]=\"(currentFieldId$ | async) === field.id\"\n                aria-haspopup\n                [attr.aria-controls]=\"'panel-field-' + field.id\"\n              >\n                <span class=\"u-visually-hidden\">{{ field.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n                <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              </button>\n            </td>\n            <td>{{ field.name }}</td>\n            <td>{{ FIELD_I18N.label + field.type | i18n }}</td>\n            <td>{{ field.attributeCount }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n", dependencies: [{ kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-fields', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.fields.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.fields.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.fields.name' | i18n }}</th>\n        <th prySortHeader=\"type\">{{ '@pry.admin.fields.type' | i18n }}</th>\n        <th prySortHeader=\"attributes\">{{ '@pry.admin.fields.attributes' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        *ngFor=\"let field of fields$ | async | prySortData: sortActive : sortDirection\"\n        (click)=\"selectField(field)\"\n        [class.is-selected]=\"(currentFieldId$ | async) === field.id\"\n      >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-field-' + field.id\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"(currentFieldId$ | async) === field.id\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-field-' + field.id\"\n          >\n            <span class=\"u-visually-hidden\">{{ field.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ field.name }}</td>\n        <td>{{ getTranslationType(field.type) | i18n }}</td>\n        <td>{{ field.attributes }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-fields', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.fields.list' | i18n }}</h1>\n  @if (fields$ | async; as fields) {\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"name\"\n      prySortDirection=\"asc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.admin.fields.list' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.fields.name' | i18n }}</th>\n          <th prySortHeader=\"type\">{{ '@pry.admin.fields.type' | i18n }}</th>\n          <th prySortHeader=\"attributes\">{{ '@pry.admin.fields.attributes' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (field of fields | prySortData: sortActive : sortDirection; track field.id) {\n          <tr (click)=\"selectField(field)\" [class.is-selected]=\"(currentFieldId$ | async) === field.id\">\n            <td class=\"view-details\">\n              <button\n                [id]=\"'button-field-' + field.id\"\n                type=\"button\"\n                class=\"a-btn a-btn--icon-only\"\n                title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n                [attr.aria-expanded]=\"(currentFieldId$ | async) === field.id\"\n                aria-haspopup\n                [attr.aria-controls]=\"'panel-field-' + field.id\"\n              >\n                <span class=\"u-visually-hidden\">{{ field.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n                <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              </button>\n            </td>\n            <td>{{ field.name }}</td>\n            <td>{{ FIELD_I18N.label + field.type | i18n }}</td>\n            <td>{{ field.attributeCount }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 
 const adminFeatureKey = '@pry/admin';
@@ -2944,7 +3025,7 @@ class AdminSelectDatasetComponent extends SubscriptionnerDirective {
                                 moduleAccess: 'admin',
                                 pageAccess: 'dataset',
                                 actionAccess: 'write',
-                                disabled: versions.filter((v) => v.dataset === dataset.id).length > 0
+                                disabled: versions.filter((v) => v.dataset.id === dataset.id).length > 0
                             }
                         ]
                     }));
@@ -3112,12 +3193,14 @@ class AdminFieldsSelectComponent {
         this.router = router;
         this.route = route;
         this.sub = new Subscription();
+        this.FIELD_I18N = FIELD_I18N;
+        this.FieldType = FieldType;
         this.currentField$ = this.store.select(FieldsSelectors.selectedField);
         this.associations$ = this.store.select(AdminSelectors.selectedAssociation);
         this.attributes$ = combineLatest([this.currentField$, store.select(ClassSelectors.classes)]).pipe(map(([field, classes]) => {
             return classes
                 .map((clazz) => clazz.attributes
-                .filter((attribute) => attribute.field === field?.id)
+                .filter((attribute) => attribute.field.id === field?.id)
                 .map((attribute) => ({ technicalName: attribute.technicalName, classId: clazz.id })))
                 .flat();
         }));
@@ -3153,9 +3236,6 @@ class AdminFieldsSelectComponent {
             }
         }));
     }
-    getTranslationType(type) {
-        return FIELD_OPTIONS.find((el) => el.varType === type)?.translation || 'undefined';
-    }
     closePanel() {
         this.store.dispatch(FieldsActions.unselectField());
         this.store.dispatch(AdminActions.togglePanel({ panelOpen: false }));
@@ -3177,11 +3257,11 @@ class AdminFieldsSelectComponent {
         this.sub.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminFieldsSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminFieldsSelectComponent, selector: "pry-admin-fields-select", ngImport: i0, template: "<div\n  *ngIf=\"currentField$ | async as field\"\n  [id]=\"'panel-field-' + field.id\"\n  [attr.aria-labelledby]=\"'button-field-' + field.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.fields.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"fieldDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"fieldAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #fieldDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.fields.name' | i18n }} :\n      <strong>{{ field.name }}</strong>\n    </p>\n    <p class=\"a-p\">{{ '@pry.admin.fields.description' | i18n }} :</p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.fields.type' | i18n }} :\n      <strong>{{ getTranslationType(field.type) | i18n }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #fieldAssociations>\n    <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n    <pry-association [associations]=\"associations$ | async\"></pry-association>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: AdminFieldsSelectComponent, selector: "pry-admin-fields-select", ngImport: i0, template: "<div\n  *ngIf=\"currentField$ | async as field\"\n  [id]=\"'panel-field-' + field.id\"\n  [attr.aria-labelledby]=\"'button-field-' + field.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.fields.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"fieldDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"fieldAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #fieldDetails>\n    <div class=\"u-display-flex -column -gap-20\">\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.name' | i18n }}</h4>\n        <span>{{ field.name }}</span>\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.type' | i18n }}</h4>\n        <span>{{ FIELD_I18N.label + field.type | i18n }}</span>\n      </div>\n      @if ([FieldType.INTEGER, FieldType.LONG, FieldType.DECIMAL, FieldType.INSTANT].includes(field.type)) {\n        <div>\n          <h3 class=\"a-h3 -no-padding\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n          <div class=\"u-display-flex -column -gap-20\">\n            @switch (field.type) {\n              @case (FieldType.INTEGER) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n              }\n              @case (FieldType.LONG) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n              }\n              @case (FieldType.DECIMAL) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n                <div>\n                  <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.decimalPrecision' | i18n }}</h4>\n                  @if (field.decimalPrecision) {\n                    <span>{{ field.decimalPrecision }}</span>\n                  } @else {\n                    <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDecimalPrecision' | i18n }}</span>\n                  }\n                </div>\n              }\n              @case (FieldType.INSTANT) {\n                <div>\n                  <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.dateFormat' | i18n }}</h4>\n                  @if (field.format) {\n                    <span>{{ '@pry.admin.fields.formatOptions.dateFormatOptions' + field.format | i18n }}</span>\n                  } @else {\n                    <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDateFormat' | i18n }}</span>\n                  }\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n      @if (field.crs) {\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.crs' | i18n }}</h4>\n          <span>{{ field.crs }}</span>\n        </div>\n      }\n    </div>\n\n    <ng-template #numberFormatOptions>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</h4>\n        @if (field.unit) {\n          <span>{{ field.unit }}</span>\n        } @else {\n          <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noUnit' | i18n }}</span>\n        }\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.isLocaleFormat' | i18n }}</h4>\n        <span>{{ (field.isLocaleFormat ? '@pry.action.yes' : '@pry.action.no') | i18n }}</span>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #fieldAssociations>\n    <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n    <pry-association [associations]=\"associations$ | async\"></pry-association>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminFieldsSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-fields-select', template: "<div\n  *ngIf=\"currentField$ | async as field\"\n  [id]=\"'panel-field-' + field.id\"\n  [attr.aria-labelledby]=\"'button-field-' + field.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.fields.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"fieldDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"fieldAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #fieldDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.fields.name' | i18n }} :\n      <strong>{{ field.name }}</strong>\n    </p>\n    <p class=\"a-p\">{{ '@pry.admin.fields.description' | i18n }} :</p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.fields.type' | i18n }} :\n      <strong>{{ getTranslationType(field.type) | i18n }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #fieldAssociations>\n    <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n    <pry-association [associations]=\"associations$ | async\"></pry-association>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-fields-select', template: "<div\n  *ngIf=\"currentField$ | async as field\"\n  [id]=\"'panel-field-' + field.id\"\n  [attr.aria-labelledby]=\"'button-field-' + field.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.fields.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"fieldDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"fieldAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #fieldDetails>\n    <div class=\"u-display-flex -column -gap-20\">\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.name' | i18n }}</h4>\n        <span>{{ field.name }}</span>\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.type' | i18n }}</h4>\n        <span>{{ FIELD_I18N.label + field.type | i18n }}</span>\n      </div>\n      @if ([FieldType.INTEGER, FieldType.LONG, FieldType.DECIMAL, FieldType.INSTANT].includes(field.type)) {\n        <div>\n          <h3 class=\"a-h3 -no-padding\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n          <div class=\"u-display-flex -column -gap-20\">\n            @switch (field.type) {\n              @case (FieldType.INTEGER) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n              }\n              @case (FieldType.LONG) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n              }\n              @case (FieldType.DECIMAL) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n                <div>\n                  <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.decimalPrecision' | i18n }}</h4>\n                  @if (field.decimalPrecision) {\n                    <span>{{ field.decimalPrecision }}</span>\n                  } @else {\n                    <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDecimalPrecision' | i18n }}</span>\n                  }\n                </div>\n              }\n              @case (FieldType.INSTANT) {\n                <div>\n                  <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.dateFormat' | i18n }}</h4>\n                  @if (field.format) {\n                    <span>{{ '@pry.admin.fields.formatOptions.dateFormatOptions' + field.format | i18n }}</span>\n                  } @else {\n                    <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDateFormat' | i18n }}</span>\n                  }\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n      @if (field.crs) {\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.crs' | i18n }}</h4>\n          <span>{{ field.crs }}</span>\n        </div>\n      }\n    </div>\n\n    <ng-template #numberFormatOptions>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</h4>\n        @if (field.unit) {\n          <span>{{ field.unit }}</span>\n        } @else {\n          <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noUnit' | i18n }}</span>\n        }\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.isLocaleFormat' | i18n }}</h4>\n        <span>{{ (field.isLocaleFormat ? '@pry.action.yes' : '@pry.action.no') | i18n }}</span>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #fieldAssociations>\n    <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n    <pry-association [associations]=\"associations$ | async\"></pry-association>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 
 var MetadataRulesActionTypes;
@@ -5801,17 +5881,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: AdminService }, { type: i2.Router }] });
 
 class FieldsEffects {
-    constructor(actions$, fieldService, pryDialog) {
+    constructor(actions$, fieldService, pryDialog, store) {
         this.actions$ = actions$;
         this.fieldService = fieldService;
         this.pryDialog = pryDialog;
+        this.store = store;
         this.updateToolbox$ = createEffect(() => this.actions$.pipe(ofType(FieldsActions.updateToolbox), mergeMap$1((action) => {
             return [FieldActions.load(), AdminActions.selectComponentType({ componentType: null })];
         })));
-        this.saveField$ = createEffect(() => this.actions$.pipe(ofType(FieldsActions.saveField), mergeMap$1((action) => this.fieldService.saveField(action.field).pipe(map$1(() => FieldsActions.saveFieldSuccess({ route: action.route })), catchError$1((error) => [FieldsActions.saveFieldFailure({ error: error })])))));
+        this.saveField$ = createEffect(() => this.actions$.pipe(ofType(FieldsActions.saveField), mergeMap$1((action) => this.fieldService.saveField(action.field).pipe(map$1(() => FieldsActions.saveFieldSuccess({ route: action.route })), catchError$1((error) => [FieldsActions.failure({ error: error })])))));
         this.saveFieldSuccess$ = createEffect(() => this.actions$.pipe(ofType(FieldsActions.saveFieldSuccess), map$1((action) => {
             return AdminActions.routeTo({ path: action.route });
         })));
+        this.updateField$ = createEffect(() => this.actions$.pipe(ofType(FieldsActions.updateField), mergeMap$1((action) => this.fieldService.updateField(action.field).pipe(map$1(() => FieldsActions.updateFieldSuccess({ route: action.route })), catchError$1((error) => [FieldsActions.failure({ error: error })])))));
+        this.updateFieldSuccess$ = createEffect(() => this.actions$.pipe(ofType(FieldsActions.updateFieldSuccess), map$1((action) => {
+            return AdminActions.routeTo({ path: action.route });
+        })));
         this.confirmFieldDeletion$ = createEffect(() => this.actions$.pipe(ofType(FieldsActions.confirmFieldDeletion), tap((action) => {
             const data = {
                 title: '@pry.admin.fields.confirmFieldDeletion',
@@ -5830,7 +5915,7 @@ class FieldsEffects {
             };
             this.pryDialog.open(PryDialogConfirmComponent, { data });
         })), { dispatch: false });
-        this.deleteField$ = createEffect(() => this.actions$.pipe(ofType(FieldsActions.deleteField), mergeMap$1((action) => this.fieldService.deleteField(action.id).pipe(map$1(() => FieldsActions.deleteFieldSuccess()), catchError$1((error) => [FieldsActions.deleteFieldFailure({ error: error })])))));
+        this.deleteField$ = createEffect(() => this.actions$.pipe(ofType(FieldsActions.deleteField), mergeMap$1((action) => this.fieldService.deleteField(action.id).pipe(map$1(() => FieldsActions.deleteFieldSuccess()), catchError$1((error) => [FieldsActions.failure({ error: error })])))));
         this.deleteFieldSuccess$ = createEffect(() => this.actions$.pipe(ofType(FieldsActions.deleteFieldSuccess), map$1((action) => {
             return FieldActions.load();
         })));
@@ -5838,12 +5923,12 @@ class FieldsEffects {
             return AdminActions.togglePanel({ panelOpen: false });
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FieldsEffects, deps: [{ token: i1$2.Actions }, { token: i4.FieldService }, { token: i4.PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FieldsEffects, deps: [{ token: i1$2.Actions }, { token: i4.FieldService }, { token: i4.PryDialogService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FieldsEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: FieldsEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i4.FieldService }, { type: i4.PryDialogService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i4.FieldService }, { type: i4.PryDialogService }, { type: i1.Store }] });
 
 class LinksEffects {
     constructor(actions$, service, router) {
@@ -6251,38 +6336,57 @@ const enTranslations = {
                 className: 'Class',
                 confirmFieldDeletion: 'Confirm deleting the selected field',
                 fieldType: {
-                    int: 'Integer',
+                    integer: 'Integer',
                     long: 'Long number',
                     decimal: 'Double number',
                     string: 'Text',
                     keyword: 'Keyword',
                     instant: 'date',
                     raw: 'Raw',
-                    point: 'Point',
-                    multipoint: 'Multi-points',
-                    line: 'Line',
-                    multiline: 'Multi-lines',
-                    polygon: 'Polygon',
-                    multipolygon: 'Multi-polygons',
+                    Point: 'Point',
+                    MultiPoint: 'Multi-points',
+                    LineString: 'Line',
+                    MultiLineString: 'Multi-lines',
+                    Polygon: 'Polygon',
+                    MultiPolygon: 'Multi-polygons',
                     information: {
-                        int: 'Allows you to store integer numeric data less than 2^32',
+                        integer: 'Allows you to store integer numeric data less than 2^32',
                         long: 'Allows you to store integer numeric data that can exceed 2^32',
                         decimal: 'Allows you to store numeric data with decimal places',
                         string: 'Allows you to store data in alphanumeric format. This data is not indexed: it is possible to search on it but no aggregation',
                         keyword: 'Allows you to store data in alphanumeric format. This data is indexed: it is possible to search on it as well as aggregations.',
                         instant: 'Allows you to store a date',
                         raw: 'allows you to store image or file type data',
-                        point: 'Allows you to store geographic coordinates of an object represented by a point (geo-json format)',
-                        multipoint: 'Allows you to store geographic coordinates of an object composed of several unconnected points (geo-json format)',
-                        line: 'Allows you to store geographic coordinates of an object represented as a line (geo-json format)',
-                        multiline: 'Allows you to store geographic coordinates of an object represented with several unconnected lines (longitude and latitude geo-json format)',
-                        polygon: 'Allows you to store geographic coordinates of an object represented by a polygon (geo-json format)',
-                        multipolygon: 'Allows you to store geographic coordinates of an object represented by several polygons nested or not (geo-json format)'
+                        Point: 'Allows you to store geographic coordinates of an object represented by a point (geo-json format)',
+                        MultiPoint: 'Allows you to store geographic coordinates of an object composed of several unconnected points (geo-json format)',
+                        LineString: 'Allows you to store geographic coordinates of an object represented as a line (geo-json format)',
+                        MultiLineString: 'Allows you to store geographic coordinates of an object represented with several unconnected lines (longitude and latitude geo-json format)',
+                        Polygon: 'Allows you to store geographic coordinates of an object represented by a polygon (geo-json format)',
+                        MultiPolygon: 'Allows you to store geographic coordinates of an object represented by several polygons nested or not (geo-json format)'
                     }
                 },
                 rawMethods: {
                     http: 'From external url',
                     upload: 'Upload from my computer'
+                },
+                formatOptions: {
+                    title: 'Formatting options',
+                    decimalPrecision: 'Decimal precision',
+                    noDecimalPrecision: 'No decimal precision provided',
+                    isLocaleFormat: 'Localized format',
+                    unit: 'Unit',
+                    noUnit: 'No unit provided',
+                    dateFormat: 'Date format',
+                    noDateFormat: 'No date format provided',
+                    dateFormatOptions: {
+                        DATETIME: 'Date and time',
+                        DATE: 'Date',
+                        MONTH_YEAR: 'Month and year',
+                        DAY_MONTH: 'Day and month',
+                        YEAR: 'Year',
+                        MONTH: 'Month',
+                        DAY: 'Day'
+                    }
                 }
             },
             userInfo: {
@@ -6648,38 +6752,57 @@ const frTranslations = {
                 className: 'Classe',
                 confirmFieldDeletion: 'Confirmez-vous la suppression de ce type métier ?',
                 fieldType: {
-                    int: 'Nombre entier',
+                    integer: 'Nombre entier',
                     long: 'Nombre entier long',
                     decimal: 'Nombre décimal',
                     string: 'Texte brut',
                     keyword: 'Texte indexé',
                     instant: 'Date',
                     raw: 'Donnée non structurée',
-                    point: 'Point',
-                    multipoint: 'Multi-points',
-                    line: 'Ligne',
-                    multiline: 'Multi-lignes',
-                    polygon: 'Polygone',
-                    multipolygon: 'Multi-polygones',
+                    Point: 'Point',
+                    MultiPoint: 'Multi-points',
+                    LineString: 'Ligne',
+                    MultiLineString: 'Multi-lignes',
+                    Polygon: 'Polygone',
+                    MultiPolygon: 'Multi-polygones',
                     information: {
-                        int: 'Permet de stocker des données numériques entières inférieures à 2^32',
+                        integer: 'Permet de stocker des données numériques entières inférieures à 2^32',
                         long: 'Permet de stocker des données numériques entières pouvant dépasser 2^32',
                         decimal: 'Permet de stocker des données numériques avec des décimales',
                         string: "Permet de stocker des données au format alphanumérique. Ces données ne sont pas indexées : il est possible de faire une recherche dessus mais pas d'agrégation",
                         keyword: 'Permet de stocker des données au format alphanumérique. Ces données sont indexées : il est possible de faire une recherche dessus ainsi que des agrégations.',
                         instant: 'Permet de stocker une date',
                         raw: 'permet de stocker des données de type image ou fichier',
-                        point: "Permet de stocker des coordonnées géographiques d'un objet représenté par un point (format géojson)",
-                        multipoint: "Permet de stocker des coordonnées géographiques d'un objet composé de plusieurs points non reliés (format géojson)",
-                        line: "Permet de stocker des coordonnées géographiques d'un objet représenté comme une ligne (format géojson)",
-                        multiline: "Permet de stocker des coordonnées géographiques d'un objet représenté avec plusieurs lignes non reliées entre elles (longitude et latitude format géojson)",
-                        polygon: "Permet de stocker des coordonnées géographiques d'un objet représenté par un polygone (format géojson)",
-                        multipolygon: "Permet de stocker des coordonnées géographiques d'un objet représenté par plusieurs polygones imbriqués ou non (format géojson)"
+                        Point: "Permet de stocker des coordonnées géographiques d'un objet représenté par un point (format géojson)",
+                        MultiPoint: "Permet de stocker des coordonnées géographiques d'un objet composé de plusieurs points non reliés (format géojson)",
+                        LineString: "Permet de stocker des coordonnées géographiques d'un objet représenté comme une ligne (format géojson)",
+                        MultiLineString: "Permet de stocker des coordonnées géographiques d'un objet représenté avec plusieurs lignes non reliées entre elles (longitude et latitude format géojson)",
+                        Polygon: "Permet de stocker des coordonnées géographiques d'un objet représenté par un polygone (format géojson)",
+                        MultiPolygon: "Permet de stocker des coordonnées géographiques d'un objet représenté par plusieurs polygones imbriqués ou non (format géojson)"
                     }
                 },
                 rawMethods: {
                     http: 'Depuis une url',
                     upload: 'Téléverser depuis mon ordinateur'
+                },
+                formatOptions: {
+                    title: 'Options de formatage',
+                    decimalPrecision: 'Nombre de décimales souhaité',
+                    noDecimalPrecision: 'Pas de précision spécifiée',
+                    isLocaleFormat: 'Formatage comme nombre',
+                    unit: 'Unité',
+                    noUnit: "Pas d'unité spécifiée",
+                    dateFormat: 'Format de date',
+                    noDateFormat: 'Pas de format de date specifié',
+                    dateFormatOptions: {
+                        DATETIME: 'Date et heure',
+                        DATE: 'Date',
+                        MONTH_YEAR: 'Mois et année',
+                        DAY_MONTH: 'Jour et mois',
+                        YEAR: 'Année',
+                        MONTH: 'Mois',
+                        DAY: 'Jour'
+                    }
                 }
             },
             userInfo: {