@provoly/dashboard 0.20.4 → 0.20.6

package/fesm2022/provoly-dashboard-admin.mjs

@@ -1384,11 +1384,11 @@ class AdminClassesFormComponent extends SubscriptionnerDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminClassesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminClassesFormComponent, selector: "pry-admin-classes-form", inputs: { currentClass: "currentClass" }, usesInheritance: true, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"classForm\" (ngSubmit)=\"addClass()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.classes.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      [attr.aria-labelledby]=\"isSubmitted && classForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      id=\"name\"\n      required\n      type=\"text\"\n      [attr.aria-invalid]=\"isSubmitted && classForm.get('name')?.invalid\"\n    />\n    <label\n      *ngIf=\"isSubmitted && classForm.get('name')?.invalid\"\n      id=\"name-error\"\n      for=\"name\"\n      class=\"a-label a-label--help -error\"\n    >\n      <span *ngIf=\"classForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('minlength')\">{{ '@pry.admin.minLength' | i18n : { len: 3 } }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('maxlength')\">{{\n        '@pry.admin.maxLength' | i18n : { len: 100 }\n      }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('whitespace')\">{{ '@pry.admin.noWhitespace' | i18n }}</span>\n    </label>\n  </div>\n  <div class=\"u-display-flex -row -no-gap -align-center\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"storage_options\">\n        {{ '@pry.admin.storage.label' | i18n }}\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        [items]=\"storageOptions$ | async\"\n        i18nPrefix=\"@pry.admin.storage.options.\"\n        formControlName=\"storage\"\n        id=\"storage_options\"\n        [readonly]=\"!!_currentClass\"\n      ></pry-select>\n    </div>\n    <div class=\"info-icon description-container description\">\n      <span class=\"info-text\">i</span>\n    </div>\n    <div class=\"description-tooltip info-tooltip\">\n      <p class=\"a-p -date\">\n        {{ '@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n }}\n      </p>\n    </div>\n  </div>\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [innerHTML]=\"(_currentClass ? '@pry.admin.edit' : '@pry.admin.next') | i18n\"\n    ></button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminClassesFormComponent, selector: "pry-admin-classes-form", inputs: { currentClass: "currentClass" }, usesInheritance: true, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"classForm\" (ngSubmit)=\"addClass()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.classes.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      [attr.aria-labelledby]=\"isSubmitted && classForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      id=\"name\"\n      required\n      type=\"text\"\n      [attr.aria-invalid]=\"isSubmitted && classForm.get('name')?.invalid\"\n    />\n    <label\n      *ngIf=\"isSubmitted && classForm.get('name')?.invalid\"\n      id=\"name-error\"\n      for=\"name\"\n      class=\"a-label a-label--help -error\"\n    >\n      <span *ngIf=\"classForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('minlength')\">{{ '@pry.admin.minLength' | i18n : { len: 3 } }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('maxlength')\">{{\n        '@pry.admin.maxLength' | i18n : { len: 100 }\n      }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('whitespace')\">{{ '@pry.admin.noWhitespace' | i18n }}</span>\n    </label>\n  </div>\n  <div class=\"u-display-flex -row -align-center\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"storage_options\">\n        {{ '@pry.admin.storage.label' | i18n }}\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        [items]=\"storageOptions$ | async\"\n        i18nPrefix=\"@pry.admin.storage.options.\"\n        formControlName=\"storage\"\n        id=\"storage_options\"\n        [readonly]=\"!!_currentClass\"\n      ></pry-select>\n    </div>\n    <div class=\"m-info-icon a-tooltip -tooltip-width-md\" [attr.data-tooltip]=\"'@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n\" data-tooltip-position=\"right\">\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", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminClassesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-form', template: "<form class=\"o-form\" [formGroup]=\"classForm\" (ngSubmit)=\"addClass()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.classes.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      [attr.aria-labelledby]=\"isSubmitted && classForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      id=\"name\"\n      required\n      type=\"text\"\n      [attr.aria-invalid]=\"isSubmitted && classForm.get('name')?.invalid\"\n    />\n    <label\n      *ngIf=\"isSubmitted && classForm.get('name')?.invalid\"\n      id=\"name-error\"\n      for=\"name\"\n      class=\"a-label a-label--help -error\"\n    >\n      <span *ngIf=\"classForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('minlength')\">{{ '@pry.admin.minLength' | i18n : { len: 3 } }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('maxlength')\">{{\n        '@pry.admin.maxLength' | i18n : { len: 100 }\n      }}</span>\n      <span *ngIf=\"classForm.get('name')?.hasError('whitespace')\">{{ '@pry.admin.noWhitespace' | i18n }}</span>\n    </label>\n  </div>\n  <div class=\"u-display-flex -row -no-gap -align-center\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\" for=\"storage_options\">\n        {{ '@pry.admin.storage.label' | i18n }}\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <pry-select\n        [items]=\"storageOptions$ | async\"\n        i18nPrefix=\"@pry.admin.storage.options.\"\n        formControlName=\"storage\"\n        id=\"storage_options\"\n        [readonly]=\"!!_currentClass\"\n      ></pry-select>\n    </div>\n    <div class=\"info-icon description-container description\">\n      <span class=\"info-text\">i</span>\n    </div>\n    <div class=\"description-tooltip info-tooltip\">\n      <p class=\"a-p -date\">\n        {{ '@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n }}\n      </p>\n    </div>\n  </div>\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [innerHTML]=\"(_currentClass ? '@pry.admin.edit' : '@pry.admin.next') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
+            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        [readonly]=\"!!_currentClass\"\n      ></pry-select>\n    </div>\n    <div class=\"m-info-icon a-tooltip -tooltip-width-md\" [attr.data-tooltip]=\"'@pry.admin.storage.description.' + classForm.get('storage')?.value | i18n\" data-tooltip-position=\"right\">\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: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }]; }, propDecorators: { currentClass: [{
                 type: Input
             }] } });
@@ -1573,11 +1573,11 @@ class AdminAttributesFormComponent {
         this.closeCategory();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminAttributesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i5.Overlay }, { token: i0.ViewContainerRef }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n : { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"title-container\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"selectedFieldTypeDescription$ | async as description\">\n        <div class=\"info-icon description-container description\">\n          <span class=\"info-text\">i</span>\n        </div>\n        <div class=\"description-tooltip title-tooltip\">\n          <p class=\"a-p -date\">{{ description }}</p>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"showCategory()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scole=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n : { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n        [attr.data-tooltip]=\"description\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"showCategory()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminAttributesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-attributes-form', template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n : { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"title-container\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"selectedFieldTypeDescription$ | async as description\">\n        <div class=\"info-icon description-container description\">\n          <span class=\"info-text\">i</span>\n        </div>\n        <div class=\"description-tooltip title-tooltip\">\n          <p class=\"a-p -date\">{{ description }}</p>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"showCategory()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scole=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-admin-attributes-form', template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n : { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n        [attr.data-tooltip]=\"description\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"showCategory()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i5.Overlay }, { type: i0.ViewContainerRef }, { type: i4.PryI18nService }]; }, propDecorators: { selectedClass: [{
                 type: Input
             }], interClass: [{
@@ -2397,11 +2397,11 @@ class AdminFieldsFormComponent {
         return this.currentField ? this.goBackPathEdit : this.goBackPath;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminFieldsFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminFieldsFormComponent, selector: "pry-admin-fields-form", inputs: { currentField: "currentField" }, ngImport: i0, template: "<div>\n  <form class=\"o-form\" [formGroup]=\"fieldForm\" (ngSubmit)=\"addField()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"isSubmitted && fieldForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        required\n      />\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"field_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.minLength' | i18n : { len: 3 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('maxlength')\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('whitespace') && !fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"title-container\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"type\"\n          [items]=\"fieldTypeTranslations\"\n          bindValue=\"varType\"\n          bindLabel=\"translation\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <ng-container>\n          <div class=\"info-icon description-container description\">\n            <span class=\"info-text\">i</span>\n          </div>\n          <div class=\"description-tooltip title-tooltip\">\n            <p class=\"a-p -date\">{{ selectedFieldTypeDescription$ | async }}</p>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\" *ngIf=\"isGeographicType\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.crs' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"title-container\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"crs\"\n          [items]=\"CRS_OPTIONS\"\n          bindValue=\"code\"\n          bindLabel=\"label\"\n          [isForm]=\"true\"\n          id=\"crs\"\n        ></pry-select>\n      </div>\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('crs') && fieldForm.get('crs')?.invalid\"\n        id=\"crs-error\"\n        for=\"crs\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminFieldsFormComponent, selector: "pry-admin-fields-form", inputs: { currentField: "currentField" }, ngImport: i0, template: "<div>\n  <form class=\"o-form\" [formGroup]=\"fieldForm\" (ngSubmit)=\"addField()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"isSubmitted && fieldForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        required\n      />\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"field_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.minLength' | i18n : { len: 3 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('maxlength')\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('whitespace') && !fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"type\"\n          [items]=\"fieldTypeTranslations\"\n          bindValue=\"varType\"\n          bindLabel=\"translation\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <div\n          *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n          class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n          [attr.data-tooltip]=\"description\"\n          data-tooltip-position=\"right\"\n        >\n          <span>i</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\" *ngIf=\"isGeographicType\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.crs' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"crs\"\n          [items]=\"CRS_OPTIONS\"\n          bindValue=\"code\"\n          bindLabel=\"label\"\n          [isForm]=\"true\"\n          id=\"crs\"\n        ></pry-select>\n      </div>\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('crs') && fieldForm.get('crs')?.invalid\"\n        id=\"crs-error\"\n        for=\"crs\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "elementRef"], outputs: ["searched", "cleared"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminFieldsFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-fields-form', template: "<div>\n  <form class=\"o-form\" [formGroup]=\"fieldForm\" (ngSubmit)=\"addField()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"isSubmitted && fieldForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        required\n      />\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"field_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.minLength' | i18n : { len: 3 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('maxlength')\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('whitespace') && !fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"title-container\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"type\"\n          [items]=\"fieldTypeTranslations\"\n          bindValue=\"varType\"\n          bindLabel=\"translation\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <ng-container>\n          <div class=\"info-icon description-container description\">\n            <span class=\"info-text\">i</span>\n          </div>\n          <div class=\"description-tooltip title-tooltip\">\n            <p class=\"a-p -date\">{{ selectedFieldTypeDescription$ | async }}</p>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\" *ngIf=\"isGeographicType\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.crs' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"title-container\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"crs\"\n          [items]=\"CRS_OPTIONS\"\n          bindValue=\"code\"\n          bindLabel=\"label\"\n          [isForm]=\"true\"\n          id=\"crs\"\n        ></pry-select>\n      </div>\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('crs') && fieldForm.get('crs')?.invalid\"\n        id=\"crs-error\"\n        for=\"crs\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-fields-form', template: "<div>\n  <form class=\"o-form\" [formGroup]=\"fieldForm\" (ngSubmit)=\"addField()\">\n    <div class=\"m-form-label-field -width-sm\">\n      <label id=\"name-label\" for=\"field_name\" class=\"a-label\">\n        {{ '@pry.admin.fields.name' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <input\n        id=\"field_name\"\n        type=\"text\"\n        class=\"a-form-field\"\n        formControlName=\"name\"\n        [attr.aria-labelledby]=\"isSubmitted && fieldForm.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n        [attr.aria-invalid]=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        required\n      />\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('name')?.invalid\"\n        id=\"name-error\"\n        for=\"field_name\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('same-name')\">{{ '@pry.admin.exists' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.minLength' | i18n : { len: 3 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('maxlength')\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</span>\n        <span *ngIf=\"fieldForm.get('name')?.hasError('whitespace') && !fieldForm.get('name')?.hasError('minlength')\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.type' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"type\"\n          [items]=\"fieldTypeTranslations\"\n          bindValue=\"varType\"\n          bindLabel=\"translation\"\n          [isForm]=\"true\"\n        ></pry-select>\n        <div\n          *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n          class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n          [attr.data-tooltip]=\"description\"\n          data-tooltip-position=\"right\"\n        >\n          <span>i</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"m-form-label-field -width-sm\" *ngIf=\"isGeographicType\">\n      <label class=\"a-label\">\n        {{ '@pry.admin.fields.crs' | i18n }} *\n        <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n      </label>\n      <div class=\"u-display-flex\">\n        <pry-select\n          class=\"-width-sm\"\n          formControlName=\"crs\"\n          [items]=\"CRS_OPTIONS\"\n          bindValue=\"code\"\n          bindLabel=\"label\"\n          [isForm]=\"true\"\n          id=\"crs\"\n        ></pry-select>\n      </div>\n      <label\n        *ngIf=\"isSubmitted && fieldForm.get('crs') && fieldForm.get('crs')?.invalid\"\n        id=\"crs-error\"\n        for=\"crs\"\n        class=\"a-label a-label--help -error\"\n      >\n        <span *ngIf=\"fieldForm.get('name')?.hasError('required')\">{{ '@pry.admin.required' | i18n }}</span>\n      </label>\n    </div>\n\n    <div class=\"m-btn-group -width-sm\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button\n        class=\"a-btn a-btn--primary\"\n        type=\"submit\"\n        [innerHTML]=\"(currentField ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n      ></button>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i4.PryI18nService }]; }, propDecorators: { currentField: [{
                 type: Input
             }] } });
@@ -3535,11 +3535,11 @@ class AdminMenuComponent extends BaseMenuComponent {
         this.store.dispatch(AdminActions.highlightMenu({ menu }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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 a-btn--secondary -width-full\" [routerLinkActive]=\"'is-active'\">\n            {{ baseMenuTranslation + menu.menu | i18n }}\n          </a>\n        </li>\n      </ng-container>\n    </ul>\n  </ng-container>\n  <ng-container *ngIf=\"menus$ | async as menus\">\n    <ng-container *ngIf=\"menus.length > 0\">\n      <ul class=\"m-nav-links__list\">\n        <ng-container *ngFor=\"let menu of menus\">\n          <ng-container *ngIf=\"menu.module === 'supervision'\">\n            <li *pryAccess=\"{ module: menu.module, page: menu.page }\" class=\"m-nav-links__list__item\">\n              <a [routerLink]=\"menu.menu\" class=\"a-btn a-btn--secondary -width-full\" [routerLinkActive]=\"'is-active'\">\n                {{ baseMenuTranslation + menu.menu | i18n }}\n              </a>\n            </li>\n          </ng-container>\n        </ng-container>\n      </ul>\n    </ng-container>\n  </ng-container>\n</nav>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "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: "14.0.0", version: "16.2.12", 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 a-btn--secondary -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", "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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 a-btn--secondary -width-full\" [routerLinkActive]=\"'is-active'\">\n            {{ baseMenuTranslation + menu.menu | i18n }}\n          </a>\n        </li>\n      </ng-container>\n    </ul>\n  </ng-container>\n  <ng-container *ngIf=\"menus$ | async as menus\">\n    <ng-container *ngIf=\"menus.length > 0\">\n      <ul class=\"m-nav-links__list\">\n        <ng-container *ngFor=\"let menu of menus\">\n          <ng-container *ngIf=\"menu.module === 'supervision'\">\n            <li *pryAccess=\"{ module: menu.module, page: menu.page }\" class=\"m-nav-links__list__item\">\n              <a [routerLink]=\"menu.menu\" class=\"a-btn a-btn--secondary -width-full\" [routerLinkActive]=\"'is-active'\">\n                {{ baseMenuTranslation + menu.menu | i18n }}\n              </a>\n            </li>\n          </ng-container>\n        </ng-container>\n      </ul>\n    </ng-container>\n  </ng-container>\n</nav>\n" }]
+            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 a-btn--secondary -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" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
 class AdminTitleComponent extends SubscriptionnerDirective {