@provoly/dashboard 0.20.2 → 0.20.4

package/fesm2022/provoly-dashboard-admin.mjs

@@ -20,7 +20,7 @@ import * as i5$3 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, combineLatestWith, Subscription, BehaviorSubject, startWith, distinctUntilChanged as distinctUntilChanged$1, Subject, zip, takeUntil, catchError, withLatestFrom, tap } from 'rxjs';
+import { switchMap, mergeMap, combineLatest, of, map, filter, combineLatestWith, Subscription, BehaviorSubject, distinctUntilChanged as distinctUntilChanged$1, debounceTime, startWith, Subject, zip, takeUntil, catchError, withLatestFrom, 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';
@@ -390,11 +390,11 @@ class AttributeConditionComponent {
         this.store.dispatch(AbacRulesActions.removeEditAbacRuleConditionFromComposed({ conditionId: parentId, childrenId: conditionId }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AttributeConditionComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AttributeConditionComponent, selector: "pry-attribute-condition", inputs: { readonly: "readonly", id: "id" }, ngImport: i0, template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <ng-container *ngIf=\"attribute$ | async as attr; else noAttribute\">\n    <ng-container *ngIf=\"field$ | async as field; else noField\">\n      <div class=\"o-pry-attribute-condition\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          aria-pressed=\"false\"\n          *ngIf=\"!readonly\"\n          (click)=\"onOpenPanel()\"\n          cdkOverlayOrigin\n          #origin=\"cdkOverlayOrigin\"\n        >\n          <pry-icon iconSvg=\"drag_indicator\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.admin.abac-rules.delete' | i18n }}</span>\n\n          <ng-template\n            cdkConnectedOverlay\n            cdkConnectedOverlayHasBackdrop\n            cdkConnectedOverlayLockPosition\n            cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n            [cdkConnectedOverlayOrigin]=\"origin\"\n            [cdkConnectedOverlayOpen]=\"panelOpen\"\n            (backdropClick)=\"onClosePanel()\"\n          >\n            <div class=\"m-pry-overlay-panel-wrapper\">\n              <div class=\"m-pry-overlay-panel\">\n                <button\n                  class=\"pry-condition-delete\"\n                  (click)=\"onDeleteAttributeCondition(condition.id, condition.parentId)\"\n                >\n                  {{ '@pry.admin.abac-rules.delete' | i18n }}\n                </button>\n              </div>\n            </div>\n          </ng-template>\n        </button>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"attr_name\">Name</label>\n          <input id=\"attr_name\" class=\"a-form-field\" type=\"text\" [value]=\"attr.name\" readonly />\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"condition_operator\">???</label>\n          <pry-select\n            class=\"a-pry-select\"\n            id=\"condition_operator\"\n            [style.width.px]=\"160\"\n            [labelTranslate]=\"true\"\n            [items]=\"operatorOptions$ | async\"\n            [itemsAsOption]=\"true\"\n            bindValue=\"operator\"\n            bindLabel=\"translation\"\n            [ngModel]=\"condition.operator\"\n            (ngModelChange)=\"onChangeOperator($event, condition.id)\"\n            [readonly]=\"readonly\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"condition_value\">Name</label>\n          <input\n            id=\"condition_value\"\n            [readonly]=\"readonly\"\n            type=\"text\"\n            class=\"a-form-field\"\n            [value]=\"condition.value\"\n            (focusout)=\"onChangeValue($event, condition.id)\"\n          />\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #noField> Loading field ...</ng-template>\n  </ng-container>\n  <ng-template #noAttribute> Loading attribute ...</ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { 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: i4.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AttributeConditionComponent, selector: "pry-attribute-condition", inputs: { readonly: "readonly", id: "id" }, ngImport: i0, template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <ng-container *ngIf=\"attribute$ | async as attr; else noAttribute\">\n    <ng-container *ngIf=\"field$ | async as field; else noField\">\n      <div class=\"o-pry-attribute-condition\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          aria-pressed=\"false\"\n          *ngIf=\"!readonly\"\n          (click)=\"onOpenPanel()\"\n          cdkOverlayOrigin\n          #origin=\"cdkOverlayOrigin\"\n        >\n          <pry-icon iconSvg=\"drag_indicator\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.admin.abac-rules.delete' | i18n }}</span>\n\n          <ng-template\n            cdkConnectedOverlay\n            cdkConnectedOverlayHasBackdrop\n            cdkConnectedOverlayLockPosition\n            cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n            [cdkConnectedOverlayOrigin]=\"origin\"\n            [cdkConnectedOverlayOpen]=\"panelOpen\"\n            (backdropClick)=\"onClosePanel()\"\n          >\n            <div class=\"m-pry-overlay-panel-wrapper\">\n              <div class=\"m-pry-overlay-panel\">\n                <button\n                  class=\"pry-condition-delete\"\n                  (click)=\"onDeleteAttributeCondition(condition.id, condition.parentId)\"\n                >\n                  {{ '@pry.admin.abac-rules.delete' | i18n }}\n                </button>\n              </div>\n            </div>\n          </ng-template>\n        </button>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"attr_name\">Name</label>\n          <input id=\"attr_name\" class=\"a-form-field\" type=\"text\" [value]=\"attr.name\" readonly />\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"condition_operator\">???</label>\n          <pry-select\n            id=\"condition_operator\"\n            [style.width.px]=\"160\"\n            [items]=\"operatorOptions$ | async\"\n            bindValue=\"operator\"\n            bindLabel=\"translation\"\n            [ngModel]=\"condition.operator\"\n            (ngModelChange)=\"onChangeOperator($event, condition.id)\"\n            [readonly]=\"readonly\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"condition_value\">Name</label>\n          <input\n            id=\"condition_value\"\n            [readonly]=\"readonly\"\n            type=\"text\"\n            class=\"a-form-field\"\n            [value]=\"condition.value\"\n            (focusout)=\"onChangeValue($event, condition.id)\"\n          />\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #noField> Loading field ...</ng-template>\n  </ng-container>\n  <ng-template #noAttribute> Loading attribute ...</ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { 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: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AttributeConditionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-attribute-condition', template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <ng-container *ngIf=\"attribute$ | async as attr; else noAttribute\">\n    <ng-container *ngIf=\"field$ | async as field; else noField\">\n      <div class=\"o-pry-attribute-condition\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          aria-pressed=\"false\"\n          *ngIf=\"!readonly\"\n          (click)=\"onOpenPanel()\"\n          cdkOverlayOrigin\n          #origin=\"cdkOverlayOrigin\"\n        >\n          <pry-icon iconSvg=\"drag_indicator\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.admin.abac-rules.delete' | i18n }}</span>\n\n          <ng-template\n            cdkConnectedOverlay\n            cdkConnectedOverlayHasBackdrop\n            cdkConnectedOverlayLockPosition\n            cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n            [cdkConnectedOverlayOrigin]=\"origin\"\n            [cdkConnectedOverlayOpen]=\"panelOpen\"\n            (backdropClick)=\"onClosePanel()\"\n          >\n            <div class=\"m-pry-overlay-panel-wrapper\">\n              <div class=\"m-pry-overlay-panel\">\n                <button\n                  class=\"pry-condition-delete\"\n                  (click)=\"onDeleteAttributeCondition(condition.id, condition.parentId)\"\n                >\n                  {{ '@pry.admin.abac-rules.delete' | i18n }}\n                </button>\n              </div>\n            </div>\n          </ng-template>\n        </button>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"attr_name\">Name</label>\n          <input id=\"attr_name\" class=\"a-form-field\" type=\"text\" [value]=\"attr.name\" readonly />\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"condition_operator\">???</label>\n          <pry-select\n            class=\"a-pry-select\"\n            id=\"condition_operator\"\n            [style.width.px]=\"160\"\n            [labelTranslate]=\"true\"\n            [items]=\"operatorOptions$ | async\"\n            [itemsAsOption]=\"true\"\n            bindValue=\"operator\"\n            bindLabel=\"translation\"\n            [ngModel]=\"condition.operator\"\n            (ngModelChange)=\"onChangeOperator($event, condition.id)\"\n            [readonly]=\"readonly\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"condition_value\">Name</label>\n          <input\n            id=\"condition_value\"\n            [readonly]=\"readonly\"\n            type=\"text\"\n            class=\"a-form-field\"\n            [value]=\"condition.value\"\n            (focusout)=\"onChangeValue($event, condition.id)\"\n          />\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #noField> Loading field ...</ng-template>\n  </ng-container>\n  <ng-template #noAttribute> Loading attribute ...</ng-template>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-attribute-condition', template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <ng-container *ngIf=\"attribute$ | async as attr; else noAttribute\">\n    <ng-container *ngIf=\"field$ | async as field; else noField\">\n      <div class=\"o-pry-attribute-condition\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          aria-pressed=\"false\"\n          *ngIf=\"!readonly\"\n          (click)=\"onOpenPanel()\"\n          cdkOverlayOrigin\n          #origin=\"cdkOverlayOrigin\"\n        >\n          <pry-icon iconSvg=\"drag_indicator\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.admin.abac-rules.delete' | i18n }}</span>\n\n          <ng-template\n            cdkConnectedOverlay\n            cdkConnectedOverlayHasBackdrop\n            cdkConnectedOverlayLockPosition\n            cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n            [cdkConnectedOverlayOrigin]=\"origin\"\n            [cdkConnectedOverlayOpen]=\"panelOpen\"\n            (backdropClick)=\"onClosePanel()\"\n          >\n            <div class=\"m-pry-overlay-panel-wrapper\">\n              <div class=\"m-pry-overlay-panel\">\n                <button\n                  class=\"pry-condition-delete\"\n                  (click)=\"onDeleteAttributeCondition(condition.id, condition.parentId)\"\n                >\n                  {{ '@pry.admin.abac-rules.delete' | i18n }}\n                </button>\n              </div>\n            </div>\n          </ng-template>\n        </button>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"attr_name\">Name</label>\n          <input id=\"attr_name\" class=\"a-form-field\" type=\"text\" [value]=\"attr.name\" readonly />\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"condition_operator\">???</label>\n          <pry-select\n            id=\"condition_operator\"\n            [style.width.px]=\"160\"\n            [items]=\"operatorOptions$ | async\"\n            bindValue=\"operator\"\n            bindLabel=\"translation\"\n            [ngModel]=\"condition.operator\"\n            (ngModelChange)=\"onChangeOperator($event, condition.id)\"\n            [readonly]=\"readonly\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label u-visually-hidden\" for=\"condition_value\">Name</label>\n          <input\n            id=\"condition_value\"\n            [readonly]=\"readonly\"\n            type=\"text\"\n            class=\"a-form-field\"\n            [value]=\"condition.value\"\n            (focusout)=\"onChangeValue($event, condition.id)\"\n          />\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #noField> Loading field ...</ng-template>\n  </ng-container>\n  <ng-template #noAttribute> Loading attribute ...</ng-template>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { readonly: [{
                 type: Input
             }], id: [{
@@ -448,11 +448,11 @@ class MetadataConditionComponent {
         this.store.dispatch(AbacRulesActions.removeEditAbacRuleConditionFromComposed({ conditionId: parentId, childrenId: conditionId }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataConditionComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MetadataConditionComponent, selector: "pry-metadata-condition", inputs: { readonly: "readonly", id: "id" }, ngImport: i0, template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <ng-container *ngIf=\"metadata$ | async as metadata; else noMetadata\">\n    <div class=\"o-pry-metadata-condition\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--icon-only\"\n        aria-pressed=\"false\"\n        (click)=\"deleteConditionOpen = true\"\n        [pryOverlay]=\"deleteConditionTpl\"\n        [(overlayOpen)]=\"deleteConditionOpen\"\n      >\n        <pry-icon *ngIf=\"!readonly\" iconSvg=\"drag_indicator\"></pry-icon>\n        <span class=\"u-visually-hidden\">???</span>\n      </button>\n\n      <ng-template #deleteConditionTpl>\n        <button class=\"m-pry-overlay-item\" (click)=\"onDeleteMetadataCondition(condition.id, condition.parentId)\">\n          {{ '@pry.admin.abac-rules.delete' | i18n }}\n        </button>\n      </ng-template>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"metadata_name\">Name</label>\n        <input id=\"metadata_name\" class=\"a-form-field\" type=\"text\" [value]=\"metadata.name\" readonly />\n      </div>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"metadata_operator\">???</label>\n        <pry-select\n          id=\"metadata_operator\"\n          class=\"a-pry-select\"\n          [readonly]=\"readonly\"\n          [style.width.px]=\"160\"\n          [labelTranslate]=\"true\"\n          [items]=\"operators$ | async\"\n          [itemsAsOption]=\"true\"\n          bindValue=\"operator\"\n          bindLabel=\"translation\"\n          [ngModel]=\"condition.operator\"\n          (ngModelChange)=\"onChangeOperator($event, condition.id)\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"condition_value\">???</label>\n        <input\n          id=\"condition_value\"\n          class=\"a-form-field\"\n          [readonly]=\"readonly\"\n          type=\"text\"\n          [style.width.px]=\"200\"\n          [value]=\"condition.value\"\n          (focusout)=\"onChangeValue($event, condition.id)\"\n        />\n      </div>\n\n      <button\n        type=\"button\"\n        aria-pressed=\"false\"\n        *ngIf=\"!readonly\"\n        class=\"a-btn a-btn--select -size-sm\"\n        [pryOverlay]=\"metadataUserTpl\"\n        [(overlayOpen)]=\"metadataUserOpen\"\n        (click)=\"metadataUserOpen = true\"\n      >\n        {{ '@pry.admin.abac-rules.metadataUser' | i18n }}\n      </button>\n\n      <ng-template #metadataUserTpl>\n        <div class=\"m-pry-overlay-wrapper\">\n          <ng-container *ngFor=\"let metadataUser of metadataUsers$ | async\">\n            <button class=\"m-pry-overlay-item\" (click)=\"onSelectMetadataUser(condition.id, metadataUser)\">\n              {{ metadataUser.name }}\n            </button>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n  <ng-template #noMetadata> Loading ...</ng-template>\n</ng-container>\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.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { 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: i4.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "directive", type: i4.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MetadataConditionComponent, selector: "pry-metadata-condition", inputs: { readonly: "readonly", id: "id" }, ngImport: i0, template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <ng-container *ngIf=\"metadata$ | async as metadata; else noMetadata\">\n    <div class=\"o-pry-metadata-condition\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--icon-only\"\n        aria-pressed=\"false\"\n        (click)=\"deleteConditionOpen = true\"\n        [pryOverlay]=\"deleteConditionTpl\"\n        [(overlayOpen)]=\"deleteConditionOpen\"\n      >\n        <pry-icon *ngIf=\"!readonly\" iconSvg=\"drag_indicator\"></pry-icon>\n        <span class=\"u-visually-hidden\">???</span>\n      </button>\n\n      <ng-template #deleteConditionTpl>\n        <button class=\"m-pry-overlay-item\" (click)=\"onDeleteMetadataCondition(condition.id, condition.parentId)\">\n          {{ '@pry.admin.abac-rules.delete' | i18n }}\n        </button>\n      </ng-template>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"metadata_name\">Name</label>\n        <input id=\"metadata_name\" class=\"a-form-field\" type=\"text\" [value]=\"metadata.name\" readonly />\n      </div>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"metadata_operator\">???</label>\n        <pry-select\n          id=\"metadata_operator\"\n          [readonly]=\"readonly\"\n          [style.width.px]=\"160\"\n          [items]=\"operators$ | async\"\n          bindValue=\"operator\"\n          bindLabel=\"translation\"\n          [ngModel]=\"condition.operator\"\n          (ngModelChange)=\"onChangeOperator($event, condition.id)\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"condition_value\">???</label>\n        <input\n          id=\"condition_value\"\n          class=\"a-form-field\"\n          [readonly]=\"readonly\"\n          type=\"text\"\n          [style.width.px]=\"200\"\n          [value]=\"condition.value\"\n          (focusout)=\"onChangeValue($event, condition.id)\"\n        />\n      </div>\n\n      <button\n        type=\"button\"\n        aria-pressed=\"false\"\n        *ngIf=\"!readonly\"\n        class=\"a-btn a-btn--select -size-sm\"\n        [pryOverlay]=\"metadataUserTpl\"\n        [(overlayOpen)]=\"metadataUserOpen\"\n        (click)=\"metadataUserOpen = true\"\n      >\n        {{ '@pry.admin.abac-rules.metadataUser' | i18n }}\n      </button>\n\n      <ng-template #metadataUserTpl>\n        <div class=\"m-pry-overlay-wrapper\">\n          <ng-container *ngFor=\"let metadataUser of metadataUsers$ | async\">\n            <button class=\"m-pry-overlay-item\" (click)=\"onSelectMetadataUser(condition.id, metadataUser)\">\n              {{ metadataUser.name }}\n            </button>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n  <ng-template #noMetadata> Loading ...</ng-template>\n</ng-container>\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.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { 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: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "directive", type: i4.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataConditionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-metadata-condition', template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <ng-container *ngIf=\"metadata$ | async as metadata; else noMetadata\">\n    <div class=\"o-pry-metadata-condition\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--icon-only\"\n        aria-pressed=\"false\"\n        (click)=\"deleteConditionOpen = true\"\n        [pryOverlay]=\"deleteConditionTpl\"\n        [(overlayOpen)]=\"deleteConditionOpen\"\n      >\n        <pry-icon *ngIf=\"!readonly\" iconSvg=\"drag_indicator\"></pry-icon>\n        <span class=\"u-visually-hidden\">???</span>\n      </button>\n\n      <ng-template #deleteConditionTpl>\n        <button class=\"m-pry-overlay-item\" (click)=\"onDeleteMetadataCondition(condition.id, condition.parentId)\">\n          {{ '@pry.admin.abac-rules.delete' | i18n }}\n        </button>\n      </ng-template>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"metadata_name\">Name</label>\n        <input id=\"metadata_name\" class=\"a-form-field\" type=\"text\" [value]=\"metadata.name\" readonly />\n      </div>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"metadata_operator\">???</label>\n        <pry-select\n          id=\"metadata_operator\"\n          class=\"a-pry-select\"\n          [readonly]=\"readonly\"\n          [style.width.px]=\"160\"\n          [labelTranslate]=\"true\"\n          [items]=\"operators$ | async\"\n          [itemsAsOption]=\"true\"\n          bindValue=\"operator\"\n          bindLabel=\"translation\"\n          [ngModel]=\"condition.operator\"\n          (ngModelChange)=\"onChangeOperator($event, condition.id)\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"condition_value\">???</label>\n        <input\n          id=\"condition_value\"\n          class=\"a-form-field\"\n          [readonly]=\"readonly\"\n          type=\"text\"\n          [style.width.px]=\"200\"\n          [value]=\"condition.value\"\n          (focusout)=\"onChangeValue($event, condition.id)\"\n        />\n      </div>\n\n      <button\n        type=\"button\"\n        aria-pressed=\"false\"\n        *ngIf=\"!readonly\"\n        class=\"a-btn a-btn--select -size-sm\"\n        [pryOverlay]=\"metadataUserTpl\"\n        [(overlayOpen)]=\"metadataUserOpen\"\n        (click)=\"metadataUserOpen = true\"\n      >\n        {{ '@pry.admin.abac-rules.metadataUser' | i18n }}\n      </button>\n\n      <ng-template #metadataUserTpl>\n        <div class=\"m-pry-overlay-wrapper\">\n          <ng-container *ngFor=\"let metadataUser of metadataUsers$ | async\">\n            <button class=\"m-pry-overlay-item\" (click)=\"onSelectMetadataUser(condition.id, metadataUser)\">\n              {{ metadataUser.name }}\n            </button>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n  <ng-template #noMetadata> Loading ...</ng-template>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-metadata-condition', template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <ng-container *ngIf=\"metadata$ | async as metadata; else noMetadata\">\n    <div class=\"o-pry-metadata-condition\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--icon-only\"\n        aria-pressed=\"false\"\n        (click)=\"deleteConditionOpen = true\"\n        [pryOverlay]=\"deleteConditionTpl\"\n        [(overlayOpen)]=\"deleteConditionOpen\"\n      >\n        <pry-icon *ngIf=\"!readonly\" iconSvg=\"drag_indicator\"></pry-icon>\n        <span class=\"u-visually-hidden\">???</span>\n      </button>\n\n      <ng-template #deleteConditionTpl>\n        <button class=\"m-pry-overlay-item\" (click)=\"onDeleteMetadataCondition(condition.id, condition.parentId)\">\n          {{ '@pry.admin.abac-rules.delete' | i18n }}\n        </button>\n      </ng-template>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"metadata_name\">Name</label>\n        <input id=\"metadata_name\" class=\"a-form-field\" type=\"text\" [value]=\"metadata.name\" readonly />\n      </div>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"metadata_operator\">???</label>\n        <pry-select\n          id=\"metadata_operator\"\n          [readonly]=\"readonly\"\n          [style.width.px]=\"160\"\n          [items]=\"operators$ | async\"\n          bindValue=\"operator\"\n          bindLabel=\"translation\"\n          [ngModel]=\"condition.operator\"\n          (ngModelChange)=\"onChangeOperator($event, condition.id)\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label u-visually-hidden\" for=\"condition_value\">???</label>\n        <input\n          id=\"condition_value\"\n          class=\"a-form-field\"\n          [readonly]=\"readonly\"\n          type=\"text\"\n          [style.width.px]=\"200\"\n          [value]=\"condition.value\"\n          (focusout)=\"onChangeValue($event, condition.id)\"\n        />\n      </div>\n\n      <button\n        type=\"button\"\n        aria-pressed=\"false\"\n        *ngIf=\"!readonly\"\n        class=\"a-btn a-btn--select -size-sm\"\n        [pryOverlay]=\"metadataUserTpl\"\n        [(overlayOpen)]=\"metadataUserOpen\"\n        (click)=\"metadataUserOpen = true\"\n      >\n        {{ '@pry.admin.abac-rules.metadataUser' | i18n }}\n      </button>\n\n      <ng-template #metadataUserTpl>\n        <div class=\"m-pry-overlay-wrapper\">\n          <ng-container *ngFor=\"let metadataUser of metadataUsers$ | async\">\n            <button class=\"m-pry-overlay-item\" (click)=\"onSelectMetadataUser(condition.id, metadataUser)\">\n              {{ metadataUser.name }}\n            </button>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n  <ng-template #noMetadata> Loading ...</ng-template>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { readonly: [{
                 type: Input
             }], id: [{
@@ -547,11 +547,11 @@ class AdminAbacRulesFormComponent {
         this.store.dispatch(AbacRulesActions.cancelAbacRuleEdition({ redirect: backPath.toString() }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminAbacRulesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAbacRulesFormComponent, selector: "pry-admin-abac-rules-form", inputs: { readonly: "readonly", edit: "edit" }, ngImport: i0, template: "<ng-container *ngIf=\"editAbacRule$ | async as rule\">\n  <form class=\"o-form\" #abacRuleForm=\"ngForm\">\n    <div class=\"row\">\n      <div class=\"col\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" id=\"name-label\" for=\"inputName\">\n            {{ '@pry.admin.abac-rules.form.name' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </label>\n          <input\n            id=\"inputName\"\n            type=\"text\"\n            [ngModel]=\"rule.name\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('name', $event)\"\n            class=\"a-form-field\"\n            name=\"name\"\n            #name=\"ngModel\"\n            maxlength=\"50\"\n            required\n            [readonly]=\"readonly\"\n            [attr.aria-labelledby]=\"isSubmitted && name?.invalid ? 'name-label name-error' : 'name-label'\"\n            [attr.aria-invalid]=\"isSubmitted && name?.invalid\"\n          />\n          <label\n            class=\"a-label a-label--help -error\"\n            id=\"name-error\"\n            for=\"inputName\"\n            *ngIf=\"isSubmitted && name.invalid\"\n            >{{ '@pry.admin.required' | i18n }}</label\n          >\n        </div>\n\n        <fieldset class=\"m-form-radio-group-wrapper\" [disabled]=\"readonly\">\n          <legend class=\"a-label\">\n            {{ '@pry.admin.abac-rules.form.status' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </legend>\n          <div class=\"m-form-radio-group\">\n            <div class=\"m-form-radio-group__item\">\n              <input\n                class=\"a-form-field\"\n                type=\"radio\"\n                id=\"newRuleTrue\"\n                name=\"active\"\n                [ngModel]=\"rule.active\"\n                (ngModelChange)=\"!readonly && onChangeAbacRuleProperty('active', $event)\"\n                [value]=\"true\"\n              />\n              <label for=\"newRuleTrue\" class=\"a-label\">\n                {{ '@pry.admin.abac-rules.form.statusActive' | i18n }}\n              </label>\n            </div>\n            <div class=\"m-form-radio-group__item\">\n              <input\n                class=\"a-form-field\"\n                type=\"radio\"\n                id=\"newRuleFalse\"\n                name=\"active\"\n                [ngModel]=\"rule.active\"\n                (ngModelChange)=\"!readonly && onChangeAbacRuleProperty('active', $event)\"\n                [value]=\"false\"\n              />\n              <label for=\"newRuleFalse\" class=\"a-label\">\n                {{ '@pry.admin.abac-rules.form.statusInactive' | i18n }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n\n      <div class=\"col\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"abac-rules-description\">{{\n            '@pry.admin.abac-rules.form.description' | i18n\n          }}</label>\n          <textarea\n            name=\"description\"\n            id=\"abac-rules-description\"\n            [ngModel]=\"rule.description\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('description', $event)\"\n            class=\"a-form-field\"\n            maxlength=\"90\"\n            [readonly]=\"readonly\"\n          ></textarea>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label id=\"predicate-label\" for=\"predicate\" class=\"a-label\">\n            {{ '@pry.admin.abac-rules.form.predicate' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </label>\n          <pry-select\n            id=\"predicate\"\n            class=\"a-pry-select\"\n            [attr.aria-labelledby]=\"\n              isSubmitted && abacRuleForm.form.get('predicate')?.invalid\n                ? 'predicate-label predicate-error'\n                : 'predicate-label'\n            \"\n            [readonly]=\"readonly\"\n            [items]=\"predicates$ | async\"\n            bindLabel=\"name\"\n            bindValue=\"id\"\n            [itemsAsOption]=\"true\"\n            [templateOption]=\"templateOption\"\n            name=\"predicate\"\n            [ngModel]=\"rule.predicate\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('predicate', $event)\"\n            [isForm]=\"!readonly\"\n            [attr.aria-invalid]=\"isSubmitted && abacRuleForm.form.get('predicate')?.invalid\"\n            required\n          ></pry-select>\n\n          <ng-template #templateOption let-item=\"item\">\n            <ng-container *ngIf=\"toPredicate(item); let item\">\n              <div class=\"u-display-flex -column\">\n                <span>#{{ item.id }}</span>\n                <span>{{ item.name }}</span>\n                <span>{{ item.value }}</span>\n              </div>\n            </ng-container>\n          </ng-template>\n          <label\n            class=\"a-label a-label--help -error\"\n            id=\"predicate-error\"\n            for=\"predicate\"\n            *ngIf=\"isSubmitted && abacRuleForm.form.get('predicate')?.invalid\"\n            >{{ '@pry.admin.required' | i18n }}</label\n          >\n        </div>\n\n        <fieldset class=\"m-form-radio-group-wrapper\" [disabled]=\"readonly\">\n          <legend class=\"a-label\">\n            <label>{{ '@pry.admin.abac-rules.form.type' | i18n }}</label> *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </legend>\n\n          <div class=\"m-form-radio-group\">\n            <ng-container *ngIf=\"typeSelected$ | async; else typeNotSelected\">\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  disabled\n                  id=\"metadataId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  value=\"METADATA\"\n                />\n                <label class=\"a-label\" for=\"metadataId\">\n                  {{ '@pry.admin.abac-rules.form.typeMetadata' | i18n }}\n                </label>\n              </div>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  disabled\n                  id=\"attributeId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  value=\"ATTRIBUTE\"\n                />\n                <label class=\"a-label\" for=\"attributeId\">\n                  {{ '@pry.admin.abac-rules.form.typeAttribute' | i18n }}\n                </label>\n              </div>\n              <span *ngIf=\"!readonly\" style=\"font-size: 12px; font-style: italic\">{{\n                '@pry.admin.abac-rules.form.typeSelected' | i18n\n              }}</span>\n            </ng-container>\n\n            <ng-template #typeNotSelected>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  id=\"metadataId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  (ngModelChange)=\"onChangeAbacRuleProperty('type', METADATA)\"\n                  value=\"METADATA\"\n                  [disabled]=\"readonly\"\n                />\n                <label class=\"a-label\" for=\"metadataId\">\n                  {{ '@pry.admin.abac-rules.form.typeMetadata' | i18n }}\n                </label>\n              </div>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  id=\"attributeId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  (ngModelChange)=\"onChangeAbacRuleProperty('type', ATTRIBUTE)\"\n                  value=\"ATTRIBUTE\"\n                  [disabled]=\"readonly\"\n                />\n                <label class=\"a-label\" for=\"attributeId\">\n                  {{ '@pry.admin.abac-rules.form.typeAttribute' | i18n }}\n                </label>\n              </div>\n            </ng-template>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"editAbacRuleConditionsMasterId$ | async as masterId\">\n      <div class=\"row\">\n        <div class=\"col\">\n          <pry-composed-condition\n            class=\"o-component-pry-composed-condition\"\n            style=\"margin: 1rem\"\n            [rootElement]=\"true\"\n            [id]=\"masterId\"\n            [readonly]=\"readonly\"\n          ></pry-composed-condition>\n        </div>\n      </div>\n    </ng-container>\n\n    <div *ngIf=\"!readonly\" class=\"m-btn-group -align-center -width-sm\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"goBack()\">\n        {{ '@pry.admin.cancel' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"onCreateAbacRule(abacRuleForm)\">\n        {{ '@pry.admin.' + (edit ? 'edit' : 'create') | i18n }}\n      </button>\n    </div>\n  </form>\n</ng-container>\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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: ComposedConditionComponent, selector: "pry-composed-condition", inputs: ["id", "readonly", "rootElement"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAbacRulesFormComponent, selector: "pry-admin-abac-rules-form", inputs: { readonly: "readonly", edit: "edit" }, ngImport: i0, template: "<ng-container *ngIf=\"editAbacRule$ | async as rule\">\n  <form class=\"o-form\" #abacRuleForm=\"ngForm\">\n    <div class=\"row\">\n      <div class=\"col\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" id=\"name-label\" for=\"inputName\">\n            {{ '@pry.admin.abac-rules.form.name' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </label>\n          <input\n            id=\"inputName\"\n            type=\"text\"\n            [ngModel]=\"rule.name\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('name', $event)\"\n            class=\"a-form-field\"\n            name=\"name\"\n            #name=\"ngModel\"\n            maxlength=\"50\"\n            required\n            [readonly]=\"readonly\"\n            [attr.aria-labelledby]=\"isSubmitted && name?.invalid ? 'name-label name-error' : 'name-label'\"\n            [attr.aria-invalid]=\"isSubmitted && name?.invalid\"\n          />\n          <label\n            class=\"a-label a-label--help -error\"\n            id=\"name-error\"\n            for=\"inputName\"\n            *ngIf=\"isSubmitted && name.invalid\"\n            >{{ '@pry.admin.required' | i18n }}</label\n          >\n        </div>\n\n        <fieldset class=\"m-form-radio-group-wrapper\" [disabled]=\"readonly\">\n          <legend class=\"a-label\">\n            {{ '@pry.admin.abac-rules.form.status' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </legend>\n          <div class=\"m-form-radio-group\">\n            <div class=\"m-form-radio-group__item\">\n              <input\n                class=\"a-form-field\"\n                type=\"radio\"\n                id=\"newRuleTrue\"\n                name=\"active\"\n                [ngModel]=\"rule.active\"\n                (ngModelChange)=\"!readonly && onChangeAbacRuleProperty('active', $event)\"\n                [value]=\"true\"\n              />\n              <label for=\"newRuleTrue\" class=\"a-label\">\n                {{ '@pry.admin.abac-rules.form.statusActive' | i18n }}\n              </label>\n            </div>\n            <div class=\"m-form-radio-group__item\">\n              <input\n                class=\"a-form-field\"\n                type=\"radio\"\n                id=\"newRuleFalse\"\n                name=\"active\"\n                [ngModel]=\"rule.active\"\n                (ngModelChange)=\"!readonly && onChangeAbacRuleProperty('active', $event)\"\n                [value]=\"false\"\n              />\n              <label for=\"newRuleFalse\" class=\"a-label\">\n                {{ '@pry.admin.abac-rules.form.statusInactive' | i18n }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n\n      <div class=\"col\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"abac-rules-description\">{{\n            '@pry.admin.abac-rules.form.description' | i18n\n          }}</label>\n          <textarea\n            name=\"description\"\n            id=\"abac-rules-description\"\n            [ngModel]=\"rule.description\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('description', $event)\"\n            class=\"a-form-field\"\n            maxlength=\"90\"\n            [readonly]=\"readonly\"\n          ></textarea>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label id=\"predicate-label\" for=\"predicate\" class=\"a-label\">\n            {{ '@pry.admin.abac-rules.form.predicate' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </label>\n          <pry-select\n            id=\"predicate\"\n            [attr.aria-labelledby]=\"\n              isSubmitted && abacRuleForm.form.get('predicate')?.invalid\n                ? 'predicate-label predicate-error'\n                : 'predicate-label'\n            \"\n            [readonly]=\"readonly\"\n            [items]=\"predicates$ | async\"\n            bindLabel=\"name\"\n            bindValue=\"id\"\n            [template]=\"templateOption\"\n            name=\"predicate\"\n            [ngModel]=\"rule.predicate\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('predicate', $event)\"\n            [isForm]=\"!readonly\"\n            [attr.aria-invalid]=\"isSubmitted && abacRuleForm.form.get('predicate')?.invalid\"\n            required\n          ></pry-select>\n\n          <ng-template #templateOption let-item=\"item\">\n            <ng-container *ngIf=\"toPredicate(item); let item\">\n              <div class=\"u-display-flex -column\">\n                <span>#{{ item.id }}</span>\n                <span>{{ item.name }}</span>\n                <span>{{ item.value }}</span>\n              </div>\n            </ng-container>\n          </ng-template>\n          <label\n            class=\"a-label a-label--help -error\"\n            id=\"predicate-error\"\n            for=\"predicate\"\n            *ngIf=\"isSubmitted && abacRuleForm.form.get('predicate')?.invalid\"\n            >{{ '@pry.admin.required' | i18n }}</label\n          >\n        </div>\n\n        <fieldset class=\"m-form-radio-group-wrapper\" [disabled]=\"readonly\">\n          <legend class=\"a-label\">\n            <label>{{ '@pry.admin.abac-rules.form.type' | i18n }}</label> *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </legend>\n\n          <div class=\"m-form-radio-group\">\n            <ng-container *ngIf=\"typeSelected$ | async; else typeNotSelected\">\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  disabled\n                  id=\"metadataId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  value=\"METADATA\"\n                />\n                <label class=\"a-label\" for=\"metadataId\">\n                  {{ '@pry.admin.abac-rules.form.typeMetadata' | i18n }}\n                </label>\n              </div>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  disabled\n                  id=\"attributeId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  value=\"ATTRIBUTE\"\n                />\n                <label class=\"a-label\" for=\"attributeId\">\n                  {{ '@pry.admin.abac-rules.form.typeAttribute' | i18n }}\n                </label>\n              </div>\n              <span *ngIf=\"!readonly\" style=\"font-size: 12px; font-style: italic\">{{\n                '@pry.admin.abac-rules.form.typeSelected' | i18n\n              }}</span>\n            </ng-container>\n\n            <ng-template #typeNotSelected>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  id=\"metadataId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  (ngModelChange)=\"onChangeAbacRuleProperty('type', METADATA)\"\n                  value=\"METADATA\"\n                  [disabled]=\"readonly\"\n                />\n                <label class=\"a-label\" for=\"metadataId\">\n                  {{ '@pry.admin.abac-rules.form.typeMetadata' | i18n }}\n                </label>\n              </div>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  id=\"attributeId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  (ngModelChange)=\"onChangeAbacRuleProperty('type', ATTRIBUTE)\"\n                  value=\"ATTRIBUTE\"\n                  [disabled]=\"readonly\"\n                />\n                <label class=\"a-label\" for=\"attributeId\">\n                  {{ '@pry.admin.abac-rules.form.typeAttribute' | i18n }}\n                </label>\n              </div>\n            </ng-template>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"editAbacRuleConditionsMasterId$ | async as masterId\">\n      <div class=\"row\">\n        <div class=\"col\">\n          <pry-composed-condition\n            class=\"o-component-pry-composed-condition\"\n            style=\"margin: 1rem\"\n            [rootElement]=\"true\"\n            [id]=\"masterId\"\n            [readonly]=\"readonly\"\n          ></pry-composed-condition>\n        </div>\n      </div>\n    </ng-container>\n\n    <div *ngIf=\"!readonly\" class=\"m-btn-group -align-center -width-sm\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"goBack()\">\n        {{ '@pry.admin.cancel' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"onCreateAbacRule(abacRuleForm)\">\n        {{ '@pry.admin.' + (edit ? 'edit' : 'create') | i18n }}\n      </button>\n    </div>\n  </form>\n</ng-container>\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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "component", type: ComposedConditionComponent, selector: "pry-composed-condition", inputs: ["id", "readonly", "rootElement"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminAbacRulesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-abac-rules-form', template: "<ng-container *ngIf=\"editAbacRule$ | async as rule\">\n  <form class=\"o-form\" #abacRuleForm=\"ngForm\">\n    <div class=\"row\">\n      <div class=\"col\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" id=\"name-label\" for=\"inputName\">\n            {{ '@pry.admin.abac-rules.form.name' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </label>\n          <input\n            id=\"inputName\"\n            type=\"text\"\n            [ngModel]=\"rule.name\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('name', $event)\"\n            class=\"a-form-field\"\n            name=\"name\"\n            #name=\"ngModel\"\n            maxlength=\"50\"\n            required\n            [readonly]=\"readonly\"\n            [attr.aria-labelledby]=\"isSubmitted && name?.invalid ? 'name-label name-error' : 'name-label'\"\n            [attr.aria-invalid]=\"isSubmitted && name?.invalid\"\n          />\n          <label\n            class=\"a-label a-label--help -error\"\n            id=\"name-error\"\n            for=\"inputName\"\n            *ngIf=\"isSubmitted && name.invalid\"\n            >{{ '@pry.admin.required' | i18n }}</label\n          >\n        </div>\n\n        <fieldset class=\"m-form-radio-group-wrapper\" [disabled]=\"readonly\">\n          <legend class=\"a-label\">\n            {{ '@pry.admin.abac-rules.form.status' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </legend>\n          <div class=\"m-form-radio-group\">\n            <div class=\"m-form-radio-group__item\">\n              <input\n                class=\"a-form-field\"\n                type=\"radio\"\n                id=\"newRuleTrue\"\n                name=\"active\"\n                [ngModel]=\"rule.active\"\n                (ngModelChange)=\"!readonly && onChangeAbacRuleProperty('active', $event)\"\n                [value]=\"true\"\n              />\n              <label for=\"newRuleTrue\" class=\"a-label\">\n                {{ '@pry.admin.abac-rules.form.statusActive' | i18n }}\n              </label>\n            </div>\n            <div class=\"m-form-radio-group__item\">\n              <input\n                class=\"a-form-field\"\n                type=\"radio\"\n                id=\"newRuleFalse\"\n                name=\"active\"\n                [ngModel]=\"rule.active\"\n                (ngModelChange)=\"!readonly && onChangeAbacRuleProperty('active', $event)\"\n                [value]=\"false\"\n              />\n              <label for=\"newRuleFalse\" class=\"a-label\">\n                {{ '@pry.admin.abac-rules.form.statusInactive' | i18n }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n\n      <div class=\"col\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"abac-rules-description\">{{\n            '@pry.admin.abac-rules.form.description' | i18n\n          }}</label>\n          <textarea\n            name=\"description\"\n            id=\"abac-rules-description\"\n            [ngModel]=\"rule.description\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('description', $event)\"\n            class=\"a-form-field\"\n            maxlength=\"90\"\n            [readonly]=\"readonly\"\n          ></textarea>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label id=\"predicate-label\" for=\"predicate\" class=\"a-label\">\n            {{ '@pry.admin.abac-rules.form.predicate' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </label>\n          <pry-select\n            id=\"predicate\"\n            class=\"a-pry-select\"\n            [attr.aria-labelledby]=\"\n              isSubmitted && abacRuleForm.form.get('predicate')?.invalid\n                ? 'predicate-label predicate-error'\n                : 'predicate-label'\n            \"\n            [readonly]=\"readonly\"\n            [items]=\"predicates$ | async\"\n            bindLabel=\"name\"\n            bindValue=\"id\"\n            [itemsAsOption]=\"true\"\n            [templateOption]=\"templateOption\"\n            name=\"predicate\"\n            [ngModel]=\"rule.predicate\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('predicate', $event)\"\n            [isForm]=\"!readonly\"\n            [attr.aria-invalid]=\"isSubmitted && abacRuleForm.form.get('predicate')?.invalid\"\n            required\n          ></pry-select>\n\n          <ng-template #templateOption let-item=\"item\">\n            <ng-container *ngIf=\"toPredicate(item); let item\">\n              <div class=\"u-display-flex -column\">\n                <span>#{{ item.id }}</span>\n                <span>{{ item.name }}</span>\n                <span>{{ item.value }}</span>\n              </div>\n            </ng-container>\n          </ng-template>\n          <label\n            class=\"a-label a-label--help -error\"\n            id=\"predicate-error\"\n            for=\"predicate\"\n            *ngIf=\"isSubmitted && abacRuleForm.form.get('predicate')?.invalid\"\n            >{{ '@pry.admin.required' | i18n }}</label\n          >\n        </div>\n\n        <fieldset class=\"m-form-radio-group-wrapper\" [disabled]=\"readonly\">\n          <legend class=\"a-label\">\n            <label>{{ '@pry.admin.abac-rules.form.type' | i18n }}</label> *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </legend>\n\n          <div class=\"m-form-radio-group\">\n            <ng-container *ngIf=\"typeSelected$ | async; else typeNotSelected\">\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  disabled\n                  id=\"metadataId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  value=\"METADATA\"\n                />\n                <label class=\"a-label\" for=\"metadataId\">\n                  {{ '@pry.admin.abac-rules.form.typeMetadata' | i18n }}\n                </label>\n              </div>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  disabled\n                  id=\"attributeId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  value=\"ATTRIBUTE\"\n                />\n                <label class=\"a-label\" for=\"attributeId\">\n                  {{ '@pry.admin.abac-rules.form.typeAttribute' | i18n }}\n                </label>\n              </div>\n              <span *ngIf=\"!readonly\" style=\"font-size: 12px; font-style: italic\">{{\n                '@pry.admin.abac-rules.form.typeSelected' | i18n\n              }}</span>\n            </ng-container>\n\n            <ng-template #typeNotSelected>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  id=\"metadataId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  (ngModelChange)=\"onChangeAbacRuleProperty('type', METADATA)\"\n                  value=\"METADATA\"\n                  [disabled]=\"readonly\"\n                />\n                <label class=\"a-label\" for=\"metadataId\">\n                  {{ '@pry.admin.abac-rules.form.typeMetadata' | i18n }}\n                </label>\n              </div>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  id=\"attributeId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  (ngModelChange)=\"onChangeAbacRuleProperty('type', ATTRIBUTE)\"\n                  value=\"ATTRIBUTE\"\n                  [disabled]=\"readonly\"\n                />\n                <label class=\"a-label\" for=\"attributeId\">\n                  {{ '@pry.admin.abac-rules.form.typeAttribute' | i18n }}\n                </label>\n              </div>\n            </ng-template>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"editAbacRuleConditionsMasterId$ | async as masterId\">\n      <div class=\"row\">\n        <div class=\"col\">\n          <pry-composed-condition\n            class=\"o-component-pry-composed-condition\"\n            style=\"margin: 1rem\"\n            [rootElement]=\"true\"\n            [id]=\"masterId\"\n            [readonly]=\"readonly\"\n          ></pry-composed-condition>\n        </div>\n      </div>\n    </ng-container>\n\n    <div *ngIf=\"!readonly\" class=\"m-btn-group -align-center -width-sm\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"goBack()\">\n        {{ '@pry.admin.cancel' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"onCreateAbacRule(abacRuleForm)\">\n        {{ '@pry.admin.' + (edit ? 'edit' : 'create') | i18n }}\n      </button>\n    </div>\n  </form>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-admin-abac-rules-form', template: "<ng-container *ngIf=\"editAbacRule$ | async as rule\">\n  <form class=\"o-form\" #abacRuleForm=\"ngForm\">\n    <div class=\"row\">\n      <div class=\"col\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" id=\"name-label\" for=\"inputName\">\n            {{ '@pry.admin.abac-rules.form.name' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </label>\n          <input\n            id=\"inputName\"\n            type=\"text\"\n            [ngModel]=\"rule.name\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('name', $event)\"\n            class=\"a-form-field\"\n            name=\"name\"\n            #name=\"ngModel\"\n            maxlength=\"50\"\n            required\n            [readonly]=\"readonly\"\n            [attr.aria-labelledby]=\"isSubmitted && name?.invalid ? 'name-label name-error' : 'name-label'\"\n            [attr.aria-invalid]=\"isSubmitted && name?.invalid\"\n          />\n          <label\n            class=\"a-label a-label--help -error\"\n            id=\"name-error\"\n            for=\"inputName\"\n            *ngIf=\"isSubmitted && name.invalid\"\n            >{{ '@pry.admin.required' | i18n }}</label\n          >\n        </div>\n\n        <fieldset class=\"m-form-radio-group-wrapper\" [disabled]=\"readonly\">\n          <legend class=\"a-label\">\n            {{ '@pry.admin.abac-rules.form.status' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </legend>\n          <div class=\"m-form-radio-group\">\n            <div class=\"m-form-radio-group__item\">\n              <input\n                class=\"a-form-field\"\n                type=\"radio\"\n                id=\"newRuleTrue\"\n                name=\"active\"\n                [ngModel]=\"rule.active\"\n                (ngModelChange)=\"!readonly && onChangeAbacRuleProperty('active', $event)\"\n                [value]=\"true\"\n              />\n              <label for=\"newRuleTrue\" class=\"a-label\">\n                {{ '@pry.admin.abac-rules.form.statusActive' | i18n }}\n              </label>\n            </div>\n            <div class=\"m-form-radio-group__item\">\n              <input\n                class=\"a-form-field\"\n                type=\"radio\"\n                id=\"newRuleFalse\"\n                name=\"active\"\n                [ngModel]=\"rule.active\"\n                (ngModelChange)=\"!readonly && onChangeAbacRuleProperty('active', $event)\"\n                [value]=\"false\"\n              />\n              <label for=\"newRuleFalse\" class=\"a-label\">\n                {{ '@pry.admin.abac-rules.form.statusInactive' | i18n }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n\n      <div class=\"col\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"abac-rules-description\">{{\n            '@pry.admin.abac-rules.form.description' | i18n\n          }}</label>\n          <textarea\n            name=\"description\"\n            id=\"abac-rules-description\"\n            [ngModel]=\"rule.description\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('description', $event)\"\n            class=\"a-form-field\"\n            maxlength=\"90\"\n            [readonly]=\"readonly\"\n          ></textarea>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label id=\"predicate-label\" for=\"predicate\" class=\"a-label\">\n            {{ '@pry.admin.abac-rules.form.predicate' | i18n }} *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </label>\n          <pry-select\n            id=\"predicate\"\n            [attr.aria-labelledby]=\"\n              isSubmitted && abacRuleForm.form.get('predicate')?.invalid\n                ? 'predicate-label predicate-error'\n                : 'predicate-label'\n            \"\n            [readonly]=\"readonly\"\n            [items]=\"predicates$ | async\"\n            bindLabel=\"name\"\n            bindValue=\"id\"\n            [template]=\"templateOption\"\n            name=\"predicate\"\n            [ngModel]=\"rule.predicate\"\n            (ngModelChange)=\"onChangeAbacRuleProperty('predicate', $event)\"\n            [isForm]=\"!readonly\"\n            [attr.aria-invalid]=\"isSubmitted && abacRuleForm.form.get('predicate')?.invalid\"\n            required\n          ></pry-select>\n\n          <ng-template #templateOption let-item=\"item\">\n            <ng-container *ngIf=\"toPredicate(item); let item\">\n              <div class=\"u-display-flex -column\">\n                <span>#{{ item.id }}</span>\n                <span>{{ item.name }}</span>\n                <span>{{ item.value }}</span>\n              </div>\n            </ng-container>\n          </ng-template>\n          <label\n            class=\"a-label a-label--help -error\"\n            id=\"predicate-error\"\n            for=\"predicate\"\n            *ngIf=\"isSubmitted && abacRuleForm.form.get('predicate')?.invalid\"\n            >{{ '@pry.admin.required' | i18n }}</label\n          >\n        </div>\n\n        <fieldset class=\"m-form-radio-group-wrapper\" [disabled]=\"readonly\">\n          <legend class=\"a-label\">\n            <label>{{ '@pry.admin.abac-rules.form.type' | i18n }}</label> *\n            <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n          </legend>\n\n          <div class=\"m-form-radio-group\">\n            <ng-container *ngIf=\"typeSelected$ | async; else typeNotSelected\">\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  disabled\n                  id=\"metadataId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  value=\"METADATA\"\n                />\n                <label class=\"a-label\" for=\"metadataId\">\n                  {{ '@pry.admin.abac-rules.form.typeMetadata' | i18n }}\n                </label>\n              </div>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  disabled\n                  id=\"attributeId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  value=\"ATTRIBUTE\"\n                />\n                <label class=\"a-label\" for=\"attributeId\">\n                  {{ '@pry.admin.abac-rules.form.typeAttribute' | i18n }}\n                </label>\n              </div>\n              <span *ngIf=\"!readonly\" style=\"font-size: 12px; font-style: italic\">{{\n                '@pry.admin.abac-rules.form.typeSelected' | i18n\n              }}</span>\n            </ng-container>\n\n            <ng-template #typeNotSelected>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  id=\"metadataId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  (ngModelChange)=\"onChangeAbacRuleProperty('type', METADATA)\"\n                  value=\"METADATA\"\n                  [disabled]=\"readonly\"\n                />\n                <label class=\"a-label\" for=\"metadataId\">\n                  {{ '@pry.admin.abac-rules.form.typeMetadata' | i18n }}\n                </label>\n              </div>\n              <div class=\"m-form-radio-group__item\">\n                <input\n                  class=\"a-form-field\"\n                  type=\"radio\"\n                  id=\"attributeId\"\n                  name=\"type\"\n                  [ngModel]=\"rule.type\"\n                  (ngModelChange)=\"onChangeAbacRuleProperty('type', ATTRIBUTE)\"\n                  value=\"ATTRIBUTE\"\n                  [disabled]=\"readonly\"\n                />\n                <label class=\"a-label\" for=\"attributeId\">\n                  {{ '@pry.admin.abac-rules.form.typeAttribute' | i18n }}\n                </label>\n              </div>\n            </ng-template>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"editAbacRuleConditionsMasterId$ | async as masterId\">\n      <div class=\"row\">\n        <div class=\"col\">\n          <pry-composed-condition\n            class=\"o-component-pry-composed-condition\"\n            style=\"margin: 1rem\"\n            [rootElement]=\"true\"\n            [id]=\"masterId\"\n            [readonly]=\"readonly\"\n          ></pry-composed-condition>\n        </div>\n      </div>\n    </ng-container>\n\n    <div *ngIf=\"!readonly\" class=\"m-btn-group -align-center -width-sm\">\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"goBack()\">\n        {{ '@pry.admin.cancel' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"onCreateAbacRule(abacRuleForm)\">\n        {{ '@pry.admin.' + (edit ? 'edit' : 'create') | i18n }}\n      </button>\n    </div>\n  </form>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; }, propDecorators: { readonly: [{
                 type: Input
             }], edit: [{
@@ -1031,9 +1031,9 @@ class AdminClassesCustomizeTooltipComponent extends SubscriptionnerDirective {
             if (component) {
                 component.instance.data.item = this.fields
                     .map((attr) => ({
-                    [attr.name]: {
+                    [attr.technicalName]: {
                         type: 'VALUE',
-                        value: '«' + this.translateService.instant('@pry.admin.customize.exemple', { expr: attr.name }) + '»',
+                        value: '«' + this.translateService.instant('@pry.admin.customize.exemple', { expr: attr.technicalName }) + '»',
                         visible: true
                     }
                 }))
@@ -1062,11 +1062,11 @@ class AdminClassesCustomizeTooltipComponent extends SubscriptionnerDirective {
         setTimeout(() => this.updateExample(), 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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      class=\"a-pry-select\"\n      (ngModelChange)=\"tooltipTypeChanged($event)\"\n      [ngModel]=\"currentClassConfig.type\"\n      [items]=\"possibleTooltipTypes$ | async\"\n      [itemsAsOption]=\"true\"\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  <ng-container *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      class=\"a-pry-select\"\n      (ngModelChange)=\"changeAttributes($event)\"\n      [ngModel]=\"currentClassConfig.options.attributes\"\n      [itemsAsOption]=\"true\"\n      [items]=\"possibleAttributes\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"id\"\n    ></pry-select>\n  </ng-container>\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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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  <ng-container *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]=\"possibleAttributes\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"id\"\n    ></pry-select>\n  </ng-container>\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", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminClassesCustomizeTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-customize-tooltip', 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      class=\"a-pry-select\"\n      (ngModelChange)=\"tooltipTypeChanged($event)\"\n      [ngModel]=\"currentClassConfig.type\"\n      [items]=\"possibleTooltipTypes$ | async\"\n      [itemsAsOption]=\"true\"\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  <ng-container *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      class=\"a-pry-select\"\n      (ngModelChange)=\"changeAttributes($event)\"\n      [ngModel]=\"currentClassConfig.options.attributes\"\n      [itemsAsOption]=\"true\"\n      [items]=\"possibleAttributes\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"id\"\n    ></pry-select>\n  </ng-container>\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" }]
+            args: [{ selector: 'pry-admin-classes-customize-tooltip', 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  <ng-container *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]=\"possibleAttributes\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"id\"\n    ></pry-select>\n  </ng-container>\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" }]
         }], ctorParameters: function () { return [{ type: i4.TooltipFactoryService }, { type: i0.Injector }, { type: i4.PryI18nService }, { type: i1.Store }]; }, propDecorators: { example: [{
                 type: ViewChild,
                 args: ['example', { read: ViewContainerRef }]
@@ -1201,11 +1201,11 @@ 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: "16.2.12", 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: "16.2.12", 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            [itemsAsOption]=\"true\"\n            [items]=\"sizes\"\n            [ngModel]=\"definition.iconSize[0]\"\n            [labelTranslate]=\"false\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\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            [itemsAsOption]=\"true\"\n            [items]=\"positions\"\n            [ngModel]=\"definition.position\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\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            [itemsAsOption]=\"true\"\n            [items]=\"fieldsForClass\"\n            [ngModel]=\"definition.rule.attributeName\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"name\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\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            [itemsAsOption]=\"true\"\n            [items]=\"operations\"\n            [ngModel]=\"definition.rule.operation\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminClassesCustomizeSymbolComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-customize-symbol', 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            [itemsAsOption]=\"true\"\n            [items]=\"sizes\"\n            [ngModel]=\"definition.iconSize[0]\"\n            [labelTranslate]=\"false\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\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            [itemsAsOption]=\"true\"\n            [items]=\"positions\"\n            [ngModel]=\"definition.position\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\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            [itemsAsOption]=\"true\"\n            [items]=\"fieldsForClass\"\n            [ngModel]=\"definition.rule.attributeName\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"name\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\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            [itemsAsOption]=\"true\"\n            [items]=\"operations\"\n            [ngModel]=\"definition.rule.operation\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\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" }]
+            args: [{ selector: 'pry-admin-classes-customize-symbol', 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" }]
         }], ctorParameters: function () { return [{ type: i4.PryI18nService }, { type: i1.Store }]; }, propDecorators: { backPressed: [{
                 type: Output
             }], currentClass: [{
@@ -1238,15 +1238,15 @@ class AdminClassesCustomizeComponent extends SubscriptionnerDirective {
         this.subscriptions.add(this.currentPropertiesConfig$.pipe(combineLatestWith(this.currentClass$)).subscribe(([attrs, clazz]) => {
             this.defaultAttributes = JSON.parse(JSON.stringify(attrs));
             this.otherAttributes = (clazz ?? { attributes: [] }).attributes
-                .map((attr) => attr.name)
-                .filter((name) => !attrs.includes(name));
+                .filter((attr) => !attrs.includes(attr.technicalName))
+                .map((attr) => attr.technicalName);
         }));
         this.currentTilePropertiesConfig$ = this.store.select(ConfigSelectors.tileAttributesDefinitions).pipe(combineLatestWith(this.currentClass$, this.fields$), map(([defs, clazz, fields]) => ItemUtils.getAttributesDefinitionForClass((clazz ?? { attributes: [] }), defs, fields)), map((attrs) => attrs.filter((_, i) => i < this.maxTilesAttributes)));
         this.subscriptions.add(this.currentTilePropertiesConfig$.pipe(combineLatestWith(this.currentClass$)).subscribe(([attrs, clazz]) => {
             this.defaultTileAttributes = JSON.parse(JSON.stringify(attrs));
             this.otherTileAttributes = (clazz ?? { attributes: [] }).attributes
-                .map((attr) => attr.name)
-                .filter((name) => !attrs.includes(name));
+                .filter((attr) => !attrs.includes(attr.technicalName))
+                .map((attr) => attr.technicalName);
         }));
         this.subscriptions.add(this.store.select(ConfigSelectors.maxAttributesInTiles).subscribe((max) => {
             this.maxTilesAttributes = max;
@@ -1384,11 +1384,11 @@ class AdminClassesFormComponent extends SubscriptionnerDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminClassesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminClassesFormComponent, selector: "pry-admin-classes-form", inputs: { currentClass: "currentClass" }, usesInheritance: true, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"classForm\" (ngSubmit)=\"addClass()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.classes.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      [attr.aria-labelledby]=\"isSubmitted && classForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      id=\"name\"\n      required\n      type=\"text\"\n      [attr.aria-invalid]=\"isSubmitted && classForm.get('name')?.invalid\"\n    />\n    <label\n      *ngIf=\"isSubmitted && classForm.get('name')?.invalid\"\n      id=\"name-error\"\n      for=\"name\"\n      class=\"a-label a-label--help -error\"\n    >\n      <span *ngIf=\"classForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('minlength')\">{{ '@pry.admin.minLength' | i18n : { len: 3 } }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('maxlength')\">{{\n        '@pry.admin.maxLength' | i18n : { len: 100 }\n      }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('whitespace')\">{{ '@pry.admin.noWhitespace' | i18n }}</span>\n    </label>\n  </div>\n  <div class=\"u-display-flex -row -no-gap -align-center\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"storage_options\">\n        {{ '@pry.admin.storage.label' | i18n }}\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        [items]=\"storageOptions$ | async\"\n        [labelTranslate]=\"true\"\n        baseTranslate=\"@pry.admin.storage.options.\"\n        [bindData]=\"true\"\n        [itemsAsOption]=\"true\"\n        formControlName=\"storage\"\n        class=\"a-pry-select\"\n        id=\"storage_options\"\n        [readonly]=\"!!_currentClass\"\n      ></pry-select>\n    </div>\n    <div class=\"info-icon description-container description\">\n      <span class=\"info-text\">i</span>\n    </div>\n    <div class=\"description-tooltip info-tooltip\">\n      <p class=\"a-p -date\">\n        {{ '@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n }}\n      </p>\n    </div>\n  </div>\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]=\"(_currentClass ? '@pry.admin.edit' : '@pry.admin.next') | i18n\"\n    ></button>\n  </div>\n</form>\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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminClassesFormComponent, selector: "pry-admin-classes-form", inputs: { currentClass: "currentClass" }, usesInheritance: true, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"classForm\" (ngSubmit)=\"addClass()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.classes.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      [attr.aria-labelledby]=\"isSubmitted && classForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      id=\"name\"\n      required\n      type=\"text\"\n      [attr.aria-invalid]=\"isSubmitted && classForm.get('name')?.invalid\"\n    />\n    <label\n      *ngIf=\"isSubmitted && classForm.get('name')?.invalid\"\n      id=\"name-error\"\n      for=\"name\"\n      class=\"a-label a-label--help -error\"\n    >\n      <span *ngIf=\"classForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('minlength')\">{{ '@pry.admin.minLength' | i18n : { len: 3 } }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('maxlength')\">{{\n        '@pry.admin.maxLength' | i18n : { len: 100 }\n      }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('whitespace')\">{{ '@pry.admin.noWhitespace' | i18n }}</span>\n    </label>\n  </div>\n  <div class=\"u-display-flex -row -no-gap -align-center\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"storage_options\">\n        {{ '@pry.admin.storage.label' | i18n }}\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        [items]=\"storageOptions$ | async\"\n        i18nPrefix=\"@pry.admin.storage.options.\"\n        formControlName=\"storage\"\n        id=\"storage_options\"\n        [readonly]=\"!!_currentClass\"\n      ></pry-select>\n    </div>\n    <div class=\"info-icon description-container description\">\n      <span class=\"info-text\">i</span>\n    </div>\n    <div class=\"description-tooltip info-tooltip\">\n      <p class=\"a-p -date\">\n        {{ '@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n }}\n      </p>\n    </div>\n  </div>\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]=\"(_currentClass ? '@pry.admin.edit' : '@pry.admin.next') | i18n\"\n    ></button>\n  </div>\n</form>\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", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminClassesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-form', template: "<form class=\"o-form\" [formGroup]=\"classForm\" (ngSubmit)=\"addClass()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.classes.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      [attr.aria-labelledby]=\"isSubmitted && classForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      id=\"name\"\n      required\n      type=\"text\"\n      [attr.aria-invalid]=\"isSubmitted && classForm.get('name')?.invalid\"\n    />\n    <label\n      *ngIf=\"isSubmitted && classForm.get('name')?.invalid\"\n      id=\"name-error\"\n      for=\"name\"\n      class=\"a-label a-label--help -error\"\n    >\n      <span *ngIf=\"classForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('minlength')\">{{ '@pry.admin.minLength' | i18n : { len: 3 } }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('maxlength')\">{{\n        '@pry.admin.maxLength' | i18n : { len: 100 }\n      }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('whitespace')\">{{ '@pry.admin.noWhitespace' | i18n }}</span>\n    </label>\n  </div>\n  <div class=\"u-display-flex -row -no-gap -align-center\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"storage_options\">\n        {{ '@pry.admin.storage.label' | i18n }}\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        [items]=\"storageOptions$ | async\"\n        [labelTranslate]=\"true\"\n        baseTranslate=\"@pry.admin.storage.options.\"\n        [bindData]=\"true\"\n        [itemsAsOption]=\"true\"\n        formControlName=\"storage\"\n        class=\"a-pry-select\"\n        id=\"storage_options\"\n        [readonly]=\"!!_currentClass\"\n      ></pry-select>\n    </div>\n    <div class=\"info-icon description-container description\">\n      <span class=\"info-text\">i</span>\n    </div>\n    <div class=\"description-tooltip info-tooltip\">\n      <p class=\"a-p -date\">\n        {{ '@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n }}\n      </p>\n    </div>\n  </div>\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]=\"(_currentClass ? '@pry.admin.edit' : '@pry.admin.next') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'pry-admin-classes-form', template: "<form class=\"o-form\" [formGroup]=\"classForm\" (ngSubmit)=\"addClass()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.classes.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      [attr.aria-labelledby]=\"isSubmitted && classForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      id=\"name\"\n      required\n      type=\"text\"\n      [attr.aria-invalid]=\"isSubmitted && classForm.get('name')?.invalid\"\n    />\n    <label\n      *ngIf=\"isSubmitted && classForm.get('name')?.invalid\"\n      id=\"name-error\"\n      for=\"name\"\n      class=\"a-label a-label--help -error\"\n    >\n      <span *ngIf=\"classForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('minlength')\">{{ '@pry.admin.minLength' | i18n : { len: 3 } }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('maxlength')\">{{\n        '@pry.admin.maxLength' | i18n : { len: 100 }\n      }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('whitespace')\">{{ '@pry.admin.noWhitespace' | i18n }}</span>\n    </label>\n  </div>\n  <div class=\"u-display-flex -row -no-gap -align-center\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"storage_options\">\n        {{ '@pry.admin.storage.label' | i18n }}\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        [items]=\"storageOptions$ | async\"\n        i18nPrefix=\"@pry.admin.storage.options.\"\n        formControlName=\"storage\"\n        id=\"storage_options\"\n        [readonly]=\"!!_currentClass\"\n      ></pry-select>\n    </div>\n    <div class=\"info-icon description-container description\">\n      <span class=\"info-text\">i</span>\n    </div>\n    <div class=\"description-tooltip info-tooltip\">\n      <p class=\"a-p -date\">\n        {{ '@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n }}\n      </p>\n    </div>\n  </div>\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]=\"(_currentClass ? '@pry.admin.edit' : '@pry.admin.next') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }]; }, propDecorators: { currentClass: [{
                 type: Input
             }] } });
@@ -1430,8 +1430,9 @@ class AdminAttributesFormComponent {
         this.viewContainerRef = viewContainerRef;
         this.i18nService = i18nService;
         this.sub = new Subscription();
-        this.fieldTypeDescription = FIELD_OPTIONS;
         this.nameAlreadyExists = false;
+        this.technicalNameAlreadyExists = false;
+        this.fieldTypeDescription = FIELD_OPTIONS;
         this.isShowedCategory = false;
         this.catToAdd = {};
         this.filterCategories$ = new BehaviorSubject(undefined);
@@ -1441,7 +1442,11 @@ class AdminAttributesFormComponent {
         this.categories$ = combineLatest([this.store.select(CategorySelectors.categories), this.filterCategories$]).pipe(map(([categories, filter]) => categories.filter((cat) => !filter || cat.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))));
         this.attrForm = this.formBuilder.group({
             id: [v4()],
-            name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(100), noWhitespaceValidator]],
+            technicalName: [
+                '',
+                [Validators.required, Validators.minLength(2), Validators.maxLength(100), noWhitespaceValidator]
+            ],
+            name: ['', [Validators.maxLength(50), noWhitespaceValidator]],
             description: [{ value: '', disabled: true }],
             field: ['', [Validators.required]],
             category: [DEFAULT_CATEGORY_UUID],
@@ -1450,12 +1455,15 @@ class AdminAttributesFormComponent {
     }
     ngOnInit() {
         this.attributeNames = this.interClass?.attributes.map((attr) => attr.name);
+        this.attributeTechnicalNames = this.interClass?.attributes.map((attr) => attr.technicalName);
         if (this.selectedClass) {
             this.attributeNames = this.selectedClass.attributes.map((attr) => attr.name);
+            this.attributeTechnicalNames = this.selectedClass.attributes.map((attr) => attr.technicalName);
             if (this.selectedAttribute) {
                 this.attrForm.patchValue({
                     id: this.selectedAttribute.id,
-                    name: this.selectedAttribute.name,
+                    technicalName: this.selectedAttribute.technicalName,
+                    name: this.selectedAttribute.name ?? this.selectedAttribute.technicalName,
                     field: this.selectedAttribute.field,
                     category: this.selectedAttribute.category
                 });
@@ -1463,12 +1471,29 @@ class AdminAttributesFormComponent {
             }
         }
         if (this.attributeNames) {
-            this.nameAlreadyExists$ = combineLatest([
-                this.attrForm.get('name')?.valueChanges,
-                of(this.attributeNames)
-            ]).pipe(map(([value, attributeNames]) => attributeNames.includes(value) && value != this.selectedAttribute?.name));
+            this.nameAlreadyExists$ = this.attrForm
+                .get('name')
+                .valueChanges.pipe(map((value) => !!this.attributeNames?.includes(value) && value != this.selectedAttribute?.name));
             this.sub.add(this.nameAlreadyExists$.subscribe((value) => (this.nameAlreadyExists = value)));
         }
+        this.attrForm
+            .get('technicalName')
+            .valueChanges.pipe(distinctUntilChanged$1(), debounceTime(500))
+            .subscribe((value) => {
+            if (!this.attrForm.get('name')?.value) {
+                this.attrForm.patchValue({
+                    name: value.slice(0, 50)
+                });
+            }
+        });
+        if (this.attributeTechnicalNames) {
+            this.technicalNameAlreadyExists$ = this.attrForm
+                .get('technicalName')
+                .valueChanges.pipe(map((value) => !!this.attributeTechnicalNames?.includes(value) && value != this.selectedAttribute?.technicalName));
+            this.sub.add(this.technicalNameAlreadyExists$.subscribe((value) => {
+                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);
@@ -1488,6 +1513,11 @@ class AdminAttributesFormComponent {
         this.attrForm.patchValue({
             name: this.attrForm.value.name.trim()
         });
+        if (!this.attrForm.value.name) {
+            this.attrForm.patchValue({
+                name: this.attrForm.value.technicalName.slice(0, 50)
+            });
+        }
         if (this.attrForm.valid) {
             let attrToSave = this.attrForm.getRawValue();
             let path = this.router.createUrlTree(['..'], { relativeTo: this.route });
@@ -1503,7 +1533,7 @@ class AdminAttributesFormComponent {
             }
             else if (this.interClass) {
                 let interAttribute = Object.assign([], this.interClass.attributes);
-                let interClassUpdated = Object.assign({}, this.interClass);
+                let interClassUpdated = { ...this.interClass };
                 interAttribute.push(attrToSave);
                 interClassUpdated.attributes = interAttribute;
                 this.store.dispatch(AdminClassActions.saveInterClass({ class: interClassUpdated, route: path.toString() }));
@@ -1543,11 +1573,11 @@ class AdminAttributesFormComponent {
         this.closeCategory();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminAttributesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i5.Overlay }, { token: i0.ViewContainerRef }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], 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_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" required />\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('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\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: 100 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace') && !attrForm.get('name')?.hasError('minlength')\">\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=\"title-container\">\n      <pry-select\n        id=\"type\"\n        class=\"a-pry-select\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [itemsAsOption]=\"true\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [templateLabel]=\"templateOption\"\n        [templateOption]=\"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-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"selectedFieldTypeDescription$ | async as description\">\n        <div class=\"info-icon description-container description\">\n          <span class=\"info-text\">i</span>\n        </div>\n        <div class=\"description-tooltip title-tooltip\">\n          <p class=\"a-p -date\">{{ description }}</p>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"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      [labelTranslate]=\"true\"\n      [items]=\"categories$ | async\"\n      (click)=\"showCategory()\"\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\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scole=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\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: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["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: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], 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=\"title-container\">\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-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"selectedFieldTypeDescription$ | async as description\">\n        <div class=\"info-icon description-container description\">\n          <span class=\"info-text\">i</span>\n        </div>\n        <div class=\"description-tooltip title-tooltip\">\n          <p class=\"a-p -date\">{{ description }}</p>\n        </div>\n      </ng-container>\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)=\"showCategory()\"\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\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scole=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\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: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["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: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" required />\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('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\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: 100 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace') && !attrForm.get('name')?.hasError('minlength')\">\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=\"title-container\">\n      <pry-select\n        id=\"type\"\n        class=\"a-pry-select\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [itemsAsOption]=\"true\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [templateLabel]=\"templateOption\"\n        [templateOption]=\"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-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"selectedFieldTypeDescription$ | async as description\">\n        <div class=\"info-icon description-container description\">\n          <span class=\"info-text\">i</span>\n        </div>\n        <div class=\"description-tooltip title-tooltip\">\n          <p class=\"a-p -date\">{{ description }}</p>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"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      [labelTranslate]=\"true\"\n      [items]=\"categories$ | async\"\n      (click)=\"showCategory()\"\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\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scole=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\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\" *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=\"title-container\">\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-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"selectedFieldTypeDescription$ | async as description\">\n        <div class=\"info-icon description-container description\">\n          <span class=\"info-text\">i</span>\n        </div>\n        <div class=\"description-tooltip title-tooltip\">\n          <p class=\"a-p -date\">{{ description }}</p>\n        </div>\n      </ng-container>\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)=\"showCategory()\"\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\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scole=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i5.Overlay }, { type: i0.ViewContainerRef }, { type: i4.PryI18nService }]; }, propDecorators: { selectedClass: [{
                 type: Input
             }], interClass: [{
@@ -1761,11 +1791,11 @@ class AdminClassesViewComponent {
         this.dispatchCloseModal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminClassesViewComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i5.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminClassesViewComponent, selector: "pry-admin-classes-view", viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"(selectedclass$ | async) || (interClass$ | async) as selectedClass\">\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">\n      {{ '@pry.admin.classes.title' | i18n: { class: selectedClass.name } }}\n    </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.classes.title' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</th>\n          <th prySortHeader=\"field\">{{ '@pry.admin.classes.attributes.field' | i18n }}</th>\n          <th prySortHeader=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let attr of attributesExtended$ | async | prySortData: sortActive : sortDirection\"\n          (click)=\"selectAttr(attr)\"\n          [class.is-selected]=\"(selectedAttributeId$ | async) === attr.id\"\n        >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-attr-' + attr.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedAttributeId$ | async) === attr.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-attr-' + attr.id\"\n            >\n              <span class=\"u-visually-hidden\">{{ attr.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ attr.name }}</td>\n          <td>{{ attr.fieldName }}</td>\n          <td>{{ attr.categoryName }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-container>\n\n<ng-template #confirmationModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.createClassConfirmMessage' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"dispatchCloseModal()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"saveClass()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"dispatchCloseModal()\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\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.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: "14.0.0", version: "16.2.12", type: AdminClassesViewComponent, selector: "pry-admin-classes-view", viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"(selectedclass$ | async) || (interClass$ | async) as selectedClass\">\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">\n      {{ '@pry.admin.classes.title' | i18n : { class: selectedClass.name } }}\n    </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.classes.title' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</th>\n          <th prySortHeader=\"field\">{{ '@pry.admin.classes.attributes.field' | i18n }}</th>\n          <th prySortHeader=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let attr of attributesExtended$ | async | prySortData : sortActive : sortDirection\"\n          (click)=\"selectAttr(attr)\"\n          [class.is-selected]=\"(selectedAttributeId$ | async) === attr.id\"\n        >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-attr-' + attr.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedAttributeId$ | async) === attr.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-attr-' + attr.id\"\n            >\n              <span class=\"u-visually-hidden\">{{ attr.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ attr.technicalName }}</td>\n          <td>{{ attr.name }}</td>\n          <td>{{ attr.fieldName }}</td>\n          <td>{{ attr.categoryName }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-container>\n\n<ng-template #confirmationModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.createClassConfirmMessage' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"dispatchCloseModal()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"saveClass()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"dispatchCloseModal()\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\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.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: "16.2.12", ngImport: i0, type: AdminClassesViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-view', template: "<ng-container *ngIf=\"(selectedclass$ | async) || (interClass$ | async) as selectedClass\">\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">\n      {{ '@pry.admin.classes.title' | i18n: { class: selectedClass.name } }}\n    </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.classes.title' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</th>\n          <th prySortHeader=\"field\">{{ '@pry.admin.classes.attributes.field' | i18n }}</th>\n          <th prySortHeader=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let attr of attributesExtended$ | async | prySortData: sortActive : sortDirection\"\n          (click)=\"selectAttr(attr)\"\n          [class.is-selected]=\"(selectedAttributeId$ | async) === attr.id\"\n        >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-attr-' + attr.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedAttributeId$ | async) === attr.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-attr-' + attr.id\"\n            >\n              <span class=\"u-visually-hidden\">{{ attr.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ attr.name }}</td>\n          <td>{{ attr.fieldName }}</td>\n          <td>{{ attr.categoryName }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-container>\n\n<ng-template #confirmationModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.createClassConfirmMessage' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"dispatchCloseModal()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"saveClass()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"dispatchCloseModal()\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-admin-classes-view', template: "<ng-container *ngIf=\"(selectedclass$ | async) || (interClass$ | async) as selectedClass\">\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">\n      {{ '@pry.admin.classes.title' | i18n : { class: selectedClass.name } }}\n    </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.classes.title' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</th>\n          <th prySortHeader=\"field\">{{ '@pry.admin.classes.attributes.field' | i18n }}</th>\n          <th prySortHeader=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let attr of attributesExtended$ | async | prySortData : sortActive : sortDirection\"\n          (click)=\"selectAttr(attr)\"\n          [class.is-selected]=\"(selectedAttributeId$ | async) === attr.id\"\n        >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-attr-' + attr.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedAttributeId$ | async) === attr.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-attr-' + attr.id\"\n            >\n              <span class=\"u-visually-hidden\">{{ attr.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ attr.technicalName }}</td>\n          <td>{{ attr.name }}</td>\n          <td>{{ attr.fieldName }}</td>\n          <td>{{ attr.categoryName }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-container>\n\n<ng-template #confirmationModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.createClassConfirmMessage' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"dispatchCloseModal()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"saveClass()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"dispatchCloseModal()\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i5.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { confirmationModal: [{
                 type: ViewChild,
                 args: ['confirmationModal', { read: TemplateRef }]
@@ -1979,11 +2009,11 @@ class AdminFormDatasetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminFormDatasetComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminFormDatasetComponent, selector: "pry-admin-form-dataset", inputs: { dataset$: "dataset$" }, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.dataset.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      id=\"name\"\n      type=\"text\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      (ngModelChange)=\"changeValueName($event)\"\n      [attr.aria-labelledby]=\"isSubmitted && form.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      [attr.aria-invalid]=\"isSubmitted && form.get('name')?.invalid\"\n      required\n    />\n    <label\n      class=\"a-label a-label--help -error\"\n      id=\"name-error\"\n      for=\"name\"\n      *ngIf=\"isSubmitted && form.get('name')?.invalid\"\n      >{{ '@pry.admin.required' | i18n }}</label\n    >\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"description-label\" for=\"description\">{{ '@pry.admin.fields.description' | i18n }}</label>\n    <textarea\n      class=\"-resizable-both\"\n      formControlName=\"description\"\n      name=\"description\"\n      id=\"description\"\n      maxlength=\"500\"\n    ></textarea>\n    <label\n      for=\"description\"\n      *ngIf=\"form.get('description')?.hasError('maxlength')\"\n      class=\"a-label a-label--help -error\"\n    >\n      {{ '@pry.presentation.maxLength' | i18n : { len: '500' } }}\n    </label>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"class\">{{ '@pry.admin.dataset.oClass' | i18n }}</label>\n    <pry-select\n      class=\"a-pry-select\"\n      id=\"class\"\n      formControlName=\"oClass\"\n      [items]=\"classes | async\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      aria-labelledby=\"item-label\"\n      [readonly]=\"dataset$ ? true : false\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"type\">{{ '@pry.admin.dataset.type' | i18n }}</label>\n    <pry-select\n      class=\"a-pry-select\"\n      id=\"type\"\n      formControlName=\"type\"\n      [items]=\"datasetTypes\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n      [isForm]=\"true\"\n      [labelTranslate]=\"true\"\n      aria-labelledby=\"user-label\"\n      [readonly]=\"dataset$ ? true : false\"\n    ></pry-select>\n  </div>\n\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameName\">{{ '@pry.admin.dataset.is-same-name' | i18n }}</label>\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]=\"(dataset$ ? '@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: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminFormDatasetComponent, selector: "pry-admin-form-dataset", inputs: { dataset$: "dataset$" }, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.dataset.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      id=\"name\"\n      type=\"text\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      (ngModelChange)=\"changeValueName($event)\"\n      [attr.aria-labelledby]=\"isSubmitted && form.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      [attr.aria-invalid]=\"isSubmitted && form.get('name')?.invalid\"\n      required\n    />\n    <label\n      class=\"a-label a-label--help -error\"\n      id=\"name-error\"\n      for=\"name\"\n      *ngIf=\"isSubmitted && form.get('name')?.invalid\"\n      >{{ '@pry.admin.required' | i18n }}</label\n    >\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"description-label\" for=\"description\">{{ '@pry.admin.fields.description' | i18n }}</label>\n    <textarea\n      class=\"-resizable-both\"\n      formControlName=\"description\"\n      name=\"description\"\n      id=\"description\"\n      maxlength=\"500\"\n    ></textarea>\n    <label\n      for=\"description\"\n      *ngIf=\"form.get('description')?.hasError('maxlength')\"\n      class=\"a-label a-label--help -error\"\n    >\n      {{ '@pry.presentation.maxLength' | i18n : { len: '500' } }}\n    </label>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"class\">{{ '@pry.admin.dataset.oClass' | i18n }}</label>\n    <pry-select\n      id=\"class\"\n      formControlName=\"oClass\"\n      [items]=\"classes | async\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      aria-labelledby=\"item-label\"\n      [readonly]=\"!!dataset$\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"type\">{{ '@pry.admin.dataset.type' | i18n }}</label>\n    <pry-select\n      id=\"type\"\n      formControlName=\"type\"\n      [items]=\"datasetTypes\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n      [isForm]=\"true\"\n      aria-labelledby=\"user-label\"\n      [readonly]=\"!!dataset$\"\n    ></pry-select>\n  </div>\n\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameName\">{{ '@pry.admin.dataset.is-same-name' | i18n }}</label>\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]=\"(dataset$ ? '@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: 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminFormDatasetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-form-dataset', template: "<form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.dataset.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      id=\"name\"\n      type=\"text\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      (ngModelChange)=\"changeValueName($event)\"\n      [attr.aria-labelledby]=\"isSubmitted && form.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      [attr.aria-invalid]=\"isSubmitted && form.get('name')?.invalid\"\n      required\n    />\n    <label\n      class=\"a-label a-label--help -error\"\n      id=\"name-error\"\n      for=\"name\"\n      *ngIf=\"isSubmitted && form.get('name')?.invalid\"\n      >{{ '@pry.admin.required' | i18n }}</label\n    >\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"description-label\" for=\"description\">{{ '@pry.admin.fields.description' | i18n }}</label>\n    <textarea\n      class=\"-resizable-both\"\n      formControlName=\"description\"\n      name=\"description\"\n      id=\"description\"\n      maxlength=\"500\"\n    ></textarea>\n    <label\n      for=\"description\"\n      *ngIf=\"form.get('description')?.hasError('maxlength')\"\n      class=\"a-label a-label--help -error\"\n    >\n      {{ '@pry.presentation.maxLength' | i18n : { len: '500' } }}\n    </label>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"class\">{{ '@pry.admin.dataset.oClass' | i18n }}</label>\n    <pry-select\n      class=\"a-pry-select\"\n      id=\"class\"\n      formControlName=\"oClass\"\n      [items]=\"classes | async\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      aria-labelledby=\"item-label\"\n      [readonly]=\"dataset$ ? true : false\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"type\">{{ '@pry.admin.dataset.type' | i18n }}</label>\n    <pry-select\n      class=\"a-pry-select\"\n      id=\"type\"\n      formControlName=\"type\"\n      [items]=\"datasetTypes\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n      [isForm]=\"true\"\n      [labelTranslate]=\"true\"\n      aria-labelledby=\"user-label\"\n      [readonly]=\"dataset$ ? true : false\"\n    ></pry-select>\n  </div>\n\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameName\">{{ '@pry.admin.dataset.is-same-name' | i18n }}</label>\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]=\"(dataset$ ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'pry-admin-form-dataset', template: "<form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.dataset.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      id=\"name\"\n      type=\"text\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      (ngModelChange)=\"changeValueName($event)\"\n      [attr.aria-labelledby]=\"isSubmitted && form.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      [attr.aria-invalid]=\"isSubmitted && form.get('name')?.invalid\"\n      required\n    />\n    <label\n      class=\"a-label a-label--help -error\"\n      id=\"name-error\"\n      for=\"name\"\n      *ngIf=\"isSubmitted && form.get('name')?.invalid\"\n      >{{ '@pry.admin.required' | i18n }}</label\n    >\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"description-label\" for=\"description\">{{ '@pry.admin.fields.description' | i18n }}</label>\n    <textarea\n      class=\"-resizable-both\"\n      formControlName=\"description\"\n      name=\"description\"\n      id=\"description\"\n      maxlength=\"500\"\n    ></textarea>\n    <label\n      for=\"description\"\n      *ngIf=\"form.get('description')?.hasError('maxlength')\"\n      class=\"a-label a-label--help -error\"\n    >\n      {{ '@pry.presentation.maxLength' | i18n : { len: '500' } }}\n    </label>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"class\">{{ '@pry.admin.dataset.oClass' | i18n }}</label>\n    <pry-select\n      id=\"class\"\n      formControlName=\"oClass\"\n      [items]=\"classes | async\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      aria-labelledby=\"item-label\"\n      [readonly]=\"!!dataset$\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"type\">{{ '@pry.admin.dataset.type' | i18n }}</label>\n    <pry-select\n      id=\"type\"\n      formControlName=\"type\"\n      [items]=\"datasetTypes\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n      [isForm]=\"true\"\n      aria-labelledby=\"user-label\"\n      [readonly]=\"!!dataset$\"\n    ></pry-select>\n  </div>\n\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameName\">{{ '@pry.admin.dataset.is-same-name' | i18n }}</label>\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]=\"(dataset$ ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }]; }, propDecorators: { dataset$: [{
                 type: Input
             }] } });
@@ -2187,11 +2217,11 @@ class AdminEnvironmentFormComponent {
         return path.toString();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminEnvironmentFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminEnvironmentFormComponent, selector: "pry-admin-environment-form", inputs: { currentEnv: "currentEnv" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-base-container\">\n  <form class=\"o-form\" [formGroup]=\"envForm\" (ngSubmit)=\"addEnvironment()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label for=\"environment_name\" id=\"name-label\" class=\"a-label\">\n        {{ '@pry.admin.environment.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"environment_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [required]=\"!_currentEnv\"\n        [attr.aria-labelledby]=\"isSubmitted && envForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && envForm.get('name')?.invalid\"\n      />\n      <label\n        *ngIf=\"isSubmitted && envForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"environment_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"envForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"envForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"envForm.get('name')?.hasError('pattern')\">{{ '@pry.admin.environment.formatName' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"environment-type\">{{ '@pry.admin.environment.type' | i18n }}</label>\n      <pry-select\n        id=\"environment-type\"\n        class=\"a-pry-select\"\n        formControlName=\"type\"\n        [labelTranslate]=\"true\"\n        [items]=\"envOptions\"\n        [itemsAsOption]=\"true\"\n        bindValue=\"varType\"\n        bindLabel=\"translation\"\n        (ngModelChange)=\"onTypeChange($event)\"\n        [readonly]=\"!!_currentEnv\"\n        [isForm]=\"true\"\n      ></pry-select>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <ng-container *ngIf=\"envForm.value.type === 'DATE'; else inputText\">\n        <label class=\"a-label\" for=\"value_date\">\n          {{ '@pry.admin.environment.value' | i18n }} *\n          <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n        </label>\n        <input type=\"date\" id=\"value_date\" class=\"a-form-field\" formControlName=\"value\" required />\n        <label\n          *ngIf=\"isSubmitted && envForm.get('value')?.invalid && envForm.get('value')?.hasError('required')\"\n          id=\"value_date_error\"\n          for=\"value_date\"\n          class=\"a-label a-label--help -error\"\n        >\n          {{ '@pry.admin.required' | i18n }}\n        </label>\n      </ng-container>\n\n      <ng-template #inputText>\n        <label id=\"value-label\" class=\"a-label\">{{ '@pry.admin.environment.value' | i18n }}</label>\n        <input\n          id=\"environment_value\"\n          type=\"text\"\n          class=\"a-form-field\"\n          formControlName=\"value\"\n          [attr.aria-labelledby]=\"\n            isSubmitted && envForm.get('value')?.invalid ? 'value-label value-error' : 'value-label'\n          \"\n          [attr.aria-invalid]=\"isSubmitted && envForm.get('value')?.invalid\"\n          required\n        />\n        <label\n          *ngIf=\"isSubmitted && envForm.get('value')?.invalid\"\n          id=\"value-error\"\n          for=\"environment_value\"\n          class=\"a-label a-label--help -error\"\n        >\n          <span *ngIf=\"envForm.get('value')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n          <ng-container *ngIf=\"envForm.get('value')?.hasError('pattern')\">\n            <span *ngIf=\"envForm.value.type === 'DOUBLE'\">{{ '@pry.admin.environment.formatDouble' | i18n }}</span>\n            <span *ngIf=\"envForm.value.type === 'INTEGER'\">{{ '@pry.admin.environment.formatInt' | i18n }}</span>\n          </ng-container>\n        </label>\n      </ng-template>\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=\"predicate-create a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(_currentEnv ? '@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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminEnvironmentFormComponent, selector: "pry-admin-environment-form", inputs: { currentEnv: "currentEnv" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"o-base-container\">\n  <form class=\"o-form\" [formGroup]=\"envForm\" (ngSubmit)=\"addEnvironment()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label for=\"environment_name\" id=\"name-label\" class=\"a-label\">\n        {{ '@pry.admin.environment.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"environment_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [required]=\"!_currentEnv\"\n        [attr.aria-labelledby]=\"isSubmitted && envForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && envForm.get('name')?.invalid\"\n      />\n      <label\n        *ngIf=\"isSubmitted && envForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"environment_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"envForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"envForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"envForm.get('name')?.hasError('pattern')\">{{ '@pry.admin.environment.formatName' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"environment-type\">{{ '@pry.admin.environment.type' | i18n }}</label>\n      <pry-select\n        id=\"environment-type\"\n        formControlName=\"type\"\n        [items]=\"envOptions\"\n        bindValue=\"varType\"\n        bindLabel=\"translation\"\n        (ngModelChange)=\"onTypeChange($event)\"\n        [readonly]=\"!!_currentEnv\"\n        [isForm]=\"true\"\n      ></pry-select>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <ng-container *ngIf=\"envForm.value.type === 'DATE'; else inputText\">\n        <label class=\"a-label\" for=\"value_date\">\n          {{ '@pry.admin.environment.value' | i18n }} *\n          <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n        </label>\n        <input type=\"date\" id=\"value_date\" class=\"a-form-field\" formControlName=\"value\" required />\n        <label\n          *ngIf=\"isSubmitted && envForm.get('value')?.invalid && envForm.get('value')?.hasError('required')\"\n          id=\"value_date_error\"\n          for=\"value_date\"\n          class=\"a-label a-label--help -error\"\n        >\n          {{ '@pry.admin.required' | i18n }}\n        </label>\n      </ng-container>\n\n      <ng-template #inputText>\n        <label id=\"value-label\" class=\"a-label\">{{ '@pry.admin.environment.value' | i18n }}</label>\n        <input\n          id=\"environment_value\"\n          type=\"text\"\n          class=\"a-form-field\"\n          formControlName=\"value\"\n          [attr.aria-labelledby]=\"\n            isSubmitted && envForm.get('value')?.invalid ? 'value-label value-error' : 'value-label'\n          \"\n          [attr.aria-invalid]=\"isSubmitted && envForm.get('value')?.invalid\"\n          required\n        />\n        <label\n          *ngIf=\"isSubmitted && envForm.get('value')?.invalid\"\n          id=\"value-error\"\n          for=\"environment_value\"\n          class=\"a-label a-label--help -error\"\n        >\n          <span *ngIf=\"envForm.get('value')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n          <ng-container *ngIf=\"envForm.get('value')?.hasError('pattern')\">\n            <span *ngIf=\"envForm.value.type === 'DOUBLE'\">{{ '@pry.admin.environment.formatDouble' | i18n }}</span>\n            <span *ngIf=\"envForm.value.type === 'INTEGER'\">{{ '@pry.admin.environment.formatInt' | i18n }}</span>\n          </ng-container>\n        </label>\n      </ng-template>\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=\"predicate-create a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(_currentEnv ? '@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", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminEnvironmentFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-environment-form', template: "<div class=\"o-base-container\">\n  <form class=\"o-form\" [formGroup]=\"envForm\" (ngSubmit)=\"addEnvironment()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label for=\"environment_name\" id=\"name-label\" class=\"a-label\">\n        {{ '@pry.admin.environment.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"environment_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [required]=\"!_currentEnv\"\n        [attr.aria-labelledby]=\"isSubmitted && envForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && envForm.get('name')?.invalid\"\n      />\n      <label\n        *ngIf=\"isSubmitted && envForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"environment_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"envForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"envForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"envForm.get('name')?.hasError('pattern')\">{{ '@pry.admin.environment.formatName' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"environment-type\">{{ '@pry.admin.environment.type' | i18n }}</label>\n      <pry-select\n        id=\"environment-type\"\n        class=\"a-pry-select\"\n        formControlName=\"type\"\n        [labelTranslate]=\"true\"\n        [items]=\"envOptions\"\n        [itemsAsOption]=\"true\"\n        bindValue=\"varType\"\n        bindLabel=\"translation\"\n        (ngModelChange)=\"onTypeChange($event)\"\n        [readonly]=\"!!_currentEnv\"\n        [isForm]=\"true\"\n      ></pry-select>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <ng-container *ngIf=\"envForm.value.type === 'DATE'; else inputText\">\n        <label class=\"a-label\" for=\"value_date\">\n          {{ '@pry.admin.environment.value' | i18n }} *\n          <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n        </label>\n        <input type=\"date\" id=\"value_date\" class=\"a-form-field\" formControlName=\"value\" required />\n        <label\n          *ngIf=\"isSubmitted && envForm.get('value')?.invalid && envForm.get('value')?.hasError('required')\"\n          id=\"value_date_error\"\n          for=\"value_date\"\n          class=\"a-label a-label--help -error\"\n        >\n          {{ '@pry.admin.required' | i18n }}\n        </label>\n      </ng-container>\n\n      <ng-template #inputText>\n        <label id=\"value-label\" class=\"a-label\">{{ '@pry.admin.environment.value' | i18n }}</label>\n        <input\n          id=\"environment_value\"\n          type=\"text\"\n          class=\"a-form-field\"\n          formControlName=\"value\"\n          [attr.aria-labelledby]=\"\n            isSubmitted && envForm.get('value')?.invalid ? 'value-label value-error' : 'value-label'\n          \"\n          [attr.aria-invalid]=\"isSubmitted && envForm.get('value')?.invalid\"\n          required\n        />\n        <label\n          *ngIf=\"isSubmitted && envForm.get('value')?.invalid\"\n          id=\"value-error\"\n          for=\"environment_value\"\n          class=\"a-label a-label--help -error\"\n        >\n          <span *ngIf=\"envForm.get('value')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n          <ng-container *ngIf=\"envForm.get('value')?.hasError('pattern')\">\n            <span *ngIf=\"envForm.value.type === 'DOUBLE'\">{{ '@pry.admin.environment.formatDouble' | i18n }}</span>\n            <span *ngIf=\"envForm.value.type === 'INTEGER'\">{{ '@pry.admin.environment.formatInt' | i18n }}</span>\n          </ng-container>\n        </label>\n      </ng-template>\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=\"predicate-create a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(_currentEnv ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-environment-form', template: "<div class=\"o-base-container\">\n  <form class=\"o-form\" [formGroup]=\"envForm\" (ngSubmit)=\"addEnvironment()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label for=\"environment_name\" id=\"name-label\" class=\"a-label\">\n        {{ '@pry.admin.environment.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"environment_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [required]=\"!_currentEnv\"\n        [attr.aria-labelledby]=\"isSubmitted && envForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && envForm.get('name')?.invalid\"\n      />\n      <label\n        *ngIf=\"isSubmitted && envForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"environment_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"envForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"envForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"envForm.get('name')?.hasError('pattern')\">{{ '@pry.admin.environment.formatName' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"environment-type\">{{ '@pry.admin.environment.type' | i18n }}</label>\n      <pry-select\n        id=\"environment-type\"\n        formControlName=\"type\"\n        [items]=\"envOptions\"\n        bindValue=\"varType\"\n        bindLabel=\"translation\"\n        (ngModelChange)=\"onTypeChange($event)\"\n        [readonly]=\"!!_currentEnv\"\n        [isForm]=\"true\"\n      ></pry-select>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <ng-container *ngIf=\"envForm.value.type === 'DATE'; else inputText\">\n        <label class=\"a-label\" for=\"value_date\">\n          {{ '@pry.admin.environment.value' | i18n }} *\n          <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n        </label>\n        <input type=\"date\" id=\"value_date\" class=\"a-form-field\" formControlName=\"value\" required />\n        <label\n          *ngIf=\"isSubmitted && envForm.get('value')?.invalid && envForm.get('value')?.hasError('required')\"\n          id=\"value_date_error\"\n          for=\"value_date\"\n          class=\"a-label a-label--help -error\"\n        >\n          {{ '@pry.admin.required' | i18n }}\n        </label>\n      </ng-container>\n\n      <ng-template #inputText>\n        <label id=\"value-label\" class=\"a-label\">{{ '@pry.admin.environment.value' | i18n }}</label>\n        <input\n          id=\"environment_value\"\n          type=\"text\"\n          class=\"a-form-field\"\n          formControlName=\"value\"\n          [attr.aria-labelledby]=\"\n            isSubmitted && envForm.get('value')?.invalid ? 'value-label value-error' : 'value-label'\n          \"\n          [attr.aria-invalid]=\"isSubmitted && envForm.get('value')?.invalid\"\n          required\n        />\n        <label\n          *ngIf=\"isSubmitted && envForm.get('value')?.invalid\"\n          id=\"value-error\"\n          for=\"environment_value\"\n          class=\"a-label a-label--help -error\"\n        >\n          <span *ngIf=\"envForm.get('value')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n          <ng-container *ngIf=\"envForm.get('value')?.hasError('pattern')\">\n            <span *ngIf=\"envForm.value.type === 'DOUBLE'\">{{ '@pry.admin.environment.formatDouble' | i18n }}</span>\n            <span *ngIf=\"envForm.value.type === 'INTEGER'\">{{ '@pry.admin.environment.formatInt' | i18n }}</span>\n          </ng-container>\n        </label>\n      </ng-template>\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=\"predicate-create a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(_currentEnv ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i3.DatePipe }]; }, propDecorators: { currentEnv: [{
                 type: Input
             }] } });
@@ -2367,11 +2397,11 @@ class AdminFieldsFormComponent {
         return this.currentField ? this.goBackPathEdit : this.goBackPath;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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=\"title-container\">\n        <pry-select\n          class=\"a-pry-select -width-sm\"\n          formControlName=\"type\"\n          [items]=\"fieldTypeTranslations\"\n          [itemsAsOption]=\"true\"\n          bindValue=\"varType\"\n          bindLabel=\"translation\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <ng-container>\n          <div class=\"info-icon description-container description\">\n            <span class=\"info-text\">i</span>\n          </div>\n          <div class=\"description-tooltip title-tooltip\">\n            <p class=\"a-p -date\">{{ selectedFieldTypeDescription$ | async }}</p>\n          </div>\n        </ng-container>\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=\"title-container\">\n        <pry-select\n          class=\"a-pry-select -width-sm\"\n          formControlName=\"crs\"\n          [labelTranslate]=\"false\"\n          [items]=\"CRS_OPTIONS\"\n          [itemsAsOption]=\"true\"\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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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=\"title-container\">\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        <ng-container>\n          <div class=\"info-icon description-container description\">\n            <span class=\"info-text\">i</span>\n          </div>\n          <div class=\"description-tooltip title-tooltip\">\n            <p class=\"a-p -date\">{{ selectedFieldTypeDescription$ | async }}</p>\n          </div>\n        </ng-container>\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=\"title-container\">\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", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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=\"title-container\">\n        <pry-select\n          class=\"a-pry-select -width-sm\"\n          formControlName=\"type\"\n          [items]=\"fieldTypeTranslations\"\n          [itemsAsOption]=\"true\"\n          bindValue=\"varType\"\n          bindLabel=\"translation\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <ng-container>\n          <div class=\"info-icon description-container description\">\n            <span class=\"info-text\">i</span>\n          </div>\n          <div class=\"description-tooltip title-tooltip\">\n            <p class=\"a-p -date\">{{ selectedFieldTypeDescription$ | async }}</p>\n          </div>\n        </ng-container>\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=\"title-container\">\n        <pry-select\n          class=\"a-pry-select -width-sm\"\n          formControlName=\"crs\"\n          [labelTranslate]=\"false\"\n          [items]=\"CRS_OPTIONS\"\n          [itemsAsOption]=\"true\"\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" }]
+            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=\"title-container\">\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        <ng-container>\n          <div class=\"info-icon description-container description\">\n            <span class=\"info-text\">i</span>\n          </div>\n          <div class=\"description-tooltip title-tooltip\">\n            <p class=\"a-p -date\">{{ selectedFieldTypeDescription$ | async }}</p>\n          </div>\n        </ng-container>\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=\"title-container\">\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: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i4.PryI18nService }]; }, propDecorators: { currentField: [{
                 type: Input
             }] } });
@@ -2717,11 +2747,11 @@ class AdminAttributesSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminAttributesSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAttributesSelectComponent, selector: "pry-admin-attribute-select", ngImport: i0, template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.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.classes.attributes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"attributeDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"attributeAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #attributeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.name' | i18n }} :\n      <strong>{{ attribute.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.field' | i18n }} :\n      <strong>{{ attribute.fieldName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.category' | i18n }} :\n      <strong>{{ attribute.categoryName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n      <strong>{{ attribute.multiValued }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #attributeAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\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"] }, { 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: "14.0.0", version: "16.2.12", type: AdminAttributesSelectComponent, selector: "pry-admin-attribute-select", ngImport: i0, template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.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.classes.attributes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"attributeDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"attributeAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #attributeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.technicalName' | i18n }} :\n      <strong>{{ attribute.technicalName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.name' | i18n }} :\n      <strong>{{ attribute.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.field' | i18n }} :\n      <strong>{{ attribute.fieldName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.category' | i18n }} :\n      <strong>{{ attribute.categoryName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n      <strong>{{ attribute.multiValued }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #attributeAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\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"] }, { 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: "16.2.12", ngImport: i0, type: AdminAttributesSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-attribute-select', template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.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.classes.attributes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"attributeDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"attributeAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #attributeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.name' | i18n }} :\n      <strong>{{ attribute.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.field' | i18n }} :\n      <strong>{{ attribute.fieldName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.category' | i18n }} :\n      <strong>{{ attribute.categoryName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n      <strong>{{ attribute.multiValued }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #attributeAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-attribute-select', template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.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.classes.attributes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"attributeDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"attributeAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #attributeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.technicalName' | i18n }} :\n      <strong>{{ attribute.technicalName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.name' | i18n }} :\n      <strong>{{ attribute.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.field' | i18n }} :\n      <strong>{{ attribute.fieldName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.category' | i18n }} :\n      <strong>{{ attribute.categoryName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n      <strong>{{ attribute.multiValued }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #attributeAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
 class AdminSelectDatasetComponent extends SubscriptionnerDirective {
@@ -2897,7 +2927,7 @@ class AdminFieldsSelectComponent {
             return classes
                 .map((clazz) => clazz.attributes
                 .filter((attribute) => attribute.field === field?.id)
-                .map((attribute) => ({ name: attribute.name, classId: clazz.id })))
+                .map((attribute) => ({ technicalName: attribute.technicalName, classId: clazz.id })))
                 .flat();
         }));
     }
@@ -3698,11 +3728,11 @@ class AdminLinksNewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminLinksNewComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminLinksNewComponent, selector: "pry-admin-links-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.links.add' | i18n }}</h1>\n  <form class=\"o-form\" [formGroup]=\"linkForm\" (ngSubmit)=\"addLink()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"link_name\" class=\"a-label\">\n        {{ '@pry.admin.links.relationType' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_name\"\n        class=\"a-pry-select\"\n        formControlName=\"relationType\"\n        [items]=\"relationTypes$ | async | prySortData: sortActive : sortDirection\"\n        (ngModelChange)=\"onTypeSourceChange()\"\n        [labelTranslate]=\"true\"\n        [isForm]=\"true\"\n        [itemsAsOption]=\"true\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n        [placeholder]=\"'@pry.admin.links.selectRelationType' | i18n\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('relationType')?.invalid ? 'name-label name-error' : 'name-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('relationType')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('relationType')?.invalid\"\n        id=\"name-error\"\n        for=\"link_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\" *ngIf=\"isSelectClass\">\n      <label id=\"class-source-label\" form=\"link_class-source\" class=\"a-label\">\n        {{ '@pry.admin.links.classSource' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_class-source\"\n        class=\"a-pry-select\"\n        formControlName=\"classSource\"\n        [items]=\"classes$ | async | prySortData: sortActive : sortDirection\"\n        (ngModelChange)=\"onClassSourceChange($event)\"\n        [itemsAsOption]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('classSource')?.invalid\n            ? 'class-source-label class-source-error'\n            : 'class-source-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('classSource')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('classSource')?.invalid\"\n        id=\"class-source-error\"\n        for=\"link_class-source\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div\n      *ngIf=\"attributesSource$ | async | prySortData: sortActive : sortDirection as attr\"\n      class=\"m-form-label-field -width-sm\"\n    >\n      <label id=\"attribute-source-label\" for=\"link_attribute-source\" class=\"a-label\">\n        {{ '@pry.admin.links.attributeSource' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_attribute-source\"\n        class=\"a-pry-select\"\n        formControlName=\"attributeSource\"\n        [items]=\"attr\"\n        [isForm]=\"true\"\n        [itemsAsOption]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('attributeSource')?.invalid\n            ? 'attribute-source-label attribute-source-error'\n            : 'attribute-source-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('attributeSource')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('attributeSource')?.invalid\"\n        id=\"attribute-source-error\"\n        for=\"link_attribute-source\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div *ngIf=\"classes$ | async | prySortData: sortActive : sortDirection as cd\" class=\"m-form-label-field -width-sm\">\n      <label id=\"class-destination-label\" for=\"link_class-destination\" class=\"a-label\">\n        {{ '@pry.admin.links.classDestination' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_class-destination\"\n        class=\"a-pry-select\"\n        formControlName=\"classDestination\"\n        [items]=\"cd\"\n        (ngModelChange)=\"onClassDestinationChange($event)\"\n        [itemsAsOption]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('classDestination')?.invalid\n            ? 'class-destination-label class-destination-error'\n            : 'class-destination-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('classDestination')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('classDestination')?.invalid\"\n        id=\"class-destination-error\"\n        for=\"link_class-destination\"\n        class=\"text-error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div\n      *ngIf=\"attributesDestination$ | async | prySortData: sortActive : sortDirection as attr\"\n      class=\"m-form-label-field -width-sm\"\n    >\n      <label id=\"attribute-destination-label\" for=\"link_attribute-destination\" class=\"a-label\">\n        {{ '@pry.admin.links.attributeDestination' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_attribute-destination\"\n        class=\"a-pry-select\"\n        formControlName=\"attributeDestination\"\n        [items]=\"attr\"\n        [isForm]=\"true\"\n        [itemsAsOption]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('attributeDestination')?.invalid\n            ? 'attribute-destination-label attribute-destination-error'\n            : 'attribute-destination-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('attributeDestination')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('attributeDestination')?.invalid\"\n        id=\"attribute-destination-error\"\n        for=\"link_attribute-destination\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        class=\"a-btn a-btn--secondary\"\n        type=\"button\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" [innerHTML]=\"'@pry.admin.create' | i18n\"></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.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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { 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: "14.0.0", version: "16.2.12", type: AdminLinksNewComponent, selector: "pry-admin-links-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.links.add' | i18n }}</h1>\n  <form class=\"o-form\" [formGroup]=\"linkForm\" (ngSubmit)=\"addLink()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"link_name\" class=\"a-label\">\n        {{ '@pry.admin.links.relationType' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_name\"\n        formControlName=\"relationType\"\n        [items]=\"relationTypes$ | async | prySortData : sortActive : sortDirection\"\n        (ngModelChange)=\"onTypeSourceChange()\"\n        [isForm]=\"true\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n        [placeholder]=\"'@pry.admin.links.selectRelationType' | i18n\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('relationType')?.invalid ? 'name-label name-error' : 'name-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('relationType')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('relationType')?.invalid\"\n        id=\"name-error\"\n        for=\"link_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\" *ngIf=\"isSelectClass\">\n      <label id=\"class-source-label\" form=\"link_class-source\" class=\"a-label\">\n        {{ '@pry.admin.links.classSource' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_class-source\"\n        formControlName=\"classSource\"\n        [items]=\"classes$ | async | prySortData : sortActive : sortDirection\"\n        (ngModelChange)=\"onClassSourceChange($event)\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('classSource')?.invalid\n            ? 'class-source-label class-source-error'\n            : 'class-source-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('classSource')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('classSource')?.invalid\"\n        id=\"class-source-error\"\n        for=\"link_class-source\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div\n      *ngIf=\"attributesSource$ | async | prySortData : sortActive : sortDirection as attr\"\n      class=\"m-form-label-field -width-sm\"\n    >\n      <label id=\"attribute-source-label\" for=\"link_attribute-source\" class=\"a-label\">\n        {{ '@pry.admin.links.attributeSource' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_attribute-source\"\n        formControlName=\"attributeSource\"\n        [items]=\"attr\"\n        [isForm]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('attributeSource')?.invalid\n            ? 'attribute-source-label attribute-source-error'\n            : 'attribute-source-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('attributeSource')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('attributeSource')?.invalid\"\n        id=\"attribute-source-error\"\n        for=\"link_attribute-source\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div *ngIf=\"classes$ | async | prySortData : sortActive : sortDirection as cd\" class=\"m-form-label-field -width-sm\">\n      <label id=\"class-destination-label\" for=\"link_class-destination\" class=\"a-label\">\n        {{ '@pry.admin.links.classDestination' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_class-destination\"\n        formControlName=\"classDestination\"\n        [items]=\"cd\"\n        (ngModelChange)=\"onClassDestinationChange($event)\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('classDestination')?.invalid\n            ? 'class-destination-label class-destination-error'\n            : 'class-destination-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('classDestination')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('classDestination')?.invalid\"\n        id=\"class-destination-error\"\n        for=\"link_class-destination\"\n        class=\"text-error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div\n      *ngIf=\"attributesDestination$ | async | prySortData : sortActive : sortDirection as attr\"\n      class=\"m-form-label-field -width-sm\"\n    >\n      <label id=\"attribute-destination-label\" for=\"link_attribute-destination\" class=\"a-label\">\n        {{ '@pry.admin.links.attributeDestination' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_attribute-destination\"\n        formControlName=\"attributeDestination\"\n        [items]=\"attr\"\n        [isForm]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('attributeDestination')?.invalid\n            ? 'attribute-destination-label attribute-destination-error'\n            : 'attribute-destination-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('attributeDestination')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('attributeDestination')?.invalid\"\n        id=\"attribute-destination-error\"\n        for=\"link_attribute-destination\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        class=\"a-btn a-btn--secondary\"\n        type=\"button\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" [innerHTML]=\"'@pry.admin.create' | i18n\"></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.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", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { 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: "16.2.12", ngImport: i0, type: AdminLinksNewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-links-new', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.links.add' | i18n }}</h1>\n  <form class=\"o-form\" [formGroup]=\"linkForm\" (ngSubmit)=\"addLink()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"link_name\" class=\"a-label\">\n        {{ '@pry.admin.links.relationType' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_name\"\n        class=\"a-pry-select\"\n        formControlName=\"relationType\"\n        [items]=\"relationTypes$ | async | prySortData: sortActive : sortDirection\"\n        (ngModelChange)=\"onTypeSourceChange()\"\n        [labelTranslate]=\"true\"\n        [isForm]=\"true\"\n        [itemsAsOption]=\"true\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n        [placeholder]=\"'@pry.admin.links.selectRelationType' | i18n\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('relationType')?.invalid ? 'name-label name-error' : 'name-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('relationType')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('relationType')?.invalid\"\n        id=\"name-error\"\n        for=\"link_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\" *ngIf=\"isSelectClass\">\n      <label id=\"class-source-label\" form=\"link_class-source\" class=\"a-label\">\n        {{ '@pry.admin.links.classSource' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_class-source\"\n        class=\"a-pry-select\"\n        formControlName=\"classSource\"\n        [items]=\"classes$ | async | prySortData: sortActive : sortDirection\"\n        (ngModelChange)=\"onClassSourceChange($event)\"\n        [itemsAsOption]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('classSource')?.invalid\n            ? 'class-source-label class-source-error'\n            : 'class-source-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('classSource')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('classSource')?.invalid\"\n        id=\"class-source-error\"\n        for=\"link_class-source\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div\n      *ngIf=\"attributesSource$ | async | prySortData: sortActive : sortDirection as attr\"\n      class=\"m-form-label-field -width-sm\"\n    >\n      <label id=\"attribute-source-label\" for=\"link_attribute-source\" class=\"a-label\">\n        {{ '@pry.admin.links.attributeSource' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_attribute-source\"\n        class=\"a-pry-select\"\n        formControlName=\"attributeSource\"\n        [items]=\"attr\"\n        [isForm]=\"true\"\n        [itemsAsOption]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('attributeSource')?.invalid\n            ? 'attribute-source-label attribute-source-error'\n            : 'attribute-source-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('attributeSource')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('attributeSource')?.invalid\"\n        id=\"attribute-source-error\"\n        for=\"link_attribute-source\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div *ngIf=\"classes$ | async | prySortData: sortActive : sortDirection as cd\" class=\"m-form-label-field -width-sm\">\n      <label id=\"class-destination-label\" for=\"link_class-destination\" class=\"a-label\">\n        {{ '@pry.admin.links.classDestination' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_class-destination\"\n        class=\"a-pry-select\"\n        formControlName=\"classDestination\"\n        [items]=\"cd\"\n        (ngModelChange)=\"onClassDestinationChange($event)\"\n        [itemsAsOption]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('classDestination')?.invalid\n            ? 'class-destination-label class-destination-error'\n            : 'class-destination-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('classDestination')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('classDestination')?.invalid\"\n        id=\"class-destination-error\"\n        for=\"link_class-destination\"\n        class=\"text-error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div\n      *ngIf=\"attributesDestination$ | async | prySortData: sortActive : sortDirection as attr\"\n      class=\"m-form-label-field -width-sm\"\n    >\n      <label id=\"attribute-destination-label\" for=\"link_attribute-destination\" class=\"a-label\">\n        {{ '@pry.admin.links.attributeDestination' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_attribute-destination\"\n        class=\"a-pry-select\"\n        formControlName=\"attributeDestination\"\n        [items]=\"attr\"\n        [isForm]=\"true\"\n        [itemsAsOption]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('attributeDestination')?.invalid\n            ? 'attribute-destination-label attribute-destination-error'\n            : 'attribute-destination-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('attributeDestination')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('attributeDestination')?.invalid\"\n        id=\"attribute-destination-error\"\n        for=\"link_attribute-destination\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        class=\"a-btn a-btn--secondary\"\n        type=\"button\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" [innerHTML]=\"'@pry.admin.create' | i18n\"></button>\n    </div>\n  </form>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-links-new', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.links.add' | i18n }}</h1>\n  <form class=\"o-form\" [formGroup]=\"linkForm\" (ngSubmit)=\"addLink()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"link_name\" class=\"a-label\">\n        {{ '@pry.admin.links.relationType' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_name\"\n        formControlName=\"relationType\"\n        [items]=\"relationTypes$ | async | prySortData : sortActive : sortDirection\"\n        (ngModelChange)=\"onTypeSourceChange()\"\n        [isForm]=\"true\"\n        bindValue=\"id\"\n        bindLabel=\"name\"\n        [placeholder]=\"'@pry.admin.links.selectRelationType' | i18n\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('relationType')?.invalid ? 'name-label name-error' : 'name-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('relationType')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('relationType')?.invalid\"\n        id=\"name-error\"\n        for=\"link_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\" *ngIf=\"isSelectClass\">\n      <label id=\"class-source-label\" form=\"link_class-source\" class=\"a-label\">\n        {{ '@pry.admin.links.classSource' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_class-source\"\n        formControlName=\"classSource\"\n        [items]=\"classes$ | async | prySortData : sortActive : sortDirection\"\n        (ngModelChange)=\"onClassSourceChange($event)\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('classSource')?.invalid\n            ? 'class-source-label class-source-error'\n            : 'class-source-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('classSource')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('classSource')?.invalid\"\n        id=\"class-source-error\"\n        for=\"link_class-source\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div\n      *ngIf=\"attributesSource$ | async | prySortData : sortActive : sortDirection as attr\"\n      class=\"m-form-label-field -width-sm\"\n    >\n      <label id=\"attribute-source-label\" for=\"link_attribute-source\" class=\"a-label\">\n        {{ '@pry.admin.links.attributeSource' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_attribute-source\"\n        formControlName=\"attributeSource\"\n        [items]=\"attr\"\n        [isForm]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('attributeSource')?.invalid\n            ? 'attribute-source-label attribute-source-error'\n            : 'attribute-source-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('attributeSource')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('attributeSource')?.invalid\"\n        id=\"attribute-source-error\"\n        for=\"link_attribute-source\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div *ngIf=\"classes$ | async | prySortData : sortActive : sortDirection as cd\" class=\"m-form-label-field -width-sm\">\n      <label id=\"class-destination-label\" for=\"link_class-destination\" class=\"a-label\">\n        {{ '@pry.admin.links.classDestination' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_class-destination\"\n        formControlName=\"classDestination\"\n        [items]=\"cd\"\n        (ngModelChange)=\"onClassDestinationChange($event)\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('classDestination')?.invalid\n            ? 'class-destination-label class-destination-error'\n            : 'class-destination-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('classDestination')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('classDestination')?.invalid\"\n        id=\"class-destination-error\"\n        for=\"link_class-destination\"\n        class=\"text-error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div\n      *ngIf=\"attributesDestination$ | async | prySortData : sortActive : sortDirection as attr\"\n      class=\"m-form-label-field -width-sm\"\n    >\n      <label id=\"attribute-destination-label\" for=\"link_attribute-destination\" class=\"a-label\">\n        {{ '@pry.admin.links.attributeDestination' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"link_attribute-destination\"\n        formControlName=\"attributeDestination\"\n        [items]=\"attr\"\n        [isForm]=\"true\"\n        bindLabel=\"name\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && linkForm.get('attributeDestination')?.invalid\n            ? 'attribute-destination-label attribute-destination-error'\n            : 'attribute-destination-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && linkForm.get('attributeDestination')?.invalid\"\n        required\n      >\n      </pry-select>\n      <label\n        *ngIf=\"isSubmitted && linkForm.get('attributeDestination')?.invalid\"\n        id=\"attribute-destination-error\"\n        for=\"link_attribute-destination\"\n        class=\"a-label a-label--help -error\"\n      >\n        {{ '@pry.admin.required' | i18n }}\n      </label>\n    </div>\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        class=\"a-btn a-btn--secondary\"\n        type=\"button\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" [innerHTML]=\"'@pry.admin.create' | i18n\"></button>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }]; } });
 
 class AdminLinksComponent {
@@ -3861,11 +3891,11 @@ class AdminFormMetadataRulesComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminFormMetadataRulesComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminFormMetadataRulesComponent, selector: "pry-admin-form-metadata-rules", inputs: { metadataRules: "metadataRules" }, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.metadata-rules.label' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      id=\"name\"\n      type=\"text\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      (ngModelChange)=\"changeValueName($event)\"\n      [attr.aria-labelledby]=\"isSubmitted && form.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      [attr.aria-invalid]=\"isSubmitted && form.get('name')?.invalid\"\n      required\n    />\n    <label\n      class=\"a-label a-label--help -error\"\n      id=\"name-error\"\n      for=\"name\"\n      *ngIf=\"isSubmitted && form.get('name')?.invalid\"\n      >{{ '@pry.admin.required' | i18n }}</label\n    >\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"item\">{{\n      '@pry.admin.metadata-rules.metadata-item.name' | i18n\n    }}</label>\n    <pry-select\n      class=\"a-pry-select\"\n      id=\"item\"\n      formControlName=\"metadataItem\"\n      [labelTranslate]=\"true\"\n      [items]=\"metadataList\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      (ngModelChange)=\"selectMetadataItem($event)\"\n      aria-labelledby=\"item-label\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"user\">{{\n      '@pry.admin.metadata-rules.metadata-user.name' | i18n\n    }}</label>\n    <pry-select\n      class=\"a-pry-select\"\n      id=\"user\"\n      formControlName=\"metadataUser\"\n      [labelTranslate]=\"true\"\n      [items]=\"metadataUserListFilter\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      (ngModelChange)=\"selectMetadataUser($event)\"\n      aria-labelledby=\"user-label\"\n    ></pry-select>\n  </div>\n\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameName\">{{\n    '@pry.admin.metadata-rules.is-same-name' | i18n\n  }}</label>\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameRules\">{{\n    '@pry.admin.metadata-rules.is-same-rules' | i18n\n  }}</label>\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]=\"(metadataRules ? '@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: 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: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminFormMetadataRulesComponent, selector: "pry-admin-form-metadata-rules", inputs: { metadataRules: "metadataRules" }, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.metadata-rules.label' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      id=\"name\"\n      type=\"text\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      (ngModelChange)=\"changeValueName($event)\"\n      [attr.aria-labelledby]=\"isSubmitted && form.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      [attr.aria-invalid]=\"isSubmitted && form.get('name')?.invalid\"\n      required\n    />\n    <label\n      class=\"a-label a-label--help -error\"\n      id=\"name-error\"\n      for=\"name\"\n      *ngIf=\"isSubmitted && form.get('name')?.invalid\"\n      >{{ '@pry.admin.required' | i18n }}</label\n    >\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"item\">{{\n      '@pry.admin.metadata-rules.metadata-item.name' | i18n\n    }}</label>\n    <pry-select\n      id=\"item\"\n      formControlName=\"metadataItem\"\n      [items]=\"metadataList\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      (ngModelChange)=\"selectMetadataItem($event)\"\n      aria-labelledby=\"item-label\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"user\">{{\n      '@pry.admin.metadata-rules.metadata-user.name' | i18n\n    }}</label>\n    <pry-select\n      id=\"user\"\n      formControlName=\"metadataUser\"\n      [items]=\"metadataUserListFilter\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      (ngModelChange)=\"selectMetadataUser($event)\"\n      aria-labelledby=\"user-label\"\n    ></pry-select>\n  </div>\n\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameName\">{{\n    '@pry.admin.metadata-rules.is-same-name' | i18n\n  }}</label>\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameRules\">{{\n    '@pry.admin.metadata-rules.is-same-rules' | i18n\n  }}</label>\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]=\"(metadataRules ? '@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: 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", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminFormMetadataRulesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-form-metadata-rules', template: "<form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.metadata-rules.label' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      id=\"name\"\n      type=\"text\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      (ngModelChange)=\"changeValueName($event)\"\n      [attr.aria-labelledby]=\"isSubmitted && form.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      [attr.aria-invalid]=\"isSubmitted && form.get('name')?.invalid\"\n      required\n    />\n    <label\n      class=\"a-label a-label--help -error\"\n      id=\"name-error\"\n      for=\"name\"\n      *ngIf=\"isSubmitted && form.get('name')?.invalid\"\n      >{{ '@pry.admin.required' | i18n }}</label\n    >\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"item\">{{\n      '@pry.admin.metadata-rules.metadata-item.name' | i18n\n    }}</label>\n    <pry-select\n      class=\"a-pry-select\"\n      id=\"item\"\n      formControlName=\"metadataItem\"\n      [labelTranslate]=\"true\"\n      [items]=\"metadataList\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      (ngModelChange)=\"selectMetadataItem($event)\"\n      aria-labelledby=\"item-label\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"user\">{{\n      '@pry.admin.metadata-rules.metadata-user.name' | i18n\n    }}</label>\n    <pry-select\n      class=\"a-pry-select\"\n      id=\"user\"\n      formControlName=\"metadataUser\"\n      [labelTranslate]=\"true\"\n      [items]=\"metadataUserListFilter\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      (ngModelChange)=\"selectMetadataUser($event)\"\n      aria-labelledby=\"user-label\"\n    ></pry-select>\n  </div>\n\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameName\">{{\n    '@pry.admin.metadata-rules.is-same-name' | i18n\n  }}</label>\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameRules\">{{\n    '@pry.admin.metadata-rules.is-same-rules' | i18n\n  }}</label>\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]=\"(metadataRules ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'pry-admin-form-metadata-rules', template: "<form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.metadata-rules.label' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      id=\"name\"\n      type=\"text\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      (ngModelChange)=\"changeValueName($event)\"\n      [attr.aria-labelledby]=\"isSubmitted && form.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      [attr.aria-invalid]=\"isSubmitted && form.get('name')?.invalid\"\n      required\n    />\n    <label\n      class=\"a-label a-label--help -error\"\n      id=\"name-error\"\n      for=\"name\"\n      *ngIf=\"isSubmitted && form.get('name')?.invalid\"\n      >{{ '@pry.admin.required' | i18n }}</label\n    >\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"item\">{{\n      '@pry.admin.metadata-rules.metadata-item.name' | i18n\n    }}</label>\n    <pry-select\n      id=\"item\"\n      formControlName=\"metadataItem\"\n      [items]=\"metadataList\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      (ngModelChange)=\"selectMetadataItem($event)\"\n      aria-labelledby=\"item-label\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"user\">{{\n      '@pry.admin.metadata-rules.metadata-user.name' | i18n\n    }}</label>\n    <pry-select\n      id=\"user\"\n      formControlName=\"metadataUser\"\n      [items]=\"metadataUserListFilter\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      (ngModelChange)=\"selectMetadataUser($event)\"\n      aria-labelledby=\"user-label\"\n    ></pry-select>\n  </div>\n\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameName\">{{\n    '@pry.admin.metadata-rules.is-same-name' | i18n\n  }}</label>\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameRules\">{{\n    '@pry.admin.metadata-rules.is-same-rules' | i18n\n  }}</label>\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]=\"(metadataRules ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }]; }, propDecorators: { metadataRules: [{
                 type: Input
             }] } });
@@ -4203,11 +4233,11 @@ class FormMetadataComponent {
         return path.toString();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormMetadataComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormMetadataComponent, selector: "pry-form-metadata", inputs: { titleForm: "titleForm", isMetaSimpleEdit: "isMetaSimpleEdit", isMetaUser: "isMetaUser", metadata: "metadata" }, outputs: { submitMetadata$: "submitMetadata$" }, ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ titleForm }}</h1>\n\n  <form class=\"o-form\" [formGroup]=\"metaForm\" (ngSubmit)=\"addMetadata()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" id=\"name-label\" for=\"metadata-name\">\n        {{ '@pry.admin.metadata.label' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        class=\"a-form-field\"\n        id=\"metadata-name\"\n        type=\"text\"\n        formControlName=\"name\"\n        [required]=\"!metadata\"\n        [attr.aria-labelledby]=\"isSubmitted && metaForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && metaForm.get('name')?.invalid\"\n      />\n      <label\n        *ngIf=\"isSubmitted && metaForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"metadata-name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"metaForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"metaForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"metaForm.get('name')?.hasError('pattern')\">{{ '@pry.admin.classes.formatName' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-md\">\n      <label class=\"a-label\" for=\"metadata_description\">{{ '@pry.admin.metadata.description' | i18n }}</label>\n      <textarea\n        rows=\"5\"\n        type=\"text\"\n        id=\"metadata_description\"\n        class=\"a-form-field\"\n        formControlName=\"description\"\n      ></textarea>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label for=\"metadata-type\" id=\"metadata-type-label\" class=\"a-label\">\n        {{ '@pry.admin.metadata.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        class=\"a-pry-select\"\n        id=\"metadata-type\"\n        formControlName=\"type\"\n        [labelTranslate]=\"true\"\n        [items]=\"metaOptions\"\n        [itemsAsOption]=\"true\"\n        bindValue=\"varType\"\n        bindLabel=\"translation\"\n        [readonly]=\"!!metadata\"\n        [isForm]=\"true\"\n        (ngModelChange)=\"addItemList($event)\"\n        aria-labelledby=\"metadata-type-label\"\n      ></pry-select>\n    </div>\n\n    <ng-container *ngIf=\"metaForm.value.type === 'LIST'\">\n      <div class=\"o-datas-list-wrapper\" formArrayName=\"allowedValues\" *ngIf=\"metadataList.controls.length > 0\">\n        <fieldset>\n          <legend class=\"u-visually-hidden\">{{ '@pry.admin.varType.list' | i18n }}</legend>\n\n          <div class=\"o-datas-list metadata-list\" *ngFor=\"let control of metadataList.controls; let i = index\">\n            <div class=\"o-datas-list__fields metadata-input\">\n              <div class=\"m-form-label-field -width-sm\">\n                <label id=\"metadata-list-label\" for=\"metadata-list\" class=\"a-label\">\n                  {{ '@pry.admin.metadata.listLabel' | i18n }} *\n                  <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n                </label>\n                <input\n                  class=\"a-form-field\"\n                  id=\"metadata-list\"\n                  formControlName=\"{{ i }}\"\n                  [required]=\"!control.value\"\n                  [attr.aria-invalid]=\"isSubmitted && control?.invalid\"\n                  [attr.aria-labelledby]=\"\n                    isSubmitted && control?.invalid ? 'metadata-list-label metadata-list-error' : 'metadata-list-label'\n                  \"\n                />\n                <label\n                  *ngIf=\"isSubmitted && control.invalid\"\n                  id=\"metadata-list-error\"\n                  for=\"metadata-list\"\n                  class=\"a-label a-label--help -error\"\n                >\n                  {{ '@pry.admin.required' | i18n }}\n                </label>\n              </div>\n\n              <div class=\"m-btn-group m-btn-group--input-actions\">\n                <button\n                  type=\"button\"\n                  class=\"a-btn a-btn--input-action\"\n                  *ngIf=\"i === metadataList.controls.length - 1\"\n                  (click)=\"control.value.trim() !== '' ? addItemList() : undefined\"\n                >\n                  <span class=\"u-visually-hidden\">{{ '@pry.admin.metadata.addValue' | i18n }}</span>\n                  <pry-icon iconSvg=\"add\" [width]=\"20\" [height]=\"20\"></pry-icon>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"a-btn a-btn--input-action\"\n                  *ngIf=\"i !== 0 && !metadataList.controls[i].disabled\"\n                  (click)=\"removeItemList(i)\"\n                >\n                  <span class=\"u-visually-hidden\">{{ '@pry.admin.metadata.removeValue' | i18n }}</span>\n                  <pry-icon iconSvg=\"delete\" [width]=\"20\" [height]=\"20\"></pry-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </ng-container>\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]=\"(metadata ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\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.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { 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: "directive", type: i3$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormMetadataComponent, selector: "pry-form-metadata", inputs: { titleForm: "titleForm", isMetaSimpleEdit: "isMetaSimpleEdit", isMetaUser: "isMetaUser", metadata: "metadata" }, outputs: { submitMetadata$: "submitMetadata$" }, ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ titleForm }}</h1>\n\n  <form class=\"o-form\" [formGroup]=\"metaForm\" (ngSubmit)=\"addMetadata()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" id=\"name-label\" for=\"metadata-name\">\n        {{ '@pry.admin.metadata.label' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        class=\"a-form-field\"\n        id=\"metadata-name\"\n        type=\"text\"\n        formControlName=\"name\"\n        [required]=\"!metadata\"\n        [attr.aria-labelledby]=\"isSubmitted && metaForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && metaForm.get('name')?.invalid\"\n      />\n      <label\n        *ngIf=\"isSubmitted && metaForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"metadata-name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"metaForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"metaForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"metaForm.get('name')?.hasError('pattern')\">{{ '@pry.admin.classes.formatName' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-md\">\n      <label class=\"a-label\" for=\"metadata_description\">{{ '@pry.admin.metadata.description' | i18n }}</label>\n      <textarea\n        rows=\"5\"\n        type=\"text\"\n        id=\"metadata_description\"\n        class=\"a-form-field\"\n        formControlName=\"description\"\n      ></textarea>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label for=\"metadata-type\" id=\"metadata-type-label\" class=\"a-label\">\n        {{ '@pry.admin.metadata.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"metadata-type\"\n        formControlName=\"type\"\n        [items]=\"metaOptions\"\n        bindValue=\"varType\"\n        bindLabel=\"translation\"\n        [readonly]=\"!!metadata\"\n        [isForm]=\"true\"\n        (ngModelChange)=\"addItemList($event)\"\n        aria-labelledby=\"metadata-type-label\"\n      ></pry-select>\n    </div>\n\n    <ng-container *ngIf=\"metaForm.value.type === 'LIST'\">\n      <div class=\"o-datas-list-wrapper\" formArrayName=\"allowedValues\" *ngIf=\"metadataList.controls.length > 0\">\n        <fieldset>\n          <legend class=\"u-visually-hidden\">{{ '@pry.admin.varType.list' | i18n }}</legend>\n\n          <div class=\"o-datas-list metadata-list\" *ngFor=\"let control of metadataList.controls; let i = index\">\n            <div class=\"o-datas-list__fields metadata-input\">\n              <div class=\"m-form-label-field -width-sm\">\n                <label id=\"metadata-list-label\" for=\"metadata-list\" class=\"a-label\">\n                  {{ '@pry.admin.metadata.listLabel' | i18n }} *\n                  <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n                </label>\n                <input\n                  class=\"a-form-field\"\n                  id=\"metadata-list\"\n                  formControlName=\"{{ i }}\"\n                  [required]=\"!control.value\"\n                  [attr.aria-invalid]=\"isSubmitted && control?.invalid\"\n                  [attr.aria-labelledby]=\"\n                    isSubmitted && control?.invalid ? 'metadata-list-label metadata-list-error' : 'metadata-list-label'\n                  \"\n                />\n                <label\n                  *ngIf=\"isSubmitted && control.invalid\"\n                  id=\"metadata-list-error\"\n                  for=\"metadata-list\"\n                  class=\"a-label a-label--help -error\"\n                >\n                  {{ '@pry.admin.required' | i18n }}\n                </label>\n              </div>\n\n              <div class=\"m-btn-group m-btn-group--input-actions\">\n                <button\n                  type=\"button\"\n                  class=\"a-btn a-btn--input-action\"\n                  *ngIf=\"i === metadataList.controls.length - 1\"\n                  (click)=\"control.value.trim() !== '' ? addItemList() : undefined\"\n                >\n                  <span class=\"u-visually-hidden\">{{ '@pry.admin.metadata.addValue' | i18n }}</span>\n                  <pry-icon iconSvg=\"add\" [width]=\"20\" [height]=\"20\"></pry-icon>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"a-btn a-btn--input-action\"\n                  *ngIf=\"i !== 0 && !metadataList.controls[i].disabled\"\n                  (click)=\"removeItemList(i)\"\n                >\n                  <span class=\"u-visually-hidden\">{{ '@pry.admin.metadata.removeValue' | i18n }}</span>\n                  <pry-icon iconSvg=\"delete\" [width]=\"20\" [height]=\"20\"></pry-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </ng-container>\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]=\"(metadata ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\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.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { 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: "directive", type: i3$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormMetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-form-metadata', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ titleForm }}</h1>\n\n  <form class=\"o-form\" [formGroup]=\"metaForm\" (ngSubmit)=\"addMetadata()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" id=\"name-label\" for=\"metadata-name\">\n        {{ '@pry.admin.metadata.label' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        class=\"a-form-field\"\n        id=\"metadata-name\"\n        type=\"text\"\n        formControlName=\"name\"\n        [required]=\"!metadata\"\n        [attr.aria-labelledby]=\"isSubmitted && metaForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && metaForm.get('name')?.invalid\"\n      />\n      <label\n        *ngIf=\"isSubmitted && metaForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"metadata-name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"metaForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"metaForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"metaForm.get('name')?.hasError('pattern')\">{{ '@pry.admin.classes.formatName' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-md\">\n      <label class=\"a-label\" for=\"metadata_description\">{{ '@pry.admin.metadata.description' | i18n }}</label>\n      <textarea\n        rows=\"5\"\n        type=\"text\"\n        id=\"metadata_description\"\n        class=\"a-form-field\"\n        formControlName=\"description\"\n      ></textarea>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label for=\"metadata-type\" id=\"metadata-type-label\" class=\"a-label\">\n        {{ '@pry.admin.metadata.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        class=\"a-pry-select\"\n        id=\"metadata-type\"\n        formControlName=\"type\"\n        [labelTranslate]=\"true\"\n        [items]=\"metaOptions\"\n        [itemsAsOption]=\"true\"\n        bindValue=\"varType\"\n        bindLabel=\"translation\"\n        [readonly]=\"!!metadata\"\n        [isForm]=\"true\"\n        (ngModelChange)=\"addItemList($event)\"\n        aria-labelledby=\"metadata-type-label\"\n      ></pry-select>\n    </div>\n\n    <ng-container *ngIf=\"metaForm.value.type === 'LIST'\">\n      <div class=\"o-datas-list-wrapper\" formArrayName=\"allowedValues\" *ngIf=\"metadataList.controls.length > 0\">\n        <fieldset>\n          <legend class=\"u-visually-hidden\">{{ '@pry.admin.varType.list' | i18n }}</legend>\n\n          <div class=\"o-datas-list metadata-list\" *ngFor=\"let control of metadataList.controls; let i = index\">\n            <div class=\"o-datas-list__fields metadata-input\">\n              <div class=\"m-form-label-field -width-sm\">\n                <label id=\"metadata-list-label\" for=\"metadata-list\" class=\"a-label\">\n                  {{ '@pry.admin.metadata.listLabel' | i18n }} *\n                  <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n                </label>\n                <input\n                  class=\"a-form-field\"\n                  id=\"metadata-list\"\n                  formControlName=\"{{ i }}\"\n                  [required]=\"!control.value\"\n                  [attr.aria-invalid]=\"isSubmitted && control?.invalid\"\n                  [attr.aria-labelledby]=\"\n                    isSubmitted && control?.invalid ? 'metadata-list-label metadata-list-error' : 'metadata-list-label'\n                  \"\n                />\n                <label\n                  *ngIf=\"isSubmitted && control.invalid\"\n                  id=\"metadata-list-error\"\n                  for=\"metadata-list\"\n                  class=\"a-label a-label--help -error\"\n                >\n                  {{ '@pry.admin.required' | i18n }}\n                </label>\n              </div>\n\n              <div class=\"m-btn-group m-btn-group--input-actions\">\n                <button\n                  type=\"button\"\n                  class=\"a-btn a-btn--input-action\"\n                  *ngIf=\"i === metadataList.controls.length - 1\"\n                  (click)=\"control.value.trim() !== '' ? addItemList() : undefined\"\n                >\n                  <span class=\"u-visually-hidden\">{{ '@pry.admin.metadata.addValue' | i18n }}</span>\n                  <pry-icon iconSvg=\"add\" [width]=\"20\" [height]=\"20\"></pry-icon>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"a-btn a-btn--input-action\"\n                  *ngIf=\"i !== 0 && !metadataList.controls[i].disabled\"\n                  (click)=\"removeItemList(i)\"\n                >\n                  <span class=\"u-visually-hidden\">{{ '@pry.admin.metadata.removeValue' | i18n }}</span>\n                  <pry-icon iconSvg=\"delete\" [width]=\"20\" [height]=\"20\"></pry-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </ng-container>\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]=\"(metadata ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n" }]
+            args: [{ selector: 'pry-form-metadata', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ titleForm }}</h1>\n\n  <form class=\"o-form\" [formGroup]=\"metaForm\" (ngSubmit)=\"addMetadata()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" id=\"name-label\" for=\"metadata-name\">\n        {{ '@pry.admin.metadata.label' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        class=\"a-form-field\"\n        id=\"metadata-name\"\n        type=\"text\"\n        formControlName=\"name\"\n        [required]=\"!metadata\"\n        [attr.aria-labelledby]=\"isSubmitted && metaForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && metaForm.get('name')?.invalid\"\n      />\n      <label\n        *ngIf=\"isSubmitted && metaForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"metadata-name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"metaForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"metaForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"metaForm.get('name')?.hasError('pattern')\">{{ '@pry.admin.classes.formatName' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-md\">\n      <label class=\"a-label\" for=\"metadata_description\">{{ '@pry.admin.metadata.description' | i18n }}</label>\n      <textarea\n        rows=\"5\"\n        type=\"text\"\n        id=\"metadata_description\"\n        class=\"a-form-field\"\n        formControlName=\"description\"\n      ></textarea>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label for=\"metadata-type\" id=\"metadata-type-label\" class=\"a-label\">\n        {{ '@pry.admin.metadata.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        id=\"metadata-type\"\n        formControlName=\"type\"\n        [items]=\"metaOptions\"\n        bindValue=\"varType\"\n        bindLabel=\"translation\"\n        [readonly]=\"!!metadata\"\n        [isForm]=\"true\"\n        (ngModelChange)=\"addItemList($event)\"\n        aria-labelledby=\"metadata-type-label\"\n      ></pry-select>\n    </div>\n\n    <ng-container *ngIf=\"metaForm.value.type === 'LIST'\">\n      <div class=\"o-datas-list-wrapper\" formArrayName=\"allowedValues\" *ngIf=\"metadataList.controls.length > 0\">\n        <fieldset>\n          <legend class=\"u-visually-hidden\">{{ '@pry.admin.varType.list' | i18n }}</legend>\n\n          <div class=\"o-datas-list metadata-list\" *ngFor=\"let control of metadataList.controls; let i = index\">\n            <div class=\"o-datas-list__fields metadata-input\">\n              <div class=\"m-form-label-field -width-sm\">\n                <label id=\"metadata-list-label\" for=\"metadata-list\" class=\"a-label\">\n                  {{ '@pry.admin.metadata.listLabel' | i18n }} *\n                  <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n                </label>\n                <input\n                  class=\"a-form-field\"\n                  id=\"metadata-list\"\n                  formControlName=\"{{ i }}\"\n                  [required]=\"!control.value\"\n                  [attr.aria-invalid]=\"isSubmitted && control?.invalid\"\n                  [attr.aria-labelledby]=\"\n                    isSubmitted && control?.invalid ? 'metadata-list-label metadata-list-error' : 'metadata-list-label'\n                  \"\n                />\n                <label\n                  *ngIf=\"isSubmitted && control.invalid\"\n                  id=\"metadata-list-error\"\n                  for=\"metadata-list\"\n                  class=\"a-label a-label--help -error\"\n                >\n                  {{ '@pry.admin.required' | i18n }}\n                </label>\n              </div>\n\n              <div class=\"m-btn-group m-btn-group--input-actions\">\n                <button\n                  type=\"button\"\n                  class=\"a-btn a-btn--input-action\"\n                  *ngIf=\"i === metadataList.controls.length - 1\"\n                  (click)=\"control.value.trim() !== '' ? addItemList() : undefined\"\n                >\n                  <span class=\"u-visually-hidden\">{{ '@pry.admin.metadata.addValue' | i18n }}</span>\n                  <pry-icon iconSvg=\"add\" [width]=\"20\" [height]=\"20\"></pry-icon>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"a-btn a-btn--input-action\"\n                  *ngIf=\"i !== 0 && !metadataList.controls[i].disabled\"\n                  (click)=\"removeItemList(i)\"\n                >\n                  <span class=\"u-visually-hidden\">{{ '@pry.admin.metadata.removeValue' | i18n }}</span>\n                  <pry-icon iconSvg=\"delete\" [width]=\"20\" [height]=\"20\"></pry-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </ng-container>\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]=\"(metadata ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }]; }, propDecorators: { titleForm: [{
                 type: Input
             }], isMetaSimpleEdit: [{
@@ -5993,7 +6023,8 @@ const enTranslations = {
                 attributes: {
                     add: 'business model Add attribute',
                     edit: 'Edit attribute',
-                    name: 'Attribute name',
+                    name: 'Attribute label',
+                    technicalName: 'Technical name',
                     info: 'Attribute information',
                     description: 'Description',
                     field: 'Field',
@@ -6362,7 +6393,8 @@ const frTranslations = {
                     edit: "Modifier l'attribut",
                     info: "Détail de l'attribut",
                     delete: "Supprimer l'attribut",
-                    name: 'Nom attribut',
+                    name: "Libellé de l'attribut",
+                    technicalName: 'Nom technique',
                     description: 'Description',
                     field: 'Type',
                     category: 'Catégorie',