npm - @provoly/dashboard - Versions diffs - 1.4.14 → 1.4.16 - Mend

@provoly/dashboard 1.4.14 → 1.4.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (203) hide show

package/fesm2022/provoly-dashboard-admin.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
-import * as i5$2 from '@angular/cdk/drag-drop';
+import * as i4$3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i5 from '@angular/cdk/overlay';
+import * as i4$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i3 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Output, Input, Injectable, ViewContainerRef, ViewChild, TemplateRef, ChangeDetectionStrategy, Optional, Inject, NgModule } from '@angular/core';
@@ -12,11 +12,11 @@ import * as i1$2 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
 import * as i1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, StoreModule } from '@ngrx/store';
-import * as i4 from '@provoly/dashboard';
+import * as i3 from '@provoly/dashboard';
 import { ClassSelectors, FieldType, ClassActions, FieldActions, SubscriptionnerDirective, ConfigSelectors, FieldSelectors, ConfigActions, DEFAULT_ICON_URL, IconPosition, compareOperationFunctions, ItemUtils, CategoryActions, CategorySelectors, DataSourceActions, DataSourceSelectors, FIELD_I18N, DEFAULT_CATEGORY_UUID, getShareLevel, PryDatasetType, ENV_OPTIONS, GeometricFieldTypes, DashboardSelectors, PryShareMode, PRY_ACCESS_TOKEN, META_OPTIONS, RelationTypesSelectors, RelationTypesActions, BaseMenuComponent, BaseLayoutComponent, PRY_ACCESS_GUARD, PryDialogConfirmComponent, PrySortModule, PryIconModule, PryModalModule, PryI18nModule, PryCoreModule, PrySelectModule, PryToggleModule, PryOverlayModule, PryShareModule } from '@provoly/dashboard';
-import * as i5$1 from '@provoly/dashboard/components/checkbox';
+import * as i4$2 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
-import * as i6$1 from '@provoly/dashboard/components/metadata-editor';
+import * as i5$1 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';
@@ -25,7 +25,7 @@ import { v4 } from 'uuid';
 import equal from 'fast-deep-equal/es6';
 import { distinctUntilChanged, map as map$1, filter as filter$1, mergeMap as mergeMap$1, catchError as catchError$1 } from 'rxjs/operators';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i6 from '@provoly/dashboard/components/page-loader';
+import * as i5 from '@provoly/dashboard/components/page-loader';
 import { PryPageLoaderModule } from '@provoly/dashboard/components/page-loader';
 import { dateFormatOptions } from '@provoly/dashboard/components/data-format';
 import { concatLatestFrom } from '@ngrx/operators';
@@ -284,11 +284,11 @@ class SelectMetadataComponent {
         this.metadataSelected.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SelectMetadataComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SelectMetadataComponent, selector: "pry-abac-select-metadata", outputs: { metadataSelected: "metadataSelected" }, ngImport: i0, template: "<ng-container *ngFor=\"let metadata of metadata$ | async\">\n  <button class=\"m-pry-overlay-item\" (click)=\"onSelectMetadata(metadata.id)\">\n    {{ metadata.name }}\n  </button>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: SelectMetadataComponent, selector: "pry-abac-select-metadata", outputs: { metadataSelected: "metadataSelected" }, ngImport: i0, template: "@for (metadata of metadata$ | async; track metadata) {\n  <button class=\"m-pry-overlay-item\" (click)=\"onSelectMetadata(metadata.id)\">\n    {{ metadata.name }}\n  </button>\n}\n", dependencies: [{ kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SelectMetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-abac-select-metadata', template: "<ng-container *ngFor=\"let metadata of metadata$ | async\">\n  <button class=\"m-pry-overlay-item\" (click)=\"onSelectMetadata(metadata.id)\">\n    {{ metadata.name }}\n  </button>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-abac-select-metadata', template: "@for (metadata of metadata$ | async; track metadata) {\n  <button class=\"m-pry-overlay-item\" (click)=\"onSelectMetadata(metadata.id)\">\n    {{ metadata.name }}\n  </button>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { metadataSelected: [{
                 type: Output
             }] } });
@@ -306,11 +306,11 @@ class SelectAttributeComponent {
         this.attributeSelected.emit({ attribute: attributeId, class: classId });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SelectAttributeComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SelectAttributeComponent, selector: "pry-abac-select-attribute", outputs: { attributeSelected: "attributeSelected" }, ngImport: i0, template: "<ng-container *ngFor=\"let class of classes$ | async\">\n  <button\n    class=\"m-pry-overlay-item\"\n    *ngFor=\"let attribute of class.attributes\"\n    (click)=\"onSelectAttribute(class.id, attribute.id)\"\n  >\n    {{ class.name }} - {{ attribute.name }}\n  </button>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: SelectAttributeComponent, selector: "pry-abac-select-attribute", outputs: { attributeSelected: "attributeSelected" }, ngImport: i0, template: "@for (class of classes$ | async; track class) {\n  @for (attribute of class.attributes; track attribute) {\n    <button\n      class=\"m-pry-overlay-item\"\n      (click)=\"onSelectAttribute(class.id, attribute.id)\"\n      >\n      {{ class.name }} - {{ attribute.name }}\n    </button>\n  }\n}\n", dependencies: [{ kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SelectAttributeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-abac-select-attribute', template: "<ng-container *ngFor=\"let class of classes$ | async\">\n  <button\n    class=\"m-pry-overlay-item\"\n    *ngFor=\"let attribute of class.attributes\"\n    (click)=\"onSelectAttribute(class.id, attribute.id)\"\n  >\n    {{ class.name }} - {{ attribute.name }}\n  </button>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-abac-select-attribute', template: "@for (class of classes$ | async; track class) {\n  @for (attribute of class.attributes; track attribute) {\n    <button\n      class=\"m-pry-overlay-item\"\n      (click)=\"onSelectAttribute(class.id, attribute.id)\"\n      >\n      {{ class.name }} - {{ attribute.name }}\n    </button>\n  }\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { attributeSelected: [{
                 type: Output
             }] } });
@@ -397,11 +397,11 @@ class AttributeConditionComponent {
         this.store.dispatch(AbacRulesActions.removeEditAbacRuleConditionFromComposed({ conditionId: parentId, childrenId: conditionId }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AttributeConditionComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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            [disabled]=\"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", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { 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", "cdkConnectedOverlayDisposeOnNavigation"], 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: "17.0.0", version: "18.2.7", type: AttributeConditionComponent, selector: "pry-attribute-condition", inputs: { readonly: "readonly", id: "id" }, ngImport: i0, template: "@if (condition$ | async; as condition) {\n  @if (attribute$ | async; as attr) {\n    @if (field$ | async; as field) {\n      <div class=\"o-pry-attribute-condition\">\n        @if (!readonly) {\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            aria-pressed=\"false\"\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            <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        <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            [disabled]=\"readonly\"\n          ></pry-select>\n        </div>\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    } @else {\n      Loading field ...\n    }\n  } @else {\n    Loading attribute ...\n  }\n}\n", dependencies: [{ kind: "component", type: i3.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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "directive", type: i4$1.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", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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            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            [disabled]=\"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: "@if (condition$ | async; as condition) {\n  @if (attribute$ | async; as attr) {\n    @if (field$ | async; as field) {\n      <div class=\"o-pry-attribute-condition\">\n        @if (!readonly) {\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            aria-pressed=\"false\"\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            <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        <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            [disabled]=\"readonly\"\n          ></pry-select>\n        </div>\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    } @else {\n      Loading field ...\n    }\n  } @else {\n    Loading attribute ...\n  }\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { readonly: [{
                 type: Input
             }], id: [{
@@ -459,11 +459,11 @@ class MetadataConditionComponent {
         this.store.dispatch(AbacRulesActions.removeEditAbacRuleConditionFromComposed({ conditionId: parentId, childrenId: conditionId }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MetadataConditionComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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          [disabled]=\"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, condition.operator, 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", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { 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: "17.0.0", version: "18.2.7", type: MetadataConditionComponent, selector: "pry-metadata-condition", inputs: { readonly: "readonly", id: "id" }, ngImport: i0, template: "@if (condition$ | async; as condition) {\n  @if (metadata$ | async; as metadata) {\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        @if (!readonly) {\n          <pry-icon iconSvg=\"drag_indicator\"></pry-icon>\n        }\n        <span class=\"u-visually-hidden\">???</span>\n      </button>\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      <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      <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          [disabled]=\"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      <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      @if (!readonly) {\n        <button\n          type=\"button\"\n          aria-pressed=\"false\"\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          @for (metadataUser of metadataUsers$ | async; track metadataUser) {\n            <button class=\"m-pry-overlay-item\" (click)=\"onSelectMetadataUser(condition.id, condition.operator, metadataUser)\">\n              {{ metadataUser.name }}\n            </button>\n          }\n        </div>\n      </ng-template>\n    </div>\n  } @else {\n    Loading ...\n  }\n}\n", dependencies: [{ kind: "component", type: i3.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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "directive", type: i3.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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          [disabled]=\"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, condition.operator, 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: "@if (condition$ | async; as condition) {\n  @if (metadata$ | async; as metadata) {\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        @if (!readonly) {\n          <pry-icon iconSvg=\"drag_indicator\"></pry-icon>\n        }\n        <span class=\"u-visually-hidden\">???</span>\n      </button>\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      <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      <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          [disabled]=\"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      <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      @if (!readonly) {\n        <button\n          type=\"button\"\n          aria-pressed=\"false\"\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          @for (metadataUser of metadataUsers$ | async; track metadataUser) {\n            <button class=\"m-pry-overlay-item\" (click)=\"onSelectMetadataUser(condition.id, condition.operator, metadataUser)\">\n              {{ metadataUser.name }}\n            </button>\n          }\n        </div>\n      </ng-template>\n    </div>\n  } @else {\n    Loading ...\n  }\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { readonly: [{
                 type: Input
             }], id: [{
@@ -510,11 +510,11 @@ class ComposedConditionComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ComposedConditionComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ComposedConditionComponent, selector: "pry-composed-condition", inputs: { id: "id", readonly: "readonly", rootElement: "rootElement" }, ngImport: i0, template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <ng-container *ngIf=\"condition.type === OR || condition.type === AND; else metaOrAttributeCondition\">\n    <div class=\"o-pry-composed-condition-wrapper\" [class.root-element]=\"rootElement\">\n      <div class=\"o-pry-composed-condition\">\n        <div class=\"o-pry-composed-condition__type -vertical-bar\">\n          <div class=\"o-pry-composed-condition__type__content\">\n            <pry-toggle\n              leftword=\"ET\"\n              rightword=\"OU\"\n              [ngModel]=\"condition.type === AND\"\n              (ngModelChange)=\"onChangeConditionType($event ? AND : OR, condition.id)\"\n              [alwaysActive]=\"true\"\n              [disabled]=\"readonly\"\n            ></pry-toggle>\n          </div>\n        </div>\n\n        <div class=\"o-pry-composed-condition__content\">\n          <ng-container *ngFor=\"let id of condition.composed\">\n            <pry-composed-condition [readonly]=\"readonly\" [id]=\"id\"></pry-composed-condition>\n          </ng-container>\n\n          <ng-container *ngIf=\"!readonly\">\n            <ng-container *ngIf=\"editAbacRuleType$ | async as ruleType\">\n              <div>\n                <button\n                  type=\"button\"\n                  aria-pressed=\"false\"\n                  class=\"a-btn a-btn--iconcircle-text\"\n                  (click)=\"panelOpen = true\"\n                  [pryOverlay]=\"selectOverlay\"\n                  [(overlayOpen)]=\"panelOpen\"\n                  pryOverlayPosition=\"start-bottom\"\n                >\n                  <span class=\"a-btn--iconcircle-text__icon-wrapper\">\n                    <pry-icon iconSvg=\"add\" [height]=\"14\" [width]=\"14\"></pry-icon>\n                  </span>\n                  <span>\n                    {{\n                      '@pry.admin.abac-rules.form.' + (ruleType === ATTRIBUTE ? 'addAttribute' : 'addMetadata') | i18n\n                    }}\n                  </span>\n                </button>\n              </div>\n\n              <ng-template #selectOverlay>\n                <ng-container *ngIf=\"ruleType === ATTRIBUTE; else metadataType\">\n                  <pry-abac-select-attribute\n                    (attributeSelected)=\"onAddNewAttribute($event, condition.id)\"\n                  ></pry-abac-select-attribute>\n                </ng-container>\n                <ng-template #metadataType>\n                  <pry-abac-select-metadata\n                    (metadataSelected)=\"onAddNewMetadata($event, condition.id)\"\n                  ></pry-abac-select-metadata>\n                </ng-template>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"!readonly\">\n        <div class=\"o-pry-composed-condition__add-item\">\n          <button\n            type=\"button\"\n            aria-pressed=\"false\"\n            class=\"a-btn a-btn--iconcircle-text\"\n            (click)=\"onAddNewNestedCondition(condition.id)\"\n          >\n            <span class=\"a-btn--iconcircle-text__icon-wrapper\">\n              <pry-icon iconSvg=\"add\" [height]=\"14\" [width]=\"14\"></pry-icon>\n            </span>\n            <span>\n              {{ '@pry.admin.abac-rules.form.addGroup' | i18n }}\n            </span>\n          </button>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-template #metaOrAttributeCondition>\n    <ng-container *ngIf=\"condition.type === METADATA\">\n      <pry-metadata-condition [readonly]=\"readonly\" [id]=\"condition.id\"></pry-metadata-condition>\n    </ng-container>\n    <ng-container *ngIf=\"condition.type === ATTRIBUTE\">\n      <pry-attribute-condition [readonly]=\"readonly\" [id]=\"condition.id\"></pry-attribute-condition>\n    </ng-container>\n  </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.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "directive", type: i4.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "component", type: SelectMetadataComponent, selector: "pry-abac-select-metadata", outputs: ["metadataSelected"] }, { kind: "component", type: SelectAttributeComponent, selector: "pry-abac-select-attribute", outputs: ["attributeSelected"] }, { kind: "component", type: AttributeConditionComponent, selector: "pry-attribute-condition", inputs: ["readonly", "id"] }, { kind: "component", type: MetadataConditionComponent, selector: "pry-metadata-condition", inputs: ["readonly", "id"] }, { 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: "17.0.0", version: "18.2.7", type: ComposedConditionComponent, selector: "pry-composed-condition", inputs: { id: "id", readonly: "readonly", rootElement: "rootElement" }, ngImport: i0, template: "@if (condition$ | async; as condition) {\n  @if (condition.type === OR || condition.type === AND) {\n    <div class=\"o-pry-composed-condition-wrapper\" [class.root-element]=\"rootElement\">\n      <div class=\"o-pry-composed-condition\">\n        <div class=\"o-pry-composed-condition__type -vertical-bar\">\n          <div class=\"o-pry-composed-condition__type__content\">\n            <pry-toggle\n              leftword=\"ET\"\n              rightword=\"OU\"\n              [ngModel]=\"condition.type === AND\"\n              (ngModelChange)=\"onChangeConditionType($event ? AND : OR, condition.id)\"\n              [alwaysActive]=\"true\"\n              [disabled]=\"readonly\"\n            ></pry-toggle>\n          </div>\n        </div>\n        <div class=\"o-pry-composed-condition__content\">\n          @for (id of condition.composed; track id) {\n            <pry-composed-condition [readonly]=\"readonly\" [id]=\"id\"></pry-composed-condition>\n          }\n          @if (!readonly) {\n            @if (editAbacRuleType$ | async; as ruleType) {\n              <div>\n                <button\n                  type=\"button\"\n                  aria-pressed=\"false\"\n                  class=\"a-btn a-btn--iconcircle-text\"\n                  (click)=\"panelOpen = true\"\n                  [pryOverlay]=\"selectOverlay\"\n                  [(overlayOpen)]=\"panelOpen\"\n                  pryOverlayPosition=\"start-bottom\"\n                  >\n                  <span class=\"a-btn--iconcircle-text__icon-wrapper\">\n                    <pry-icon iconSvg=\"add\" [height]=\"14\" [width]=\"14\"></pry-icon>\n                  </span>\n                  <span>\n                    {{\n                    '@pry.admin.abac-rules.form.' + (ruleType === ATTRIBUTE ? 'addAttribute' : 'addMetadata') | i18n\n                    }}\n                  </span>\n                </button>\n              </div>\n              <ng-template #selectOverlay>\n                @if (ruleType === ATTRIBUTE) {\n                  <pry-abac-select-attribute\n                    (attributeSelected)=\"onAddNewAttribute($event, condition.id)\"\n                  ></pry-abac-select-attribute>\n                } @else {\n                  <pry-abac-select-metadata\n                    (metadataSelected)=\"onAddNewMetadata($event, condition.id)\"\n                  ></pry-abac-select-metadata>\n                }\n              </ng-template>\n            }\n          }\n        </div>\n      </div>\n      @if (!readonly) {\n        <div class=\"o-pry-composed-condition__add-item\">\n          <button\n            type=\"button\"\n            aria-pressed=\"false\"\n            class=\"a-btn a-btn--iconcircle-text\"\n            (click)=\"onAddNewNestedCondition(condition.id)\"\n            >\n            <span class=\"a-btn--iconcircle-text__icon-wrapper\">\n              <pry-icon iconSvg=\"add\" [height]=\"14\" [width]=\"14\"></pry-icon>\n            </span>\n            <span>\n              {{ '@pry.admin.abac-rules.form.addGroup' | i18n }}\n            </span>\n          </button>\n        </div>\n      }\n    </div>\n  } @else {\n    @if (condition.type === METADATA) {\n      <pry-metadata-condition [readonly]=\"readonly\" [id]=\"condition.id\"></pry-metadata-condition>\n    }\n    @if (condition.type === ATTRIBUTE) {\n      <pry-attribute-condition [readonly]=\"readonly\" [id]=\"condition.id\"></pry-attribute-condition>\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: i3.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: i3.PryToggleComponent, selector: "pry-toggle", inputs: ["alwaysActive", "disabled", "mode", "size", "dir", "leftword", "rightword"] }, { kind: "directive", type: i3.PryOverlayDirective, selector: "[pryOverlay]", inputs: ["pryOverlay", "styleReversed", "pryOverlaySticky", "pryOverlayNoPadding", "pryOverlayPosition", "overlayOpen", "hasBackdrop"], outputs: ["overlayOpenChange"] }, { kind: "component", type: SelectMetadataComponent, selector: "pry-abac-select-metadata", outputs: ["metadataSelected"] }, { kind: "component", type: SelectAttributeComponent, selector: "pry-abac-select-attribute", outputs: ["attributeSelected"] }, { kind: "component", type: AttributeConditionComponent, selector: "pry-attribute-condition", inputs: ["readonly", "id"] }, { kind: "component", type: MetadataConditionComponent, selector: "pry-metadata-condition", inputs: ["readonly", "id"] }, { kind: "component", type: ComposedConditionComponent, selector: "pry-composed-condition", inputs: ["id", "readonly", "rootElement"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ComposedConditionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-composed-condition', template: "<ng-container *ngIf=\"condition$ | async as condition\">\n  <ng-container *ngIf=\"condition.type === OR || condition.type === AND; else metaOrAttributeCondition\">\n    <div class=\"o-pry-composed-condition-wrapper\" [class.root-element]=\"rootElement\">\n      <div class=\"o-pry-composed-condition\">\n        <div class=\"o-pry-composed-condition__type -vertical-bar\">\n          <div class=\"o-pry-composed-condition__type__content\">\n            <pry-toggle\n              leftword=\"ET\"\n              rightword=\"OU\"\n              [ngModel]=\"condition.type === AND\"\n              (ngModelChange)=\"onChangeConditionType($event ? AND : OR, condition.id)\"\n              [alwaysActive]=\"true\"\n              [disabled]=\"readonly\"\n            ></pry-toggle>\n          </div>\n        </div>\n\n        <div class=\"o-pry-composed-condition__content\">\n          <ng-container *ngFor=\"let id of condition.composed\">\n            <pry-composed-condition [readonly]=\"readonly\" [id]=\"id\"></pry-composed-condition>\n          </ng-container>\n\n          <ng-container *ngIf=\"!readonly\">\n            <ng-container *ngIf=\"editAbacRuleType$ | async as ruleType\">\n              <div>\n                <button\n                  type=\"button\"\n                  aria-pressed=\"false\"\n                  class=\"a-btn a-btn--iconcircle-text\"\n                  (click)=\"panelOpen = true\"\n                  [pryOverlay]=\"selectOverlay\"\n                  [(overlayOpen)]=\"panelOpen\"\n                  pryOverlayPosition=\"start-bottom\"\n                >\n                  <span class=\"a-btn--iconcircle-text__icon-wrapper\">\n                    <pry-icon iconSvg=\"add\" [height]=\"14\" [width]=\"14\"></pry-icon>\n                  </span>\n                  <span>\n                    {{\n                      '@pry.admin.abac-rules.form.' + (ruleType === ATTRIBUTE ? 'addAttribute' : 'addMetadata') | i18n\n                    }}\n                  </span>\n                </button>\n              </div>\n\n              <ng-template #selectOverlay>\n                <ng-container *ngIf=\"ruleType === ATTRIBUTE; else metadataType\">\n                  <pry-abac-select-attribute\n                    (attributeSelected)=\"onAddNewAttribute($event, condition.id)\"\n                  ></pry-abac-select-attribute>\n                </ng-container>\n                <ng-template #metadataType>\n                  <pry-abac-select-metadata\n                    (metadataSelected)=\"onAddNewMetadata($event, condition.id)\"\n                  ></pry-abac-select-metadata>\n                </ng-template>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"!readonly\">\n        <div class=\"o-pry-composed-condition__add-item\">\n          <button\n            type=\"button\"\n            aria-pressed=\"false\"\n            class=\"a-btn a-btn--iconcircle-text\"\n            (click)=\"onAddNewNestedCondition(condition.id)\"\n          >\n            <span class=\"a-btn--iconcircle-text__icon-wrapper\">\n              <pry-icon iconSvg=\"add\" [height]=\"14\" [width]=\"14\"></pry-icon>\n            </span>\n            <span>\n              {{ '@pry.admin.abac-rules.form.addGroup' | i18n }}\n            </span>\n          </button>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-template #metaOrAttributeCondition>\n    <ng-container *ngIf=\"condition.type === METADATA\">\n      <pry-metadata-condition [readonly]=\"readonly\" [id]=\"condition.id\"></pry-metadata-condition>\n    </ng-container>\n    <ng-container *ngIf=\"condition.type === ATTRIBUTE\">\n      <pry-attribute-condition [readonly]=\"readonly\" [id]=\"condition.id\"></pry-attribute-condition>\n    </ng-container>\n  </ng-template>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-composed-condition', template: "@if (condition$ | async; as condition) {\n  @if (condition.type === OR || condition.type === AND) {\n    <div class=\"o-pry-composed-condition-wrapper\" [class.root-element]=\"rootElement\">\n      <div class=\"o-pry-composed-condition\">\n        <div class=\"o-pry-composed-condition__type -vertical-bar\">\n          <div class=\"o-pry-composed-condition__type__content\">\n            <pry-toggle\n              leftword=\"ET\"\n              rightword=\"OU\"\n              [ngModel]=\"condition.type === AND\"\n              (ngModelChange)=\"onChangeConditionType($event ? AND : OR, condition.id)\"\n              [alwaysActive]=\"true\"\n              [disabled]=\"readonly\"\n            ></pry-toggle>\n          </div>\n        </div>\n        <div class=\"o-pry-composed-condition__content\">\n          @for (id of condition.composed; track id) {\n            <pry-composed-condition [readonly]=\"readonly\" [id]=\"id\"></pry-composed-condition>\n          }\n          @if (!readonly) {\n            @if (editAbacRuleType$ | async; as ruleType) {\n              <div>\n                <button\n                  type=\"button\"\n                  aria-pressed=\"false\"\n                  class=\"a-btn a-btn--iconcircle-text\"\n                  (click)=\"panelOpen = true\"\n                  [pryOverlay]=\"selectOverlay\"\n                  [(overlayOpen)]=\"panelOpen\"\n                  pryOverlayPosition=\"start-bottom\"\n                  >\n                  <span class=\"a-btn--iconcircle-text__icon-wrapper\">\n                    <pry-icon iconSvg=\"add\" [height]=\"14\" [width]=\"14\"></pry-icon>\n                  </span>\n                  <span>\n                    {{\n                    '@pry.admin.abac-rules.form.' + (ruleType === ATTRIBUTE ? 'addAttribute' : 'addMetadata') | i18n\n                    }}\n                  </span>\n                </button>\n              </div>\n              <ng-template #selectOverlay>\n                @if (ruleType === ATTRIBUTE) {\n                  <pry-abac-select-attribute\n                    (attributeSelected)=\"onAddNewAttribute($event, condition.id)\"\n                  ></pry-abac-select-attribute>\n                } @else {\n                  <pry-abac-select-metadata\n                    (metadataSelected)=\"onAddNewMetadata($event, condition.id)\"\n                  ></pry-abac-select-metadata>\n                }\n              </ng-template>\n            }\n          }\n        </div>\n      </div>\n      @if (!readonly) {\n        <div class=\"o-pry-composed-condition__add-item\">\n          <button\n            type=\"button\"\n            aria-pressed=\"false\"\n            class=\"a-btn a-btn--iconcircle-text\"\n            (click)=\"onAddNewNestedCondition(condition.id)\"\n            >\n            <span class=\"a-btn--iconcircle-text__icon-wrapper\">\n              <pry-icon iconSvg=\"add\" [height]=\"14\" [width]=\"14\"></pry-icon>\n            </span>\n            <span>\n              {{ '@pry.admin.abac-rules.form.addGroup' | i18n }}\n            </span>\n          </button>\n        </div>\n      }\n    </div>\n  } @else {\n    @if (condition.type === METADATA) {\n      <pry-metadata-condition [readonly]=\"readonly\" [id]=\"condition.id\"></pry-metadata-condition>\n    }\n    @if (condition.type === ATTRIBUTE) {\n      <pry-attribute-condition [readonly]=\"readonly\" [id]=\"condition.id\"></pry-attribute-condition>\n    }\n  }\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { id: [{
                 type: Input
             }], readonly: [{
@@ -558,11 +558,11 @@ class AdminAbacRulesFormComponent {
         this.store.dispatch(AbacRulesActions.cancelAbacRuleEdition({ redirect: backPath.toString() }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", 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            [disabled]=\"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", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { 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: "17.0.0", version: "18.2.7", type: AdminAbacRulesFormComponent, selector: "pry-admin-abac-rules-form", inputs: { readonly: "readonly", edit: "edit" }, ngImport: i0, template: "@if (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          @if (isSubmitted && name.invalid) {\n            <label\n              class=\"a-label a-label--help -error\"\n              id=\"name-error\"\n              for=\"inputName\"\n              >{{ '@pry.admin.required' | i18n }}</label\n              >\n            }\n          </div>\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        <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          <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              [disabled]=\"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            <ng-template #templateOption let-item=\"item\">\n              @if (toPredicate(item); as 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              }\n            </ng-template>\n            @if (isSubmitted && abacRuleForm.form.get('predicate')?.invalid) {\n              <label\n                class=\"a-label a-label--help -error\"\n                id=\"predicate-error\"\n                for=\"predicate\"\n                >{{ '@pry.admin.required' | i18n }}</label\n                >\n              }\n            </div>\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              <div class=\"m-form-radio-group\">\n                @if (typeSelected$ | async) {\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                  @if (!readonly) {\n                    <span style=\"font-size: 12px; font-style: italic\">{{\n                      '@pry.admin.abac-rules.form.typeSelected' | i18n\n                    }}</span>\n                  }\n                } @else {\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                }\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        @if (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        }\n        @if (!readonly) {\n          <div 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        }\n      </form>\n    }\n", dependencies: [{ 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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "component", type: ComposedConditionComponent, selector: "pry-composed-condition", inputs: ["id", "readonly", "rootElement"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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            [attr.aria-labelledby]=\"\n              isSubmitted && abacRuleForm.form.get('predicate')?.invalid\n                ? 'predicate-label predicate-error'\n                : 'predicate-label'\n            \"\n            [disabled]=\"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" }]
+            args: [{ selector: 'pry-admin-abac-rules-form', template: "@if (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          @if (isSubmitted && name.invalid) {\n            <label\n              class=\"a-label a-label--help -error\"\n              id=\"name-error\"\n              for=\"inputName\"\n              >{{ '@pry.admin.required' | i18n }}</label\n              >\n            }\n          </div>\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        <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          <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              [disabled]=\"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            <ng-template #templateOption let-item=\"item\">\n              @if (toPredicate(item); as 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              }\n            </ng-template>\n            @if (isSubmitted && abacRuleForm.form.get('predicate')?.invalid) {\n              <label\n                class=\"a-label a-label--help -error\"\n                id=\"predicate-error\"\n                for=\"predicate\"\n                >{{ '@pry.admin.required' | i18n }}</label\n                >\n              }\n            </div>\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              <div class=\"m-form-radio-group\">\n                @if (typeSelected$ | async) {\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                  @if (!readonly) {\n                    <span style=\"font-size: 12px; font-style: italic\">{{\n                      '@pry.admin.abac-rules.form.typeSelected' | i18n\n                    }}</span>\n                  }\n                } @else {\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                }\n              </div>\n            </fieldset>\n          </div>\n        </div>\n        @if (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        }\n        @if (!readonly) {\n          <div 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        }\n      </form>\n    }\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { readonly: [{
                 type: Input
             }], edit: [{
@@ -600,7 +600,7 @@ class AdminAbacRulesEditComponent {
         this.store.dispatch(AbacRulesActions.resetEditAbacRule());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAbacRulesEditComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminAbacRulesEditComponent, selector: "pry-admin-abac-rules-edit", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.abac-rules.title.edit' | i18n }}</h1>\n  <pry-admin-abac-rules-form [edit]=\"true\"></pry-admin-abac-rules-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminAbacRulesFormComponent, selector: "pry-admin-abac-rules-form", inputs: ["readonly", "edit"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminAbacRulesEditComponent, selector: "pry-admin-abac-rules-edit", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.abac-rules.title.edit' | i18n }}</h1>\n  <pry-admin-abac-rules-form [edit]=\"true\"></pry-admin-abac-rules-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminAbacRulesFormComponent, selector: "pry-admin-abac-rules-form", inputs: ["readonly", "edit"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAbacRulesEditComponent, decorators: [{
             type: Component,
@@ -781,7 +781,7 @@ class AdminAbacRulesNewComponent {
         this.store.dispatch(AbacRulesActions.resetEditAbacRule());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAbacRulesNewComponent, deps: [{ token: i1.Store }, { token: AbacRulesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminAbacRulesNewComponent, selector: "pry-admin-abac-rules-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.abac-rules.title.add' | i18n }}</h1>\n  <pry-admin-abac-rules-form [readonly]=\"false\" [edit]=\"false\"></pry-admin-abac-rules-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminAbacRulesFormComponent, selector: "pry-admin-abac-rules-form", inputs: ["readonly", "edit"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminAbacRulesNewComponent, selector: "pry-admin-abac-rules-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.abac-rules.title.add' | i18n }}</h1>\n  <pry-admin-abac-rules-form [readonly]=\"false\" [edit]=\"false\"></pry-admin-abac-rules-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminAbacRulesFormComponent, selector: "pry-admin-abac-rules-form", inputs: ["readonly", "edit"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAbacRulesNewComponent, decorators: [{
             type: Component,
@@ -824,7 +824,7 @@ class AdminAbacRulesViewComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAbacRulesViewComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminAbacRulesViewComponent, selector: "pry-admin-abac-rules-view", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-1\">{{ '@pry.admin.abac-rules.title.view' | i18n }}</h1>\n  <pry-admin-abac-rules-form [readonly]=\"true\"></pry-admin-abac-rules-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminAbacRulesFormComponent, selector: "pry-admin-abac-rules-form", inputs: ["readonly", "edit"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminAbacRulesViewComponent, selector: "pry-admin-abac-rules-view", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-1\">{{ '@pry.admin.abac-rules.title.view' | i18n }}</h1>\n  <pry-admin-abac-rules-form [readonly]=\"true\"></pry-admin-abac-rules-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminAbacRulesFormComponent, selector: "pry-admin-abac-rules-form", inputs: ["readonly", "edit"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAbacRulesViewComponent, decorators: [{
             type: Component,
@@ -861,11 +861,11 @@ class AdminAbacRulesComponent {
         this.store.dispatch(AdminActions.routeTo({ path: path.toString() }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAbacRulesComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminAbacRulesComponent, selector: "pry-admin-abac-rules", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.abac-rules.title.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.abac-rules.title.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.abac-rules.form.name' | i18n }}</th>\n        <th prySortHeader=\"type\">{{ '@pry.admin.abac-rules.form.type' | i18n }}</th>\n        <th prySortHeader=\"active\">{{ '@pry.admin.abac-rules.form.status' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let rule of rules$ | async | prySortData: sortActive : sortDirection\" (click)=\"goToSelectRule(rule)\">\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-arule-' + rule.id\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n          >\n            <span class=\"u-visually-hidden\">{{ rule.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ rule.name }}</td>\n        <td>\n          {{ '@pry.admin.abac-rules.form.' + (rule.type === 'METADATA' ? 'typeMetadata' : 'typeAttribute') | i18n }}\n        </td>\n        <td>\n          <span class=\"a-badge\" [ngClass]=\"{ '-status-ok': rule.active, '-status-inactive': !rule.active }\">\n            {{\n              (rule.active ? '@pry.admin.abac-rules.form.statusActive' : '@pry.admin.abac-rules.form.statusInactive')\n                | i18n\n            }}\n          </span>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminAbacRulesComponent, selector: "pry-admin-abac-rules", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.abac-rules.title.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n    <caption>\n      {{\n      '@pry.admin.abac-rules.title.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.abac-rules.form.name' | i18n }}</th>\n        <th prySortHeader=\"type\">{{ '@pry.admin.abac-rules.form.type' | i18n }}</th>\n        <th prySortHeader=\"active\">{{ '@pry.admin.abac-rules.form.status' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (rule of rules$ | async | prySortData: sortActive : sortDirection; track rule) {\n        <tr (click)=\"goToSelectRule(rule)\">\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-arule-' + rule.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              >\n              <span class=\"u-visually-hidden\">{{ rule.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ rule.name }}</td>\n          <td>\n            {{ '@pry.admin.abac-rules.form.' + (rule.type === 'METADATA' ? 'typeMetadata' : 'typeAttribute') | i18n }}\n          </td>\n          <td>\n            <span class=\"a-badge\" [ngClass]=\"{ '-status-ok': rule.active, '-status-inactive': !rule.active }\">\n              {{\n              (rule.active ? '@pry.admin.abac-rules.form.statusActive' : '@pry.admin.abac-rules.form.statusInactive')\n              | i18n\n              }}\n            </span>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAbacRulesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-abac-rules', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.abac-rules.title.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.abac-rules.title.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.abac-rules.form.name' | i18n }}</th>\n        <th prySortHeader=\"type\">{{ '@pry.admin.abac-rules.form.type' | i18n }}</th>\n        <th prySortHeader=\"active\">{{ '@pry.admin.abac-rules.form.status' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let rule of rules$ | async | prySortData: sortActive : sortDirection\" (click)=\"goToSelectRule(rule)\">\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-arule-' + rule.id\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n          >\n            <span class=\"u-visually-hidden\">{{ rule.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ rule.name }}</td>\n        <td>\n          {{ '@pry.admin.abac-rules.form.' + (rule.type === 'METADATA' ? 'typeMetadata' : 'typeAttribute') | i18n }}\n        </td>\n        <td>\n          <span class=\"a-badge\" [ngClass]=\"{ '-status-ok': rule.active, '-status-inactive': !rule.active }\">\n            {{\n              (rule.active ? '@pry.admin.abac-rules.form.statusActive' : '@pry.admin.abac-rules.form.statusInactive')\n                | i18n\n            }}\n          </span>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-abac-rules', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.abac-rules.title.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n    <caption>\n      {{\n      '@pry.admin.abac-rules.title.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.abac-rules.form.name' | i18n }}</th>\n        <th prySortHeader=\"type\">{{ '@pry.admin.abac-rules.form.type' | i18n }}</th>\n        <th prySortHeader=\"active\">{{ '@pry.admin.abac-rules.form.status' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (rule of rules$ | async | prySortData: sortActive : sortDirection; track rule) {\n        <tr (click)=\"goToSelectRule(rule)\">\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-arule-' + rule.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              >\n              <span class=\"u-visually-hidden\">{{ rule.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ rule.name }}</td>\n          <td>\n            {{ '@pry.admin.abac-rules.form.' + (rule.type === 'METADATA' ? 'typeMetadata' : 'typeAttribute') | i18n }}\n          </td>\n          <td>\n            <span class=\"a-badge\" [ngClass]=\"{ '-status-ok': rule.active, '-status-inactive': !rule.active }\">\n              {{\n              (rule.active ? '@pry.admin.abac-rules.form.statusActive' : '@pry.admin.abac-rules.form.statusInactive')\n              | i18n\n              }}\n            </span>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 const AdminClassActions = {
@@ -973,7 +973,7 @@ const AdminClassSelectors = {
 class AdminClassesCustomizeTooltipComponent extends SubscriptionnerDirective {
     set currentClass(clazz) {
         this._currentClass$.next(clazz ?? {});
-        this.currentClassConfig = this.removeUnknown(JSON.parse(JSON.stringify(this.defs[this.currentClass.id] ?? { type: 'default' })));
+        this.currentClassConfig = this.removeUnknown(structuredClone(this.defs[this.currentClass.id] ?? { type: 'default' }));
     }
     get currentClass() {
         return this._currentClass$.value;
@@ -1008,7 +1008,7 @@ class AdminClassesCustomizeTooltipComponent extends SubscriptionnerDirective {
         }))));
         this.subscriptions.add(this.store.select(ConfigSelectors.tooltipDefinitions).subscribe((defs) => {
             this.defs = defs;
-            this.currentClassConfig = JSON.parse(JSON.stringify(defs[this.currentClass.id] ?? { type: 'default' }));
+            this.currentClassConfig = structuredClone(defs[this.currentClass.id] ?? { type: 'default' });
         }));
         this.classes$ = this.store.select(ClassSelectors.classes);
         this.fields$ = this.store.select(FieldSelectors.fields);
@@ -1086,13 +1086,13 @@ class AdminClassesCustomizeTooltipComponent extends SubscriptionnerDirective {
         }
         return config;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", type: AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: { currentClass: "currentClass" }, outputs: { backPressed: "backPressed" }, viewQueries: [{ propertyName: "example", first: true, predicate: ["example"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div>\n  <div class=\"m-form-label-field -width-xl\">\n    <label class=\"a-label\" for=\"tooltip_type\">{{ '@pry.admin.customize.type' | i18n }}</label>\n    <pry-select\n      id=\"tooltip_type\"\n      (ngModelChange)=\"tooltipTypeChanged($event)\"\n      [ngModel]=\"currentClassConfig.type\"\n      [items]=\"possibleTooltipTypes$ | async\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n    ></pry-select>\n  </div>\n\n  <div>\n    <pry-checkbox [(ngModel)]=\"advancedTooltip\">{{ '@pry.admin.customize.advanced' | i18n }}</pry-checkbox>\n  </div>\n\n  <div class=\"m-form-label-field -width-xl\" *ngIf=\"!advancedTooltip && currentClassConfig.type === 'attribute'\">\n    <label class=\"a-label\" for=\"customize_simplified\">{{ '@pry.admin.customize.simplified' | i18n }}</label>\n    <pry-select\n      id=\"customize_simplified\"\n      (ngModelChange)=\"changeAttributes($event)\"\n      [ngModel]=\"currentClassConfig.options.attributes\"\n      [items]=\"attributesOfClass$ | async\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"id\"\n    ></pry-select>\n  </div>\n\n  <ng-container *ngIf=\"advancedTooltip\">\n    <textarea\n      cols=\"100\"\n      rows=\"15\"\n      class=\"a-form-field\"\n      [(ngModel)]=\"strOptions\"\n      (focusout)=\"optionsChanged()\"\n    ></textarea>\n  </ng-container>\n</div>\n\n<div class=\"m-tooltip m-tooltip--example\" [class.-hidden]=\"noTooltip\">\n  <div #example></div>\n</div>\n\n<div class=\"m-btn-group -width-md\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTemplate()\">\n    {{ '@pry.admin.customize.update' | i18n }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesCustomizeTooltipComponent, deps: [{ token: i3.TooltipFactoryService }, { token: i0.Injector }, { token: i3.PryI18nService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", 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  @if (!advancedTooltip && currentClassConfig.type === 'attribute') {\n    <div class=\"m-form-label-field -width-xl\">\n      <label class=\"a-label\" for=\"customize_simplified\">{{ '@pry.admin.customize.simplified' | i18n }}</label>\n      <pry-select\n        id=\"customize_simplified\"\n        (ngModelChange)=\"changeAttributes($event)\"\n        [ngModel]=\"currentClassConfig.options.attributes\"\n        [items]=\"attributesOfClass$ | async\"\n        [multiple]=\"true\"\n        [closeOnSelect]=\"false\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n      ></pry-select>\n    </div>\n  }\n\n  @if (advancedTooltip) {\n    <textarea\n      cols=\"100\"\n      rows=\"15\"\n      class=\"a-form-field\"\n      [(ngModel)]=\"strOptions\"\n      (focusout)=\"optionsChanged()\"\n    ></textarea>\n  }\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$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: i4$2.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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      (ngModelChange)=\"tooltipTypeChanged($event)\"\n      [ngModel]=\"currentClassConfig.type\"\n      [items]=\"possibleTooltipTypes$ | async\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n    ></pry-select>\n  </div>\n\n  <div>\n    <pry-checkbox [(ngModel)]=\"advancedTooltip\">{{ '@pry.admin.customize.advanced' | i18n }}</pry-checkbox>\n  </div>\n\n  <div class=\"m-form-label-field -width-xl\" *ngIf=\"!advancedTooltip && currentClassConfig.type === 'attribute'\">\n    <label class=\"a-label\" for=\"customize_simplified\">{{ '@pry.admin.customize.simplified' | i18n }}</label>\n    <pry-select\n      id=\"customize_simplified\"\n      (ngModelChange)=\"changeAttributes($event)\"\n      [ngModel]=\"currentClassConfig.options.attributes\"\n      [items]=\"attributesOfClass$ | async\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"id\"\n    ></pry-select>\n  </div>\n\n  <ng-container *ngIf=\"advancedTooltip\">\n    <textarea\n      cols=\"100\"\n      rows=\"15\"\n      class=\"a-form-field\"\n      [(ngModel)]=\"strOptions\"\n      (focusout)=\"optionsChanged()\"\n    ></textarea>\n  </ng-container>\n</div>\n\n<div class=\"m-tooltip m-tooltip--example\" [class.-hidden]=\"noTooltip\">\n  <div #example></div>\n</div>\n\n<div class=\"m-btn-group -width-md\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTemplate()\">\n    {{ '@pry.admin.customize.update' | i18n }}\n  </button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i4.TooltipFactoryService }, { type: i0.Injector }, { type: i4.PryI18nService }, { type: i1.Store }], propDecorators: { example: [{
+            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  @if (!advancedTooltip && currentClassConfig.type === 'attribute') {\n    <div class=\"m-form-label-field -width-xl\">\n      <label class=\"a-label\" for=\"customize_simplified\">{{ '@pry.admin.customize.simplified' | i18n }}</label>\n      <pry-select\n        id=\"customize_simplified\"\n        (ngModelChange)=\"changeAttributes($event)\"\n        [ngModel]=\"currentClassConfig.options.attributes\"\n        [items]=\"attributesOfClass$ | async\"\n        [multiple]=\"true\"\n        [closeOnSelect]=\"false\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n      ></pry-select>\n    </div>\n  }\n\n  @if (advancedTooltip) {\n    <textarea\n      cols=\"100\"\n      rows=\"15\"\n      class=\"a-form-field\"\n      [(ngModel)]=\"strOptions\"\n      (focusout)=\"optionsChanged()\"\n    ></textarea>\n  }\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: () => [{ type: i3.TooltipFactoryService }, { type: i0.Injector }, { type: i3.PryI18nService }, { type: i1.Store }], propDecorators: { example: [{
                 type: ViewChild,
                 args: ['example', { read: ViewContainerRef }]
             }], backPressed: [{
@@ -1109,12 +1109,10 @@ const DEFAULT_RULE = {
 class AdminClassesCustomizeSymbolComponent extends SubscriptionnerDirective {
     set currentClass(clazz) {
         this._currentClass = clazz ?? {};
-        this.definitions = !!this.baseDefs
-            ? JSON.parse(JSON.stringify(this.baseDefs[clazz?.id ?? ''] ?? [DEFAULT_RULE]))
-            : [];
+        this.definitions = !!this.baseDefs ? structuredClone(this.baseDefs[clazz?.id ?? ''] ?? [DEFAULT_RULE]) : [];
         this.definitions.sort((def1, def2) => (def1.isDefault ? -1 : 1) - (def2.isDefault ? -1 : 1));
         if (!this.initialDefinitions && !!this.baseDefs) {
-            this.initialDefinitions = JSON.parse(JSON.stringify(this.definitions));
+            this.initialDefinitions = structuredClone(this.definitions);
         }
         this.fieldsForClass = [...(clazz ?? { attributes: [] }).attributes].sort((attr1, attr2) => attr1.name.localeCompare(attr2.name));
     }
@@ -1148,12 +1146,10 @@ class AdminClassesCustomizeSymbolComponent extends SubscriptionnerDirective {
             .pipe(distinctUntilChanged((a, b) => equal(a, b)))
             .subscribe((defs) => {
             this.baseDefs = defs;
-            this.definitions = !!defs
-                ? JSON.parse(JSON.stringify(defs[this.currentClass?.id ?? ''] ?? [DEFAULT_RULE]))
-                : [];
+            this.definitions = !!defs ? structuredClone(defs[this.currentClass?.id ?? ''] ?? [DEFAULT_RULE]) : [];
             this.definitions.sort((def1, def2) => (def1.isDefault ? -1 : 1) - (def2.isDefault ? -1 : 1));
             if (!this.initialDefinitions && !!defs) {
-                this.initialDefinitions = JSON.parse(JSON.stringify(this.definitions));
+                this.initialDefinitions = structuredClone(this.definitions);
             }
         }));
     }
@@ -1199,7 +1195,7 @@ class AdminClassesCustomizeSymbolComponent extends SubscriptionnerDirective {
     }
     valid() {
         this.store.dispatch(ConfigActions.saveIcons({ definitions: { [this.currentClass?.id ?? '']: this.definitions } }));
-        this.initialDefinitions = JSON.parse(JSON.stringify(this.definitions));
+        this.initialDefinitions = structuredClone(this.definitions);
         this.goBack();
     }
     addRule() {
@@ -1225,13 +1221,13 @@ class AdminClassesCustomizeSymbolComponent extends SubscriptionnerDirective {
         this.definitions[nextIndex] = tmp;
         this.store.dispatch(ConfigActions.updateIcons({ definitions: { [this.currentClass?.id ?? '']: this.definitions } }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", type: AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: { currentClass: "currentClass" }, outputs: { backPressed: "backPressed" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"m-rule-wrapper\">\n  <li\n    *ngFor=\"let definition of definitions; let i = index\"\n    [class.m-rule--default]=\"definition.isDefault\"\n    class=\"m-rule\"\n  >\n    <div class=\"m-rule__header\">\n      <h3 class=\"a-h3\">\n        {{ '@pry.admin.rule' | i18n : { id: i + 1 } }}\n        <span>{{ definition.isDefault ? ('@pry.admin.defaultRule' | i18n) : '' }}</span>\n      </h3>\n\n      <div *ngIf=\"!definition.isDefault\" class=\"m-rule__actions\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i <= 1\"\n          [disabled]=\"i <= 1\"\n          (click)=\"move(i, i - 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_haut\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i >= definitions.length - 1\"\n          [disabled]=\"i >= definitions.length - 1\"\n          (click)=\"move(i, i + 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_bas\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"removeRule(i)\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <div>\n      <pry-select-image [iconUrl]=\"definition.iconUrl\" (changed)=\"changeForImage($event, i)\"></pry-select-image>\n\n      <ng-container *ngIf=\"definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"size\">{{ '@pry.admin.size' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeSize($event)\"\n            [items]=\"sizes\"\n            [ngModel]=\"definition.iconSize[0]\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            id=\"size\"\n          ></pry-select>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"display_mode\">{{ '@pry.admin.displayModeImage' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changePosition($event, i)\"\n            [items]=\"positions\"\n            [ngModel]=\"definition.position\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            id=\"display_mode\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <pry-checkbox [ngModel]=\"!!definition.rule\" (click)=\"toggleRule(i)\">{{\n            '@pry.admin.classes.condition' | i18n\n          }}</pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div *ngIf=\"!!definition.rule && !definition.isDefault\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_attrname\">{{ '@pry.admin.classes.attrName' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeAttrName($event, i)\"\n            [items]=\"fieldsForClass\"\n            [ngModel]=\"definition.rule.attributeName\"\n            bindLabel=\"name\"\n            bindValue=\"name\"\n            id=\"classes_attrname\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_operation\">{{ '@pry.admin.classes.operation' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeOperation($event, i)\"\n            [items]=\"operations\"\n            [ngModel]=\"definition.rule.operation\"\n            bindLabel=\"label\"\n            bindValue=\"name\"\n            id=\"classes_operation\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_value\">{{ '@pry.admin.classes.value' | i18n }}</label>\n          <input\n            id=\"classes_value\"\n            type=\"text\"\n            class=\"a-form-field\"\n            (ngModelChange)=\"changeValue($event, i)\"\n            [ngModel]=\"definition.rule.value\"\n          />\n        </div>\n      </div>\n    </div>\n  </li>\n</ul>\n\n<button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"addRule()\">\n  <pry-icon iconSvg=\"add\"></pry-icon>\n  Ajouter une r\u00E8gle\n</button>\n\n<div class=\"m-btn-group -width-lg\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"restoreSymbols(); goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button\n    class=\"a-btn a-btn--primary\"\n    [innerHTML]=\"'@pry.admin.customize.updateIcons' | i18n\"\n    (click)=\"valid()\"\n  ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesCustomizeSymbolComponent, deps: [{ token: i3.PryI18nService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", 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  @for (definition of definitions; track definition; let i = $index) {\n    <li\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        @if (!definition.isDefault) {\n          <div 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        }\n      </div>\n      <div>\n        <pry-select-image [iconUrl]=\"definition.iconUrl\" (changed)=\"changeForImage($event, i)\"></pry-select-image>\n        @if (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        }\n        @if (!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        }\n        @if (!!definition.rule && !definition.isDefault) {\n          <div>\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            <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            <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        }\n      </div>\n    </li>\n  }\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: "component", type: i3.PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: i3.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: i4$2.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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            [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: () => [{ type: i4.PryI18nService }, { type: i1.Store }], propDecorators: { backPressed: [{
+            args: [{ selector: 'pry-admin-classes-customize-symbol', template: "<ul class=\"m-rule-wrapper\">\n  @for (definition of definitions; track definition; let i = $index) {\n    <li\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        @if (!definition.isDefault) {\n          <div 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        }\n      </div>\n      <div>\n        <pry-select-image [iconUrl]=\"definition.iconUrl\" (changed)=\"changeForImage($event, i)\"></pry-select-image>\n        @if (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        }\n        @if (!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        }\n        @if (!!definition.rule && !definition.isDefault) {\n          <div>\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            <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            <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        }\n      </div>\n    </li>\n  }\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: () => [{ type: i3.PryI18nService }, { type: i1.Store }], propDecorators: { backPressed: [{
                 type: Output
             }], currentClass: [{
                 type: Input
@@ -1262,14 +1258,14 @@ class AdminClassesCustomizeComponent extends SubscriptionnerDirective {
         this.subscriptions.add(this.currentClass$.subscribe((clazz) => (this.currentClass = clazz ?? {})));
         this.currentPropertiesConfig$ = this.store.select(ConfigSelectors.tableDefaultAttributesDefinitions).pipe(combineLatestWith(this.currentClass$, this.fields$), map(([defs, clazz, fields]) => ItemUtils.getClassNonGeoAttributesNames((clazz ?? { attributes: [] }), defs, fields)));
         this.subscriptions.add(this.currentPropertiesConfig$.pipe(combineLatestWith(this.currentClass$)).subscribe(([attrs, clazz]) => {
-            this.defaultAttributes = JSON.parse(JSON.stringify(attrs));
+            this.defaultAttributes = structuredClone(attrs);
             this.otherAttributes = (clazz ?? { attributes: [] }).attributes
                 .filter((attr) => !attrs.includes(attr.name))
                 .map((attr) => attr.name);
         }));
         this.currentTilePropertiesConfig$ = this.store.select(ConfigSelectors.tileAttributesDefinitions).pipe(combineLatestWith(this.currentClass$, this.fields$), map(([defs, clazz, fields]) => ItemUtils.getClassNonGeoAttributesNames((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.defaultTileAttributes = structuredClone(attrs);
             this.otherTileAttributes = (clazz ?? { attributes: [] }).attributes
                 .filter((attr) => !attrs.includes(attr.name))
                 .map((attr) => attr.name);
@@ -1308,11 +1304,11 @@ class AdminClassesCustomizeComponent extends SubscriptionnerDirective {
         return this.defaultTileAttributes.length > 0 && this.defaultTileAttributes.length <= this.maxTilesAttributes;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesCustomizeComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminClassesCustomizeComponent, selector: "pry-admin-classes-customize", usesInheritance: true, ngImport: i0, template: "<div class=\"o-pry-admin-classes-customize\">\n  <h1 class=\"a-h1\" id=\"tab-custom\">{{ '@pry.admin.customize.title' | i18n }}</h1>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"customizeTemplate\" name=\"customize.template\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTable\" name=\"customize.table\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeSymbol\" name=\"classes.rules\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTile\" name=\"customize.tile\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #customizeTemplate>\n    <pry-admin-classes-customize-tooltip\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-tooltip>\n  </ng-template>\n  <ng-template #customizeTable>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultList=\"cdkDropList\"\n        [cdkDropListData]=\"otherAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\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)=\"updateTableAttrs()\">\n        {{ '@pry.admin.customize.updateTable' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n  <ng-template #customizeSymbol>\n    <pry-admin-classes-customize-symbol\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-symbol>\n  </ng-template>\n  <ng-template #customizeTile>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tile' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultTileAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTileAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"otherTileAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div>\n      <ng-container *ngIf=\"!isTileConfValid()\">\n        <p>{{ '@pry.admin.customize.tileHint' | i18n : { max: maxTilesAttributes } }}</p>\n      </ng-container>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\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)=\"updateTileAttrs()\" [disabled]=\"!isTileConfValid()\">\n        {{ '@pry.admin.customize.updateTile' | i18n }}\n      </button>\n    </div>\n  </ng-template>\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.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "component", type: AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminClassesCustomizeComponent, selector: "pry-admin-classes-customize", usesInheritance: true, ngImport: i0, template: "<div class=\"o-pry-admin-classes-customize\">\n  <h1 class=\"a-h1\" id=\"tab-custom\">{{ '@pry.admin.customize.title' | i18n }}</h1>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"customizeTemplate\" name=\"customize.template\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTable\" name=\"customize.table\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeSymbol\" name=\"classes.rules\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTile\" name=\"customize.tile\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #customizeTemplate>\n    <pry-admin-classes-customize-tooltip\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-tooltip>\n  </ng-template>\n  <ng-template #customizeTable>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n        >\n        @for (item of defaultAttributes; track item) {\n          <div class=\"item\" cdkDrag>{{ item }}</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultList=\"cdkDropList\"\n        [cdkDropListData]=\"otherAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n        >\n        @for (item of otherAttributes; track item) {\n          <div class=\"item\" cdkDrag>{{ item }}</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\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)=\"updateTableAttrs()\">\n        {{ '@pry.admin.customize.updateTable' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n  <ng-template #customizeSymbol>\n    <pry-admin-classes-customize-symbol\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-symbol>\n  </ng-template>\n  <ng-template #customizeTile>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tile' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultTileAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n        >\n        @for (item of defaultTileAttributes; track item) {\n          <div class=\"item\" cdkDrag>{{ item }}</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTileAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"otherTileAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n        >\n        @for (item of otherTileAttributes; track item) {\n          <div class=\"item\" cdkDrag>{{ item }}</div>\n        }\n      </div>\n    </div>\n\n    <div>\n      @if (!isTileConfValid()) {\n        <p>{{ '@pry.admin.customize.tileHint' | i18n : { max: maxTilesAttributes } }}</p>\n      }\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\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)=\"updateTileAttrs()\" [disabled]=\"!isTileConfValid()\">\n        {{ '@pry.admin.customize.updateTile' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "directive", type: i4$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "component", type: AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesCustomizeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-customize', template: "<div class=\"o-pry-admin-classes-customize\">\n  <h1 class=\"a-h1\" id=\"tab-custom\">{{ '@pry.admin.customize.title' | i18n }}</h1>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"customizeTemplate\" name=\"customize.template\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTable\" name=\"customize.table\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeSymbol\" name=\"classes.rules\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTile\" name=\"customize.tile\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #customizeTemplate>\n    <pry-admin-classes-customize-tooltip\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-tooltip>\n  </ng-template>\n  <ng-template #customizeTable>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultList=\"cdkDropList\"\n        [cdkDropListData]=\"otherAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\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)=\"updateTableAttrs()\">\n        {{ '@pry.admin.customize.updateTable' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n  <ng-template #customizeSymbol>\n    <pry-admin-classes-customize-symbol\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-symbol>\n  </ng-template>\n  <ng-template #customizeTile>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tile' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultTileAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTileAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"otherTileAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div>\n      <ng-container *ngIf=\"!isTileConfValid()\">\n        <p>{{ '@pry.admin.customize.tileHint' | i18n : { max: maxTilesAttributes } }}</p>\n      </ng-container>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\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)=\"updateTileAttrs()\" [disabled]=\"!isTileConfValid()\">\n        {{ '@pry.admin.customize.updateTile' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-classes-customize', template: "<div class=\"o-pry-admin-classes-customize\">\n  <h1 class=\"a-h1\" id=\"tab-custom\">{{ '@pry.admin.customize.title' | i18n }}</h1>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"customizeTemplate\" name=\"customize.template\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTable\" name=\"customize.table\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeSymbol\" name=\"classes.rules\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTile\" name=\"customize.tile\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #customizeTemplate>\n    <pry-admin-classes-customize-tooltip\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-tooltip>\n  </ng-template>\n  <ng-template #customizeTable>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n        >\n        @for (item of defaultAttributes; track item) {\n          <div class=\"item\" cdkDrag>{{ item }}</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultList=\"cdkDropList\"\n        [cdkDropListData]=\"otherAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n        >\n        @for (item of otherAttributes; track item) {\n          <div class=\"item\" cdkDrag>{{ item }}</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\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)=\"updateTableAttrs()\">\n        {{ '@pry.admin.customize.updateTable' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n  <ng-template #customizeSymbol>\n    <pry-admin-classes-customize-symbol\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-symbol>\n  </ng-template>\n  <ng-template #customizeTile>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tile' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultTileAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n        >\n        @for (item of defaultTileAttributes; track item) {\n          <div class=\"item\" cdkDrag>{{ item }}</div>\n        }\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTileAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"otherTileAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n        >\n        @for (item of otherTileAttributes; track item) {\n          <div class=\"item\" cdkDrag>{{ item }}</div>\n        }\n      </div>\n    </div>\n\n    <div>\n      @if (!isTileConfValid()) {\n        <p>{{ '@pry.admin.customize.tileHint' | i18n : { max: maxTilesAttributes } }}</p>\n      }\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\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)=\"updateTileAttrs()\" [disabled]=\"!isTileConfValid()\">\n        {{ '@pry.admin.customize.updateTile' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class PryAdminComponent extends SubscriptionnerDirective {
@@ -1325,7 +1321,7 @@ class PryAdminComponent extends SubscriptionnerDirective {
         this.subscriptions.add(this.route.data.subscribe((data) => (this.limit = data['limitMenu'])));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAdminComponent, deps: [{ token: i1.Store }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryAdminComponent, selector: "pry-admin", usesInheritance: true, ngImport: i0, template: "<h2 class=\"admin__title\">{{ (!limit ? '@pry.admin.title' : '@pry.admin.menus.' + limit) | i18n }}</h2>\n", dependencies: [{ kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryAdminComponent, selector: "pry-admin", usesInheritance: true, ngImport: i0, template: "<h2 class=\"admin__title\">{{ (!limit ? '@pry.admin.title' : '@pry.admin.menus.' + limit) | i18n }}</h2>\n", dependencies: [{ kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAdminComponent, decorators: [{
             type: Component,
@@ -1416,11 +1412,11 @@ class AdminClassesFormComponent extends SubscriptionnerDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", 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 -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      ></pry-select>\n    </div>\n    <div\n      class=\"m-info-icon a-tooltip -tooltip-width-md\"\n      [attr.data-tooltip]=\"'@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n\"\n      data-tooltip-position=\"right\"\n    >\n      <span>i</span>\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", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", 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    @if (isSubmitted && classForm.get('name')?.invalid) {\n      <label\n        id=\"name-error\"\n        for=\"name\"\n        class=\"a-label a-label--help -error\"\n        >\n        @if (classForm.get('name')?.hasError('same-name')) {\n          <span>{{ '@pry.admin.exists' | i18n }}</span>\n        }\n        @if (classForm.get('name')?.hasError('required')) {\n          <span>{{ '@pry.admin.required' | i18n }}</span>\n        }\n        @if (classForm.get('name')?.hasError('minlength')) {\n          <span>{{ '@pry.admin.minLength' | i18n: { len: 3 } }}</span>\n        }\n        @if (classForm.get('name')?.hasError('maxlength')) {\n          <span>{{\n            '@pry.admin.maxLength' | i18n: { len: 100 }\n          }}</span>\n        }\n        @if (classForm.get('name')?.hasError('whitespace')) {\n          <span>{{ '@pry.admin.noWhitespace' | i18n }}</span>\n        }\n      </label>\n    }\n  </div>\n  <div class=\"u-display-flex -row -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      ></pry-select>\n    </div>\n    <div\n      class=\"m-info-icon a-tooltip -tooltip-width-md\"\n      [attr.data-tooltip]=\"'@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n\"\n      data-tooltip-position=\"right\"\n      >\n      <span>i</span>\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$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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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 -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      ></pry-select>\n    </div>\n    <div\n      class=\"m-info-icon a-tooltip -tooltip-width-md\"\n      [attr.data-tooltip]=\"'@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n\"\n      data-tooltip-position=\"right\"\n    >\n      <span>i</span>\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    @if (isSubmitted && classForm.get('name')?.invalid) {\n      <label\n        id=\"name-error\"\n        for=\"name\"\n        class=\"a-label a-label--help -error\"\n        >\n        @if (classForm.get('name')?.hasError('same-name')) {\n          <span>{{ '@pry.admin.exists' | i18n }}</span>\n        }\n        @if (classForm.get('name')?.hasError('required')) {\n          <span>{{ '@pry.admin.required' | i18n }}</span>\n        }\n        @if (classForm.get('name')?.hasError('minlength')) {\n          <span>{{ '@pry.admin.minLength' | i18n: { len: 3 } }}</span>\n        }\n        @if (classForm.get('name')?.hasError('maxlength')) {\n          <span>{{\n            '@pry.admin.maxLength' | i18n: { len: 100 }\n          }}</span>\n        }\n        @if (classForm.get('name')?.hasError('whitespace')) {\n          <span>{{ '@pry.admin.noWhitespace' | i18n }}</span>\n        }\n      </label>\n    }\n  </div>\n  <div class=\"u-display-flex -row -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      ></pry-select>\n    </div>\n    <div\n      class=\"m-info-icon a-tooltip -tooltip-width-md\"\n      [attr.data-tooltip]=\"'@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n\"\n      data-tooltip-position=\"right\"\n      >\n      <span>i</span>\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: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }], propDecorators: { currentClass: [{
                 type: Input
             }] } });
@@ -1436,16 +1432,16 @@ class AdminClassesEditComponent {
         this.route.params.subscribe((params) => (this.currentClass$ = this.store.select(ClassSelectors.classById(params['id']))));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesEditComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminClassesEditComponent, selector: "pry-admin-classes-edit", ngImport: i0, template: "<div *ngIf=\"currentClass$ | async as currentClass\" class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.classes.rename' | i18n }}</h1>\n  <pry-admin-classes-form [currentClass]=\"currentClass\"></pry-admin-classes-form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AdminClassesFormComponent, selector: "pry-admin-classes-form", inputs: ["currentClass"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminClassesEditComponent, selector: "pry-admin-classes-edit", ngImport: i0, template: "@if (currentClass$ | async; as currentClass) {\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">{{ '@pry.admin.classes.rename' | i18n }}</h1>\n    <pry-admin-classes-form [currentClass]=\"currentClass\"></pry-admin-classes-form>\n  </div>\n}\n", dependencies: [{ kind: "component", type: AdminClassesFormComponent, selector: "pry-admin-classes-form", inputs: ["currentClass"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-edit', template: "<div *ngIf=\"currentClass$ | async as currentClass\" class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.classes.rename' | i18n }}</h1>\n  <pry-admin-classes-form [currentClass]=\"currentClass\"></pry-admin-classes-form>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-classes-edit', template: "@if (currentClass$ | async; as currentClass) {\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">{{ '@pry.admin.classes.rename' | i18n }}</h1>\n    <pry-admin-classes-form [currentClass]=\"currentClass\"></pry-admin-classes-form>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminClassesNewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminClassesNewComponent, selector: "pry-admin-classes-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.classes.add' | i18n }}</h1>\n  <pry-admin-classes-form></pry-admin-classes-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminClassesFormComponent, selector: "pry-admin-classes-form", inputs: ["currentClass"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminClassesNewComponent, selector: "pry-admin-classes-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.classes.add' | i18n }}</h1>\n  <pry-admin-classes-form></pry-admin-classes-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminClassesFormComponent, selector: "pry-admin-classes-form", inputs: ["currentClass"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesNewComponent, decorators: [{
             type: Component,
@@ -1517,7 +1513,7 @@ class AddCategoryModalComponent {
         this.search$.next($event.target.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AddCategoryModalComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AddCategoryModalComponent, selector: "pry-add-category-modal", inputs: { entityType: "entityType" }, outputs: { closeModal: "closeModal", category: "category" }, ngImport: i0, template: "<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.shared.categoryModal.' + entityType + '.select' | i18n }}\n      </h2>\n    </div>\n    <div class=\"o-modal__top__close\">\n      <button class=\"a-btn a-btn--icon-only\" (click)=\"closeModal.emit()\">\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\">{{\n        '@pry.admin.shared.categoryModal.' + entityType + '.searchOrCreate' | i18n\n      }}</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    <div>\n      <h3>\n        {{ '@pry.admin.shared.categoryModal.' + entityType + '.name' | i18n }}\n      </h3>\n      <div class=\"u-display-flex -column\">\n        @for (category of filteredCategories$ | async; track category.id) {\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--ghost -no-padding u-display-flex -justify-start -width-full\"\n            (click)=\"selectCategory(category)\"\n          >\n            <span class=\"u-visually-hidden\">{{\n              '@pry.admin.shared.categoryModal.' + entityType + '.selectIt' | i18n\n            }}</span>\n            {{ category.name }}\n          </button>\n        }\n      </div>\n    </div>\n    @if ((categories$ | async)?.length === 0) {\n      <span>{{ '@pry.admin.shared.categoryModal.noCategories' | i18n }}</span>\n    } @else if ((filteredCategories$ | async)?.length === 0) {\n      <div class=\"u-display-flex -column\">\n        <p class=\"a-p\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.shared.categoryModal.' + entityType + '.add' | i18n\"></span>\n        </p>\n        <button type=\"submit\" class=\"a-btn a-btn--primary u-self-center\">\n          {{ '@pry.admin.shared.categoryModal.' + entityType + '.create' | i18n }}\n        </button>\n      </div>\n    }\n  </form>\n</div>\n", dependencies: [{ 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.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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AddCategoryModalComponent, selector: "pry-add-category-modal", inputs: { entityType: "entityType" }, outputs: { closeModal: "closeModal", category: "category" }, ngImport: i0, template: "<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.shared.categoryModal.' + entityType + '.select' | i18n }}\n      </h2>\n    </div>\n    <div class=\"o-modal__top__close\">\n      <button class=\"a-btn a-btn--icon-only\" (click)=\"closeModal.emit()\">\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\">{{\n        '@pry.admin.shared.categoryModal.' + entityType + '.searchOrCreate' | i18n\n      }}</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    <div>\n      <h3>\n        {{ '@pry.admin.shared.categoryModal.' + entityType + '.name' | i18n }}\n      </h3>\n      <div class=\"u-display-flex -column\">\n        @for (category of filteredCategories$ | async; track category.id) {\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--ghost -no-padding u-display-flex -justify-start -width-full\"\n            (click)=\"selectCategory(category)\"\n          >\n            <span class=\"u-visually-hidden\">{{\n              '@pry.admin.shared.categoryModal.' + entityType + '.selectIt' | i18n\n            }}</span>\n            {{ category.name }}\n          </button>\n        }\n      </div>\n    </div>\n    @if ((categories$ | async)?.length === 0) {\n      <span>{{ '@pry.admin.shared.categoryModal.noCategories' | i18n }}</span>\n    } @else if ((filteredCategories$ | async)?.length === 0) {\n      <div class=\"u-display-flex -column\">\n        <p class=\"a-p\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.shared.categoryModal.' + entityType + '.add' | i18n\"></span>\n        </p>\n        <button type=\"submit\" class=\"a-btn a-btn--primary u-self-center\">\n          {{ '@pry.admin.shared.categoryModal.' + entityType + '.create' | i18n }}\n        </button>\n      </div>\n    }\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: i3.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.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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AddCategoryModalComponent, decorators: [{
             type: Component,
@@ -1653,13 +1649,13 @@ class AdminAttributesFormComponent extends SubscriptionnerDirective {
         }));
         this.subscriptions.add(ref.component.closeModal.subscribe(() => ref.close()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAttributesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i4.PryI18nService }, { token: i4.PryDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, usesInheritance: true, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n: { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n: { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" for=\"attr_name\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n: { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chip\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n        [attr.data-tooltip]=\"(selectedFieldTypeDescription$ | async) ?? '' | i18n\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"type\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"openModal()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAttributesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i3.PryI18nService }, { token: i3.PryDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, usesInheritance: true, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    @if (technicalNameAlreadyExists$ | async) {\n      <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n        '@pry.admin.exists' | i18n\n      }}</label>\n    }\n    @if (attrForm.get('technicalName')?.invalid) {\n      <div>\n        @if (attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n          </div>\n        }\n        @if (attrForm.get('technicalName')?.hasError('minlength')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n              '@pry.admin.minLength' | i18n: { len: 2 }\n            }}</label>\n          </div>\n        }\n        @if (attrForm.get('technicalName')?.hasError('maxlength')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n              '@pry.admin.maxLength' | i18n: { len: 100 }\n            }}</label>\n          </div>\n        }\n        @if (\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n          ) {\n          <div\n            >\n            <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n              '@pry.admin.noWhitespace' | i18n\n            }}</label>\n          </div>\n        }\n      </div>\n    }\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    @if (nameAlreadyExists$ | async) {\n      <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n        '@pry.admin.exists' | i18n\n      }}</label>\n    }\n    @if (attrForm.get('name')?.invalid) {\n      <div>\n        @if (attrForm.get('name')?.hasError('maxlength')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n              '@pry.admin.maxLength' | i18n: { len: 50 }\n            }}</label>\n          </div>\n        }\n        @if (attrForm.get('name')?.hasError('whitespace')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        [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          @if (item.crs) {\n            <div class=\"a-chip\">{{ item.crs }}</div>\n          }\n        </div>\n      </ng-template>\n      <div\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n        [attr.data-tooltip]=\"(selectedFieldTypeDescription$ | async) ?? '' | i18n\"\n        data-tooltip-position=\"right\"\n        >\n        <span>i</span>\n      </div>\n    </div>\n    @if (attrForm.get('field')?.invalid) {\n      <div>\n        @if (attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"type\">{{ '@pry.admin.required' | i18n }}</label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"openModal()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAttributesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-attributes-form', template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n: { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n: { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" for=\"attr_name\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n: { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chip\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n        [attr.data-tooltip]=\"(selectedFieldTypeDescription$ | async) ?? '' | i18n\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"type\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"openModal()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i4.PryI18nService }, { type: i4.PryDialogService }], propDecorators: { selectedClass: [{
+            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    @if (technicalNameAlreadyExists$ | async) {\n      <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n        '@pry.admin.exists' | i18n\n      }}</label>\n    }\n    @if (attrForm.get('technicalName')?.invalid) {\n      <div>\n        @if (attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n          </div>\n        }\n        @if (attrForm.get('technicalName')?.hasError('minlength')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n              '@pry.admin.minLength' | i18n: { len: 2 }\n            }}</label>\n          </div>\n        }\n        @if (attrForm.get('technicalName')?.hasError('maxlength')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n              '@pry.admin.maxLength' | i18n: { len: 100 }\n            }}</label>\n          </div>\n        }\n        @if (\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n          ) {\n          <div\n            >\n            <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n              '@pry.admin.noWhitespace' | i18n\n            }}</label>\n          </div>\n        }\n      </div>\n    }\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    @if (nameAlreadyExists$ | async) {\n      <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n        '@pry.admin.exists' | i18n\n      }}</label>\n    }\n    @if (attrForm.get('name')?.invalid) {\n      <div>\n        @if (attrForm.get('name')?.hasError('maxlength')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n              '@pry.admin.maxLength' | i18n: { len: 50 }\n            }}</label>\n          </div>\n        }\n        @if (attrForm.get('name')?.hasError('whitespace')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        [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          @if (item.crs) {\n            <div class=\"a-chip\">{{ item.crs }}</div>\n          }\n        </div>\n      </ng-template>\n      <div\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n        [attr.data-tooltip]=\"(selectedFieldTypeDescription$ | async) ?? '' | i18n\"\n        data-tooltip-position=\"right\"\n        >\n        <span>i</span>\n      </div>\n    </div>\n    @if (attrForm.get('field')?.invalid) {\n      <div>\n        @if (attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')) {\n          <div>\n            <label class=\"a-label a-label--help -error\" for=\"type\">{{ '@pry.admin.required' | i18n }}</label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"openModal()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i3.PryI18nService }, { type: i3.PryDialogService }], propDecorators: { selectedClass: [{
                 type: Input
             }], interClass: [{
                 type: Input
@@ -1681,11 +1677,11 @@ class AdminAttributesEditComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAttributesEditComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminAttributesEditComponent, selector: "pry-admin-attributes-edit", ngImport: i0, template: "<div class=\"classes-container\" *ngIf=\"selectedClass$ | async as selectedClass\">\n  <div *ngIf=\"selectedAttribute$ | async as selectedAttribute\">\n    <h2 class=\"classes__title\" [innerHTML]=\"'@pry.admin.classes.attributes.edit' | i18n\"></h2>\n    <pry-admin-attributes-form\n      [selectedClass]=\"selectedClass\"\n      [selectedAttribute]=\"selectedAttribute\"\n    ></pry-admin-attributes-form>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: ["selectedClass", "interClass", "selectedAttribute"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminAttributesEditComponent, selector: "pry-admin-attributes-edit", ngImport: i0, template: "@if (selectedClass$ | async; as selectedClass) {\n  <div class=\"classes-container\">\n    @if (selectedAttribute$ | async; as selectedAttribute) {\n      <div>\n        <h2 class=\"classes__title\" [innerHTML]=\"'@pry.admin.classes.attributes.edit' | i18n\"></h2>\n        <pry-admin-attributes-form\n          [selectedClass]=\"selectedClass\"\n          [selectedAttribute]=\"selectedAttribute\"\n        ></pry-admin-attributes-form>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: ["selectedClass", "interClass", "selectedAttribute"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAttributesEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-attributes-edit', template: "<div class=\"classes-container\" *ngIf=\"selectedClass$ | async as selectedClass\">\n  <div *ngIf=\"selectedAttribute$ | async as selectedAttribute\">\n    <h2 class=\"classes__title\" [innerHTML]=\"'@pry.admin.classes.attributes.edit' | i18n\"></h2>\n    <pry-admin-attributes-form\n      [selectedClass]=\"selectedClass\"\n      [selectedAttribute]=\"selectedAttribute\"\n    ></pry-admin-attributes-form>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-attributes-edit', template: "@if (selectedClass$ | async; as selectedClass) {\n  <div class=\"classes-container\">\n    @if (selectedAttribute$ | async; as selectedAttribute) {\n      <div>\n        <h2 class=\"classes__title\" [innerHTML]=\"'@pry.admin.classes.attributes.edit' | i18n\"></h2>\n        <pry-admin-attributes-form\n          [selectedClass]=\"selectedClass\"\n          [selectedAttribute]=\"selectedAttribute\"\n        ></pry-admin-attributes-form>\n      </div>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminAttributesNewComponent {
@@ -1702,11 +1698,11 @@ class AdminAttributesNewComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAttributesNewComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminAttributesNewComponent, selector: "pry-admin-attributes-new", ngImport: i0, template: "<div class=\"o-base-container\" *ngIf=\"selectedClass$ | async as selectedClass\">\n  <h1 class=\"a-h1\">\n    {{ '@pry.admin.classes.title' | i18n: { class: selectedClass.name } }}\n  </h1>\n  <h2>\n    {{ '@pry.admin.classes.attributes.add' | i18n }}\n  </h2>\n  <pry-admin-attributes-form [selectedClass]=\"selectedClass\"></pry-admin-attributes-form>\n</div>\n\n<div class=\"o-base-container\" *ngIf=\"interClass$ | async as selectedClass\">\n  <h1 class=\"a-h1\" [innerHTML]=\"'@pry.admin.classes.attributes.add' | i18n: { class: selectedClass.name }\"></h1>\n  <pry-admin-attributes-form [interClass]=\"selectedClass\"></pry-admin-attributes-form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: ["selectedClass", "interClass", "selectedAttribute"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminAttributesNewComponent, selector: "pry-admin-attributes-new", ngImport: i0, template: "@if (selectedClass$ | 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    <h2>\n      {{ '@pry.admin.classes.attributes.add' | i18n }}\n    </h2>\n    <pry-admin-attributes-form [selectedClass]=\"selectedClass\"></pry-admin-attributes-form>\n  </div>\n}\n\n@if (interClass$ | async; as selectedClass) {\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\" [innerHTML]=\"'@pry.admin.classes.attributes.add' | i18n: { class: selectedClass.name }\"></h1>\n    <pry-admin-attributes-form [interClass]=\"selectedClass\"></pry-admin-attributes-form>\n  </div>\n}\n", dependencies: [{ kind: "component", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: ["selectedClass", "interClass", "selectedAttribute"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminAttributesNewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-attributes-new', template: "<div class=\"o-base-container\" *ngIf=\"selectedClass$ | async as selectedClass\">\n  <h1 class=\"a-h1\">\n    {{ '@pry.admin.classes.title' | i18n: { class: selectedClass.name } }}\n  </h1>\n  <h2>\n    {{ '@pry.admin.classes.attributes.add' | i18n }}\n  </h2>\n  <pry-admin-attributes-form [selectedClass]=\"selectedClass\"></pry-admin-attributes-form>\n</div>\n\n<div class=\"o-base-container\" *ngIf=\"interClass$ | async as selectedClass\">\n  <h1 class=\"a-h1\" [innerHTML]=\"'@pry.admin.classes.attributes.add' | i18n: { class: selectedClass.name }\"></h1>\n  <pry-admin-attributes-form [interClass]=\"selectedClass\"></pry-admin-attributes-form>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-attributes-new', template: "@if (selectedClass$ | 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    <h2>\n      {{ '@pry.admin.classes.attributes.add' | i18n }}\n    </h2>\n    <pry-admin-attributes-form [selectedClass]=\"selectedClass\"></pry-admin-attributes-form>\n  </div>\n}\n\n@if (interClass$ | async; as selectedClass) {\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\" [innerHTML]=\"'@pry.admin.classes.attributes.add' | i18n: { class: selectedClass.name }\"></h1>\n    <pry-admin-attributes-form [interClass]=\"selectedClass\"></pry-admin-attributes-form>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminClassesViewComponent {
@@ -1872,13 +1868,13 @@ class AdminClassesViewComponent {
         }
         this.dispatchCloseModal();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesViewComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i5.Overlay }, { token: i0.ViewContainerRef }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesViewComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i4$1.Overlay }, { token: i0.ViewContainerRef }, { token: i3.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminClassesViewComponent, selector: "pry-admin-classes-view", viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true, read: TemplateRef }], ngImport: i0, template: "@if ((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        @for (attr of attributesExtended$ | async | prySortData : sortActive : sortDirection; track attr) {\n          <tr\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        }\n      </tbody>\n    </table>\n  </div>\n}\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: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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=\"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: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i5.Overlay }, { type: i0.ViewContainerRef }, { type: i4.PryI18nService }], propDecorators: { confirmationModal: [{
+            args: [{ selector: 'pry-admin-classes-view', template: "@if ((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        @for (attr of attributesExtended$ | async | prySortData : sortActive : sortDirection; track attr) {\n          <tr\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        }\n      </tbody>\n    </table>\n  </div>\n}\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: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i4$1.Overlay }, { type: i0.ViewContainerRef }, { type: i3.PryI18nService }], propDecorators: { confirmationModal: [{
                 type: ViewChild,
                 args: ['confirmationModal', { read: TemplateRef }]
             }] } });
@@ -1936,11 +1932,11 @@ class AdminClassesComponent {
         this.store.dispatch(AdminActions.selectComponentType({ componentType: 'AdminClassesSelectComponent' }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminClassesComponent, selector: "pry-admin-classes", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.classes.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.classes.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"image\">{{ '@pry.admin.classes.image' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.classes.name' | i18n }}</th>\n        <th prySortHeader=\"lines\">{{ '@pry.admin.menus.dataset' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        *ngFor=\"let clazz of classesInputFlows$ | async | prySortData: sortActive : sortDirection\"\n        (click)=\"selectClass(clazz)\"\n        [class.is-selected]=\"(selectedClassId$ | async) === clazz.id\"\n      >\n        <td class=\"view-details\">\n          <button\n            id=\"button-class-{{ clazz.id }}\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"(selectedClassId$ | async) === clazz.id\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-class-' + clazz.id\"\n          >\n            <span class=\"u-visually-hidden\">{{ clazz.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>\n          <img\n            alt=\"\"\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"clazz.id | translateId: { type: 'class', output: 'icon' } | async\"\n          />\n        </td>\n        <td>{{ clazz.name }}</td>\n        <td>{{ clazz.count }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminClassesComponent, selector: "pry-admin-classes", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.classes.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n    <caption>\n      {{\n      '@pry.admin.classes.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"image\">{{ '@pry.admin.classes.image' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.classes.name' | i18n }}</th>\n        <th prySortHeader=\"lines\">{{ '@pry.admin.menus.dataset' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (clazz of classesInputFlows$ | async | prySortData: sortActive : sortDirection; track clazz) {\n        <tr\n          (click)=\"selectClass(clazz)\"\n          [class.is-selected]=\"(selectedClassId$ | async) === clazz.id\"\n          >\n          <td class=\"view-details\">\n            <button\n              id=\"button-class-{{ clazz.id }}\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedClassId$ | async) === clazz.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-class-' + clazz.id\"\n              >\n              <span class=\"u-visually-hidden\">{{ clazz.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>\n            <img\n              alt=\"\"\n              [height]=\"25\"\n              [width]=\"25\"\n              [src]=\"clazz.id | translateId: { type: 'class', output: 'icon' } | async\"\n              />\n          </td>\n          <td>{{ clazz.name }}</td>\n          <td>{{ clazz.count }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.classes.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.classes.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"image\">{{ '@pry.admin.classes.image' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.classes.name' | i18n }}</th>\n        <th prySortHeader=\"lines\">{{ '@pry.admin.menus.dataset' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        *ngFor=\"let clazz of classesInputFlows$ | async | prySortData: sortActive : sortDirection\"\n        (click)=\"selectClass(clazz)\"\n        [class.is-selected]=\"(selectedClassId$ | async) === clazz.id\"\n      >\n        <td class=\"view-details\">\n          <button\n            id=\"button-class-{{ clazz.id }}\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"(selectedClassId$ | async) === clazz.id\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-class-' + clazz.id\"\n          >\n            <span class=\"u-visually-hidden\">{{ clazz.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>\n          <img\n            alt=\"\"\n            [height]=\"25\"\n            [width]=\"25\"\n            [src]=\"clazz.id | translateId: { type: 'class', output: 'icon' } | async\"\n          />\n        </td>\n        <td>{{ clazz.name }}</td>\n        <td>{{ clazz.count }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-classes', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.classes.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n    <caption>\n      {{\n      '@pry.admin.classes.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"image\">{{ '@pry.admin.classes.image' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.classes.name' | i18n }}</th>\n        <th prySortHeader=\"lines\">{{ '@pry.admin.menus.dataset' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (clazz of classesInputFlows$ | async | prySortData: sortActive : sortDirection; track clazz) {\n        <tr\n          (click)=\"selectClass(clazz)\"\n          [class.is-selected]=\"(selectedClassId$ | async) === clazz.id\"\n          >\n          <td class=\"view-details\">\n            <button\n              id=\"button-class-{{ clazz.id }}\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedClassId$ | async) === clazz.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-class-' + clazz.id\"\n              >\n              <span class=\"u-visually-hidden\">{{ clazz.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>\n            <img\n              alt=\"\"\n              [height]=\"25\"\n              [width]=\"25\"\n              [src]=\"clazz.id | translateId: { type: 'class', output: 'icon' } | async\"\n              />\n          </td>\n          <td>{{ clazz.name }}</td>\n          <td>{{ clazz.count }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 const datasetFeatureKey = '@pry/admin/datasets';
@@ -2049,13 +2045,13 @@ class AdminDatasetComponent {
         this.store.dispatch(AdminDatasetActions.selectDataset({ dataset }));
         this.store.dispatch(AdminActions.selectComponentType({ componentType: 'AdminSelectDatasetComponent' }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminDatasetComponent, deps: [{ token: i1.Store }, { token: i4.PryI18nService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminDatasetComponent, selector: "pry-admin-dataset", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"o-base-container u-display-flex -column\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.dataset.title' | i18n }}</h1>\n  @if (loading$ | async; as loading) {\n    <div class=\"a-page-loader -relative\" [style.display]=\"'flex'\">\n      <pry-page-loader></pry-page-loader>\n      <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n    </div>\n  } @else {\n    @if (datasetList$ | async; as datasetList) {\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.dataset.title' | i18n\n          }},\n          {{\n            '@pry.action.sortableColumnHeader' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th></th>\n            <th *ngFor=\"let conf of configHeader\" [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"let dataset of datasetList | prySortData: sortActive : sortDirection\"\n            (click)=\"selectDataset(dataset)\"\n            [class.is-selected]=\"(selectedDataset$ | async) === dataset.id\"\n          >\n            <td class=\"view-details\">\n              <button\n                id=\"button-dataset- + {{ dataset.id }}\"\n                type=\"button\"\n                class=\"a-btn a-btn--icon-only\"\n                title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n                [attr.aria-expanded]=\"(selectedDataset$ | async) === dataset.id\"\n                aria-haspopup\n                [attr.aria-controls]=\"'panel-dataset-' + dataset.id\"\n              >\n                <span class=\"u-visually-hidden\">{{ dataset.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n                <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              </button>\n            </td>\n            <td>{{ dataset.name }}</td>\n            <td>{{ dataset.oClass | translateId: { type: 'class', output: 'name' } | async }}</td>\n            <td>{{ '@pry.admin.dataset.' + dataset.type | i18n }}</td>\n            <td>\n              <pry-icon\n                [iconSvg]=\"getShareLevel(dataset.groups).toLowerCase()\"\n                class=\"a-tooltip -tooltip-no-wrap\"\n                [attr.data-tooltip]=\"'@pry.share.iconLabel.' + getShareLevel(dataset.groups) | i18n\"\n                data-tooltip-position=\"left\"\n                [height]=\"17\"\n                [width]=\"17\"\n              ></pry-icon>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    }\n  }\n</div>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n>\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelDatasetSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n    />\n  </div>\n</pry-modal>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "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: 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: "component", type: i4.PryModalComponent, selector: "pry-modal", inputs: ["titleModal", "opened", "validateLabel", "validateAction", "cancelLabel", "cancelAction"] }, { kind: "component", type: i6.PryPageLoaderComponent, selector: "pry-page-loader", inputs: ["image", "imageAltText"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminDatasetComponent, deps: [{ token: i1.Store }, { token: i3.PryI18nService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminDatasetComponent, selector: "pry-admin-dataset", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"o-base-container u-display-flex -column\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.dataset.title' | i18n }}</h1>\n  @if (loading$ | async; as loading) {\n    <div class=\"a-page-loader -relative\" [style.display]=\"'flex'\">\n      <pry-page-loader></pry-page-loader>\n      <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n    </div>\n  } @else {\n    @if (datasetList$ | async; as datasetList) {\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.dataset.title' | i18n\n          }},\n          {{\n          '@pry.action.sortableColumnHeader' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th></th>\n            @for (conf of configHeader; track conf) {\n              <th [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n            }\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (dataset of datasetList | prySortData: sortActive : sortDirection; track dataset) {\n            <tr\n              (click)=\"selectDataset(dataset)\"\n              [class.is-selected]=\"(selectedDataset$ | async) === dataset.id\"\n              >\n              <td class=\"view-details\">\n                <button\n                  id=\"button-dataset- + {{ dataset.id }}\"\n                  type=\"button\"\n                  class=\"a-btn a-btn--icon-only\"\n                  title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n                  [attr.aria-expanded]=\"(selectedDataset$ | async) === dataset.id\"\n                  aria-haspopup\n                  [attr.aria-controls]=\"'panel-dataset-' + dataset.id\"\n                  >\n                  <span class=\"u-visually-hidden\">{{ dataset.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n                  <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n                </button>\n              </td>\n              <td>{{ dataset.name }}</td>\n              <td>{{ dataset.oClass | translateId: { type: 'class', output: 'name' } | async }}</td>\n              <td>{{ '@pry.admin.dataset.' + dataset.type | i18n }}</td>\n              <td>\n                <pry-icon\n                  [iconSvg]=\"getShareLevel(dataset.groups).toLowerCase()\"\n                  class=\"a-tooltip -tooltip-no-wrap\"\n                  [attr.data-tooltip]=\"'@pry.share.iconLabel.' + getShareLevel(dataset.groups) | i18n\"\n                  data-tooltip-position=\"left\"\n                  [height]=\"17\"\n                  [width]=\"17\"\n                ></pry-icon>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n  }\n</div>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n  >\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelDatasetSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n      />\n  </div>\n</pry-modal>\n", dependencies: [{ kind: "component", type: i3.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: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "component", type: i3.PryModalComponent, selector: "pry-modal", inputs: ["titleModal", "opened", "validateLabel", "validateAction", "cancelLabel", "cancelAction"] }, { kind: "component", type: i5.PryPageLoaderComponent, selector: "pry-page-loader", inputs: ["image", "imageAltText"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminDatasetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-dataset', template: "<div class=\"o-base-container u-display-flex -column\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.dataset.title' | i18n }}</h1>\n  @if (loading$ | async; as loading) {\n    <div class=\"a-page-loader -relative\" [style.display]=\"'flex'\">\n      <pry-page-loader></pry-page-loader>\n      <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n    </div>\n  } @else {\n    @if (datasetList$ | async; as datasetList) {\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.dataset.title' | i18n\n          }},\n          {{\n            '@pry.action.sortableColumnHeader' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th></th>\n            <th *ngFor=\"let conf of configHeader\" [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"let dataset of datasetList | prySortData: sortActive : sortDirection\"\n            (click)=\"selectDataset(dataset)\"\n            [class.is-selected]=\"(selectedDataset$ | async) === dataset.id\"\n          >\n            <td class=\"view-details\">\n              <button\n                id=\"button-dataset- + {{ dataset.id }}\"\n                type=\"button\"\n                class=\"a-btn a-btn--icon-only\"\n                title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n                [attr.aria-expanded]=\"(selectedDataset$ | async) === dataset.id\"\n                aria-haspopup\n                [attr.aria-controls]=\"'panel-dataset-' + dataset.id\"\n              >\n                <span class=\"u-visually-hidden\">{{ dataset.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n                <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              </button>\n            </td>\n            <td>{{ dataset.name }}</td>\n            <td>{{ dataset.oClass | translateId: { type: 'class', output: 'name' } | async }}</td>\n            <td>{{ '@pry.admin.dataset.' + dataset.type | i18n }}</td>\n            <td>\n              <pry-icon\n                [iconSvg]=\"getShareLevel(dataset.groups).toLowerCase()\"\n                class=\"a-tooltip -tooltip-no-wrap\"\n                [attr.data-tooltip]=\"'@pry.share.iconLabel.' + getShareLevel(dataset.groups) | i18n\"\n                data-tooltip-position=\"left\"\n                [height]=\"17\"\n                [width]=\"17\"\n              ></pry-icon>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    }\n  }\n</div>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n>\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelDatasetSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n    />\n  </div>\n</pry-modal>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i4.PryI18nService }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { input: [{
+            args: [{ selector: 'pry-admin-dataset', template: "<div class=\"o-base-container u-display-flex -column\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.dataset.title' | i18n }}</h1>\n  @if (loading$ | async; as loading) {\n    <div class=\"a-page-loader -relative\" [style.display]=\"'flex'\">\n      <pry-page-loader></pry-page-loader>\n      <p>{{ '@pry.widget.target.loading' | i18n }}...</p>\n    </div>\n  } @else {\n    @if (datasetList$ | async; as datasetList) {\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.dataset.title' | i18n\n          }},\n          {{\n          '@pry.action.sortableColumnHeader' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th></th>\n            @for (conf of configHeader; track conf) {\n              <th [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n            }\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (dataset of datasetList | prySortData: sortActive : sortDirection; track dataset) {\n            <tr\n              (click)=\"selectDataset(dataset)\"\n              [class.is-selected]=\"(selectedDataset$ | async) === dataset.id\"\n              >\n              <td class=\"view-details\">\n                <button\n                  id=\"button-dataset- + {{ dataset.id }}\"\n                  type=\"button\"\n                  class=\"a-btn a-btn--icon-only\"\n                  title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n                  [attr.aria-expanded]=\"(selectedDataset$ | async) === dataset.id\"\n                  aria-haspopup\n                  [attr.aria-controls]=\"'panel-dataset-' + dataset.id\"\n                  >\n                  <span class=\"u-visually-hidden\">{{ dataset.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n                  <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n                </button>\n              </td>\n              <td>{{ dataset.name }}</td>\n              <td>{{ dataset.oClass | translateId: { type: 'class', output: 'name' } | async }}</td>\n              <td>{{ '@pry.admin.dataset.' + dataset.type | i18n }}</td>\n              <td>\n                <pry-icon\n                  [iconSvg]=\"getShareLevel(dataset.groups).toLowerCase()\"\n                  class=\"a-tooltip -tooltip-no-wrap\"\n                  [attr.data-tooltip]=\"'@pry.share.iconLabel.' + getShareLevel(dataset.groups) | i18n\"\n                  data-tooltip-position=\"left\"\n                  [height]=\"17\"\n                  [width]=\"17\"\n                ></pry-icon>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    }\n  }\n</div>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n  >\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelDatasetSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n      />\n  </div>\n</pry-modal>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i3.PryI18nService }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
             }] } });
@@ -2152,13 +2148,13 @@ class AdminFormDatasetComponent extends SubscriptionnerDirective {
         }));
         this.subscriptions.add(ref.component.closeModal.subscribe(() => ref.close()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFormDatasetComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i4.PryDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminFormDatasetComponent, selector: "pry-admin-form-dataset", inputs: { dataset$: "dataset$" }, usesInheritance: true, 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 }} <span class=\"-error\">*</span>\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    @if (\n      (isSubmitted && form.get('name')?.invalid) ||\n      (form.get('name')?.touched && form.get('name')?.hasError('required'))\n    ) {\n      <label class=\"a-label a-label--help -error\" id=\"name-error\" for=\"name\">{{ '@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\"\n      >{{ '@pry.admin.fields.description' | i18n }}\n    </label>\n    <textarea\n      class=\"-resizable-both\"\n      formControlName=\"description\"\n      name=\"description\"\n      id=\"description\"\n      maxlength=\"500\"\n    ></textarea>\n    @if (form.get('description')?.hasError('maxlength')) {\n      <label for=\"description\" class=\"a-label a-label--help -error\">\n        {{ '@pry.presentation.maxLength' | i18n: { len: '500' } }}\n      </label>\n    }\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"class\"\n      >{{ '@pry.admin.dataset.oClass' | i18n }}\n      @if (!dataset$) {\n        <span>*</span>\n      }\n    </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    ></pry-select>\n    @if (form.get('oClass')?.touched && form.get('oClass')?.hasError('required')) {\n      <label for=\"description\" class=\"a-label a-label--help -error\">\n        {{ '@pry.presentation.maxLength' | i18n: { len: '500' } }}\n      </label>\n    }\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"type\"\n      >{{ '@pry.admin.dataset.type' | i18n }}\n      @if (!dataset$) {\n        <span>*</span>\n      }\n    </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    ></pry-select>\n  </div>\n\n  <div class=\"u-display-flex -gap-20\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" id=\"tags-label\" for=\"tags\">{{ '@pry.dataset.tags' | i18n }}</label>\n      <pry-select\n        id=\"tags\"\n        formControlName=\"categories\"\n        [items]=\"categories$ | async\"\n        bindLabel=\"name\"\n        [isForm]=\"true\"\n        aria-labelledby=\"tags-label\"\n        [multiple]=\"true\"\n        [closeOnSelect]=\"false\"\n      ></pry-select>\n    </div>\n    <button class=\"a-btn a-btn--primary u-self-center\" type=\"button\" (click)=\"openModal()\">\n      {{ '@pry.admin.dataset.addTag' | i18n }}\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"goBack()\">\n      {{ '@pry.admin.cancel' | i18n }}\n    </button>\n    <button class=\"a-btn a-btn--primary\" type=\"submit\" [disabled]=\"form.invalid\">\n      {{ (dataset$ ? '@pry.admin.edit' : '@pry.admin.create') | i18n }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ 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", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFormDatasetComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i3.PryDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminFormDatasetComponent, selector: "pry-admin-form-dataset", inputs: { dataset$: "dataset$" }, usesInheritance: true, 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 }} <span class=\"-error\">*</span>\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    @if (\n      (isSubmitted && form.get('name')?.invalid) ||\n      (form.get('name')?.touched && form.get('name')?.hasError('required'))\n    ) {\n      <label class=\"a-label a-label--help -error\" id=\"name-error\" for=\"name\">{{ '@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\"\n      >{{ '@pry.admin.fields.description' | i18n }}\n    </label>\n    <textarea\n      class=\"-resizable-both\"\n      formControlName=\"description\"\n      name=\"description\"\n      id=\"description\"\n      maxlength=\"500\"\n    ></textarea>\n    @if (form.get('description')?.hasError('maxlength')) {\n      <label for=\"description\" class=\"a-label a-label--help -error\">\n        {{ '@pry.presentation.maxLength' | i18n: { len: '500' } }}\n      </label>\n    }\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"class\"\n      >{{ '@pry.admin.dataset.oClass' | i18n }}\n      @if (!dataset$) {\n        <span>*</span>\n      }\n    </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    ></pry-select>\n    @if (form.get('oClass')?.touched && form.get('oClass')?.hasError('required')) {\n      <label for=\"description\" class=\"a-label a-label--help -error\">\n        {{ '@pry.presentation.maxLength' | i18n: { len: '500' } }}\n      </label>\n    }\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"type\"\n      >{{ '@pry.admin.dataset.type' | i18n }}\n      @if (!dataset$) {\n        <span>*</span>\n      }\n    </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    ></pry-select>\n  </div>\n\n  <div class=\"u-display-flex -gap-20\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" id=\"tags-label\" for=\"tags\">{{ '@pry.dataset.tags' | i18n }}</label>\n      <pry-select\n        id=\"tags\"\n        formControlName=\"categories\"\n        [items]=\"categories$ | async\"\n        bindLabel=\"name\"\n        [isForm]=\"true\"\n        aria-labelledby=\"tags-label\"\n        [multiple]=\"true\"\n        [closeOnSelect]=\"false\"\n      ></pry-select>\n    </div>\n    <button class=\"a-btn a-btn--primary u-self-center\" type=\"button\" (click)=\"openModal()\">\n      {{ '@pry.admin.dataset.addTag' | i18n }}\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"goBack()\">\n      {{ '@pry.admin.cancel' | i18n }}\n    </button>\n    <button class=\"a-btn a-btn--primary\" type=\"submit\" [disabled]=\"form.invalid\">\n      {{ (dataset$ ? '@pry.admin.edit' : '@pry.admin.create') | i18n }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ 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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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 }} <span class=\"-error\">*</span>\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    @if (\n      (isSubmitted && form.get('name')?.invalid) ||\n      (form.get('name')?.touched && form.get('name')?.hasError('required'))\n    ) {\n      <label class=\"a-label a-label--help -error\" id=\"name-error\" for=\"name\">{{ '@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\"\n      >{{ '@pry.admin.fields.description' | i18n }}\n    </label>\n    <textarea\n      class=\"-resizable-both\"\n      formControlName=\"description\"\n      name=\"description\"\n      id=\"description\"\n      maxlength=\"500\"\n    ></textarea>\n    @if (form.get('description')?.hasError('maxlength')) {\n      <label for=\"description\" class=\"a-label a-label--help -error\">\n        {{ '@pry.presentation.maxLength' | i18n: { len: '500' } }}\n      </label>\n    }\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"class\"\n      >{{ '@pry.admin.dataset.oClass' | i18n }}\n      @if (!dataset$) {\n        <span>*</span>\n      }\n    </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    ></pry-select>\n    @if (form.get('oClass')?.touched && form.get('oClass')?.hasError('required')) {\n      <label for=\"description\" class=\"a-label a-label--help -error\">\n        {{ '@pry.presentation.maxLength' | i18n: { len: '500' } }}\n      </label>\n    }\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"type\"\n      >{{ '@pry.admin.dataset.type' | i18n }}\n      @if (!dataset$) {\n        <span>*</span>\n      }\n    </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    ></pry-select>\n  </div>\n\n  <div class=\"u-display-flex -gap-20\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" id=\"tags-label\" for=\"tags\">{{ '@pry.dataset.tags' | i18n }}</label>\n      <pry-select\n        id=\"tags\"\n        formControlName=\"categories\"\n        [items]=\"categories$ | async\"\n        bindLabel=\"name\"\n        [isForm]=\"true\"\n        aria-labelledby=\"tags-label\"\n        [multiple]=\"true\"\n        [closeOnSelect]=\"false\"\n      ></pry-select>\n    </div>\n    <button class=\"a-btn a-btn--primary u-self-center\" type=\"button\" (click)=\"openModal()\">\n      {{ '@pry.admin.dataset.addTag' | i18n }}\n    </button>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"goBack()\">\n      {{ '@pry.admin.cancel' | i18n }}\n    </button>\n    <button class=\"a-btn a-btn--primary\" type=\"submit\" [disabled]=\"form.invalid\">\n      {{ (dataset$ ? '@pry.admin.edit' : '@pry.admin.create') | i18n }}\n    </button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i4.PryDialogService }], propDecorators: { dataset$: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i3.PryDialogService }], propDecorators: { dataset$: [{
                 type: Input
             }] } });
@@ -2174,7 +2170,7 @@ class AdminEditDatasetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEditDatasetComponent, deps: [{ token: i1.Store }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminEditDatasetComponent, selector: "pry-admin-edit-dataset", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.dataset.edit.title' | i18n }}</h1>\n  <pry-admin-form-dataset [dataset$]=\"datasetSelected$\"></pry-admin-form-dataset>\n</div>\n", dependencies: [{ kind: "component", type: AdminFormDatasetComponent, selector: "pry-admin-form-dataset", inputs: ["dataset$"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminEditDatasetComponent, selector: "pry-admin-edit-dataset", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.dataset.edit.title' | i18n }}</h1>\n  <pry-admin-form-dataset [dataset$]=\"datasetSelected$\"></pry-admin-form-dataset>\n</div>\n", dependencies: [{ kind: "component", type: AdminFormDatasetComponent, selector: "pry-admin-form-dataset", inputs: ["dataset$"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEditDatasetComponent, decorators: [{
             type: Component,
@@ -2183,7 +2179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 class AdminNewDatasetComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminNewDatasetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminNewDatasetComponent, selector: "pry-admin-new-dataset", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h4 class=\"admin__title\">{{ '@pry.admin.dataset.add.title' | i18n }}</h4>\n  <pry-admin-form-dataset></pry-admin-form-dataset>\n</div>\n", dependencies: [{ kind: "component", type: AdminFormDatasetComponent, selector: "pry-admin-form-dataset", inputs: ["dataset$"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminNewDatasetComponent, selector: "pry-admin-new-dataset", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h4 class=\"admin__title\">{{ '@pry.admin.dataset.add.title' | i18n }}</h4>\n  <pry-admin-form-dataset></pry-admin-form-dataset>\n</div>\n", dependencies: [{ kind: "component", type: AdminFormDatasetComponent, selector: "pry-admin-form-dataset", inputs: ["dataset$"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminNewDatasetComponent, decorators: [{
             type: Component,
@@ -2366,19 +2362,19 @@ class AdminEnvironmentFormComponent {
         }
         return path.toString();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", 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        [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", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEnvironmentFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i4.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", 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      @if (isSubmitted && envForm.get('name')?.invalid) {\n        <label\n          id=\"name-error\"\n          for=\"environment_name\"\n          class=\"a-label a-label--help -error\"\n          >\n          @if (envForm.get('name')?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (envForm.get('name')?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n          @if (envForm.get('name')?.hasError('pattern')) {\n            <span>{{ '@pry.admin.environment.formatName' | i18n }}</span>\n          }\n        </label>\n      }\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        [isForm]=\"true\"\n      ></pry-select>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      @if (envForm.value.type === 'DATE') {\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        @if (isSubmitted && envForm.get('value')?.invalid && envForm.get('value')?.hasError('required')) {\n          <label\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        }\n      } @else {\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        @if (isSubmitted && envForm.get('value')?.invalid) {\n          <label\n            id=\"value-error\"\n            for=\"environment_value\"\n            class=\"a-label a-label--help -error\"\n            >\n            @if (envForm.get('value')?.hasError('required')) {\n              <span>{{ '@pry.admin.required' | i18n }}</span>\n            }\n            @if (envForm.get('value')?.hasError('pattern')) {\n              @if (envForm.value.type === 'DOUBLE') {\n                <span>{{ '@pry.admin.environment.formatDouble' | i18n }}</span>\n              }\n              @if (envForm.value.type === 'INTEGER') {\n                <span>{{ '@pry.admin.environment.formatInt' | i18n }}</span>\n              }\n            }\n          </label>\n        }\n      }\n\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$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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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        formControlName=\"type\"\n        [items]=\"envOptions\"\n        bindValue=\"varType\"\n        bindLabel=\"translation\"\n        (ngModelChange)=\"onTypeChange($event)\"\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: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i3.DatePipe }], propDecorators: { currentEnv: [{
+            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      @if (isSubmitted && envForm.get('name')?.invalid) {\n        <label\n          id=\"name-error\"\n          for=\"environment_name\"\n          class=\"a-label a-label--help -error\"\n          >\n          @if (envForm.get('name')?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (envForm.get('name')?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n          @if (envForm.get('name')?.hasError('pattern')) {\n            <span>{{ '@pry.admin.environment.formatName' | i18n }}</span>\n          }\n        </label>\n      }\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        [isForm]=\"true\"\n      ></pry-select>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      @if (envForm.value.type === 'DATE') {\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        @if (isSubmitted && envForm.get('value')?.invalid && envForm.get('value')?.hasError('required')) {\n          <label\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        }\n      } @else {\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        @if (isSubmitted && envForm.get('value')?.invalid) {\n          <label\n            id=\"value-error\"\n            for=\"environment_value\"\n            class=\"a-label a-label--help -error\"\n            >\n            @if (envForm.get('value')?.hasError('required')) {\n              <span>{{ '@pry.admin.required' | i18n }}</span>\n            }\n            @if (envForm.get('value')?.hasError('pattern')) {\n              @if (envForm.value.type === 'DOUBLE') {\n                <span>{{ '@pry.admin.environment.formatDouble' | i18n }}</span>\n              }\n              @if (envForm.value.type === 'INTEGER') {\n                <span>{{ '@pry.admin.environment.formatInt' | i18n }}</span>\n              }\n            }\n          </label>\n        }\n      }\n\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: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i4.DatePipe }], propDecorators: { currentEnv: [{
                 type: Input
             }] } });
 class AdminEnvironmentNewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEnvironmentNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminEnvironmentNewComponent, selector: "pry-admin-environment-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.environment.add' | i18n }}</h1>\n  <pry-admin-environment-form></pry-admin-environment-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminEnvironmentFormComponent, selector: "pry-admin-environment-form", inputs: ["currentEnv"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminEnvironmentNewComponent, selector: "pry-admin-environment-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.environment.add' | i18n }}</h1>\n  <pry-admin-environment-form></pry-admin-environment-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminEnvironmentFormComponent, selector: "pry-admin-environment-form", inputs: ["currentEnv"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEnvironmentNewComponent, decorators: [{
             type: Component,
@@ -2395,11 +2391,11 @@ class AdminEnvironmentUpdateComponent {
         this.route.params.subscribe((params) => this.store.dispatch(EnvironmentActions.selectEnvironment({ name: params['name'] })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEnvironmentUpdateComponent, deps: [{ token: i1.Store }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminEnvironmentUpdateComponent, selector: "pry-admin-environment-update", ngImport: i0, template: "<div *ngIf=\"currentEnv$ | async as currentEnv\" class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.environment.edit' | i18n }}</h1>\n  <pry-admin-environment-form [currentEnv]=\"currentEnv\"></pry-admin-environment-form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AdminEnvironmentFormComponent, selector: "pry-admin-environment-form", inputs: ["currentEnv"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminEnvironmentUpdateComponent, selector: "pry-admin-environment-update", ngImport: i0, template: "@if (currentEnv$ | async; as currentEnv) {\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">{{ '@pry.admin.environment.edit' | i18n }}</h1>\n    <pry-admin-environment-form [currentEnv]=\"currentEnv\"></pry-admin-environment-form>\n  </div>\n}\n", dependencies: [{ kind: "component", type: AdminEnvironmentFormComponent, selector: "pry-admin-environment-form", inputs: ["currentEnv"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEnvironmentUpdateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-environment-update', template: "<div *ngIf=\"currentEnv$ | async as currentEnv\" class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.environment.edit' | i18n }}</h1>\n  <pry-admin-environment-form [currentEnv]=\"currentEnv\"></pry-admin-environment-form>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-environment-update', template: "@if (currentEnv$ | async; as currentEnv) {\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">{{ '@pry.admin.environment.edit' | i18n }}</h1>\n    <pry-admin-environment-form [currentEnv]=\"currentEnv\"></pry-admin-environment-form>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.ActivatedRoute }] });
 class AdminEnvironmentComponent {
@@ -2436,11 +2432,11 @@ class AdminEnvironmentComponent {
         return ENV_OPTIONS.find((el) => el.varType === type)?.translation || 'undefined';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEnvironmentComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminEnvironmentComponent, selector: "pry-admin-environment", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.environment.list' | i18n }}</h1>\n\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.environment.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.environment.name' | i18n }}</th>\n        <th prySortHeader=\"type\">{{ '@pry.admin.environment.type' | i18n }}</th>\n        <th prySortHeader=\"value\">{{ '@pry.admin.environment.value' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        *ngFor=\"let env of environments$ | async | prySortData: sortActive : sortDirection\"\n        (click)=\"goToSelectEnv(env)\"\n        [class.is-selected]=\"(currentEnvName$ | async) === env.name\"\n      >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-env-' + env.name\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"(currentEnvName$ | async) === env.name\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-env-' + env.name\"\n          >\n            <span class=\"u-visually-hidden\">{{ env.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ env.name }}</td>\n        <td>{{ getTranslationType(env.type) | i18n }}</td>\n        <td>{{ env.value }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminEnvironmentComponent, selector: "pry-admin-environment", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.environment.list' | i18n }}</h1>\n\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.environment.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.environment.name' | i18n }}</th>\n        <th prySortHeader=\"type\">{{ '@pry.admin.environment.type' | i18n }}</th>\n        <th prySortHeader=\"value\">{{ '@pry.admin.environment.value' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (env of environments$ | async | prySortData: sortActive : sortDirection; track env) {\n        <tr\n          (click)=\"goToSelectEnv(env)\"\n          [class.is-selected]=\"(currentEnvName$ | async) === env.name\"\n          >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-env-' + env.name\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(currentEnvName$ | async) === env.name\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-env-' + env.name\"\n              >\n              <span class=\"u-visually-hidden\">{{ env.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ env.name }}</td>\n          <td>{{ getTranslationType(env.type) | i18n }}</td>\n          <td>{{ env.value }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEnvironmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-environment', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.environment.list' | i18n }}</h1>\n\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.environment.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.environment.name' | i18n }}</th>\n        <th prySortHeader=\"type\">{{ '@pry.admin.environment.type' | i18n }}</th>\n        <th prySortHeader=\"value\">{{ '@pry.admin.environment.value' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        *ngFor=\"let env of environments$ | async | prySortData: sortActive : sortDirection\"\n        (click)=\"goToSelectEnv(env)\"\n        [class.is-selected]=\"(currentEnvName$ | async) === env.name\"\n      >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-env-' + env.name\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"(currentEnvName$ | async) === env.name\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-env-' + env.name\"\n          >\n            <span class=\"u-visually-hidden\">{{ env.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ env.name }}</td>\n        <td>{{ getTranslationType(env.type) | i18n }}</td>\n        <td>{{ env.value }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-environment', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.environment.list' | i18n }}</h1>\n\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.environment.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.environment.name' | i18n }}</th>\n        <th prySortHeader=\"type\">{{ '@pry.admin.environment.type' | i18n }}</th>\n        <th prySortHeader=\"value\">{{ '@pry.admin.environment.value' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (env of environments$ | async | prySortData: sortActive : sortDirection; track env) {\n        <tr\n          (click)=\"goToSelectEnv(env)\"\n          [class.is-selected]=\"(currentEnvName$ | async) === env.name\"\n          >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-env-' + env.name\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(currentEnvName$ | async) === env.name\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-env-' + env.name\"\n              >\n              <span class=\"u-visually-hidden\">{{ env.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ env.name }}</td>\n          <td>{{ getTranslationType(env.type) | i18n }}</td>\n          <td>{{ env.value }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 const FieldsActions = {
@@ -2628,13 +2624,13 @@ class AdminFieldsFormComponent extends SubscriptionnerDirective {
     getPath() {
         return this.currentField ? this.goBackPathEdit : this.goBackPath;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminFieldsFormComponent, selector: "pry-admin-fields-form", inputs: { currentField: "currentField" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"name?.dirty && name?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"name?.dirty && name?.invalid\"\n      />\n      @if (name?.dirty && name?.invalid) {\n        <label id=\"name-error\" for=\"field_name\" class=\"a-label a-label--help -error\">\n          @if (name?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (name?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n          @if (name?.hasError('minlength')) {\n            <span>{{ '@pry.admin.minLength' | i18n: { len: 3 } }}</span>\n          }\n          @if (name?.hasError('maxlength')) {\n            <span>{{ '@pry.admin.maxLength' | i18n: { len: 100 } }}</span>\n          }\n          @if (name?.hasError('whitespace') && !name?.hasError('minlength')) {\n            <span>{{ '@pry.admin.noWhitespace' | i18n }}</span>\n          }\n        </label>\n      }\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"field_type\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          id=\"field_type\"\n          class=\"u-flex-grow-1\"\n          formControlName=\"type\"\n          [items]=\"fieldTypes\"\n          [i18nPrefix]=\"FIELD_I18N.label\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <div\n          class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n          [attr.data-tooltip]=\"FIELD_I18N.information + this.type?.value | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <span>i</span>\n        </div>\n      </div>\n    </div>\n\n    @if (isGeographicType) {\n      <div class=\"m-form-label-field -width-sm\">\n        <label class=\"a-label\" for=\"crs\">\n          {{ '@pry.admin.fields.crs' | i18n }} *\n          <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n        </label>\n        <div class=\"u-display-flex\">\n          <pry-select\n            class=\"-width-sm\"\n            formControlName=\"crs\"\n            [items]=\"CRS_OPTIONS\"\n            bindValue=\"code\"\n            bindLabel=\"label\"\n            [isForm]=\"true\"\n            id=\"crs\"\n          ></pry-select>\n        </div>\n        @if (crs?.dirty && crs?.invalid) {\n          <label id=\"crs-error\" for=\"crs\" class=\"a-label a-label--help -error\">\n            @if (crs?.hasError('required')) {\n              <span>{{ '@pry.admin.required' | i18n }}</span>\n            }\n          </label>\n        }\n      </div>\n    }\n\n    @if (\n      type?.value === FieldType.INTEGER ||\n      type?.value === FieldType.LONG ||\n      type?.value === FieldType.DECIMAL ||\n      type?.value === FieldType.INSTANT\n    ) {\n      <div formGroupName=\"formatOptions\">\n        <h3 class=\"a-h3\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n        @if (type?.value === FieldType.INTEGER || type?.value === FieldType.LONG || type?.value === FieldType.DECIMAL) {\n          <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n        } @else if (type?.value === FieldType.INSTANT) {\n          <ng-container *ngTemplateOutlet=\"dateFormatOptions\"></ng-container>\n        }\n\n        <ng-template #numberFormatOptions>\n          @if (type?.value === FieldType.DECIMAL) {\n            <div class=\"m-form-label-field -width-sm\">\n              <label class=\"a-label\" for=\"field_format_comma\">{{\n                '@pry.admin.fields.formatOptions.decimalPrecision' | i18n\n              }}</label>\n              <input\n                formControlName=\"decimalPrecision\"\n                id=\"field_format_comma\"\n                type=\"number\"\n                min=\"0\"\n                class=\"a-form-field\"\n              />\n              @if (decimalPrecision?.dirty && decimalPrecision?.invalid) {\n                <label id=\"decimalPrecision-error\" for=\"crs\" class=\"a-label a-label--help -error\">\n                  <label class=\"a-label a-label--help -error\" for=\"field_format_comma\">\n                    {{ '@pry.admin.invalid' | i18n }}\n                  </label>\n                </label>\n              }\n            </div>\n          }\n          <div class=\"m-form-label-field -width-sm\">\n            <pry-checkbox formControlName=\"localeFormat\" inputId=\"field_format_locale_number_format\" [inhibit]=\"false\">\n              {{ '@pry.admin.fields.formatOptions.localeFormat' | i18n }}\n            </pry-checkbox>\n          </div>\n          <div class=\"m-form-label-field -width-sm\">\n            <label class=\"a-label\" for=\"field_format_unit\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</label>\n            <input formControlName=\"unit\" id=\"field_format_unit\" type=\"text\" class=\"a-form-field\" />\n          </div>\n        </ng-template>\n\n        <ng-template #dateFormatOptions>\n          <div class=\"m-form-label-field -width-sm\">\n            <label class=\"a-label\" for=\"field_format_date\">{{\n              '@pry.admin.fields.formatOptions.dateFormat' | i18n\n            }}</label>\n            <pry-select\n              formControlName=\"dateFormat\"\n              id=\"field_format_date\"\n              [items]=\"dateFormats\"\n              [isForm]=\"true\"\n              i18nPrefix=\"@pry.admin.fields.formatOptions.dateFormatOptions.\"\n              [clearable]=\"true\"\n            ></pry-select>\n          </div>\n        </ng-template>\n      </div>\n    }\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [disabled]=\"form.invalid\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminFieldsFormComponent, selector: "pry-admin-fields-form", inputs: { currentField: "currentField" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"name?.dirty && name?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"name?.dirty && name?.invalid\"\n      />\n      @if (name?.dirty && name?.invalid) {\n        <label id=\"name-error\" for=\"field_name\" class=\"a-label a-label--help -error\">\n          @if (name?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (name?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n          @if (name?.hasError('minlength')) {\n            <span>{{ '@pry.admin.minLength' | i18n: { len: 3 } }}</span>\n          }\n          @if (name?.hasError('maxlength')) {\n            <span>{{ '@pry.admin.maxLength' | i18n: { len: 100 } }}</span>\n          }\n          @if (name?.hasError('whitespace') && !name?.hasError('minlength')) {\n            <span>{{ '@pry.admin.noWhitespace' | i18n }}</span>\n          }\n        </label>\n      }\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"field_type\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          id=\"field_type\"\n          class=\"u-flex-grow-1\"\n          formControlName=\"type\"\n          [items]=\"fieldTypes\"\n          [i18nPrefix]=\"FIELD_I18N.label\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <div\n          class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n          [attr.data-tooltip]=\"FIELD_I18N.information + this.type?.value | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <span>i</span>\n        </div>\n      </div>\n    </div>\n\n    @if (isGeographicType) {\n      <div class=\"m-form-label-field -width-sm\">\n        <label class=\"a-label\" for=\"crs\">\n          {{ '@pry.admin.fields.crs' | i18n }} *\n          <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n        </label>\n        <div class=\"u-display-flex\">\n          <pry-select\n            class=\"-width-sm\"\n            formControlName=\"crs\"\n            [items]=\"CRS_OPTIONS\"\n            bindValue=\"code\"\n            bindLabel=\"label\"\n            [isForm]=\"true\"\n            id=\"crs\"\n          ></pry-select>\n        </div>\n        @if (crs?.dirty && crs?.invalid) {\n          <label id=\"crs-error\" for=\"crs\" class=\"a-label a-label--help -error\">\n            @if (crs?.hasError('required')) {\n              <span>{{ '@pry.admin.required' | i18n }}</span>\n            }\n          </label>\n        }\n      </div>\n    }\n\n    @if (\n      type?.value === FieldType.INTEGER ||\n      type?.value === FieldType.LONG ||\n      type?.value === FieldType.DECIMAL ||\n      type?.value === FieldType.INSTANT\n    ) {\n      <div formGroupName=\"formatOptions\">\n        <h3 class=\"a-h3\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n        @if (type?.value === FieldType.INTEGER || type?.value === FieldType.LONG || type?.value === FieldType.DECIMAL) {\n          <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n        } @else if (type?.value === FieldType.INSTANT) {\n          <ng-container *ngTemplateOutlet=\"dateFormatOptions\"></ng-container>\n        }\n\n        <ng-template #numberFormatOptions>\n          @if (type?.value === FieldType.DECIMAL) {\n            <div class=\"m-form-label-field -width-sm\">\n              <label class=\"a-label\" for=\"field_format_comma\">{{\n                '@pry.admin.fields.formatOptions.decimalPrecision' | i18n\n              }}</label>\n              <input\n                formControlName=\"decimalPrecision\"\n                id=\"field_format_comma\"\n                type=\"number\"\n                min=\"0\"\n                class=\"a-form-field\"\n              />\n              @if (decimalPrecision?.dirty && decimalPrecision?.invalid) {\n                <label id=\"decimalPrecision-error\" for=\"crs\" class=\"a-label a-label--help -error\">\n                  <label class=\"a-label a-label--help -error\" for=\"field_format_comma\">\n                    {{ '@pry.admin.invalid' | i18n }}\n                  </label>\n                </label>\n              }\n            </div>\n          }\n          <div class=\"m-form-label-field -width-sm\">\n            <pry-checkbox formControlName=\"localeFormat\" inputId=\"field_format_locale_number_format\" [inhibit]=\"false\">\n              {{ '@pry.admin.fields.formatOptions.localeFormat' | i18n }}\n            </pry-checkbox>\n          </div>\n          <div class=\"m-form-label-field -width-sm\">\n            <label class=\"a-label\" for=\"field_format_unit\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</label>\n            <input formControlName=\"unit\" id=\"field_format_unit\" type=\"text\" class=\"a-form-field\" />\n          </div>\n        </ng-template>\n\n        <ng-template #dateFormatOptions>\n          <div class=\"m-form-label-field -width-sm\">\n            <label class=\"a-label\" for=\"field_format_date\">{{\n              '@pry.admin.fields.formatOptions.dateFormat' | i18n\n            }}</label>\n            <pry-select\n              formControlName=\"dateFormat\"\n              id=\"field_format_date\"\n              [items]=\"dateFormats\"\n              [isForm]=\"true\"\n              i18nPrefix=\"@pry.admin.fields.formatOptions.dateFormatOptions.\"\n              [clearable]=\"true\"\n            ></pry-select>\n          </div>\n        </ng-template>\n      </div>\n    }\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [disabled]=\"form.invalid\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4$2.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-admin-fields-form', template: "<div>\n  <form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"name?.dirty && name?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"name?.dirty && name?.invalid\"\n      />\n      @if (name?.dirty && name?.invalid) {\n        <label id=\"name-error\" for=\"field_name\" class=\"a-label a-label--help -error\">\n          @if (name?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (name?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n          @if (name?.hasError('minlength')) {\n            <span>{{ '@pry.admin.minLength' | i18n: { len: 3 } }}</span>\n          }\n          @if (name?.hasError('maxlength')) {\n            <span>{{ '@pry.admin.maxLength' | i18n: { len: 100 } }}</span>\n          }\n          @if (name?.hasError('whitespace') && !name?.hasError('minlength')) {\n            <span>{{ '@pry.admin.noWhitespace' | i18n }}</span>\n          }\n        </label>\n      }\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"field_type\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          id=\"field_type\"\n          class=\"u-flex-grow-1\"\n          formControlName=\"type\"\n          [items]=\"fieldTypes\"\n          [i18nPrefix]=\"FIELD_I18N.label\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <div\n          class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center u-flex-shrink-0\"\n          [attr.data-tooltip]=\"FIELD_I18N.information + this.type?.value | i18n\"\n          data-tooltip-position=\"right\"\n        >\n          <span>i</span>\n        </div>\n      </div>\n    </div>\n\n    @if (isGeographicType) {\n      <div class=\"m-form-label-field -width-sm\">\n        <label class=\"a-label\" for=\"crs\">\n          {{ '@pry.admin.fields.crs' | i18n }} *\n          <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n        </label>\n        <div class=\"u-display-flex\">\n          <pry-select\n            class=\"-width-sm\"\n            formControlName=\"crs\"\n            [items]=\"CRS_OPTIONS\"\n            bindValue=\"code\"\n            bindLabel=\"label\"\n            [isForm]=\"true\"\n            id=\"crs\"\n          ></pry-select>\n        </div>\n        @if (crs?.dirty && crs?.invalid) {\n          <label id=\"crs-error\" for=\"crs\" class=\"a-label a-label--help -error\">\n            @if (crs?.hasError('required')) {\n              <span>{{ '@pry.admin.required' | i18n }}</span>\n            }\n          </label>\n        }\n      </div>\n    }\n\n    @if (\n      type?.value === FieldType.INTEGER ||\n      type?.value === FieldType.LONG ||\n      type?.value === FieldType.DECIMAL ||\n      type?.value === FieldType.INSTANT\n    ) {\n      <div formGroupName=\"formatOptions\">\n        <h3 class=\"a-h3\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n        @if (type?.value === FieldType.INTEGER || type?.value === FieldType.LONG || type?.value === FieldType.DECIMAL) {\n          <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n        } @else if (type?.value === FieldType.INSTANT) {\n          <ng-container *ngTemplateOutlet=\"dateFormatOptions\"></ng-container>\n        }\n\n        <ng-template #numberFormatOptions>\n          @if (type?.value === FieldType.DECIMAL) {\n            <div class=\"m-form-label-field -width-sm\">\n              <label class=\"a-label\" for=\"field_format_comma\">{{\n                '@pry.admin.fields.formatOptions.decimalPrecision' | i18n\n              }}</label>\n              <input\n                formControlName=\"decimalPrecision\"\n                id=\"field_format_comma\"\n                type=\"number\"\n                min=\"0\"\n                class=\"a-form-field\"\n              />\n              @if (decimalPrecision?.dirty && decimalPrecision?.invalid) {\n                <label id=\"decimalPrecision-error\" for=\"crs\" class=\"a-label a-label--help -error\">\n                  <label class=\"a-label a-label--help -error\" for=\"field_format_comma\">\n                    {{ '@pry.admin.invalid' | i18n }}\n                  </label>\n                </label>\n              }\n            </div>\n          }\n          <div class=\"m-form-label-field -width-sm\">\n            <pry-checkbox formControlName=\"localeFormat\" inputId=\"field_format_locale_number_format\" [inhibit]=\"false\">\n              {{ '@pry.admin.fields.formatOptions.localeFormat' | i18n }}\n            </pry-checkbox>\n          </div>\n          <div class=\"m-form-label-field -width-sm\">\n            <label class=\"a-label\" for=\"field_format_unit\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</label>\n            <input formControlName=\"unit\" id=\"field_format_unit\" type=\"text\" class=\"a-form-field\" />\n          </div>\n        </ng-template>\n\n        <ng-template #dateFormatOptions>\n          <div class=\"m-form-label-field -width-sm\">\n            <label class=\"a-label\" for=\"field_format_date\">{{\n              '@pry.admin.fields.formatOptions.dateFormat' | i18n\n            }}</label>\n            <pry-select\n              formControlName=\"dateFormat\"\n              id=\"field_format_date\"\n              [items]=\"dateFormats\"\n              [isForm]=\"true\"\n              i18nPrefix=\"@pry.admin.fields.formatOptions.dateFormatOptions.\"\n              [clearable]=\"true\"\n            ></pry-select>\n          </div>\n        </ng-template>\n      </div>\n    }\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [disabled]=\"form.invalid\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i4.PryI18nService }], propDecorators: { currentField: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3.PryI18nService }], propDecorators: { currentField: [{
                 type: Input
             }] } });
@@ -2648,16 +2644,16 @@ class AdminFieldsEditComponent {
         this.route.params.subscribe((params) => (this.currentField$ = this.store.select(FieldSelectors.fieldById(params['id']))));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsEditComponent, deps: [{ token: i1.Store }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminFieldsEditComponent, selector: "pry-admin-fields-edit", ngImport: i0, template: "<div *ngIf=\"currentField$ | async as currentField\" class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.fields.edit' | i18n }}</h1>\n  <pry-admin-fields-form [currentField]=\"currentField\"></pry-admin-fields-form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AdminFieldsFormComponent, selector: "pry-admin-fields-form", inputs: ["currentField"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminFieldsEditComponent, selector: "pry-admin-fields-edit", ngImport: i0, template: "@if (currentField$ | async; as currentField) {\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">{{ '@pry.admin.fields.edit' | i18n }}</h1>\n    <pry-admin-fields-form [currentField]=\"currentField\"></pry-admin-fields-form>\n  </div>\n}\n", dependencies: [{ kind: "component", type: AdminFieldsFormComponent, selector: "pry-admin-fields-form", inputs: ["currentField"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-fields-edit', template: "<div *ngIf=\"currentField$ | async as currentField\" class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.fields.edit' | i18n }}</h1>\n  <pry-admin-fields-form [currentField]=\"currentField\"></pry-admin-fields-form>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-fields-edit', template: "@if (currentField$ | async; as currentField) {\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">{{ '@pry.admin.fields.edit' | i18n }}</h1>\n    <pry-admin-fields-form [currentField]=\"currentField\"></pry-admin-fields-form>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.ActivatedRoute }] });
 class AdminFieldsNewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminFieldsNewComponent, selector: "pry-admin-fields-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.fields.add' | i18n }}</h1>\n  <pry-admin-fields-form></pry-admin-fields-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminFieldsFormComponent, selector: "pry-admin-fields-form", inputs: ["currentField"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminFieldsNewComponent, selector: "pry-admin-fields-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.fields.add' | i18n }}</h1>\n  <pry-admin-fields-form></pry-admin-fields-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminFieldsFormComponent, selector: "pry-admin-fields-form", inputs: ["currentField"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsNewComponent, decorators: [{
             type: Component,
@@ -2726,7 +2722,7 @@ class AdminFieldsComponent {
         this.store.dispatch(AdminActions.fetchFieldAssociations({ id: field.id }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminFieldsComponent, selector: "pry-admin-fields", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.fields.list' | i18n }}</h1>\n  @if (fields$ | async; as fields) {\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"name\"\n      prySortDirection=\"asc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.admin.fields.list' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.fields.name' | i18n }}</th>\n          <th prySortHeader=\"type\">{{ '@pry.admin.fields.type' | i18n }}</th>\n          <th prySortHeader=\"attributes\">{{ '@pry.admin.fields.attributes' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (field of fields | prySortData: sortActive : sortDirection; track field.id) {\n          <tr (click)=\"selectField(field)\" [class.is-selected]=\"(currentFieldId$ | async) === field.id\">\n            <td class=\"view-details\">\n              <button\n                [id]=\"'button-field-' + field.id\"\n                type=\"button\"\n                class=\"a-btn a-btn--icon-only\"\n                title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n                [attr.aria-expanded]=\"(currentFieldId$ | async) === field.id\"\n                aria-haspopup\n                [attr.aria-controls]=\"'panel-field-' + field.id\"\n              >\n                <span class=\"u-visually-hidden\">{{ field.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n                <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              </button>\n            </td>\n            <td>{{ field.name }}</td>\n            <td>{{ FIELD_I18N.label + field.type | i18n }}</td>\n            <td>{{ field.attributeCount }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n", dependencies: [{ kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminFieldsComponent, selector: "pry-admin-fields", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.fields.list' | i18n }}</h1>\n  @if (fields$ | async; as fields) {\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"name\"\n      prySortDirection=\"asc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.admin.fields.list' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.fields.name' | i18n }}</th>\n          <th prySortHeader=\"type\">{{ '@pry.admin.fields.type' | i18n }}</th>\n          <th prySortHeader=\"attributes\">{{ '@pry.admin.fields.attributes' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (field of fields | prySortData: sortActive : sortDirection; track field.id) {\n          <tr (click)=\"selectField(field)\" [class.is-selected]=\"(currentFieldId$ | async) === field.id\">\n            <td class=\"view-details\">\n              <button\n                [id]=\"'button-field-' + field.id\"\n                type=\"button\"\n                class=\"a-btn a-btn--icon-only\"\n                title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n                [attr.aria-expanded]=\"(currentFieldId$ | async) === field.id\"\n                aria-haspopup\n                [attr.aria-controls]=\"'panel-field-' + field.id\"\n              >\n                <span class=\"u-visually-hidden\">{{ field.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n                <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              </button>\n            </td>\n            <td>{{ field.name }}</td>\n            <td>{{ FIELD_I18N.label + field.type | i18n }}</td>\n            <td>{{ field.attributeCount }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsComponent, decorators: [{
             type: Component,
@@ -2821,11 +2817,11 @@ const AdminSelectors = {
 class PryAssociationComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAssociationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryAssociationComponent, selector: "pry-association", inputs: { associations: "associations" }, ngImport: i0, template: "<div *ngFor=\"let association of associations?.associations\" class=\"a-container-type\">\n  <p class=\"a-label-type {{ association.type }}\">\n    <strong>{{ '@pry.admin.association.' + association.type | i18n }}</strong>\n  </p>\n  <p>\n    {{ association.name }}\n  </p>\n</div>\n<p *ngIf=\"associations?.usedElsewhere === true\" class=\"a-p\">\n  <strong>{{ '@pry.admin.classes.usedElsewhere' | i18n }}</strong>\n</p>\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: "pipe", type: i4.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryAssociationComponent, selector: "pry-association", inputs: { associations: "associations" }, ngImport: i0, template: "@for (association of associations?.associations; track association) {\n  <div class=\"a-container-type\">\n    <p class=\"a-label-type {{ association.type }}\">\n      <strong>{{ '@pry.admin.association.' + association.type | i18n }}</strong>\n    </p>\n    <p>\n      {{ association.name }}\n    </p>\n  </div>\n}\n@if (associations?.usedElsewhere === true) {\n  <p class=\"a-p\">\n    <strong>{{ '@pry.admin.classes.usedElsewhere' | i18n }}</strong>\n  </p>\n}\n", dependencies: [{ kind: "pipe", type: i3.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAssociationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-association', changeDetection: ChangeDetectionStrategy.Default, template: "<div *ngFor=\"let association of associations?.associations\" class=\"a-container-type\">\n  <p class=\"a-label-type {{ association.type }}\">\n    <strong>{{ '@pry.admin.association.' + association.type | i18n }}</strong>\n  </p>\n  <p>\n    {{ association.name }}\n  </p>\n</div>\n<p *ngIf=\"associations?.usedElsewhere === true\" class=\"a-p\">\n  <strong>{{ '@pry.admin.classes.usedElsewhere' | i18n }}</strong>\n</p>\n" }]
+            args: [{ selector: 'pry-association', changeDetection: ChangeDetectionStrategy.Default, template: "@for (association of associations?.associations; track association) {\n  <div class=\"a-container-type\">\n    <p class=\"a-label-type {{ association.type }}\">\n      <strong>{{ '@pry.admin.association.' + association.type | i18n }}</strong>\n    </p>\n    <p>\n      {{ association.name }}\n    </p>\n  </div>\n}\n@if (associations?.usedElsewhere === true) {\n  <p class=\"a-p\">\n    <strong>{{ '@pry.admin.classes.usedElsewhere' | i18n }}</strong>\n  </p>\n}\n" }]
         }], propDecorators: { associations: [{
                 type: Input
             }] } });
@@ -2913,11 +2909,11 @@ class AdminClassesSelectComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminClassesSelectComponent, selector: "pry-admin-classes-select", ngImport: i0, template: "<div\n  *ngIf=\"currentClass$ | async as clazz\"\n  [id]=\"'panel-class-' + clazz.id\"\n  [attr.aria-labelledby]=\"'button-class-' + clazz.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.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"classDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"classAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #classDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.name' | i18n }} :\n      <strong>{{ clazz.name }}</strong>\n    </p>\n    <p class=\"a-p u-display-flex -align-center\">\n      {{ '@pry.admin.classes.image' | i18n }} :\n      <img\n        alt=\"\"\n        [height]=\"25\"\n        [width]=\"25\"\n        [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n      />\n    </p>\n  </ng-template>\n\n  <ng-template #classAssociations>\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"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminClassesSelectComponent, selector: "pry-admin-classes-select", ngImport: i0, template: "@if (currentClass$ | async; as clazz) {\n  <div\n    [id]=\"'panel-class-' + clazz.id\"\n    [attr.aria-labelledby]=\"'button-class-' + clazz.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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.classes.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"classDetails\" name=\"details\"></pry-tab>\n      <pry-tab [templateRef]=\"classAssociations\" name=\"classes.associations\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #classDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.classes.name' | i18n }} :\n        <strong>{{ clazz.name }}</strong>\n      </p>\n      <p class=\"a-p u-display-flex -align-center\">\n        {{ '@pry.admin.classes.image' | i18n }} :\n        <img\n          alt=\"\"\n          [height]=\"25\"\n          [width]=\"25\"\n          [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n          />\n      </p>\n    </ng-template>\n    <ng-template #classAssociations>\n      @if (associations$ | async; as associations) {\n        <div 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      }\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassesSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-select', template: "<div\n  *ngIf=\"currentClass$ | async as clazz\"\n  [id]=\"'panel-class-' + clazz.id\"\n  [attr.aria-labelledby]=\"'button-class-' + clazz.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.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"classDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"classAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #classDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.name' | i18n }} :\n      <strong>{{ clazz.name }}</strong>\n    </p>\n    <p class=\"a-p u-display-flex -align-center\">\n      {{ '@pry.admin.classes.image' | i18n }} :\n      <img\n        alt=\"\"\n        [height]=\"25\"\n        [width]=\"25\"\n        [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n      />\n    </p>\n  </ng-template>\n\n  <ng-template #classAssociations>\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-classes-select', template: "@if (currentClass$ | async; as clazz) {\n  <div\n    [id]=\"'panel-class-' + clazz.id\"\n    [attr.aria-labelledby]=\"'button-class-' + clazz.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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.classes.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"classDetails\" name=\"details\"></pry-tab>\n      <pry-tab [templateRef]=\"classAssociations\" name=\"classes.associations\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #classDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.classes.name' | i18n }} :\n        <strong>{{ clazz.name }}</strong>\n      </p>\n      <p class=\"a-p u-display-flex -align-center\">\n        {{ '@pry.admin.classes.image' | i18n }} :\n        <img\n          alt=\"\"\n          [height]=\"25\"\n          [width]=\"25\"\n          [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n          />\n      </p>\n    </ng-template>\n    <ng-template #classAssociations>\n      @if (associations$ | async; as associations) {\n        <div 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      }\n    </ng-template>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminAttributesSelectComponent {
@@ -2983,11 +2979,11 @@ class AdminAttributesSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", 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"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminAttributesSelectComponent, selector: "pry-admin-attribute-select", ngImport: i0, template: "@if (selectedAttribute$ | async; as attribute) {\n  <div\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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.classes.attributes.info' | i18n }}\n      </h3>\n    </div>\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    <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    <ng-template #attributeAssociations>\n      @if (associations$ | async; as associations) {\n        <div 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      }\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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.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" }]
+            args: [{ selector: 'pry-admin-attribute-select', template: "@if (selectedAttribute$ | async; as attribute) {\n  <div\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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.classes.attributes.info' | i18n }}\n      </h3>\n    </div>\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    <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    <ng-template #attributeAssociations>\n      @if (associations$ | async; as associations) {\n        <div 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      }\n    </ng-template>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminSelectDatasetComponent extends SubscriptionnerDirective {
@@ -3126,13 +3122,13 @@ class AdminSelectDatasetComponent extends SubscriptionnerDirective {
     canModify$(dataset) {
         return this.access ? this.access.canModifyDataset(dataset) : of(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminSelectDatasetComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i4.PryI18nService }, { token: i0.ChangeDetectorRef }, { token: PRY_ACCESS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminSelectDatasetComponent, selector: "pry-admin-select-dataset", usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"selectedDataset$ | async as dataset\"\n  [id]=\"'panel-dataset-' + dataset.id\"\n  [attr.aria-labelledby]=\"'button-dataset-' + dataset.id\"\n  class=\"o-panel o-pry-admin-dataset-select\"\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.dataset.datasetDetails' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"datasetDetails\" name=\"dataset.details\"></pry-tab>\n    <pry-tab [templateRef]=\"datasetMetadata\" name=\"metadata.title\"></pry-tab>\n    <pry-tab [templateRef]=\"datasetAssociations\" name=\"classes.associations\"></pry-tab>\n    <pry-tab *ngIf=\"canModify$(dataset) | async\" [templateRef]=\"shareDataset\" name=\"share\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #datasetDetails>\n    <div class=\"u-display-flex -column -gap-20\">\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.dataset.name' | i18n }}</h4>\n        <span>{{ dataset.name }}</span>\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.dataset.description' | i18n }}</h4>\n        @if (dataset.description) {\n          <span>{{ dataset.description }}</span>\n        } @else {\n          <span class=\"-italic\">{{ '@pry.dataset.noDescription' | i18n }}</span>\n        }\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.customize.name' | i18n }}</h4>\n        <span>{{ dataset.oClass | translateId: { type: 'class', output: 'name' } | async }}</span>\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.dataset.type' | i18n }}</h4>\n        <span>{{ '@pry.admin.dataset.' + dataset.type | i18n }}</span>\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.dataset.tags' | i18n }}</h4>\n        @if (dataset.categories && dataset.categories.length > 0) {\n          <div class=\"u-display-flex\">\n            @for (category of dataset.categories; track category.id) {\n              <span class=\"a-chip -md\">{{ category.name }}</span>\n            }\n          </div>\n        } @else {\n          <span class=\"-italic\">{{ '@pry.dataset.noTags' | i18n }}</span>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #datasetMetadata>\n    <pry-metadata-editor\n      [targetId]=\"(selectedDataset$ | async)?.id ?? ''\"\n      [isModification]=\"(editable$ | async) ?? false\"\n      [metadata]=\"(datasetMetadata$ | async) ?? []\"\n      (removeMeta)=\"removeMetadata($event)\"\n      (addMeta)=\"addDatasetMetadata($event)\"\n      [type]=\"'meta'\"\n    ></pry-metadata-editor>\n  </ng-template>\n\n  <ng-template #datasetAssociations>\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\n  <ng-template #shareDataset>\n    <div class=\"o-pry-admin-dataset-select__share\">\n      <pry-group-share\n        [ngModel]=\"dataset.groups\"\n        (ngModelChange)=\"changeGroup($event)\"\n        (radioValueChange)=\"updateGroups($event)\"\n      ></pry-group-share>\n      <button\n        type=\"submit\"\n        class=\"a-btn a-btn--primary u-self-end\"\n        #submit\n        (click)=\"share(dataset)\"\n        [disabled]=\"disableShareButton$ | async\"\n      >\n        {{ '@pry.admin.validate' | i18n }}\n      </button>\n      @if (selectedDatasetMissingGroups$ | async) {\n        <h4 class=\"a-h4\">{{ '@pry.admin.dataset.success' | i18n }}</h4>\n      }\n      @if (missingGroups$ | async; as missingGroups) {\n        <div class=\"u-display-flex -column\">\n          <span>{{ '@pry.admin.dataset.conflict' | i18n }}</span>\n          @for (missing of missingGroups | keyvalue; track missing.key) {\n            <div>\n              {{ '@pry.admin.dataset.entities.dashboard' | i18n }} <strong>{{ missing.value.entityName }}</strong>\n              <div class=\"u-display-flex\">\n                @for (group of missing.value.groups; track group) {\n                  <span class=\"a-chip\">{{ getGroupLabel(group) }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\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"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "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: i6$1.PryMetadataEditorComponent, selector: "pry-metadata-editor", inputs: ["isModification", "targetId", "type", "metadata"], outputs: ["addMeta", "removeMeta"] }, { kind: "component", type: i4.PryGroupShareComponent, selector: "pry-group-share", inputs: ["disableRadios", "allowedGroups"], outputs: ["radioValueChange"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i4.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminSelectDatasetComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3.PryI18nService }, { token: i0.ChangeDetectorRef }, { token: PRY_ACCESS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminSelectDatasetComponent, selector: "pry-admin-select-dataset", usesInheritance: true, ngImport: i0, template: "@if (selectedDataset$ | async; as dataset) {\n  <div\n    [id]=\"'panel-dataset-' + dataset.id\"\n    [attr.aria-labelledby]=\"'button-dataset-' + dataset.id\"\n    class=\"o-panel o-pry-admin-dataset-select\"\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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.dataset.datasetDetails' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"datasetDetails\" name=\"dataset.details\"></pry-tab>\n      <pry-tab [templateRef]=\"datasetMetadata\" name=\"metadata.title\"></pry-tab>\n      <pry-tab [templateRef]=\"datasetAssociations\" name=\"classes.associations\"></pry-tab>\n      @if (canModify$(dataset) | async) {\n        <pry-tab [templateRef]=\"shareDataset\" name=\"share\"></pry-tab>\n      }\n    </pry-tab-group>\n    <ng-template #datasetDetails>\n      <div class=\"u-display-flex -column -gap-20\">\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.dataset.name' | i18n }}</h4>\n          <span>{{ dataset.name }}</span>\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.dataset.description' | i18n }}</h4>\n          @if (dataset.description) {\n            <span>{{ dataset.description }}</span>\n          } @else {\n            <span class=\"-italic\">{{ '@pry.dataset.noDescription' | i18n }}</span>\n          }\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.customize.name' | i18n }}</h4>\n          <span>{{ dataset.oClass | translateId: { type: 'class', output: 'name' } | async }}</span>\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.dataset.type' | i18n }}</h4>\n          <span>{{ '@pry.admin.dataset.' + dataset.type | i18n }}</span>\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.dataset.tags' | i18n }}</h4>\n          @if (dataset.categories && dataset.categories.length > 0) {\n            <div class=\"u-display-flex\">\n              @for (category of dataset.categories; track category.id) {\n                <span class=\"a-chip -md\">{{ category.name }}</span>\n              }\n            </div>\n          } @else {\n            <span class=\"-italic\">{{ '@pry.dataset.noTags' | i18n }}</span>\n          }\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #datasetMetadata>\n      <pry-metadata-editor\n        [targetId]=\"(selectedDataset$ | async)?.id ?? ''\"\n        [isModification]=\"(editable$ | async) ?? false\"\n        [metadata]=\"(datasetMetadata$ | async) ?? []\"\n        (removeMeta)=\"removeMetadata($event)\"\n        (addMeta)=\"addDatasetMetadata($event)\"\n        [type]=\"'meta'\"\n      ></pry-metadata-editor>\n    </ng-template>\n    <ng-template #datasetAssociations>\n      @if (associations$ | async; as associations) {\n        <div 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      }\n    </ng-template>\n    <ng-template #shareDataset>\n      <div class=\"o-pry-admin-dataset-select__share\">\n        <pry-group-share\n          [ngModel]=\"dataset.groups\"\n          (ngModelChange)=\"changeGroup($event)\"\n          (radioValueChange)=\"updateGroups($event)\"\n        ></pry-group-share>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary u-self-end\"\n          #submit\n          (click)=\"share(dataset)\"\n          [disabled]=\"disableShareButton$ | async\"\n          >\n          {{ '@pry.admin.validate' | i18n }}\n        </button>\n        @if (selectedDatasetMissingGroups$ | async) {\n          <h4 class=\"a-h4\">{{ '@pry.admin.dataset.success' | i18n }}</h4>\n        }\n        @if (missingGroups$ | async; as missingGroups) {\n          <div class=\"u-display-flex -column\">\n            <span>{{ '@pry.admin.dataset.conflict' | i18n }}</span>\n            @for (missing of missingGroups | keyvalue; track missing.key) {\n              <div>\n                {{ '@pry.admin.dataset.entities.dashboard' | i18n }} <strong>{{ missing.value.entityName }}</strong>\n                <div class=\"u-display-flex\">\n                  @for (group of missing.value.groups; track group) {\n                    <span class=\"a-chip\">{{ getGroupLabel(group) }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.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: i5$1.PryMetadataEditorComponent, selector: "pry-metadata-editor", inputs: ["isModification", "targetId", "type", "metadata"], outputs: ["addMeta", "removeMeta"] }, { kind: "component", type: i3.PryGroupShareComponent, selector: "pry-group-share", inputs: ["disableRadios", "allowedGroups"], outputs: ["radioValueChange"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i3.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminSelectDatasetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-select-dataset', template: "<div\n  *ngIf=\"selectedDataset$ | async as dataset\"\n  [id]=\"'panel-dataset-' + dataset.id\"\n  [attr.aria-labelledby]=\"'button-dataset-' + dataset.id\"\n  class=\"o-panel o-pry-admin-dataset-select\"\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.dataset.datasetDetails' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"datasetDetails\" name=\"dataset.details\"></pry-tab>\n    <pry-tab [templateRef]=\"datasetMetadata\" name=\"metadata.title\"></pry-tab>\n    <pry-tab [templateRef]=\"datasetAssociations\" name=\"classes.associations\"></pry-tab>\n    <pry-tab *ngIf=\"canModify$(dataset) | async\" [templateRef]=\"shareDataset\" name=\"share\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #datasetDetails>\n    <div class=\"u-display-flex -column -gap-20\">\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.dataset.name' | i18n }}</h4>\n        <span>{{ dataset.name }}</span>\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.dataset.description' | i18n }}</h4>\n        @if (dataset.description) {\n          <span>{{ dataset.description }}</span>\n        } @else {\n          <span class=\"-italic\">{{ '@pry.dataset.noDescription' | i18n }}</span>\n        }\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.customize.name' | i18n }}</h4>\n        <span>{{ dataset.oClass | translateId: { type: 'class', output: 'name' } | async }}</span>\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.dataset.type' | i18n }}</h4>\n        <span>{{ '@pry.admin.dataset.' + dataset.type | i18n }}</span>\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.dataset.tags' | i18n }}</h4>\n        @if (dataset.categories && dataset.categories.length > 0) {\n          <div class=\"u-display-flex\">\n            @for (category of dataset.categories; track category.id) {\n              <span class=\"a-chip -md\">{{ category.name }}</span>\n            }\n          </div>\n        } @else {\n          <span class=\"-italic\">{{ '@pry.dataset.noTags' | i18n }}</span>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #datasetMetadata>\n    <pry-metadata-editor\n      [targetId]=\"(selectedDataset$ | async)?.id ?? ''\"\n      [isModification]=\"(editable$ | async) ?? false\"\n      [metadata]=\"(datasetMetadata$ | async) ?? []\"\n      (removeMeta)=\"removeMetadata($event)\"\n      (addMeta)=\"addDatasetMetadata($event)\"\n      [type]=\"'meta'\"\n    ></pry-metadata-editor>\n  </ng-template>\n\n  <ng-template #datasetAssociations>\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\n  <ng-template #shareDataset>\n    <div class=\"o-pry-admin-dataset-select__share\">\n      <pry-group-share\n        [ngModel]=\"dataset.groups\"\n        (ngModelChange)=\"changeGroup($event)\"\n        (radioValueChange)=\"updateGroups($event)\"\n      ></pry-group-share>\n      <button\n        type=\"submit\"\n        class=\"a-btn a-btn--primary u-self-end\"\n        #submit\n        (click)=\"share(dataset)\"\n        [disabled]=\"disableShareButton$ | async\"\n      >\n        {{ '@pry.admin.validate' | i18n }}\n      </button>\n      @if (selectedDatasetMissingGroups$ | async) {\n        <h4 class=\"a-h4\">{{ '@pry.admin.dataset.success' | i18n }}</h4>\n      }\n      @if (missingGroups$ | async; as missingGroups) {\n        <div class=\"u-display-flex -column\">\n          <span>{{ '@pry.admin.dataset.conflict' | i18n }}</span>\n          @for (missing of missingGroups | keyvalue; track missing.key) {\n            <div>\n              {{ '@pry.admin.dataset.entities.dashboard' | i18n }} <strong>{{ missing.value.entityName }}</strong>\n              <div class=\"u-display-flex\">\n                @for (group of missing.value.groups; track group) {\n                  <span class=\"a-chip\">{{ getGroupLabel(group) }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i4.PryI18nService }, { type: i0.ChangeDetectorRef }, { type: i4.PryBaseAccess, decorators: [{
+            args: [{ selector: 'pry-admin-select-dataset', template: "@if (selectedDataset$ | async; as dataset) {\n  <div\n    [id]=\"'panel-dataset-' + dataset.id\"\n    [attr.aria-labelledby]=\"'button-dataset-' + dataset.id\"\n    class=\"o-panel o-pry-admin-dataset-select\"\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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.dataset.datasetDetails' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"datasetDetails\" name=\"dataset.details\"></pry-tab>\n      <pry-tab [templateRef]=\"datasetMetadata\" name=\"metadata.title\"></pry-tab>\n      <pry-tab [templateRef]=\"datasetAssociations\" name=\"classes.associations\"></pry-tab>\n      @if (canModify$(dataset) | async) {\n        <pry-tab [templateRef]=\"shareDataset\" name=\"share\"></pry-tab>\n      }\n    </pry-tab-group>\n    <ng-template #datasetDetails>\n      <div class=\"u-display-flex -column -gap-20\">\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.dataset.name' | i18n }}</h4>\n          <span>{{ dataset.name }}</span>\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.dataset.description' | i18n }}</h4>\n          @if (dataset.description) {\n            <span>{{ dataset.description }}</span>\n          } @else {\n            <span class=\"-italic\">{{ '@pry.dataset.noDescription' | i18n }}</span>\n          }\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.customize.name' | i18n }}</h4>\n          <span>{{ dataset.oClass | translateId: { type: 'class', output: 'name' } | async }}</span>\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.dataset.type' | i18n }}</h4>\n          <span>{{ '@pry.admin.dataset.' + dataset.type | i18n }}</span>\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.dataset.tags' | i18n }}</h4>\n          @if (dataset.categories && dataset.categories.length > 0) {\n            <div class=\"u-display-flex\">\n              @for (category of dataset.categories; track category.id) {\n                <span class=\"a-chip -md\">{{ category.name }}</span>\n              }\n            </div>\n          } @else {\n            <span class=\"-italic\">{{ '@pry.dataset.noTags' | i18n }}</span>\n          }\n        </div>\n      </div>\n    </ng-template>\n    <ng-template #datasetMetadata>\n      <pry-metadata-editor\n        [targetId]=\"(selectedDataset$ | async)?.id ?? ''\"\n        [isModification]=\"(editable$ | async) ?? false\"\n        [metadata]=\"(datasetMetadata$ | async) ?? []\"\n        (removeMeta)=\"removeMetadata($event)\"\n        (addMeta)=\"addDatasetMetadata($event)\"\n        [type]=\"'meta'\"\n      ></pry-metadata-editor>\n    </ng-template>\n    <ng-template #datasetAssociations>\n      @if (associations$ | async; as associations) {\n        <div 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      }\n    </ng-template>\n    <ng-template #shareDataset>\n      <div class=\"o-pry-admin-dataset-select__share\">\n        <pry-group-share\n          [ngModel]=\"dataset.groups\"\n          (ngModelChange)=\"changeGroup($event)\"\n          (radioValueChange)=\"updateGroups($event)\"\n        ></pry-group-share>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary u-self-end\"\n          #submit\n          (click)=\"share(dataset)\"\n          [disabled]=\"disableShareButton$ | async\"\n          >\n          {{ '@pry.admin.validate' | i18n }}\n        </button>\n        @if (selectedDatasetMissingGroups$ | async) {\n          <h4 class=\"a-h4\">{{ '@pry.admin.dataset.success' | i18n }}</h4>\n        }\n        @if (missingGroups$ | async; as missingGroups) {\n          <div class=\"u-display-flex -column\">\n            <span>{{ '@pry.admin.dataset.conflict' | i18n }}</span>\n            @for (missing of missingGroups | keyvalue; track missing.key) {\n              <div>\n                {{ '@pry.admin.dataset.entities.dashboard' | i18n }} <strong>{{ missing.value.entityName }}</strong>\n                <div class=\"u-display-flex\">\n                  @for (group of missing.value.groups; track group) {\n                    <span class=\"a-chip\">{{ getGroupLabel(group) }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3.PryI18nService }, { type: i0.ChangeDetectorRef }, { type: i3.PryBaseAccess, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -3209,11 +3205,11 @@ class AdminEnvironmentSelectComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEnvironmentSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminEnvironmentSelectComponent, selector: "pry-admin-environment-select", ngImport: i0, template: "<div\n  *ngIf=\"currentEnv$ | async as env\"\n  [id]=\"'panel-env-' + env.name\"\n  [attr.aria-labelledby]=\"'button-env-' + env.name\"\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.environment.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"environmentDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #environmentDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.name' | i18n }} :\n      <strong>{{ env.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.value' | i18n }} :\n      <strong>{{ env.value }}</strong>\n    </p>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminEnvironmentSelectComponent, selector: "pry-admin-environment-select", ngImport: i0, template: "@if (currentEnv$ | async; as env) {\n  <div\n    [id]=\"'panel-env-' + env.name\"\n    [attr.aria-labelledby]=\"'button-env-' + env.name\"\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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.environment.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"environmentDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #environmentDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.environment.name' | i18n }} :\n        <strong>{{ env.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.environment.type' | i18n }} :\n        <strong>{{ currentTypeTranslation | i18n }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.environment.value' | i18n }} :\n        <strong>{{ env.value }}</strong>\n      </p>\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEnvironmentSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-environment-select', template: "<div\n  *ngIf=\"currentEnv$ | async as env\"\n  [id]=\"'panel-env-' + env.name\"\n  [attr.aria-labelledby]=\"'button-env-' + env.name\"\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.environment.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"environmentDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #environmentDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.name' | i18n }} :\n      <strong>{{ env.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.value' | i18n }} :\n      <strong>{{ env.value }}</strong>\n    </p>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-environment-select', template: "@if (currentEnv$ | async; as env) {\n  <div\n    [id]=\"'panel-env-' + env.name\"\n    [attr.aria-labelledby]=\"'button-env-' + env.name\"\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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.environment.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"environmentDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #environmentDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.environment.name' | i18n }} :\n        <strong>{{ env.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.environment.type' | i18n }} :\n        <strong>{{ currentTypeTranslation | i18n }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.environment.value' | i18n }} :\n        <strong>{{ env.value }}</strong>\n      </p>\n    </ng-template>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminFieldsSelectComponent {
@@ -3287,11 +3283,11 @@ class AdminFieldsSelectComponent {
         this.sub.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminFieldsSelectComponent, selector: "pry-admin-fields-select", ngImport: i0, template: "<div\n  *ngIf=\"currentField$ | async as field\"\n  [id]=\"'panel-field-' + field.id\"\n  [attr.aria-labelledby]=\"'button-field-' + field.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.fields.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"fieldDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"fieldAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #fieldDetails>\n    <div class=\"u-display-flex -column -gap-20\">\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.name' | i18n }}</h4>\n        <span>{{ field.name }}</span>\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.type' | i18n }}</h4>\n        <span>{{ FIELD_I18N.label + field.type | i18n }}</span>\n      </div>\n      @if ([FieldType.INTEGER, FieldType.LONG, FieldType.DECIMAL, FieldType.INSTANT].includes(field.type)) {\n        <div>\n          <h3 class=\"a-h3 -no-padding\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n          <div class=\"u-display-flex -column -gap-20\">\n            @switch (field.type) {\n              @case (FieldType.INTEGER) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n              }\n              @case (FieldType.LONG) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n              }\n              @case (FieldType.DECIMAL) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n                <div>\n                  <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.decimalPrecision' | i18n }}</h4>\n                  @if (field.decimalPrecision) {\n                    <span>{{ field.decimalPrecision }}</span>\n                  } @else {\n                    <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDecimalPrecision' | i18n }}</span>\n                  }\n                </div>\n              }\n              @case (FieldType.INSTANT) {\n                <div>\n                  <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.dateFormat' | i18n }}</h4>\n                  @if (field.format) {\n                    <span>{{ '@pry.admin.fields.formatOptions.dateFormatOptions.' + field.format | i18n }}</span>\n                  } @else {\n                    <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDateFormat' | i18n }}</span>\n                  }\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n      @if (field.crs) {\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.crs' | i18n }}</h4>\n          <span>{{ field.crs }}</span>\n        </div>\n      }\n    </div>\n\n    <ng-template #numberFormatOptions>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</h4>\n        @if (field.unit) {\n          <span>{{ field.unit }}</span>\n        } @else {\n          <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noUnit' | i18n }}</span>\n        }\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.localeFormat' | i18n }}</h4>\n        <span>{{ (field.localeFormat ? '@pry.action.yes' : '@pry.action.no') | i18n }}</span>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #fieldAssociations>\n    <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n    <pry-association [associations]=\"associations$ | async\"></pry-association>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminFieldsSelectComponent, selector: "pry-admin-fields-select", ngImport: i0, template: "@if (currentField$ | async; as field) {\n  <div\n    [id]=\"'panel-field-' + field.id\"\n    [attr.aria-labelledby]=\"'button-field-' + field.id\"\n    class=\"o-panel\"\n    >\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n      <h3 class=\"a-h3\">\n        {{ '@pry.admin.fields.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"fieldDetails\" name=\"details\"></pry-tab>\n      <pry-tab [templateRef]=\"fieldAssociations\" name=\"classes.associations\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #fieldDetails>\n      <div class=\"u-display-flex -column -gap-20\">\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.name' | i18n }}</h4>\n          <span>{{ field.name }}</span>\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.type' | i18n }}</h4>\n          <span>{{ FIELD_I18N.label + field.type | i18n }}</span>\n        </div>\n        @if ([FieldType.INTEGER, FieldType.LONG, FieldType.DECIMAL, FieldType.INSTANT].includes(field.type)) {\n          <div>\n            <h3 class=\"a-h3 -no-padding\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n            <div class=\"u-display-flex -column -gap-20\">\n              @switch (field.type) {\n                @case (FieldType.INTEGER) {\n                  <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n                }\n                @case (FieldType.LONG) {\n                  <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n                }\n                @case (FieldType.DECIMAL) {\n                  <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n                  <div>\n                    <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.decimalPrecision' | i18n }}</h4>\n                    @if (field.decimalPrecision) {\n                      <span>{{ field.decimalPrecision }}</span>\n                    } @else {\n                      <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDecimalPrecision' | i18n }}</span>\n                    }\n                  </div>\n                }\n                @case (FieldType.INSTANT) {\n                  <div>\n                    <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.dateFormat' | i18n }}</h4>\n                    @if (field.format) {\n                      <span>{{ '@pry.admin.fields.formatOptions.dateFormatOptions.' + field.format | i18n }}</span>\n                    } @else {\n                      <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDateFormat' | i18n }}</span>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n        @if (field.crs) {\n          <div>\n            <h4 class=\"a-h4\">{{ '@pry.admin.fields.crs' | i18n }}</h4>\n            <span>{{ field.crs }}</span>\n          </div>\n        }\n      </div>\n      <ng-template #numberFormatOptions>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</h4>\n          @if (field.unit) {\n            <span>{{ field.unit }}</span>\n          } @else {\n            <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noUnit' | i18n }}</span>\n          }\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.localeFormat' | i18n }}</h4>\n          <span>{{ (field.localeFormat ? '@pry.action.yes' : '@pry.action.no') | i18n }}</span>\n        </div>\n      </ng-template>\n    </ng-template>\n    <ng-template #fieldAssociations>\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations$ | async\"></pry-association>\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminFieldsSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-fields-select', template: "<div\n  *ngIf=\"currentField$ | async as field\"\n  [id]=\"'panel-field-' + field.id\"\n  [attr.aria-labelledby]=\"'button-field-' + field.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.fields.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"fieldDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"fieldAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #fieldDetails>\n    <div class=\"u-display-flex -column -gap-20\">\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.name' | i18n }}</h4>\n        <span>{{ field.name }}</span>\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.type' | i18n }}</h4>\n        <span>{{ FIELD_I18N.label + field.type | i18n }}</span>\n      </div>\n      @if ([FieldType.INTEGER, FieldType.LONG, FieldType.DECIMAL, FieldType.INSTANT].includes(field.type)) {\n        <div>\n          <h3 class=\"a-h3 -no-padding\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n          <div class=\"u-display-flex -column -gap-20\">\n            @switch (field.type) {\n              @case (FieldType.INTEGER) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n              }\n              @case (FieldType.LONG) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n              }\n              @case (FieldType.DECIMAL) {\n                <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n                <div>\n                  <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.decimalPrecision' | i18n }}</h4>\n                  @if (field.decimalPrecision) {\n                    <span>{{ field.decimalPrecision }}</span>\n                  } @else {\n                    <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDecimalPrecision' | i18n }}</span>\n                  }\n                </div>\n              }\n              @case (FieldType.INSTANT) {\n                <div>\n                  <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.dateFormat' | i18n }}</h4>\n                  @if (field.format) {\n                    <span>{{ '@pry.admin.fields.formatOptions.dateFormatOptions.' + field.format | i18n }}</span>\n                  } @else {\n                    <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDateFormat' | i18n }}</span>\n                  }\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n      @if (field.crs) {\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.crs' | i18n }}</h4>\n          <span>{{ field.crs }}</span>\n        </div>\n      }\n    </div>\n\n    <ng-template #numberFormatOptions>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</h4>\n        @if (field.unit) {\n          <span>{{ field.unit }}</span>\n        } @else {\n          <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noUnit' | i18n }}</span>\n        }\n      </div>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.localeFormat' | i18n }}</h4>\n        <span>{{ (field.localeFormat ? '@pry.action.yes' : '@pry.action.no') | i18n }}</span>\n      </div>\n    </ng-template>\n  </ng-template>\n\n  <ng-template #fieldAssociations>\n    <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n    <pry-association [associations]=\"associations$ | async\"></pry-association>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-fields-select', template: "@if (currentField$ | async; as field) {\n  <div\n    [id]=\"'panel-field-' + field.id\"\n    [attr.aria-labelledby]=\"'button-field-' + field.id\"\n    class=\"o-panel\"\n    >\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n      <h3 class=\"a-h3\">\n        {{ '@pry.admin.fields.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"fieldDetails\" name=\"details\"></pry-tab>\n      <pry-tab [templateRef]=\"fieldAssociations\" name=\"classes.associations\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #fieldDetails>\n      <div class=\"u-display-flex -column -gap-20\">\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.name' | i18n }}</h4>\n          <span>{{ field.name }}</span>\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.type' | i18n }}</h4>\n          <span>{{ FIELD_I18N.label + field.type | i18n }}</span>\n        </div>\n        @if ([FieldType.INTEGER, FieldType.LONG, FieldType.DECIMAL, FieldType.INSTANT].includes(field.type)) {\n          <div>\n            <h3 class=\"a-h3 -no-padding\">{{ '@pry.admin.fields.formatOptions.title' | i18n }}</h3>\n            <div class=\"u-display-flex -column -gap-20\">\n              @switch (field.type) {\n                @case (FieldType.INTEGER) {\n                  <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n                }\n                @case (FieldType.LONG) {\n                  <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n                }\n                @case (FieldType.DECIMAL) {\n                  <ng-container *ngTemplateOutlet=\"numberFormatOptions\"></ng-container>\n                  <div>\n                    <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.decimalPrecision' | i18n }}</h4>\n                    @if (field.decimalPrecision) {\n                      <span>{{ field.decimalPrecision }}</span>\n                    } @else {\n                      <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDecimalPrecision' | i18n }}</span>\n                    }\n                  </div>\n                }\n                @case (FieldType.INSTANT) {\n                  <div>\n                    <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.dateFormat' | i18n }}</h4>\n                    @if (field.format) {\n                      <span>{{ '@pry.admin.fields.formatOptions.dateFormatOptions.' + field.format | i18n }}</span>\n                    } @else {\n                      <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noDateFormat' | i18n }}</span>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n        @if (field.crs) {\n          <div>\n            <h4 class=\"a-h4\">{{ '@pry.admin.fields.crs' | i18n }}</h4>\n            <span>{{ field.crs }}</span>\n          </div>\n        }\n      </div>\n      <ng-template #numberFormatOptions>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.unit' | i18n }}</h4>\n          @if (field.unit) {\n            <span>{{ field.unit }}</span>\n          } @else {\n            <span class=\"-italic\">{{ '@pry.admin.fields.formatOptions.noUnit' | i18n }}</span>\n          }\n        </div>\n        <div>\n          <h4 class=\"a-h4\">{{ '@pry.admin.fields.formatOptions.localeFormat' | i18n }}</h4>\n          <span>{{ (field.localeFormat ? '@pry.action.yes' : '@pry.action.no') | i18n }}</span>\n        </div>\n      </ng-template>\n    </ng-template>\n    <ng-template #fieldAssociations>\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations$ | async\"></pry-association>\n    </ng-template>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 var MetadataRulesActionTypes;
@@ -3419,11 +3415,11 @@ class AdminSelectMetadataRulesComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminSelectMetadataRulesComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminSelectMetadataRulesComponent, selector: "pry-admin-select-metadata-rules", ngImport: i0, template: "<div\n  *ngIf=\"metadataRulesSelected$ | async as metadataRules\"\n  [id]=\"'panel-meta-rule-' + metadataRules.id\"\n  [attr.aria-labelledby]=\"'button-meta-rule-' + metadataRules.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.metadata.details' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"metadataRuleDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #metadataRuleDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.label' | i18n }} :\n      <strong>{{ metadataRules.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-item.name' | i18n }} :\n      <strong>{{ metadataRules.metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\" *ngIf=\"metadataRules.metadata.description\">\n      {{ '@pry.admin.metadata-rules.metadata-item.description' | i18n }} :\n      <strong>{{ metadataRules.metadata.description }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-item.type' | i18n }} :\n      <strong>{{ metadataRules.metadata.type }}</strong>\n    </p>\n    <ng-container *ngIf=\"metadataRules.metadata.allowedValues\">\n      <p class=\"a-p\" *ngFor=\"let item of metadataRules.metadata.allowedValues\">{{ item }}</p>\n    </ng-container>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-user.name' | i18n }} :\n      <strong>{{ metadataRules.userProfile.name }}</strong>\n    </p>\n    <p class=\"a-p\" *ngIf=\"metadataRules.userProfile.description\">\n      {{ '@pry.admin.metadata-rules.metadata-user.description' | i18n }} :\n      <strong>{{ metadataRules.userProfile.description }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-user.type' | i18n }} :\n      <strong>{{ metadataRules.userProfile.type }}</strong>\n    </p>\n    <ng-container *ngIf=\"metadataRules.userProfile.allowedValues\">\n      <p class=\"a-p\" *ngFor=\"let item of metadataRules.userProfile.allowedValues\">{{ item }}</p>\n    </ng-container>\n  </ng-template>\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.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminSelectMetadataRulesComponent, selector: "pry-admin-select-metadata-rules", ngImport: i0, template: "@if (metadataRulesSelected$ | async; as metadataRules) {\n  <div\n    [id]=\"'panel-meta-rule-' + metadataRules.id\"\n    [attr.aria-labelledby]=\"'button-meta-rule-' + metadataRules.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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.metadata.details' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"metadataRuleDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #metadataRuleDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata-rules.label' | i18n }} :\n        <strong>{{ metadataRules.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata-rules.metadata-item.name' | i18n }} :\n        <strong>{{ metadataRules.metadata.name }}</strong>\n      </p>\n      @if (metadataRules.metadata.description) {\n        <p class=\"a-p\">\n          {{ '@pry.admin.metadata-rules.metadata-item.description' | i18n }} :\n          <strong>{{ metadataRules.metadata.description }}</strong>\n        </p>\n      }\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata-rules.metadata-item.type' | i18n }} :\n        <strong>{{ metadataRules.metadata.type }}</strong>\n      </p>\n      @if (metadataRules.metadata.allowedValues) {\n        @for (item of metadataRules.metadata.allowedValues; track item) {\n          <p class=\"a-p\">{{ item }}</p>\n        }\n      }\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata-rules.metadata-user.name' | i18n }} :\n        <strong>{{ metadataRules.userProfile.name }}</strong>\n      </p>\n      @if (metadataRules.userProfile.description) {\n        <p class=\"a-p\">\n          {{ '@pry.admin.metadata-rules.metadata-user.description' | i18n }} :\n          <strong>{{ metadataRules.userProfile.description }}</strong>\n        </p>\n      }\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata-rules.metadata-user.type' | i18n }} :\n        <strong>{{ metadataRules.userProfile.type }}</strong>\n      </p>\n      @if (metadataRules.userProfile.allowedValues) {\n        @for (item of metadataRules.userProfile.allowedValues; track item) {\n          <p class=\"a-p\">{{ item }}</p>\n        }\n      }\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminSelectMetadataRulesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-select-metadata-rules', template: "<div\n  *ngIf=\"metadataRulesSelected$ | async as metadataRules\"\n  [id]=\"'panel-meta-rule-' + metadataRules.id\"\n  [attr.aria-labelledby]=\"'button-meta-rule-' + metadataRules.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.metadata.details' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"metadataRuleDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #metadataRuleDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.label' | i18n }} :\n      <strong>{{ metadataRules.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-item.name' | i18n }} :\n      <strong>{{ metadataRules.metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\" *ngIf=\"metadataRules.metadata.description\">\n      {{ '@pry.admin.metadata-rules.metadata-item.description' | i18n }} :\n      <strong>{{ metadataRules.metadata.description }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-item.type' | i18n }} :\n      <strong>{{ metadataRules.metadata.type }}</strong>\n    </p>\n    <ng-container *ngIf=\"metadataRules.metadata.allowedValues\">\n      <p class=\"a-p\" *ngFor=\"let item of metadataRules.metadata.allowedValues\">{{ item }}</p>\n    </ng-container>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-user.name' | i18n }} :\n      <strong>{{ metadataRules.userProfile.name }}</strong>\n    </p>\n    <p class=\"a-p\" *ngIf=\"metadataRules.userProfile.description\">\n      {{ '@pry.admin.metadata-rules.metadata-user.description' | i18n }} :\n      <strong>{{ metadataRules.userProfile.description }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-user.type' | i18n }} :\n      <strong>{{ metadataRules.userProfile.type }}</strong>\n    </p>\n    <ng-container *ngIf=\"metadataRules.userProfile.allowedValues\">\n      <p class=\"a-p\" *ngFor=\"let item of metadataRules.userProfile.allowedValues\">{{ item }}</p>\n    </ng-container>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-select-metadata-rules', template: "@if (metadataRulesSelected$ | async; as metadataRules) {\n  <div\n    [id]=\"'panel-meta-rule-' + metadataRules.id\"\n    [attr.aria-labelledby]=\"'button-meta-rule-' + metadataRules.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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.metadata.details' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"metadataRuleDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #metadataRuleDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata-rules.label' | i18n }} :\n        <strong>{{ metadataRules.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata-rules.metadata-item.name' | i18n }} :\n        <strong>{{ metadataRules.metadata.name }}</strong>\n      </p>\n      @if (metadataRules.metadata.description) {\n        <p class=\"a-p\">\n          {{ '@pry.admin.metadata-rules.metadata-item.description' | i18n }} :\n          <strong>{{ metadataRules.metadata.description }}</strong>\n        </p>\n      }\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata-rules.metadata-item.type' | i18n }} :\n        <strong>{{ metadataRules.metadata.type }}</strong>\n      </p>\n      @if (metadataRules.metadata.allowedValues) {\n        @for (item of metadataRules.metadata.allowedValues; track item) {\n          <p class=\"a-p\">{{ item }}</p>\n        }\n      }\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata-rules.metadata-user.name' | i18n }} :\n        <strong>{{ metadataRules.userProfile.name }}</strong>\n      </p>\n      @if (metadataRules.userProfile.description) {\n        <p class=\"a-p\">\n          {{ '@pry.admin.metadata-rules.metadata-user.description' | i18n }} :\n          <strong>{{ metadataRules.userProfile.description }}</strong>\n        </p>\n      }\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata-rules.metadata-user.type' | i18n }} :\n        <strong>{{ metadataRules.userProfile.type }}</strong>\n      </p>\n      @if (metadataRules.userProfile.allowedValues) {\n        @for (item of metadataRules.userProfile.allowedValues; track item) {\n          <p class=\"a-p\">{{ item }}</p>\n        }\n      }\n    </ng-template>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 const BASE$1 = '[Admin/User]';
@@ -3538,11 +3534,11 @@ class AdminUserSelectMetadataComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminUserSelectMetadataComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminUserSelectMetadataComponent, selector: "pry-admin-user-select-metadata", ngImport: i0, template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.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    <h3 class=\"a-h3\">{{ '@pry.admin.metadata.detailsUser' | i18n }}</h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"userMetadataDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #userMetadataDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.label' | i18n }} :\n      <strong>{{ metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.description' | i18n }} :\n      <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n\n    <ng-container *ngIf=\"metadata.allowedValues\">\n      <ng-container *ngFor=\"let item of metadata.allowedValues\">\n        <p class=\"a-p\">{{ item }}</p>\n      </ng-container>\n    </ng-container>\n  </ng-template>\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.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminUserSelectMetadataComponent, selector: "pry-admin-user-select-metadata", ngImport: i0, template: "@if (metadata$ | async; as metadata) {\n  <div\n    [id]=\"'panel-meta-' + metadata.id\"\n    [attr.aria-labelledby]=\"'button-meta-' + metadata.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      <h3 class=\"a-h3\">{{ '@pry.admin.metadata.detailsUser' | i18n }}</h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"userMetadataDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #userMetadataDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.label' | i18n }} :\n        <strong>{{ metadata.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.description' | i18n }} :\n        <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.type' | i18n }} :\n        <strong>{{ currentTypeTranslation | i18n }}</strong>\n      </p>\n      @if (metadata.allowedValues) {\n        @for (item of metadata.allowedValues; track item) {\n          <p class=\"a-p\">{{ item }}</p>\n        }\n      }\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminUserSelectMetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-user-select-metadata', template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.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    <h3 class=\"a-h3\">{{ '@pry.admin.metadata.detailsUser' | i18n }}</h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"userMetadataDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #userMetadataDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.label' | i18n }} :\n      <strong>{{ metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.description' | i18n }} :\n      <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n\n    <ng-container *ngIf=\"metadata.allowedValues\">\n      <ng-container *ngFor=\"let item of metadata.allowedValues\">\n        <p class=\"a-p\">{{ item }}</p>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-user-select-metadata', template: "@if (metadata$ | async; as metadata) {\n  <div\n    [id]=\"'panel-meta-' + metadata.id\"\n    [attr.aria-labelledby]=\"'button-meta-' + metadata.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      <h3 class=\"a-h3\">{{ '@pry.admin.metadata.detailsUser' | i18n }}</h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"userMetadataDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #userMetadataDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.label' | i18n }} :\n        <strong>{{ metadata.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.description' | i18n }} :\n        <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.type' | i18n }} :\n        <strong>{{ currentTypeTranslation | i18n }}</strong>\n      </p>\n      @if (metadata.allowedValues) {\n        @for (item of metadata.allowedValues; track item) {\n          <p class=\"a-p\">{{ item }}</p>\n        }\n      }\n    </ng-template>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminSelectMetadataComponent {
@@ -3603,11 +3599,11 @@ class AdminSelectMetadataComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminSelectMetadataComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminSelectMetadataComponent, selector: "pry-select-metadata", ngImport: i0, template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.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.metadata.details' | i18n }}\n    </h3>\n  </div>\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"metadataDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #metadataDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.label' | i18n }} :\n      <strong>{{ metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.description' | i18n }} :\n      <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n    <p class=\"a-p\" *ngIf=\"metadata.system !== undefined\">\n      {{ '@pry.admin.metadata.system' | i18n }} :\n      <strong>{{ metadata.system ? '\u2714' : '\u2718' }}</strong>\n    </p>\n\n    <ng-container *ngIf=\"metadata.allowedValues\">\n      <ng-container *ngFor=\"let item of metadata.allowedValues\">\n        <p>{{ item }}</p>\n      </ng-container>\n    </ng-container>\n  </ng-template>\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.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminSelectMetadataComponent, selector: "pry-select-metadata", ngImport: i0, template: "@if (metadata$ | async; as metadata) {\n  <div\n    [id]=\"'panel-meta-' + metadata.id\"\n    [attr.aria-labelledby]=\"'button-meta-' + metadata.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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.metadata.details' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"metadataDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #metadataDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.label' | i18n }} :\n        <strong>{{ metadata.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.description' | i18n }} :\n        <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.type' | i18n }} :\n        <strong>{{ currentTypeTranslation | i18n }}</strong>\n      </p>\n      @if (metadata.system !== undefined) {\n        <p class=\"a-p\">\n          {{ '@pry.admin.metadata.system' | i18n }} :\n          <strong>{{ metadata.system ? '\u2714' : '\u2718' }}</strong>\n        </p>\n      }\n      @if (metadata.allowedValues) {\n        @for (item of metadata.allowedValues; track item) {\n          <p>{{ item }}</p>\n        }\n      }\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminSelectMetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-select-metadata', template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.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.metadata.details' | i18n }}\n    </h3>\n  </div>\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"metadataDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #metadataDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.label' | i18n }} :\n      <strong>{{ metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.description' | i18n }} :\n      <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n    <p class=\"a-p\" *ngIf=\"metadata.system !== undefined\">\n      {{ '@pry.admin.metadata.system' | i18n }} :\n      <strong>{{ metadata.system ? '\u2714' : '\u2718' }}</strong>\n    </p>\n\n    <ng-container *ngIf=\"metadata.allowedValues\">\n      <ng-container *ngFor=\"let item of metadata.allowedValues\">\n        <p>{{ item }}</p>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-select-metadata', template: "@if (metadata$ | async; as metadata) {\n  <div\n    [id]=\"'panel-meta-' + metadata.id\"\n    [attr.aria-labelledby]=\"'button-meta-' + metadata.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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.metadata.details' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"metadataDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #metadataDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.label' | i18n }} :\n        <strong>{{ metadata.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.description' | i18n }} :\n        <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.metadata.type' | i18n }} :\n        <strong>{{ currentTypeTranslation | i18n }}</strong>\n      </p>\n      @if (metadata.system !== undefined) {\n        <p class=\"a-p\">\n          {{ '@pry.admin.metadata.system' | i18n }} :\n          <strong>{{ metadata.system ? '\u2714' : '\u2718' }}</strong>\n        </p>\n      }\n      @if (metadata.allowedValues) {\n        @for (item of metadata.allowedValues; track item) {\n          <p>{{ item }}</p>\n        }\n      }\n    </ng-template>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminPredicatesSelectComponent {
@@ -3659,11 +3655,11 @@ class AdminPredicatesSelectComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminPredicatesSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminPredicatesSelectComponent, selector: "pry-admin-predicates-select", ngImport: i0, template: "<div\n  *ngIf=\"currentPredicate$ | async as pred\"\n  [id]=\"'panel-pred-' + pred.id\"\n  [attr.aria-labelledby]=\"'button-pred-' + pred.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.predicates.info' | i18n }}\n    </h3>\n  </div>\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"predicateDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n  <ng-template #predicateDetails>\n    <div>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.predicates.name' | i18n }} :\n        <strong>{{ pred.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.predicates.value' | i18n }} :\n        <strong>{{ pred.value }}</strong>\n      </p>\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"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminPredicatesSelectComponent, selector: "pry-admin-predicates-select", ngImport: i0, template: "@if (currentPredicate$ | async; as pred) {\n  <div\n    [id]=\"'panel-pred-' + pred.id\"\n    [attr.aria-labelledby]=\"'button-pred-' + pred.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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.predicates.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"predicateDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #predicateDetails>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n        <p class=\"a-p\">\n          {{ '@pry.admin.predicates.name' | i18n }} :\n          <strong>{{ pred.name }}</strong>\n        </p>\n        <p class=\"a-p\">\n          {{ '@pry.admin.predicates.value' | i18n }} :\n          <strong>{{ pred.value }}</strong>\n        </p>\n      </div>\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminPredicatesSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-predicates-select', template: "<div\n  *ngIf=\"currentPredicate$ | async as pred\"\n  [id]=\"'panel-pred-' + pred.id\"\n  [attr.aria-labelledby]=\"'button-pred-' + pred.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.predicates.info' | i18n }}\n    </h3>\n  </div>\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"predicateDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n  <ng-template #predicateDetails>\n    <div>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.predicates.name' | i18n }} :\n        <strong>{{ pred.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.predicates.value' | i18n }} :\n        <strong>{{ pred.value }}</strong>\n      </p>\n    </div>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-predicates-select', template: "@if (currentPredicate$ | async; as pred) {\n  <div\n    [id]=\"'panel-pred-' + pred.id\"\n    [attr.aria-labelledby]=\"'button-pred-' + pred.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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.predicates.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"predicateDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #predicateDetails>\n      <div>\n        <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n        <p class=\"a-p\">\n          {{ '@pry.admin.predicates.name' | i18n }} :\n          <strong>{{ pred.name }}</strong>\n        </p>\n        <p class=\"a-p\">\n          {{ '@pry.admin.predicates.value' | i18n }} :\n          <strong>{{ pred.value }}</strong>\n        </p>\n      </div>\n    </ng-template>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminRelationTypesSelectComponent {
@@ -3711,11 +3707,11 @@ class AdminRelationTypesSelectComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminRelationTypesSelectComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminRelationTypesSelectComponent, selector: "pry-admin-relation-types-select", ngImport: i0, template: "<div\n  *ngIf=\"currentRelationType$ | async as relationType\"\n  [id]=\"'panel-rt-' + relationType.id\"\n  [attr.aria-labelledby]=\"'button-rt-' + relationType.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    <h3 class=\"a-h3\">\n      {{ '@pry.admin.relationTypes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"relationTypeDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #relationTypeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.name' | i18n }} :\n      <strong>{{ relationType.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.nbLink' | i18n }} :\n      <strong>{{ relationType.nbLink }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.dateModification' | i18n }} :\n      <strong>{{ relationType.modificationDate | date : 'dd-MM-yyyy, HH:mm:ss' }}</strong>\n    </p>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminRelationTypesSelectComponent, selector: "pry-admin-relation-types-select", ngImport: i0, template: "@if (currentRelationType$ | async; as relationType) {\n  <div\n    [id]=\"'panel-rt-' + relationType.id\"\n    [attr.aria-labelledby]=\"'button-rt-' + relationType.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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.relationTypes.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"relationTypeDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #relationTypeDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.relationTypes.name' | i18n }} :\n        <strong>{{ relationType.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.relationTypes.nbLink' | i18n }} :\n        <strong>{{ relationType.nbLink }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.relationTypes.dateModification' | i18n }} :\n        <strong>{{ relationType.modificationDate | date : 'dd-MM-yyyy, HH:mm:ss' }}</strong>\n      </p>\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminRelationTypesSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-relation-types-select', template: "<div\n  *ngIf=\"currentRelationType$ | async as relationType\"\n  [id]=\"'panel-rt-' + relationType.id\"\n  [attr.aria-labelledby]=\"'button-rt-' + relationType.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    <h3 class=\"a-h3\">\n      {{ '@pry.admin.relationTypes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"relationTypeDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #relationTypeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.name' | i18n }} :\n      <strong>{{ relationType.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.nbLink' | i18n }} :\n      <strong>{{ relationType.nbLink }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.dateModification' | i18n }} :\n      <strong>{{ relationType.modificationDate | date : 'dd-MM-yyyy, HH:mm:ss' }}</strong>\n    </p>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-relation-types-select', template: "@if (currentRelationType$ | async; as relationType) {\n  <div\n    [id]=\"'panel-rt-' + relationType.id\"\n    [attr.aria-labelledby]=\"'button-rt-' + relationType.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      <h3 class=\"a-h3\">\n        {{ '@pry.admin.relationTypes.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"relationTypeDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #relationTypeDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.relationTypes.name' | i18n }} :\n        <strong>{{ relationType.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.relationTypes.nbLink' | i18n }} :\n        <strong>{{ relationType.nbLink }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.relationTypes.dateModification' | i18n }} :\n        <strong>{{ relationType.modificationDate | date : 'dd-MM-yyyy, HH:mm:ss' }}</strong>\n      </p>\n    </ng-template>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }] });
 const BASE = '[Admin/User]';
@@ -3820,11 +3816,11 @@ class AdminUserSelectComponent {
             .map((metadata) => metadata.value) ?? []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminUserSelectComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminUserSelectComponent, selector: "pry-admin-user-select", inputs: { profil: "profil" }, ngImport: i0, template: "<div\n  *ngIf=\"selectedUser$ | async as user\"\n  [id]=\"'panel-user-' + user.id\"\n  [attr.aria-labelledby]=\"'button-user-' + user.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 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n      {{ '@pry.admin.userInfo.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"userProfile\" name=\"userInfo.profile\"></pry-tab>\n    <pry-tab [templateRef]=\"userDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #userProfile>\n    <pry-metadata-editor\n      [targetId]=\"(selectedUser$ | async)?.id ?? ''\"\n      [isModification]=\"(editable$ | async) ?? false\"\n      [metadata]=\"(userMetadata$ | async) ?? []\"\n      (removeMeta)=\"removeMetadata($event)\"\n      (addMeta)=\"addMetadataUser($event)\"\n      [type]=\"'user'\"\n    ></pry-metadata-editor>\n  </ng-template>\n\n  <ng-template #userDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.name' | i18n }} :\n      <strong>{{ user?.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.familyName' | i18n }} :\n      <strong>{{ user.familyName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.email' | i18n }} :\n      <strong>{{ user.email }}</strong>\n    </p>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i6$1.PryMetadataEditorComponent, selector: "pry-metadata-editor", inputs: ["isModification", "targetId", "type", "metadata"], outputs: ["addMeta", "removeMeta"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminUserSelectComponent, selector: "pry-admin-user-select", inputs: { profil: "profil" }, ngImport: i0, template: "@if (selectedUser$ | async; as user) {\n  <div\n    [id]=\"'panel-user-' + user.id\"\n    [attr.aria-labelledby]=\"'button-user-' + user.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      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.userInfo.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"userProfile\" name=\"userInfo.profile\"></pry-tab>\n      <pry-tab [templateRef]=\"userDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #userProfile>\n      <pry-metadata-editor\n        [targetId]=\"(selectedUser$ | async)?.id ?? ''\"\n        [isModification]=\"(editable$ | async) ?? false\"\n        [metadata]=\"(userMetadata$ | async) ?? []\"\n        (removeMeta)=\"removeMetadata($event)\"\n        (addMeta)=\"addMetadataUser($event)\"\n        [type]=\"'user'\"\n      ></pry-metadata-editor>\n    </ng-template>\n    <ng-template #userDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.userInfo.name' | i18n }} :\n        <strong>{{ user?.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.userInfo.familyName' | i18n }} :\n        <strong>{{ user.familyName }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.userInfo.email' | i18n }} :\n        <strong>{{ user.email }}</strong>\n      </p>\n    </ng-template>\n  </div>\n}\n", dependencies: [{ kind: "component", type: i3.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"], outputs: ["clickedTabIdx"] }, { kind: "component", type: i3.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i5$1.PryMetadataEditorComponent, selector: "pry-metadata-editor", inputs: ["isModification", "targetId", "type", "metadata"], outputs: ["addMeta", "removeMeta"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminUserSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-user-select', template: "<div\n  *ngIf=\"selectedUser$ | async as user\"\n  [id]=\"'panel-user-' + user.id\"\n  [attr.aria-labelledby]=\"'button-user-' + user.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 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n      {{ '@pry.admin.userInfo.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"userProfile\" name=\"userInfo.profile\"></pry-tab>\n    <pry-tab [templateRef]=\"userDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #userProfile>\n    <pry-metadata-editor\n      [targetId]=\"(selectedUser$ | async)?.id ?? ''\"\n      [isModification]=\"(editable$ | async) ?? false\"\n      [metadata]=\"(userMetadata$ | async) ?? []\"\n      (removeMeta)=\"removeMetadata($event)\"\n      (addMeta)=\"addMetadataUser($event)\"\n      [type]=\"'user'\"\n    ></pry-metadata-editor>\n  </ng-template>\n\n  <ng-template #userDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.name' | i18n }} :\n      <strong>{{ user?.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.familyName' | i18n }} :\n      <strong>{{ user.familyName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.email' | i18n }} :\n      <strong>{{ user.email }}</strong>\n    </p>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-user-select', template: "@if (selectedUser$ | async; as user) {\n  <div\n    [id]=\"'panel-user-' + user.id\"\n    [attr.aria-labelledby]=\"'button-user-' + user.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      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.userInfo.info' | i18n }}\n      </h3>\n    </div>\n    <pry-tab-group translationStringBase=\"@pry.admin.\">\n      <pry-tab [templateRef]=\"userProfile\" name=\"userInfo.profile\"></pry-tab>\n      <pry-tab [templateRef]=\"userDetails\" name=\"details\"></pry-tab>\n    </pry-tab-group>\n    <ng-template #userProfile>\n      <pry-metadata-editor\n        [targetId]=\"(selectedUser$ | async)?.id ?? ''\"\n        [isModification]=\"(editable$ | async) ?? false\"\n        [metadata]=\"(userMetadata$ | async) ?? []\"\n        (removeMeta)=\"removeMetadata($event)\"\n        (addMeta)=\"addMetadataUser($event)\"\n        [type]=\"'user'\"\n      ></pry-metadata-editor>\n    </ng-template>\n    <ng-template #userDetails>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.userInfo.name' | i18n }} :\n        <strong>{{ user?.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.userInfo.familyName' | i18n }} :\n        <strong>{{ user.familyName }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.userInfo.email' | i18n }} :\n        <strong>{{ user.email }}</strong>\n      </p>\n    </ng-template>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { profil: [{
                 type: Input
             }] } });
@@ -3849,11 +3845,11 @@ class AdminMenuComponent extends BaseMenuComponent {
         this.store.dispatch(AdminActions.highlightMenu({ menu }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMenuComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminMenuComponent, selector: "pry-admin-menu", usesInheritance: true, ngImport: i0, template: "<nav class=\"m-nav-links\">\n  <ng-container *ngFor=\"let sub of subMenu$ | async\">\n    <ul class=\"m-nav-links__list\">\n      <ng-container *ngFor=\"let menu of sub.subMenus\">\n        <li\n          *pryAccess=\"{ module: menu.module, page: menu.page, subMenu: menu.subMenu }\"\n          class=\"m-nav-links__list__item\"\n        >\n          <a [routerLink]=\"menu.menu\" class=\"a-btn -width-full\" [routerLinkActive]=\"'is-active'\">\n            {{ baseMenuTranslation + menu.menu | i18n }}\n          </a>\n        </li>\n      </ng-container>\n    </ul>\n  </ng-container>\n</nav>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminMenuComponent, selector: "pry-admin-menu", usesInheritance: true, ngImport: i0, template: "<nav class=\"m-nav-links\">\n  @for (sub of subMenu$ | async; track sub) {\n    <ul class=\"m-nav-links__list\">\n      @for (menu of sub.subMenus; track menu) {\n        <li\n          *pryAccess=\"{ module: menu.module, page: menu.page, subMenu: menu.subMenu }\"\n          class=\"m-nav-links__list__item\"\n          >\n          <a [routerLink]=\"menu.menu\" class=\"a-btn -width-full\" [routerLinkActive]=\"'is-active'\">\n            {{ baseMenuTranslation + menu.menu | i18n }}\n          </a>\n        </li>\n      }\n    </ul>\n  }\n</nav>\n", dependencies: [{ kind: "directive", type: i3.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-menu', template: "<nav class=\"m-nav-links\">\n  <ng-container *ngFor=\"let sub of subMenu$ | async\">\n    <ul class=\"m-nav-links__list\">\n      <ng-container *ngFor=\"let menu of sub.subMenus\">\n        <li\n          *pryAccess=\"{ module: menu.module, page: menu.page, subMenu: menu.subMenu }\"\n          class=\"m-nav-links__list__item\"\n        >\n          <a [routerLink]=\"menu.menu\" class=\"a-btn -width-full\" [routerLinkActive]=\"'is-active'\">\n            {{ baseMenuTranslation + menu.menu | i18n }}\n          </a>\n        </li>\n      </ng-container>\n    </ul>\n  </ng-container>\n</nav>\n" }]
+            args: [{ selector: 'pry-admin-menu', template: "<nav class=\"m-nav-links\">\n  @for (sub of subMenu$ | async; track sub) {\n    <ul class=\"m-nav-links__list\">\n      @for (menu of sub.subMenus; track menu) {\n        <li\n          *pryAccess=\"{ module: menu.module, page: menu.page, subMenu: menu.subMenu }\"\n          class=\"m-nav-links__list__item\"\n          >\n          <a [routerLink]=\"menu.menu\" class=\"a-btn -width-full\" [routerLinkActive]=\"'is-active'\">\n            {{ baseMenuTranslation + menu.menu | i18n }}\n          </a>\n        </li>\n      }\n    </ul>\n  }\n</nav>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminTitleComponent extends SubscriptionnerDirective {
@@ -3870,7 +3866,7 @@ class AdminTitleComponent extends SubscriptionnerDirective {
         $event.target.setAttribute('aria-pressed', $event.target.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminTitleComponent, deps: [{ token: i1.Store }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminTitleComponent, selector: "pry-admin-title", usesInheritance: true, ngImport: i0, template: "<h2 class=\"a-h3\">{{ (!limit ? '@pry.admin.title' : '@pry.admin.menus.' + limit) | i18n }}</h2>\n<button type=\"button\" class=\"a-btn a-btn--toggle\" (click)=\"onToggleMenu($event)\" aria-pressed=\"false\">\n  <span class=\"u-visually-hidden\">{{ '@pry.admin.titleIndication' | i18n }}</span>\n</button>\n", dependencies: [{ kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminTitleComponent, selector: "pry-admin-title", usesInheritance: true, ngImport: i0, template: "<h2 class=\"a-h3\">{{ (!limit ? '@pry.admin.title' : '@pry.admin.menus.' + limit) | i18n }}</h2>\n<button type=\"button\" class=\"a-btn a-btn--toggle\" (click)=\"onToggleMenu($event)\" aria-pressed=\"false\">\n  <span class=\"u-visually-hidden\">{{ '@pry.admin.titleIndication' | i18n }}</span>\n</button>\n", dependencies: [{ kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminTitleComponent, decorators: [{
             type: Component,
@@ -3928,11 +3924,11 @@ class AdminLayoutComponent extends BaseLayoutComponent {
         this.sub.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminLayoutComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminLayoutComponent, selector: "pry-admin-layout", viewQueries: [{ propertyName: "adminPanel", first: true, predicate: ["adminPanel"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-base-layout\" [ngClass]=\"{ 'is-menu-open': menuOpen$ | async }\">\n  <pry-admin-title class=\"o-base-layout__title\"></pry-admin-title>\n  <pry-admin-menu *ngIf=\"menuOpen$ | async\" class=\"o-base-layout__menu\"></pry-admin-menu>\n  <pry-base-toolbox\n    class=\"o-base-layout__toolbox\"\n    [baseToolboxTranslation]=\"baseToolboxTranslation\"\n    [actions$]=\"actions$\"\n    [subActions$]=\"subActions$\"\n  ></pry-base-toolbox>\n\n  <div class=\"o-base-layout__contentwrapper\">\n    <div class=\"o-base-layout__content\">\n      <router-outlet></router-outlet>\n    </div>\n\n    <div\n      class=\"o-base-layout__panel\"\n      [class.is-open]=\"panelOpen$ | async\"\n      [class.-model]=\"(limit$ | async) === 'model'\"\n    >\n      <div class=\"o-base-layout__panel__content\">\n        <ng-template #adminPanel></ng-template>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.BaseToolboxComponent, selector: "pry-base-toolbox", inputs: ["baseToolboxTranslation", "actions$", "subActions$"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AdminMenuComponent, selector: "pry-admin-menu" }, { kind: "component", type: AdminTitleComponent, selector: "pry-admin-title" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminLayoutComponent, selector: "pry-admin-layout", viewQueries: [{ propertyName: "adminPanel", first: true, predicate: ["adminPanel"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"o-base-layout\" [ngClass]=\"{ 'is-menu-open': menuOpen$ | async }\">\n  <pry-admin-title class=\"o-base-layout__title\"></pry-admin-title>\n  @if (menuOpen$ | async) {\n    <pry-admin-menu class=\"o-base-layout__menu\"></pry-admin-menu>\n  }\n  <pry-base-toolbox\n    class=\"o-base-layout__toolbox\"\n    [baseToolboxTranslation]=\"baseToolboxTranslation\"\n    [actions$]=\"actions$\"\n    [subActions$]=\"subActions$\"\n  ></pry-base-toolbox>\n\n  <div class=\"o-base-layout__contentwrapper\">\n    <div class=\"o-base-layout__content\">\n      <router-outlet></router-outlet>\n    </div>\n\n    <div\n      class=\"o-base-layout__panel\"\n      [class.is-open]=\"panelOpen$ | async\"\n      [class.-model]=\"(limit$ | async) === 'model'\"\n      >\n      <div class=\"o-base-layout__panel__content\">\n        <ng-template #adminPanel></ng-template>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.BaseToolboxComponent, selector: "pry-base-toolbox", inputs: ["baseToolboxTranslation", "actions$", "subActions$"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AdminMenuComponent, selector: "pry-admin-menu" }, { kind: "component", type: AdminTitleComponent, selector: "pry-admin-title" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-layout', template: "<div class=\"o-base-layout\" [ngClass]=\"{ 'is-menu-open': menuOpen$ | async }\">\n  <pry-admin-title class=\"o-base-layout__title\"></pry-admin-title>\n  <pry-admin-menu *ngIf=\"menuOpen$ | async\" class=\"o-base-layout__menu\"></pry-admin-menu>\n  <pry-base-toolbox\n    class=\"o-base-layout__toolbox\"\n    [baseToolboxTranslation]=\"baseToolboxTranslation\"\n    [actions$]=\"actions$\"\n    [subActions$]=\"subActions$\"\n  ></pry-base-toolbox>\n\n  <div class=\"o-base-layout__contentwrapper\">\n    <div class=\"o-base-layout__content\">\n      <router-outlet></router-outlet>\n    </div>\n\n    <div\n      class=\"o-base-layout__panel\"\n      [class.is-open]=\"panelOpen$ | async\"\n      [class.-model]=\"(limit$ | async) === 'model'\"\n    >\n      <div class=\"o-base-layout__panel__content\">\n        <ng-template #adminPanel></ng-template>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-layout', template: "<div class=\"o-base-layout\" [ngClass]=\"{ 'is-menu-open': menuOpen$ | async }\">\n  <pry-admin-title class=\"o-base-layout__title\"></pry-admin-title>\n  @if (menuOpen$ | async) {\n    <pry-admin-menu class=\"o-base-layout__menu\"></pry-admin-menu>\n  }\n  <pry-base-toolbox\n    class=\"o-base-layout__toolbox\"\n    [baseToolboxTranslation]=\"baseToolboxTranslation\"\n    [actions$]=\"actions$\"\n    [subActions$]=\"subActions$\"\n  ></pry-base-toolbox>\n\n  <div class=\"o-base-layout__contentwrapper\">\n    <div class=\"o-base-layout__content\">\n      <router-outlet></router-outlet>\n    </div>\n\n    <div\n      class=\"o-base-layout__panel\"\n      [class.is-open]=\"panelOpen$ | async\"\n      [class.-model]=\"(limit$ | async) === 'model'\"\n      >\n      <div class=\"o-base-layout__panel__content\">\n        <ng-template #adminPanel></ng-template>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { adminPanel: [{
                 type: ViewChild,
                 args: ['adminPanel', { static: true, read: ViewContainerRef }]
@@ -4042,11 +4038,11 @@ class AdminLinksNewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", 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", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", 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      @if (isSubmitted && linkForm.get('relationType')?.invalid) {\n        <label\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      }\n    </div>\n\n    @if (isSelectClass) {\n      <div class=\"m-form-label-field -width-sm\">\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        @if (isSubmitted && linkForm.get('classSource')?.invalid) {\n          <label\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        }\n      </div>\n    }\n\n    @if (attributesSource$ | async | prySortData : sortActive : sortDirection; as attr) {\n      <div\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        @if (isSubmitted && linkForm.get('attributeSource')?.invalid) {\n          <label\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        }\n      </div>\n    }\n\n    @if (classes$ | async | prySortData : sortActive : sortDirection; as cd) {\n      <div 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        @if (isSubmitted && linkForm.get('classDestination')?.invalid) {\n          <label\n            id=\"class-destination-error\"\n            for=\"link_class-destination\"\n            class=\"text-error\"\n            >\n            {{ '@pry.admin.required' | i18n }}\n          </label>\n        }\n      </div>\n    }\n\n    @if (attributesDestination$ | async | prySortData : sortActive : sortDirection; as attr) {\n      <div\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        @if (isSubmitted && linkForm.get('attributeDestination')?.invalid) {\n          <label\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        }\n      </div>\n    }\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$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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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        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" }]
+            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      @if (isSubmitted && linkForm.get('relationType')?.invalid) {\n        <label\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      }\n    </div>\n\n    @if (isSelectClass) {\n      <div class=\"m-form-label-field -width-sm\">\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        @if (isSubmitted && linkForm.get('classSource')?.invalid) {\n          <label\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        }\n      </div>\n    }\n\n    @if (attributesSource$ | async | prySortData : sortActive : sortDirection; as attr) {\n      <div\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        @if (isSubmitted && linkForm.get('attributeSource')?.invalid) {\n          <label\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        }\n      </div>\n    }\n\n    @if (classes$ | async | prySortData : sortActive : sortDirection; as cd) {\n      <div 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        @if (isSubmitted && linkForm.get('classDestination')?.invalid) {\n          <label\n            id=\"class-destination-error\"\n            for=\"link_class-destination\"\n            class=\"text-error\"\n            >\n            {{ '@pry.admin.required' | i18n }}\n          </label>\n        }\n      </div>\n    }\n\n    @if (attributesDestination$ | async | prySortData : sortActive : sortDirection; as attr) {\n      <div\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        @if (isSubmitted && linkForm.get('attributeDestination')?.invalid) {\n          <label\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        }\n      </div>\n    }\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: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }] });
 class AdminLinksComponent {
@@ -4091,11 +4087,11 @@ class AdminLinksComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminLinksComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminLinksComponent, selector: "pry-admin-links", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.links.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.links.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.classSource' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.attributeSource' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.classDestination' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.attributeDestination' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.relationType' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let link of linksExtended$ | async | prySortData: sortActive : sortDirection\">\n        <td>{{ link.classSource }}</td>\n        <td>{{ link.attributeSource }}</td>\n        <td>{{ link.classDestination }}</td>\n        <td>{{ link.attributeDestination }}</td>\n        <td>{{ link.relationType }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminLinksComponent, selector: "pry-admin-links", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.links.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n    <caption>\n      {{\n      '@pry.admin.links.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.classSource' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.attributeSource' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.classDestination' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.attributeDestination' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.relationType' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (link of linksExtended$ | async | prySortData: sortActive : sortDirection; track link) {\n        <tr>\n          <td>{{ link.classSource }}</td>\n          <td>{{ link.attributeSource }}</td>\n          <td>{{ link.classDestination }}</td>\n          <td>{{ link.attributeDestination }}</td>\n          <td>{{ link.relationType }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminLinksComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-links', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.links.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.links.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.classSource' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.attributeSource' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.classDestination' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.attributeDestination' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.relationType' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let link of linksExtended$ | async | prySortData: sortActive : sortDirection\">\n        <td>{{ link.classSource }}</td>\n        <td>{{ link.attributeSource }}</td>\n        <td>{{ link.classDestination }}</td>\n        <td>{{ link.attributeDestination }}</td>\n        <td>{{ link.relationType }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-links', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.links.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n    <caption>\n      {{\n      '@pry.admin.links.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.classSource' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.attributeSource' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.classDestination' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.attributeDestination' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.links.relationType' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (link of linksExtended$ | async | prySortData: sortActive : sortDirection; track link) {\n        <tr>\n          <td>{{ link.classSource }}</td>\n          <td>{{ link.attributeSource }}</td>\n          <td>{{ link.classDestination }}</td>\n          <td>{{ link.attributeDestination }}</td>\n          <td>{{ link.relationType }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminFormMetadataRulesComponent {
@@ -4205,11 +4201,11 @@ class AdminFormMetadataRulesComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", 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", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", 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    @if (isSubmitted && form.get('name')?.invalid) {\n      <label\n        class=\"a-label a-label--help -error\"\n        id=\"name-error\"\n        for=\"name\"\n        >{{ '@pry.admin.required' | i18n }}</label\n        >\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    @if (isSameName) {\n      <label class=\"a-label a-label--help -error\">{{\n        '@pry.admin.metadata-rules.is-same-name' | i18n\n      }}</label>\n    }\n    @if (isSameRules) {\n      <label class=\"a-label a-label--help -error\">{{\n        '@pry.admin.metadata-rules.is-same-rules' | i18n\n      }}</label>\n    }\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(metadataRules ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n", dependencies: [{ 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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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      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" }]
+            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    @if (isSubmitted && form.get('name')?.invalid) {\n      <label\n        class=\"a-label a-label--help -error\"\n        id=\"name-error\"\n        for=\"name\"\n        >{{ '@pry.admin.required' | i18n }}</label\n        >\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    @if (isSameName) {\n      <label class=\"a-label a-label--help -error\">{{\n        '@pry.admin.metadata-rules.is-same-name' | i18n\n      }}</label>\n    }\n    @if (isSameRules) {\n      <label class=\"a-label a-label--help -error\">{{\n        '@pry.admin.metadata-rules.is-same-rules' | i18n\n      }}</label>\n    }\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(metadataRules ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }], propDecorators: { metadataRules: [{
                 type: Input
             }] } });
@@ -4221,7 +4217,7 @@ class AdminEditMetadataRulesComponent {
         this.metadataRulesSelected$ = this.store.select(MetadataRulesSelectors.metadataRulesSelected);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEditMetadataRulesComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminEditMetadataRulesComponent, selector: "pry-admin-edit-metadata-rules", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.metadata-rules.edit.title' | i18n }}</h1>\n  <pry-admin-form-metadata-rules [metadataRules]=\"metadataRulesSelected$ | async\"></pry-admin-form-metadata-rules>\n</div>\n", dependencies: [{ kind: "component", type: AdminFormMetadataRulesComponent, selector: "pry-admin-form-metadata-rules", inputs: ["metadataRules"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminEditMetadataRulesComponent, selector: "pry-admin-edit-metadata-rules", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.metadata-rules.edit.title' | i18n }}</h1>\n  <pry-admin-form-metadata-rules [metadataRules]=\"metadataRulesSelected$ | async\"></pry-admin-form-metadata-rules>\n</div>\n", dependencies: [{ kind: "component", type: AdminFormMetadataRulesComponent, selector: "pry-admin-form-metadata-rules", inputs: ["metadataRules"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEditMetadataRulesComponent, decorators: [{
             type: Component,
@@ -4292,20 +4288,20 @@ class AdminMetadataRulesComponent {
     getTranslationType(type) {
         return META_OPTIONS.find((el) => el.varType === type)?.translation || 'undefined';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMetadataRulesComponent, deps: [{ token: i1.Store }, { token: i4.PryI18nService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminMetadataRulesComponent, selector: "pry-admin-metadata-rules", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.metadata-rules.title' | i18n }}</h1>\n  <ng-container *ngIf=\"metadataRulesList$ | async as metadataRulesList\">\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.metadata-rules.title' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th *ngFor=\"let conf of configHeader\" [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let metadataRules of metadataRulesList | prySortData: sortActive : sortDirection\"\n          (click)=\"selectMetadata(metadataRules)\"\n          [class.is-selected]=\"(selectedMetadataRules$ | async) === metadataRules.id\"\n        >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-meta-rule-' + metadataRules.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedMetadataRules$ | async) === metadataRules.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-meta-rule-' + metadataRules.id\"\n            >\n              <span class=\"u-visually-hidden\">{{ metadataRules.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ metadataRules.name }}</td>\n          <td>{{ metadataRules.metadataItem?.name }}</td>\n          <td>{{ metadataRules.metadataUser?.name }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n</div>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n>\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelMetadataSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n    />\n  </div>\n</pry-modal>\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.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: 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: "component", type: i4.PryModalComponent, selector: "pry-modal", inputs: ["titleModal", "opened", "validateLabel", "validateAction", "cancelLabel", "cancelAction"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMetadataRulesComponent, deps: [{ token: i1.Store }, { token: i3.PryI18nService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminMetadataRulesComponent, selector: "pry-admin-metadata-rules", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.metadata-rules.title' | i18n }}</h1>\n  @if (metadataRulesList$ | async; as metadataRulesList) {\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.metadata-rules.title' | i18n\n        }},\n        {{\n        '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          @for (conf of configHeader; track conf) {\n            <th [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (metadataRules of metadataRulesList | prySortData: sortActive : sortDirection; track metadataRules) {\n          <tr\n            (click)=\"selectMetadata(metadataRules)\"\n            [class.is-selected]=\"(selectedMetadataRules$ | async) === metadataRules.id\"\n            >\n            <td class=\"view-details\">\n              <button\n                [id]=\"'button-meta-rule-' + metadataRules.id\"\n                type=\"button\"\n                class=\"a-btn a-btn--icon-only\"\n                title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n                [attr.aria-expanded]=\"(selectedMetadataRules$ | async) === metadataRules.id\"\n                aria-haspopup\n                [attr.aria-controls]=\"'panel-meta-rule-' + metadataRules.id\"\n                >\n                <span class=\"u-visually-hidden\">{{ metadataRules.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n                <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              </button>\n            </td>\n            <td>{{ metadataRules.name }}</td>\n            <td>{{ metadataRules.metadataItem?.name }}</td>\n            <td>{{ metadataRules.metadataUser?.name }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n  >\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelMetadataSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n      />\n  </div>\n</pry-modal>\n", dependencies: [{ kind: "component", type: i3.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: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "component", type: i3.PryModalComponent, selector: "pry-modal", inputs: ["titleModal", "opened", "validateLabel", "validateAction", "cancelLabel", "cancelAction"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMetadataRulesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-metadata-rules', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.metadata-rules.title' | i18n }}</h1>\n  <ng-container *ngIf=\"metadataRulesList$ | async as metadataRulesList\">\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.metadata-rules.title' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th *ngFor=\"let conf of configHeader\" [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let metadataRules of metadataRulesList | prySortData: sortActive : sortDirection\"\n          (click)=\"selectMetadata(metadataRules)\"\n          [class.is-selected]=\"(selectedMetadataRules$ | async) === metadataRules.id\"\n        >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-meta-rule-' + metadataRules.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedMetadataRules$ | async) === metadataRules.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-meta-rule-' + metadataRules.id\"\n            >\n              <span class=\"u-visually-hidden\">{{ metadataRules.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ metadataRules.name }}</td>\n          <td>{{ metadataRules.metadataItem?.name }}</td>\n          <td>{{ metadataRules.metadataUser?.name }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </ng-container>\n</div>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n>\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelMetadataSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n    />\n  </div>\n</pry-modal>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i4.PryI18nService }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { input: [{
+            args: [{ selector: 'pry-admin-metadata-rules', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.metadata-rules.title' | i18n }}</h1>\n  @if (metadataRulesList$ | async; as metadataRulesList) {\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.metadata-rules.title' | i18n\n        }},\n        {{\n        '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          @for (conf of configHeader; track conf) {\n            <th [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (metadataRules of metadataRulesList | prySortData: sortActive : sortDirection; track metadataRules) {\n          <tr\n            (click)=\"selectMetadata(metadataRules)\"\n            [class.is-selected]=\"(selectedMetadataRules$ | async) === metadataRules.id\"\n            >\n            <td class=\"view-details\">\n              <button\n                [id]=\"'button-meta-rule-' + metadataRules.id\"\n                type=\"button\"\n                class=\"a-btn a-btn--icon-only\"\n                title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n                [attr.aria-expanded]=\"(selectedMetadataRules$ | async) === metadataRules.id\"\n                aria-haspopup\n                [attr.aria-controls]=\"'panel-meta-rule-' + metadataRules.id\"\n                >\n                <span class=\"u-visually-hidden\">{{ metadataRules.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n                <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n              </button>\n            </td>\n            <td>{{ metadataRules.name }}</td>\n            <td>{{ metadataRules.metadataItem?.name }}</td>\n            <td>{{ metadataRules.metadataUser?.name }}</td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n</div>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n  >\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelMetadataSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n      />\n  </div>\n</pry-modal>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i3.PryI18nService }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
             }] } });
 class AdminNewMetadataRulesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminNewMetadataRulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminNewMetadataRulesComponent, selector: "pry-admin-new-metadata-rules", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h4 class=\"admin__title\">{{ '@pry.admin.metadata-rules.add.title' | i18n }}</h4>\n  <pry-admin-form-metadata-rules></pry-admin-form-metadata-rules>\n</div>\n", dependencies: [{ kind: "component", type: AdminFormMetadataRulesComponent, selector: "pry-admin-form-metadata-rules", inputs: ["metadataRules"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminNewMetadataRulesComponent, selector: "pry-admin-new-metadata-rules", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h4 class=\"admin__title\">{{ '@pry.admin.metadata-rules.add.title' | i18n }}</h4>\n  <pry-admin-form-metadata-rules></pry-admin-form-metadata-rules>\n</div>\n", dependencies: [{ kind: "component", type: AdminFormMetadataRulesComponent, selector: "pry-admin-form-metadata-rules", inputs: ["metadataRules"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminNewMetadataRulesComponent, decorators: [{
             type: Component,
@@ -4364,11 +4360,11 @@ class PryListMetadataComponent {
         return META_OPTIONS.find((el) => el.varType === type)?.translation || 'undefined';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryListMetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PryListMetadataComponent, selector: "pry-list-metadata", inputs: { sortActive: "sortActive", sortDirection: "sortDirection", configHeader: "configHeader", metadata: "metadata", selectedMetadata: "selectedMetadata", labelMetadataSelected: "labelMetadataSelected", editable: "editable" }, outputs: { editClicked$: "editClicked$", submitModal$: "submitModal$", cancelAction$: "cancelAction$", rowClicked$: "rowClicked$" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<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.action.sortableColumnHeader' | i18n\n    }}\n  </caption>\n\n  <thead>\n    <tr>\n      <th style=\"width: 30px\"></th>\n      <th *ngFor=\"let conf of configHeader\" [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr\n      *ngFor=\"let metadata of metadata | prySortData: sortActive : sortDirection\"\n      (click)=\"goToDetails(metadata.id)\"\n      [class.is-selected]=\"selectedMetadata === metadata.id\"\n    >\n      <td class=\"view-details\">\n        <button\n          [id]=\"'button-meta' + metadata.name\"\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n          [attr.aria-expanded]=\"selectedMetadata === metadata.id\"\n          aria-haspopup\n          [attr.aria-controls]=\"'panel-meta-' + metadata.id\"\n        >\n          <span class=\"u-visually-hidden\">{{ metadata.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n          <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n        </button>\n      </td>\n      <td>{{ metadata.name }}</td>\n      <td>{{ getTranslationType(metadata.type) | i18n }}</td>\n    </tr>\n  </tbody>\n</table>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n>\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelMetadataSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n    />\n  </div>\n</pry-modal>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PryModalComponent, selector: "pry-modal", inputs: ["titleModal", "opened", "validateLabel", "validateAction", "cancelLabel", "cancelAction"] }, { 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: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PryListMetadataComponent, selector: "pry-list-metadata", inputs: { sortActive: "sortActive", sortDirection: "sortDirection", configHeader: "configHeader", metadata: "metadata", selectedMetadata: "selectedMetadata", labelMetadataSelected: "labelMetadataSelected", editable: "editable" }, outputs: { editClicked$: "editClicked$", submitModal$: "submitModal$", cancelAction$: "cancelAction$", rowClicked$: "rowClicked$" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<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.action.sortableColumnHeader' | i18n\n    }}\n  </caption>\n\n  <thead>\n    <tr>\n      <th style=\"width: 30px\"></th>\n      @for (conf of configHeader; track conf) {\n        <th [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (metadata of metadata | prySortData: sortActive : sortDirection; track metadata) {\n      <tr\n        (click)=\"goToDetails(metadata.id)\"\n        [class.is-selected]=\"selectedMetadata === metadata.id\"\n        >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-meta' + metadata.name\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"selectedMetadata === metadata.id\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-meta-' + metadata.id\"\n            >\n            <span class=\"u-visually-hidden\">{{ metadata.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ metadata.name }}</td>\n        <td>{{ getTranslationType(metadata.type) | i18n }}</td>\n      </tr>\n    }\n  </tbody>\n</table>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n  >\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelMetadataSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n      />\n  </div>\n</pry-modal>\n", dependencies: [{ kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PryModalComponent, selector: "pry-modal", inputs: ["titleModal", "opened", "validateLabel", "validateAction", "cancelLabel", "cancelAction"] }, { 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: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryListMetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-list-metadata', template: "<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.action.sortableColumnHeader' | i18n\n    }}\n  </caption>\n\n  <thead>\n    <tr>\n      <th style=\"width: 30px\"></th>\n      <th *ngFor=\"let conf of configHeader\" [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr\n      *ngFor=\"let metadata of metadata | prySortData: sortActive : sortDirection\"\n      (click)=\"goToDetails(metadata.id)\"\n      [class.is-selected]=\"selectedMetadata === metadata.id\"\n    >\n      <td class=\"view-details\">\n        <button\n          [id]=\"'button-meta' + metadata.name\"\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n          [attr.aria-expanded]=\"selectedMetadata === metadata.id\"\n          aria-haspopup\n          [attr.aria-controls]=\"'panel-meta-' + metadata.id\"\n        >\n          <span class=\"u-visually-hidden\">{{ metadata.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n          <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n        </button>\n      </td>\n      <td>{{ metadata.name }}</td>\n      <td>{{ getTranslationType(metadata.type) | i18n }}</td>\n    </tr>\n  </tbody>\n</table>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n>\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelMetadataSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n    />\n  </div>\n</pry-modal>\n" }]
+            args: [{ selector: 'pry-list-metadata', template: "<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.action.sortableColumnHeader' | i18n\n    }}\n  </caption>\n\n  <thead>\n    <tr>\n      <th style=\"width: 30px\"></th>\n      @for (conf of configHeader; track conf) {\n        <th [prySortHeader]=\"conf.label\">{{ conf.label }}</th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @for (metadata of metadata | prySortData: sortActive : sortDirection; track metadata) {\n      <tr\n        (click)=\"goToDetails(metadata.id)\"\n        [class.is-selected]=\"selectedMetadata === metadata.id\"\n        >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-meta' + metadata.name\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"selectedMetadata === metadata.id\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-meta-' + metadata.id\"\n            >\n            <span class=\"u-visually-hidden\">{{ metadata.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ metadata.name }}</td>\n        <td>{{ getTranslationType(metadata.type) | i18n }}</td>\n      </tr>\n    }\n  </tbody>\n</table>\n\n<pry-modal\n  [titleModal]=\"'@pry.toolbox.rename' | i18n\"\n  [validateLabel]=\"'@pry.toolbox.manifest.check' | i18n\"\n  [validateAction]=\"validateAction\"\n  [cancelLabel]=\"'@pry.toolbox.manifest.close' | i18n\"\n  [cancelAction]=\"cancelAction\"\n  [opened]=\"this.editOpened\"\n  >\n  <div class=\"field__input\">\n    <span>{{ '@pry.toolbox.manifest.name' | i18n }}</span>\n    <input\n      type=\"text\"\n      (keyup.enter)=\"validateName(input.value)\"\n      [ngModel]=\"labelMetadataSelected\"\n      (ngModelChange)=\"changeValue($event)\"\n      #input\n      />\n  </div>\n</pry-modal>\n" }]
         }], ctorParameters: () => [], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -4437,13 +4433,13 @@ class AdminMetadataUserComponent {
         this.store.dispatch(AdminMetadataUserActions.goToDetailsViewMetadata({ id }));
         this.store.dispatch(AdminActions.selectComponentType({ componentType: 'AdminUserSelectMetadataComponent' }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMetadataUserComponent, deps: [{ token: i1.Store }, { token: i4.PryI18nService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminMetadataUserComponent, selector: "pry-admin-user", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.user.title' | i18n }}</h1>\n  <pry-list-metadata\n    [metadata]=\"metadata$ | async\"\n    [selectedMetadata]=\"selectedMetadataId$ | async\"\n    [configHeader]=\"configHeader\"\n    [sortActive]=\"sortActive\"\n    [labelMetadataSelected]=\"value\"\n    [sortDirection]=\"sortDirection\"\n    (rowClicked$)=\"rowClicked($event)\"\n  >\n  </pry-list-metadata>\n</div>\n", dependencies: [{ kind: "component", type: PryListMetadataComponent, selector: "pry-list-metadata", inputs: ["sortActive", "sortDirection", "configHeader", "metadata", "selectedMetadata", "labelMetadataSelected", "editable"], outputs: ["editClicked$", "submitModal$", "cancelAction$", "rowClicked$"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMetadataUserComponent, deps: [{ token: i1.Store }, { token: i3.PryI18nService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminMetadataUserComponent, selector: "pry-admin-user", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.user.title' | i18n }}</h1>\n  <pry-list-metadata\n    [metadata]=\"metadata$ | async\"\n    [selectedMetadata]=\"selectedMetadataId$ | async\"\n    [configHeader]=\"configHeader\"\n    [sortActive]=\"sortActive\"\n    [labelMetadataSelected]=\"value\"\n    [sortDirection]=\"sortDirection\"\n    (rowClicked$)=\"rowClicked($event)\"\n  >\n  </pry-list-metadata>\n</div>\n", dependencies: [{ kind: "component", type: PryListMetadataComponent, selector: "pry-list-metadata", inputs: ["sortActive", "sortDirection", "configHeader", "metadata", "selectedMetadata", "labelMetadataSelected", "editable"], outputs: ["editClicked$", "submitModal$", "cancelAction$", "rowClicked$"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMetadataUserComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-admin-user', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.user.title' | i18n }}</h1>\n  <pry-list-metadata\n    [metadata]=\"metadata$ | async\"\n    [selectedMetadata]=\"selectedMetadataId$ | async\"\n    [configHeader]=\"configHeader\"\n    [sortActive]=\"sortActive\"\n    [labelMetadataSelected]=\"value\"\n    [sortDirection]=\"sortDirection\"\n    (rowClicked$)=\"rowClicked($event)\"\n  >\n  </pry-list-metadata>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i4.PryI18nService }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { input: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i3.PryI18nService }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
             }] } });
@@ -4548,11 +4544,11 @@ class FormMetadataComponent {
         return path.toString();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", 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        [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", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", 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      @if (isSubmitted && metaForm.get('name')?.invalid) {\n        <label\n          id=\"name-error\"\n          for=\"metadata-name\"\n          class=\"a-label a-label--help -error\"\n          >\n          @if (metaForm.get('name')?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (metaForm.get('name')?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n          @if (metaForm.get('name')?.hasError('pattern')) {\n            <span>{{ '@pry.admin.classes.formatName' | i18n }}</span>\n          }\n        </label>\n      }\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        [isForm]=\"true\"\n        (ngModelChange)=\"addItemList($event)\"\n        aria-labelledby=\"metadata-type-label\"\n      ></pry-select>\n    </div>\n\n    @if (metaForm.value.type === 'LIST') {\n      @if (metadataList.controls.length > 0) {\n        <div class=\"o-datas-list-wrapper\" formArrayName=\"allowedValues\">\n          <fieldset>\n            <legend class=\"u-visually-hidden\">{{ '@pry.admin.varType.list' | i18n }}</legend>\n            @for (control of metadataList.controls; track control; let i = $index) {\n              <div class=\"o-datas-list metadata-list\">\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                    @if (isSubmitted && control.invalid) {\n                      <label\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                    }\n                  </div>\n                  <div class=\"m-btn-group m-btn-group--input-actions\">\n                    @if (i === metadataList.controls.length - 1) {\n                      <button\n                        type=\"button\"\n                        class=\"a-btn a-btn--input-action\"\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                    }\n                    @if (i !== 0 && !metadataList.controls[i].disabled) {\n                      <button\n                        type=\"button\"\n                        class=\"a-btn a-btn--input-action\"\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                    }\n                  </div>\n                </div>\n              </div>\n            }\n          </fieldset>\n        </div>\n      }\n    }\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(metadata ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: i3.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: i3.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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        id=\"metadata-type\"\n        formControlName=\"type\"\n        [items]=\"metaOptions\"\n        bindValue=\"varType\"\n        bindLabel=\"translation\"\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      @if (isSubmitted && metaForm.get('name')?.invalid) {\n        <label\n          id=\"name-error\"\n          for=\"metadata-name\"\n          class=\"a-label a-label--help -error\"\n          >\n          @if (metaForm.get('name')?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (metaForm.get('name')?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n          @if (metaForm.get('name')?.hasError('pattern')) {\n            <span>{{ '@pry.admin.classes.formatName' | i18n }}</span>\n          }\n        </label>\n      }\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        [isForm]=\"true\"\n        (ngModelChange)=\"addItemList($event)\"\n        aria-labelledby=\"metadata-type-label\"\n      ></pry-select>\n    </div>\n\n    @if (metaForm.value.type === 'LIST') {\n      @if (metadataList.controls.length > 0) {\n        <div class=\"o-datas-list-wrapper\" formArrayName=\"allowedValues\">\n          <fieldset>\n            <legend class=\"u-visually-hidden\">{{ '@pry.admin.varType.list' | i18n }}</legend>\n            @for (control of metadataList.controls; track control; let i = $index) {\n              <div class=\"o-datas-list metadata-list\">\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                    @if (isSubmitted && control.invalid) {\n                      <label\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                    }\n                  </div>\n                  <div class=\"m-btn-group m-btn-group--input-actions\">\n                    @if (i === metadataList.controls.length - 1) {\n                      <button\n                        type=\"button\"\n                        class=\"a-btn a-btn--input-action\"\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                    }\n                    @if (i !== 0 && !metadataList.controls[i].disabled) {\n                      <button\n                        type=\"button\"\n                        class=\"a-btn a-btn--input-action\"\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                    }\n                  </div>\n                </div>\n              </div>\n            }\n          </fieldset>\n        </div>\n      }\n    }\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(metadata ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }], propDecorators: { titleForm: [{
                 type: Input
             }], isMetaSimpleEdit: [{
@@ -4582,11 +4578,11 @@ class AdminUserEditMetadataComponent {
         this.store.dispatch(AdminMetadataUserActions.updateMetadata({ metadata }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminUserEditMetadataComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminUserEditMetadataComponent, selector: "pry-admin-edit-metadata", ngImport: i0, template: "<pry-form-metadata\n  *ngIf=\"metadata$ | async as metadata\"\n  [metadata]=\"metadata\"\n  (submitMetadata$)=\"submit($event)\"\n  [titleForm]=\"'@pry.admin.user.edit' | i18n\"\n  [isMetaUser]=\"true\"\n>\n</pry-form-metadata>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormMetadataComponent, selector: "pry-form-metadata", inputs: ["titleForm", "isMetaSimpleEdit", "isMetaUser", "metadata"], outputs: ["submitMetadata$"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminUserEditMetadataComponent, selector: "pry-admin-edit-metadata", ngImport: i0, template: "@if (metadata$ | async; as metadata) {\n  <pry-form-metadata\n    [metadata]=\"metadata\"\n    (submitMetadata$)=\"submit($event)\"\n    [titleForm]=\"'@pry.admin.user.edit' | i18n\"\n    [isMetaUser]=\"true\"\n    >\n  </pry-form-metadata>\n}\n", dependencies: [{ kind: "component", type: FormMetadataComponent, selector: "pry-form-metadata", inputs: ["titleForm", "isMetaSimpleEdit", "isMetaUser", "metadata"], outputs: ["submitMetadata$"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminUserEditMetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-edit-metadata', template: "<pry-form-metadata\n  *ngIf=\"metadata$ | async as metadata\"\n  [metadata]=\"metadata\"\n  (submitMetadata$)=\"submit($event)\"\n  [titleForm]=\"'@pry.admin.user.edit' | i18n\"\n  [isMetaUser]=\"true\"\n>\n</pry-form-metadata>\n" }]
+            args: [{ selector: 'pry-admin-edit-metadata', template: "@if (metadata$ | async; as metadata) {\n  <pry-form-metadata\n    [metadata]=\"metadata\"\n    (submitMetadata$)=\"submit($event)\"\n    [titleForm]=\"'@pry.admin.user.edit' | i18n\"\n    [isMetaUser]=\"true\"\n    >\n  </pry-form-metadata>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminUserNewMetadataComponent {
@@ -4597,7 +4593,7 @@ class AdminUserNewMetadataComponent {
         this.store.dispatch(AdminMetadataUserActions.createMetadata({ metadata: metadata }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminUserNewMetadataComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminUserNewMetadataComponent, selector: "pry-admin-user-new-metadata", ngImport: i0, template: "<pry-form-metadata (submitMetadata$)=\"submit($event)\" [titleForm]=\"'@pry.admin.user.add' | i18n\" [isMetaUser]=\"true\">\n</pry-form-metadata>\n", dependencies: [{ kind: "component", type: FormMetadataComponent, selector: "pry-form-metadata", inputs: ["titleForm", "isMetaSimpleEdit", "isMetaUser", "metadata"], outputs: ["submitMetadata$"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminUserNewMetadataComponent, selector: "pry-admin-user-new-metadata", ngImport: i0, template: "<pry-form-metadata (submitMetadata$)=\"submit($event)\" [titleForm]=\"'@pry.admin.user.add' | i18n\" [isMetaUser]=\"true\">\n</pry-form-metadata>\n", dependencies: [{ kind: "component", type: FormMetadataComponent, selector: "pry-form-metadata", inputs: ["titleForm", "isMetaSimpleEdit", "isMetaUser", "metadata"], outputs: ["submitMetadata$"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminUserNewMetadataComponent, decorators: [{
             type: Component,
@@ -4620,11 +4616,11 @@ class AdminEditMetadataComponent {
         this.store.dispatch(MetadataActions.createMetadata({ metadata: metadata }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEditMetadataComponent, deps: [{ token: i1.Store }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminEditMetadataComponent, selector: "pry-admin-edit-metadata", ngImport: i0, template: "<pry-form-metadata\n  *ngIf=\"metadata$ | async as metadata\"\n  [metadata]=\"metadata\"\n  (submitMetadata$)=\"submit($event)\"\n  [titleForm]=\"'@pry.admin.metadata.edit' | i18n\"\n  [isMetaSimpleEdit]=\"true\"\n>\n</pry-form-metadata>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormMetadataComponent, selector: "pry-form-metadata", inputs: ["titleForm", "isMetaSimpleEdit", "isMetaUser", "metadata"], outputs: ["submitMetadata$"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminEditMetadataComponent, selector: "pry-admin-edit-metadata", ngImport: i0, template: "@if (metadata$ | async; as metadata) {\n  <pry-form-metadata\n    [metadata]=\"metadata\"\n    (submitMetadata$)=\"submit($event)\"\n    [titleForm]=\"'@pry.admin.metadata.edit' | i18n\"\n    [isMetaSimpleEdit]=\"true\"\n    >\n  </pry-form-metadata>\n}\n", dependencies: [{ kind: "component", type: FormMetadataComponent, selector: "pry-form-metadata", inputs: ["titleForm", "isMetaSimpleEdit", "isMetaUser", "metadata"], outputs: ["submitMetadata$"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminEditMetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-edit-metadata', template: "<pry-form-metadata\n  *ngIf=\"metadata$ | async as metadata\"\n  [metadata]=\"metadata\"\n  (submitMetadata$)=\"submit($event)\"\n  [titleForm]=\"'@pry.admin.metadata.edit' | i18n\"\n  [isMetaSimpleEdit]=\"true\"\n>\n</pry-form-metadata>\n" }]
+            args: [{ selector: 'pry-admin-edit-metadata', template: "@if (metadata$ | async; as metadata) {\n  <pry-form-metadata\n    [metadata]=\"metadata\"\n    (submitMetadata$)=\"submit($event)\"\n    [titleForm]=\"'@pry.admin.metadata.edit' | i18n\"\n    [isMetaSimpleEdit]=\"true\"\n    >\n  </pry-form-metadata>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.ActivatedRoute }] });
 class AdminMetadataComponent {
@@ -4672,13 +4668,13 @@ class AdminMetadataComponent {
         this.store.dispatch(MetadataActions.goToDetailsView({ id }));
         this.store.dispatch(AdminActions.selectComponentType({ componentType: 'AdminSelectMetadataComponent' }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMetadataComponent, deps: [{ token: i1.Store }, { token: i4.PryI18nService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminMetadataComponent, selector: "pry-admin-metadata", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.metadata.title' | i18n }}</h1>\n  <pry-list-metadata\n    [metadata]=\"metadata$ | async\"\n    [selectedMetadata]=\"selectedMetadataId$ | async\"\n    [configHeader]=\"configHeader\"\n    [sortActive]=\"sortActive\"\n    [labelMetadataSelected]=\"value\"\n    [sortDirection]=\"sortDirection\"\n    (cancelAction$)=\"cancelEdition()\"\n    (rowClicked$)=\"rowClicked($event)\"\n    [editable]=\"false\"\n  >\n  </pry-list-metadata>\n</div>\n", dependencies: [{ kind: "component", type: PryListMetadataComponent, selector: "pry-list-metadata", inputs: ["sortActive", "sortDirection", "configHeader", "metadata", "selectedMetadata", "labelMetadataSelected", "editable"], outputs: ["editClicked$", "submitModal$", "cancelAction$", "rowClicked$"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMetadataComponent, deps: [{ token: i1.Store }, { token: i3.PryI18nService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminMetadataComponent, selector: "pry-admin-metadata", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.metadata.title' | i18n }}</h1>\n  <pry-list-metadata\n    [metadata]=\"metadata$ | async\"\n    [selectedMetadata]=\"selectedMetadataId$ | async\"\n    [configHeader]=\"configHeader\"\n    [sortActive]=\"sortActive\"\n    [labelMetadataSelected]=\"value\"\n    [sortDirection]=\"sortDirection\"\n    (cancelAction$)=\"cancelEdition()\"\n    (rowClicked$)=\"rowClicked($event)\"\n    [editable]=\"false\"\n  >\n  </pry-list-metadata>\n</div>\n", dependencies: [{ kind: "component", type: PryListMetadataComponent, selector: "pry-list-metadata", inputs: ["sortActive", "sortDirection", "configHeader", "metadata", "selectedMetadata", "labelMetadataSelected", "editable"], outputs: ["editClicked$", "submitModal$", "cancelAction$", "rowClicked$"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminMetadataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-admin-metadata', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.metadata.title' | i18n }}</h1>\n  <pry-list-metadata\n    [metadata]=\"metadata$ | async\"\n    [selectedMetadata]=\"selectedMetadataId$ | async\"\n    [configHeader]=\"configHeader\"\n    [sortActive]=\"sortActive\"\n    [labelMetadataSelected]=\"value\"\n    [sortDirection]=\"sortDirection\"\n    (cancelAction$)=\"cancelEdition()\"\n    (rowClicked$)=\"rowClicked($event)\"\n    [editable]=\"false\"\n  >\n  </pry-list-metadata>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i4.PryI18nService }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i3.PryI18nService }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminNewMetadataComponent {
     constructor(store) {
@@ -4688,7 +4684,7 @@ class AdminNewMetadataComponent {
         this.store.dispatch(MetadataActions.createMetadata({ metadata: metadata }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminNewMetadataComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminNewMetadataComponent, selector: "pry-admin-new-metadata", ngImport: i0, template: "<pry-form-metadata (submitMetadata$)=\"submit($event)\" [titleForm]=\"'@pry.admin.metadata.add' | i18n\">\n</pry-form-metadata>\n", dependencies: [{ kind: "component", type: FormMetadataComponent, selector: "pry-form-metadata", inputs: ["titleForm", "isMetaSimpleEdit", "isMetaUser", "metadata"], outputs: ["submitMetadata$"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminNewMetadataComponent, selector: "pry-admin-new-metadata", ngImport: i0, template: "<pry-form-metadata (submitMetadata$)=\"submit($event)\" [titleForm]=\"'@pry.admin.metadata.add' | i18n\">\n</pry-form-metadata>\n", dependencies: [{ kind: "component", type: FormMetadataComponent, selector: "pry-form-metadata", inputs: ["titleForm", "isMetaSimpleEdit", "isMetaUser", "metadata"], outputs: ["submitMetadata$"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminNewMetadataComponent, decorators: [{
             type: Component,
@@ -4773,18 +4769,18 @@ class AdminPredicatesFormComponent {
         return path.toString();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminPredicatesFormComponent, 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: "18.2.7", type: AdminPredicatesFormComponent, selector: "pry-admin-predicates-form", inputs: { currentPred: "currentPred" }, usesOnChanges: true, ngImport: i0, template: "<div>\n  <form class=\"o-form\" [formGroup]=\"predForm\" (ngSubmit)=\"checkModal()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"name\" class=\"a-label\">\n        {{ '@pry.admin.predicates.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        [attr.aria-labelledby]=\"isSubmitted && predForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && predForm.get('name')?.invalid\"\n        required\n      />\n      <label\n        *ngIf=\"isSubmitted && predForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"predForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"predForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-xl\">\n      <label id=\"value-label\" for=\"value\" class=\"a-label\">\n        {{ '@pry.admin.predicates.value' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <textarea\n        id=\"value\"\n        rows=\"10\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"value\"\n        name=\"value\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && predForm.get('value')?.invalid ? 'value-label value-error' : 'value-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && predForm.get('value')?.invalid\"\n        required\n      ></textarea>\n      <label\n        *ngIf=\"isSubmitted && predForm.get('value')?.invalid\"\n        id=\"value-error\"\n        for=\"value\"\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        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]=\"(_currentPred ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n\n<div *ngIf=\"predicatesUsed$ | async as used\">\n  <pry-modal\n    [titleModal]=\"'@pry.admin.predicates.validEdit' | i18n\"\n    [validateLabel]=\"'@pry.admin.edit' | i18n\"\n    [validateAction]=\"validateAction\"\n    [cancelLabel]=\"'@pry.admin.cancel' | i18n\"\n    [cancelAction]=\"cancelAction\"\n    [opened]=\"openedModal\"\n  >\n    <p [innerHTML]=\"'@pry.admin.predicates.validEditMessage' | i18n: { used: used }\"></p>\n  </pry-modal>\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.PryModalComponent, selector: "pry-modal", inputs: ["titleModal", "opened", "validateLabel", "validateAction", "cancelLabel", "cancelAction"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminPredicatesFormComponent, selector: "pry-admin-predicates-form", inputs: { currentPred: "currentPred" }, usesOnChanges: true, ngImport: i0, template: "<div>\n  <form class=\"o-form\" [formGroup]=\"predForm\" (ngSubmit)=\"checkModal()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"name\" class=\"a-label\">\n        {{ '@pry.admin.predicates.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        [attr.aria-labelledby]=\"isSubmitted && predForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && predForm.get('name')?.invalid\"\n        required\n        />\n      @if (isSubmitted && predForm.get('name')?.invalid) {\n        <label\n          id=\"name-error\"\n          for=\"name\"\n          class=\"a-label a-label--help -error\"\n          >\n          @if (predForm.get('name')?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (predForm.get('name')?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n        </label>\n      }\n    </div>\n\n    <div class=\"m-form-label-field -width-xl\">\n      <label id=\"value-label\" for=\"value\" class=\"a-label\">\n        {{ '@pry.admin.predicates.value' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <textarea\n        id=\"value\"\n        rows=\"10\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"value\"\n        name=\"value\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && predForm.get('value')?.invalid ? 'value-label value-error' : 'value-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && predForm.get('value')?.invalid\"\n        required\n      ></textarea>\n      @if (isSubmitted && predForm.get('value')?.invalid) {\n        <label\n          id=\"value-error\"\n          for=\"value\"\n          class=\"a-label a-label--help -error\"\n          >\n          {{ '@pry.admin.required' | i18n }}\n        </label>\n      }\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]=\"(_currentPred ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n\n@if (predicatesUsed$ | async; as used) {\n  <div>\n    <pry-modal\n      [titleModal]=\"'@pry.admin.predicates.validEdit' | i18n\"\n      [validateLabel]=\"'@pry.admin.edit' | i18n\"\n      [validateAction]=\"validateAction\"\n      [cancelLabel]=\"'@pry.admin.cancel' | i18n\"\n      [cancelAction]=\"cancelAction\"\n      [opened]=\"openedModal\"\n      >\n      <p [innerHTML]=\"'@pry.admin.predicates.validEditMessage' | i18n: { used: used }\"></p>\n    </pry-modal>\n  </div>\n}\n", dependencies: [{ 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: i3.PryModalComponent, selector: "pry-modal", inputs: ["titleModal", "opened", "validateLabel", "validateAction", "cancelLabel", "cancelAction"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminPredicatesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-predicates-form', template: "<div>\n  <form class=\"o-form\" [formGroup]=\"predForm\" (ngSubmit)=\"checkModal()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"name\" class=\"a-label\">\n        {{ '@pry.admin.predicates.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        [attr.aria-labelledby]=\"isSubmitted && predForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && predForm.get('name')?.invalid\"\n        required\n      />\n      <label\n        *ngIf=\"isSubmitted && predForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"predForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"predForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-xl\">\n      <label id=\"value-label\" for=\"value\" class=\"a-label\">\n        {{ '@pry.admin.predicates.value' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <textarea\n        id=\"value\"\n        rows=\"10\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"value\"\n        name=\"value\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && predForm.get('value')?.invalid ? 'value-label value-error' : 'value-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && predForm.get('value')?.invalid\"\n        required\n      ></textarea>\n      <label\n        *ngIf=\"isSubmitted && predForm.get('value')?.invalid\"\n        id=\"value-error\"\n        for=\"value\"\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        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]=\"(_currentPred ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n\n<div *ngIf=\"predicatesUsed$ | async as used\">\n  <pry-modal\n    [titleModal]=\"'@pry.admin.predicates.validEdit' | i18n\"\n    [validateLabel]=\"'@pry.admin.edit' | i18n\"\n    [validateAction]=\"validateAction\"\n    [cancelLabel]=\"'@pry.admin.cancel' | i18n\"\n    [cancelAction]=\"cancelAction\"\n    [opened]=\"openedModal\"\n  >\n    <p [innerHTML]=\"'@pry.admin.predicates.validEditMessage' | i18n: { used: used }\"></p>\n  </pry-modal>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-predicates-form', template: "<div>\n  <form class=\"o-form\" [formGroup]=\"predForm\" (ngSubmit)=\"checkModal()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"name\" class=\"a-label\">\n        {{ '@pry.admin.predicates.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        [attr.aria-labelledby]=\"isSubmitted && predForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && predForm.get('name')?.invalid\"\n        required\n        />\n      @if (isSubmitted && predForm.get('name')?.invalid) {\n        <label\n          id=\"name-error\"\n          for=\"name\"\n          class=\"a-label a-label--help -error\"\n          >\n          @if (predForm.get('name')?.hasError('same-name')) {\n            <span>{{ '@pry.admin.exists' | i18n }}</span>\n          }\n          @if (predForm.get('name')?.hasError('required')) {\n            <span>{{ '@pry.admin.required' | i18n }}</span>\n          }\n        </label>\n      }\n    </div>\n\n    <div class=\"m-form-label-field -width-xl\">\n      <label id=\"value-label\" for=\"value\" class=\"a-label\">\n        {{ '@pry.admin.predicates.value' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <textarea\n        id=\"value\"\n        rows=\"10\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"value\"\n        name=\"value\"\n        [attr.aria-labelledby]=\"\n          isSubmitted && predForm.get('value')?.invalid ? 'value-label value-error' : 'value-label'\n        \"\n        [attr.aria-invalid]=\"isSubmitted && predForm.get('value')?.invalid\"\n        required\n      ></textarea>\n      @if (isSubmitted && predForm.get('value')?.invalid) {\n        <label\n          id=\"value-error\"\n          for=\"value\"\n          class=\"a-label a-label--help -error\"\n          >\n          {{ '@pry.admin.required' | i18n }}\n        </label>\n      }\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]=\"(_currentPred ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n\n@if (predicatesUsed$ | async; as used) {\n  <div>\n    <pry-modal\n      [titleModal]=\"'@pry.admin.predicates.validEdit' | i18n\"\n      [validateLabel]=\"'@pry.admin.edit' | i18n\"\n      [validateAction]=\"validateAction\"\n      [cancelLabel]=\"'@pry.admin.cancel' | i18n\"\n      [cancelAction]=\"cancelAction\"\n      [opened]=\"openedModal\"\n      >\n      <p [innerHTML]=\"'@pry.admin.predicates.validEditMessage' | i18n: { used: used }\"></p>\n    </pry-modal>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }], propDecorators: { currentPred: [{
                 type: Input
             }] } });
 class AdminPredicatesNewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminPredicatesNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminPredicatesNewComponent, selector: "pry-admin-predicates-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.predicates.add' | i18n }}</h1>\n  <pry-admin-predicates-form></pry-admin-predicates-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminPredicatesFormComponent, selector: "pry-admin-predicates-form", inputs: ["currentPred"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminPredicatesNewComponent, selector: "pry-admin-predicates-new", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.predicates.add' | i18n }}</h1>\n  <pry-admin-predicates-form></pry-admin-predicates-form>\n</div>\n", dependencies: [{ kind: "component", type: AdminPredicatesFormComponent, selector: "pry-admin-predicates-form", inputs: ["currentPred"] }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminPredicatesNewComponent, decorators: [{
             type: Component,
@@ -4802,11 +4798,11 @@ class AdminPredicatesUpdateComponent {
         this.route.params.subscribe((params) => this.store.dispatch(PredicatesActions.selectPredicate({ id: params['id'] })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminPredicatesUpdateComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminPredicatesUpdateComponent, selector: "pry-admin-predicates-update", ngImport: i0, template: "<div *ngIf=\"currentPredicate$ | async as currentPred\" class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.predicates.edit' | i18n }}</h1>\n  <pry-admin-predicates-form [currentPred]=\"currentPred\"></pry-admin-predicates-form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AdminPredicatesFormComponent, selector: "pry-admin-predicates-form", inputs: ["currentPred"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminPredicatesUpdateComponent, selector: "pry-admin-predicates-update", ngImport: i0, template: "@if (currentPredicate$ | async; as currentPred) {\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">{{ '@pry.admin.predicates.edit' | i18n }}</h1>\n    <pry-admin-predicates-form [currentPred]=\"currentPred\"></pry-admin-predicates-form>\n  </div>\n}\n", dependencies: [{ kind: "component", type: AdminPredicatesFormComponent, selector: "pry-admin-predicates-form", inputs: ["currentPred"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminPredicatesUpdateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-predicates-update', template: "<div *ngIf=\"currentPredicate$ | async as currentPred\" class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.predicates.edit' | i18n }}</h1>\n  <pry-admin-predicates-form [currentPred]=\"currentPred\"></pry-admin-predicates-form>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-predicates-update', template: "@if (currentPredicate$ | async; as currentPred) {\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">{{ '@pry.admin.predicates.edit' | i18n }}</h1>\n    <pry-admin-predicates-form [currentPred]=\"currentPred\"></pry-admin-predicates-form>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminPredicatesComponent {
@@ -4839,11 +4835,11 @@ class AdminPredicatesComponent {
         this.store.dispatch(AdminActions.selectComponentType({ componentType: 'AdminPredicatesSelectComponent' }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminPredicatesComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminPredicatesComponent, selector: "pry-admin-predicates", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.predicates.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.predicates.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.predicates.name' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        *ngFor=\"let predicate of predicates$ | async | prySortData: sortActive : sortDirection\"\n        (click)=\"goToSelectPredicate(predicate.id)\"\n        [class.is-selected]=\"(currentPredicateId$ | async) === predicate.id\"\n      >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-pred-' + predicate.id\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"false\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-pred-' + predicate.id\"\n          >\n            <span class=\"u-visually-hidden\">{{ predicate.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ predicate.name }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminPredicatesComponent, selector: "pry-admin-predicates", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.predicates.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n    <caption>\n      {{\n      '@pry.admin.predicates.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.predicates.name' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (predicate of predicates$ | async | prySortData: sortActive : sortDirection; track predicate) {\n        <tr\n          (click)=\"goToSelectPredicate(predicate.id)\"\n          [class.is-selected]=\"(currentPredicateId$ | async) === predicate.id\"\n          >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-pred-' + predicate.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"false\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-pred-' + predicate.id\"\n              >\n              <span class=\"u-visually-hidden\">{{ predicate.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ predicate.name }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminPredicatesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-predicates', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.predicates.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.predicates.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.predicates.name' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        *ngFor=\"let predicate of predicates$ | async | prySortData: sortActive : sortDirection\"\n        (click)=\"goToSelectPredicate(predicate.id)\"\n        [class.is-selected]=\"(currentPredicateId$ | async) === predicate.id\"\n      >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-pred-' + predicate.id\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"false\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-pred-' + predicate.id\"\n          >\n            <span class=\"u-visually-hidden\">{{ predicate.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ predicate.name }}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-predicates', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.predicates.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n    <caption>\n      {{\n      '@pry.admin.predicates.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.predicates.name' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (predicate of predicates$ | async | prySortData: sortActive : sortDirection; track predicate) {\n        <tr\n          (click)=\"goToSelectPredicate(predicate.id)\"\n          [class.is-selected]=\"(currentPredicateId$ | async) === predicate.id\"\n          >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-pred-' + predicate.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"false\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-pred-' + predicate.id\"\n              >\n              <span class=\"u-visually-hidden\">{{ predicate.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ predicate.name }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 class AdminRelationTypesModalComponent {
@@ -4923,13 +4919,13 @@ class AdminRelationTypesModalComponent {
             this.closeModal();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminRelationTypesModalComponent, deps: [{ token: i1.Store }, { token: i5.Overlay }, { token: i0.ViewContainerRef }, { token: i3$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminRelationTypesModalComponent, selector: "pry-admin-relation-types-modal", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-template #template>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2\n          class=\"a-h2\"\n          id=\"dialog_title\"\n          [innerHTML]=\"(selectedRelationType ? '@pry.admin.relationTypes.edit' : '@pry.admin.relationTypes.add') | i18n\"\n        >\n          {{ '@pry.toolbox.rename' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeModal()\">\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\n    <form [formGroup]=\"relationTypeForm\" (ngSubmit)=\"addRelationType()\">\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"name\"></label>\n        <input type=\"text\" class=\"a-form-field\" id=\"name\" formControlName=\"name\" required />\n        <label\n          *ngIf=\"isSubmitted && (relationTypeForm.get('name')?.invalid || nameAlreadyExists)\"\n          id=\"name-error\"\n          for=\"name\"\n          class=\"a-label a-label--help -error\"\n        >\n          <span *ngIf=\"nameAlreadyExists\">{{ '@pry.admin.exists' | i18n }}</span>\n          <span *ngIf=\"relationTypeForm.get('name')?.hasError('required')\">\n            {{ '@pry.admin.required' | i18n }}\n          </span>\n          <span *ngIf=\"relationTypeForm.get('name')?.hasError('maxlength')\">\n            {{ '@pry.admin.maxLength' | i18n: { len: '30' } }}\n          </span>\n        </label>\n      </div>\n\n      <div class=\"m-btn-group\">\n        <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"closeModal()\">\n          {{ '@pry.context.cancel' | i18n }}\n        </button>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"(selectedRelationType ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n        ></button>\n      </div>\n    </form>\n  </div>\n</ng-template>\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.ɵ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: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminRelationTypesModalComponent, deps: [{ token: i1.Store }, { token: i4$1.Overlay }, { token: i0.ViewContainerRef }, { token: i3$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminRelationTypesModalComponent, selector: "pry-admin-relation-types-modal", viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-template #template>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2\n          class=\"a-h2\"\n          id=\"dialog_title\"\n          [innerHTML]=\"(selectedRelationType ? '@pry.admin.relationTypes.edit' : '@pry.admin.relationTypes.add') | i18n\"\n          >\n          {{ '@pry.toolbox.rename' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeModal()\">\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\n    <form [formGroup]=\"relationTypeForm\" (ngSubmit)=\"addRelationType()\">\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"name\"></label>\n        <input type=\"text\" class=\"a-form-field\" id=\"name\" formControlName=\"name\" required />\n        @if (isSubmitted && (relationTypeForm.get('name')?.invalid || nameAlreadyExists)) {\n          <label\n            id=\"name-error\"\n            for=\"name\"\n            class=\"a-label a-label--help -error\"\n            >\n            @if (nameAlreadyExists) {\n              <span>{{ '@pry.admin.exists' | i18n }}</span>\n            }\n            @if (relationTypeForm.get('name')?.hasError('required')) {\n              <span>\n                {{ '@pry.admin.required' | i18n }}\n              </span>\n            }\n            @if (relationTypeForm.get('name')?.hasError('maxlength')) {\n              <span>\n                {{ '@pry.admin.maxLength' | i18n: { len: '30' } }}\n              </span>\n            }\n          </label>\n        }\n      </div>\n\n      <div class=\"m-btn-group\">\n        <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"closeModal()\">\n          {{ '@pry.context.cancel' | i18n }}\n        </button>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"(selectedRelationType ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n        ></button>\n      </div>\n    </form>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3.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: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminRelationTypesModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-relation-types-modal', template: "<ng-template #template>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2\n          class=\"a-h2\"\n          id=\"dialog_title\"\n          [innerHTML]=\"(selectedRelationType ? '@pry.admin.relationTypes.edit' : '@pry.admin.relationTypes.add') | i18n\"\n        >\n          {{ '@pry.toolbox.rename' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeModal()\">\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\n    <form [formGroup]=\"relationTypeForm\" (ngSubmit)=\"addRelationType()\">\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"name\"></label>\n        <input type=\"text\" class=\"a-form-field\" id=\"name\" formControlName=\"name\" required />\n        <label\n          *ngIf=\"isSubmitted && (relationTypeForm.get('name')?.invalid || nameAlreadyExists)\"\n          id=\"name-error\"\n          for=\"name\"\n          class=\"a-label a-label--help -error\"\n        >\n          <span *ngIf=\"nameAlreadyExists\">{{ '@pry.admin.exists' | i18n }}</span>\n          <span *ngIf=\"relationTypeForm.get('name')?.hasError('required')\">\n            {{ '@pry.admin.required' | i18n }}\n          </span>\n          <span *ngIf=\"relationTypeForm.get('name')?.hasError('maxlength')\">\n            {{ '@pry.admin.maxLength' | i18n: { len: '30' } }}\n          </span>\n        </label>\n      </div>\n\n      <div class=\"m-btn-group\">\n        <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"closeModal()\">\n          {{ '@pry.context.cancel' | i18n }}\n        </button>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"(selectedRelationType ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n        ></button>\n      </div>\n    </form>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i5.Overlay }, { type: i0.ViewContainerRef }, { type: i3$1.UntypedFormBuilder }], propDecorators: { template: [{
+            args: [{ selector: 'pry-admin-relation-types-modal', template: "<ng-template #template>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2\n          class=\"a-h2\"\n          id=\"dialog_title\"\n          [innerHTML]=\"(selectedRelationType ? '@pry.admin.relationTypes.edit' : '@pry.admin.relationTypes.add') | i18n\"\n          >\n          {{ '@pry.toolbox.rename' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeModal()\">\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\n    <form [formGroup]=\"relationTypeForm\" (ngSubmit)=\"addRelationType()\">\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"name\"></label>\n        <input type=\"text\" class=\"a-form-field\" id=\"name\" formControlName=\"name\" required />\n        @if (isSubmitted && (relationTypeForm.get('name')?.invalid || nameAlreadyExists)) {\n          <label\n            id=\"name-error\"\n            for=\"name\"\n            class=\"a-label a-label--help -error\"\n            >\n            @if (nameAlreadyExists) {\n              <span>{{ '@pry.admin.exists' | i18n }}</span>\n            }\n            @if (relationTypeForm.get('name')?.hasError('required')) {\n              <span>\n                {{ '@pry.admin.required' | i18n }}\n              </span>\n            }\n            @if (relationTypeForm.get('name')?.hasError('maxlength')) {\n              <span>\n                {{ '@pry.admin.maxLength' | i18n: { len: '30' } }}\n              </span>\n            }\n          </label>\n        }\n      </div>\n\n      <div class=\"m-btn-group\">\n        <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"closeModal()\">\n          {{ '@pry.context.cancel' | i18n }}\n        </button>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"(selectedRelationType ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n        ></button>\n      </div>\n    </form>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i4$1.Overlay }, { type: i0.ViewContainerRef }, { type: i3$1.UntypedFormBuilder }], propDecorators: { template: [{
                 type: ViewChild,
                 args: ['template', { read: TemplateRef }]
             }] } });
@@ -4961,11 +4957,11 @@ class AdminRelationTypesComponent {
         this.store.dispatch(AdminActions.selectComponentType({ componentType: 'AdminRelationTypesSelectComponent' }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminRelationTypesComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminRelationTypesComponent, selector: "pry-admin-relation-types", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.relationTypes.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.relationTypes.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.relationTypes.name' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.relationTypes.nbLink' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        *ngFor=\"let relationType of relationTypes | async | prySortData: sortActive : sortDirection\"\n        (click)=\"selectlink(relationType)\"\n        [class.is-selected]=\"(selectedRelationType$ | async)?.id === relationType.id\"\n      >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-rt-' + relationType.id\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"(selectedRelationType$ | async)?.id === relationType.id\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-rt-' + relationType.id\"\n          >\n            <span class=\"u-visually-hidden\">{{ relationType.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ relationType.name }}</td>\n        <td>{{ relationType.nbLink }}</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <pry-admin-relation-types-modal></pry-admin-relation-types-modal>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "component", type: AdminRelationTypesModalComponent, selector: "pry-admin-relation-types-modal" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminRelationTypesComponent, selector: "pry-admin-relation-types", ngImport: i0, template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.relationTypes.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n    <caption>\n      {{\n      '@pry.admin.relationTypes.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.relationTypes.name' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.relationTypes.nbLink' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (relationType of relationTypes | async | prySortData: sortActive : sortDirection; track relationType) {\n        <tr\n          (click)=\"selectlink(relationType)\"\n          [class.is-selected]=\"(selectedRelationType$ | async)?.id === relationType.id\"\n          >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-rt-' + relationType.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedRelationType$ | async)?.id === relationType.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-rt-' + relationType.id\"\n              >\n              <span class=\"u-visually-hidden\">{{ relationType.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ relationType.name }}</td>\n          <td>{{ relationType.nbLink }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n\n  <pry-admin-relation-types-modal></pry-admin-relation-types-modal>\n</div>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "component", type: AdminRelationTypesModalComponent, selector: "pry-admin-relation-types-modal" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminRelationTypesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-relation-types', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.relationTypes.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n    <caption>\n      {{\n        '@pry.admin.relationTypes.list' | i18n\n      }},\n      {{\n        '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.relationTypes.name' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.relationTypes.nbLink' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        *ngFor=\"let relationType of relationTypes | async | prySortData: sortActive : sortDirection\"\n        (click)=\"selectlink(relationType)\"\n        [class.is-selected]=\"(selectedRelationType$ | async)?.id === relationType.id\"\n      >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-rt-' + relationType.id\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"(selectedRelationType$ | async)?.id === relationType.id\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-rt-' + relationType.id\"\n          >\n            <span class=\"u-visually-hidden\">{{ relationType.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ relationType.name }}</td>\n        <td>{{ relationType.nbLink }}</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <pry-admin-relation-types-modal></pry-admin-relation-types-modal>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-relation-types', template: "<div class=\"o-base-container\">\n  <h1 class=\"a-h1\">{{ '@pry.admin.relationTypes.list' | i18n }}</h1>\n  <table\n    class=\"a-table\"\n    prySortTable\n    prySortActive=\"name\"\n    prySortDirection=\"asc\"\n    (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n    <caption>\n      {{\n      '@pry.admin.relationTypes.list' | i18n\n      }},\n      {{\n      '@pry.action.sortableColumnHeader' | i18n\n      }}\n    </caption>\n    <thead>\n      <tr>\n        <th></th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.relationTypes.name' | i18n }}</th>\n        <th prySortHeader=\"name\">{{ '@pry.admin.relationTypes.nbLink' | i18n }}</th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (relationType of relationTypes | async | prySortData: sortActive : sortDirection; track relationType) {\n        <tr\n          (click)=\"selectlink(relationType)\"\n          [class.is-selected]=\"(selectedRelationType$ | async)?.id === relationType.id\"\n          >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-rt-' + relationType.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedRelationType$ | async)?.id === relationType.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-rt-' + relationType.id\"\n              >\n              <span class=\"u-visually-hidden\">{{ relationType.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ relationType.name }}</td>\n          <td>{{ relationType.nbLink }}</td>\n        </tr>\n      }\n    </tbody>\n  </table>\n\n  <pry-admin-relation-types-modal></pry-admin-relation-types-modal>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }] });
 class AdminUserComponent {
@@ -4986,11 +4982,11 @@ class AdminUserComponent {
         this.store.dispatch(AdminActions.selectComponentType({ componentType: 'AdminUserSelectComponent' }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminUserComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AdminUserComponent, selector: "pry-admin-user", ngImport: i0, template: "<h1 class=\"a-h1\">{{ '@pry.admin.userInfo.list' | i18n }}</h1>\n<table\n  class=\"a-table\"\n  prySortTable\n  prySortActive=\"name\"\n  prySortDirection=\"asc\"\n  (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n>\n  <caption>\n    {{\n      '@pry.admin.userInfo.list' | i18n\n    }},\n    {{\n      '@pry.action.sortableColumnHeader' | i18n\n    }}\n  </caption>\n  <thead>\n    <tr>\n      <th></th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.name' | i18n }}</th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.familyName' | i18n }}</th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.email' | i18n }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr\n      *ngFor=\"let user of users$ | async | prySortData: sortActive : sortDirection\"\n      (click)=\"selectUser(user)\"\n      [class.is-selected]=\"(selectedUser$ | async)?.id === user.id\"\n    >\n      <td class=\"view-details\">\n        <button\n          [id]=\"'button-user-' + user.id\"\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n          [attr.aria-expanded]=\"(selectedUser$ | async)?.id === user.id\"\n          aria-haspopup\n          [attr.aria-controls]=\"'panel-user-' + user.id\"\n        >\n          <span class=\"u-visually-hidden\">{{ user.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n          <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n        </button>\n      </td>\n      <td>{{ user.name }}</td>\n      <td>{{ user.familyName }}</td>\n      <td>{{ user.email }}</td>\n    </tr>\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AdminUserComponent, selector: "pry-admin-user", ngImport: i0, template: "<h1 class=\"a-h1\">{{ '@pry.admin.userInfo.list' | i18n }}</h1>\n<table\n  class=\"a-table\"\n  prySortTable\n  prySortActive=\"name\"\n  prySortDirection=\"asc\"\n  (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n  <caption>\n    {{\n    '@pry.admin.userInfo.list' | i18n\n    }},\n    {{\n    '@pry.action.sortableColumnHeader' | i18n\n    }}\n  </caption>\n  <thead>\n    <tr>\n      <th></th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.name' | i18n }}</th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.familyName' | i18n }}</th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.email' | i18n }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    @for (user of users$ | async | prySortData: sortActive : sortDirection; track user) {\n      <tr\n        (click)=\"selectUser(user)\"\n        [class.is-selected]=\"(selectedUser$ | async)?.id === user.id\"\n        >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-user-' + user.id\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"(selectedUser$ | async)?.id === user.id\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-user-' + user.id\"\n            >\n            <span class=\"u-visually-hidden\">{{ user.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ user.name }}</td>\n        <td>{{ user.familyName }}</td>\n        <td>{{ user.email }}</td>\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: i3.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i3.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i3.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i3.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i3.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-user', template: "<h1 class=\"a-h1\">{{ '@pry.admin.userInfo.list' | i18n }}</h1>\n<table\n  class=\"a-table\"\n  prySortTable\n  prySortActive=\"name\"\n  prySortDirection=\"asc\"\n  (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n>\n  <caption>\n    {{\n      '@pry.admin.userInfo.list' | i18n\n    }},\n    {{\n      '@pry.action.sortableColumnHeader' | i18n\n    }}\n  </caption>\n  <thead>\n    <tr>\n      <th></th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.name' | i18n }}</th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.familyName' | i18n }}</th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.email' | i18n }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr\n      *ngFor=\"let user of users$ | async | prySortData: sortActive : sortDirection\"\n      (click)=\"selectUser(user)\"\n      [class.is-selected]=\"(selectedUser$ | async)?.id === user.id\"\n    >\n      <td class=\"view-details\">\n        <button\n          [id]=\"'button-user-' + user.id\"\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n          [attr.aria-expanded]=\"(selectedUser$ | async)?.id === user.id\"\n          aria-haspopup\n          [attr.aria-controls]=\"'panel-user-' + user.id\"\n        >\n          <span class=\"u-visually-hidden\">{{ user.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n          <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n        </button>\n      </td>\n      <td>{{ user.name }}</td>\n      <td>{{ user.familyName }}</td>\n      <td>{{ user.email }}</td>\n    </tr>\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'pry-admin-user', template: "<h1 class=\"a-h1\">{{ '@pry.admin.userInfo.list' | i18n }}</h1>\n<table\n  class=\"a-table\"\n  prySortTable\n  prySortActive=\"name\"\n  prySortDirection=\"asc\"\n  (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n  >\n  <caption>\n    {{\n    '@pry.admin.userInfo.list' | i18n\n    }},\n    {{\n    '@pry.action.sortableColumnHeader' | i18n\n    }}\n  </caption>\n  <thead>\n    <tr>\n      <th></th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.name' | i18n }}</th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.familyName' | i18n }}</th>\n      <th prySortHeader=\"name\">{{ '@pry.admin.userInfo.email' | i18n }}</th>\n    </tr>\n  </thead>\n  <tbody>\n    @for (user of users$ | async | prySortData: sortActive : sortDirection; track user) {\n      <tr\n        (click)=\"selectUser(user)\"\n        [class.is-selected]=\"(selectedUser$ | async)?.id === user.id\"\n        >\n        <td class=\"view-details\">\n          <button\n            [id]=\"'button-user-' + user.id\"\n            type=\"button\"\n            class=\"a-btn a-btn--icon-only\"\n            title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n            [attr.aria-expanded]=\"(selectedUser$ | async)?.id === user.id\"\n            aria-haspopup\n            [attr.aria-controls]=\"'panel-user-' + user.id\"\n            >\n            <span class=\"u-visually-hidden\">{{ user.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n            <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n          </button>\n        </td>\n        <td>{{ user.name }}</td>\n        <td>{{ user.familyName }}</td>\n        <td>{{ user.email }}</td>\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 const routes = [
@@ -5884,12 +5880,12 @@ class AdminClassEffects {
             return this.adminService.getStorageOptions().pipe(map$1((storageOptions) => AdminClassActions.getStorageOptionsSuccess({ storageOptions })), catchError$1((error) => [AdminClassActions.getStorageOptionsFailure({ error: error })]));
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassEffects, deps: [{ token: i1$2.Actions }, { token: AdminService }, { token: i4.PryDialogService }, { token: AdminService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassEffects, deps: [{ token: i1$2.Actions }, { token: AdminService }, { token: i3.PryDialogService }, { token: AdminService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminClassEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: AdminService }, { type: i4.PryDialogService }, { type: AdminService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: AdminService }, { type: i3.PryDialogService }, { type: AdminService }] });
 class EnvironmentEffects {
     constructor(actions$, service, router) {
@@ -5972,12 +5968,12 @@ class FieldsEffects {
             return AdminActions.togglePanel({ panelOpen: false });
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldsEffects, deps: [{ token: i1$2.Actions }, { token: i4.FieldService }, { token: i4.PryDialogService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldsEffects, deps: [{ token: i1$2.Actions }, { token: i3.FieldService }, { token: i3.PryDialogService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldsEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FieldsEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i4.FieldService }, { type: i4.PryDialogService }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i3.FieldService }, { type: i3.PryDialogService }, { type: i1.Store }] });
 class LinksEffects {
     constructor(actions$, service, router) {
@@ -7134,12 +7130,12 @@ class AdminDatasetEffects {
         })));
         this.addCategory$ = createEffect(() => this.actions$.pipe(ofType(AdminDatasetActions.addCategory), mergeMap((action) => this.datasetService.addCategory(action.category).pipe(map(() => DataSourceActions.dataset.getCategories()), catchError$1((error) => [AdminDatasetActions.failure({ error })])))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminDatasetEffects, deps: [{ token: i1$2.Actions }, { token: AdminDatasetService }, { token: i4.PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminDatasetEffects, deps: [{ token: i1$2.Actions }, { token: AdminDatasetService }, { token: i3.PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminDatasetEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AdminDatasetEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: AdminDatasetService }, { type: i4.PryDialogService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: AdminDatasetService }, { type: i3.PryDialogService }] });
 class PryAdminModule {
     constructor(pryTranslateService) {
@@ -7147,7 +7143,7 @@ class PryAdminModule {
         this.pryTranslateService.addLangObject('fr', 'admin', frTranslations);
         this.pryTranslateService.addLangObject('en', 'admin', enTranslations);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAdminModule, deps: [{ token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PryAdminModule, deps: [{ token: i3.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: PryAdminModule, declarations: [PryAdminComponent,
             AdminEnvironmentComponent,
             AdminMetadataUserComponent,
@@ -7408,7 +7404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         PryPageLoaderModule
                     ]
                 }]
-        }], ctorParameters: () => [{ type: i4.PryI18nService }] });
+        }], ctorParameters: () => [{ type: i3.PryI18nService }] });
 /**
  * Generated bundle index. Do not edit.