@provoly/dashboard 1.2.7 → 1.2.9

package/fesm2022/provoly-dashboard-admin.mjs

@@ -13,7 +13,7 @@ import { concatLatestFrom, createEffect, ofType, EffectsModule } from '@ngrx/eff
 import * as i1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, StoreModule } from '@ngrx/store';
 import * as i4 from '@provoly/dashboard';
-import { ClassSelectors, FieldSelectors, FieldType, ClassActions, FieldActions, SubscriptionnerDirective, ConfigSelectors, ConfigActions, DEFAULT_ICON_URL, IconPosition, compareOperationFunctions, ItemUtils, FIELD_OPTIONS, CategoryActions, CategorySelectors, DEFAULT_CATEGORY_UUID, DataSourceActions, DataSourceSelectors, PryDatasetType, ENV_OPTIONS, GeometricFieldTypes, DashboardSelectors, PryShareMode, PRY_ACCESS_TOKEN, META_OPTIONS, RelationTypesSelectors, RelationTypesActions, BaseMenuComponent, BaseLayoutComponent, PRY_ACCESS_GUARD, PryDialogConfirmComponent, PrySortModule, PryIconModule, PryModalModule, PryI18nModule, PryCoreModule, PrySelectModule, PryToggleModule, PryOverlayModule, PryShareModule } from '@provoly/dashboard';
+import { ClassSelectors, FieldSelectors, FieldType, ClassActions, FieldActions, SubscriptionnerDirective, ConfigSelectors, ConfigActions, DEFAULT_ICON_URL, IconPosition, compareOperationFunctions, ItemUtils, CategoryActions, CategorySelectors, DataSourceActions, DataSourceSelectors, FIELD_OPTIONS, DEFAULT_CATEGORY_UUID, PryDatasetType, ENV_OPTIONS, GeometricFieldTypes, DashboardSelectors, PryShareMode, PRY_ACCESS_TOKEN, META_OPTIONS, RelationTypesSelectors, RelationTypesActions, BaseMenuComponent, BaseLayoutComponent, PRY_ACCESS_GUARD, PryDialogConfirmComponent, PrySortModule, PryIconModule, PryModalModule, PryI18nModule, PryCoreModule, PrySelectModule, PryToggleModule, PryOverlayModule, PryShareModule } from '@provoly/dashboard';
 import * as i5$1 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
 import * as i6 from '@provoly/dashboard/components/metadata-editor';
@@ -1436,26 +1436,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
             args: [{ selector: 'pry-admin-classes-new', 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" }]
         }] });
 
+const AdminDatasetActions = {
+    failure: createAction('[Dataset] Failure effect Dataset', props()),
+    create: createAction('[Dataset] Create Dataset', props()),
+    update: createAction('[Dataset] Update Dataset', props()),
+    confirmDatasetDeletion: createAction('[Dataset] Confirm deletion', props()),
+    delete: createAction('[Dataset] Delete Dataset', props()),
+    deleted: createAction('[Dataset] Dataset is deleted call to admin', props()),
+    selectDataset: createAction('[Dataset] Open Dataset details', props()),
+    unselectDataset: createAction('[Dataset] Unselect Dataset'),
+    getDatasetById: createAction('[Dataset] Get Dataset by ID', props()),
+    getDatasetByIdSuccess: createAction('[Dataset] Get Dataset by Id Success', props()),
+    getDatasetByIdFailure: createAction('[Dataset] Get Dataset by Id Failure', props()),
+    openNewDataset: createAction('[Dataset] Open New Dataset', props()),
+    setMissingGroups: createAction('[Dataset] Set Missing Groups', props()),
+    addCategory: createAction('[Dataset] Add Category', props())
+};
+
+class AddCategoryModalComponent {
+    constructor(store) {
+        this.store = store;
+        this.catToAdd = {
+            id: v4(),
+            name: ''
+        };
+        this.search$ = new BehaviorSubject(undefined);
+        this.closeModal = new EventEmitter();
+        this.category = new EventEmitter();
+        this.actions = {
+            attribute: {
+                load: () => this.store.dispatch(CategoryActions.load()),
+                select: () => this.store.select(CategorySelectors.categories),
+                add: (category) => this.store.dispatch(AdminClassActions.saveCategory({ category }))
+            },
+            dataset: {
+                load: () => this.store.dispatch(DataSourceActions.dataset.getCategories()),
+                select: () => this.store.select(DataSourceSelectors.categories),
+                add: (category) => this.store.dispatch(AdminDatasetActions.addCategory({ category }))
+            }
+        };
+    }
+    ngOnInit() {
+        this.loadCategories();
+        this.categories$ = this.selectCategories();
+        this.filteredCategories$ = combineLatest([this.categories$, this.search$]).pipe(map(([categories, search]) => search
+            ? categories.filter((category) => category.name.toLowerCase().includes(search?.toLowerCase()))
+            : categories));
+    }
+    loadCategories() {
+        this.actions[this.entityType].load();
+    }
+    selectCategories() {
+        return this.actions[this.entityType].select();
+    }
+    addCategory() {
+        this.actions[this.entityType].add(this.catToAdd);
+        this.selectCategory(this.catToAdd);
+    }
+    selectCategory(category) {
+        this.category.emit(category);
+        this.closeModal.emit();
+    }
+    search($event) {
+        this.search$.next($event.target.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AddCategoryModalComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", 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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AddCategoryModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-add-category-modal', 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" }]
+        }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { entityType: [{
+                type: Input,
+                args: [{ required: true }]
+            }], closeModal: [{
+                type: Output
+            }], category: [{
+                type: Output
+            }] } });
+
 class AdminAttributesFormComponent extends SubscriptionnerDirective {
-    constructor(store, router, route, formBuilder, overlay, viewContainerRef, i18nService) {
+    constructor(store, router, route, formBuilder, i18nService, dialog) {
         super();
         this.store = store;
         this.router = router;
         this.route = route;
         this.formBuilder = formBuilder;
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
         this.i18nService = i18nService;
+        this.dialog = dialog;
         this.nameAlreadyExists = false;
         this.technicalNameAlreadyExists = false;
         this.fieldTypeDescription = FIELD_OPTIONS;
-        this.isShowedCategory = false;
-        this.catToAdd = {};
-        this.filterCategories$ = new BehaviorSubject(undefined);
         this.store.dispatch(FieldActions.load());
         this.fields$ = this.store.select(FieldSelectors.fields);
         this.store.dispatch(CategoryActions.load());
-        this.categories$ = combineLatest([this.store.select(CategorySelectors.categories), this.filterCategories$]).pipe(map(([categories, filter]) => categories.filter((cat) => !filter || cat.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))));
+        this.categories$ = this.store.select(CategorySelectors.categories);
         this.attrForm = this.formBuilder.group({
             id: [v4()],
             technicalName: [
@@ -1551,53 +1626,28 @@ class AdminAttributesFormComponent extends SubscriptionnerDirective {
             }
         }
     }
-    showCategory() {
-        this.isShowedCategory = true;
-        this.overlayRef = this.overlay.create(new OverlayConfig({
-            hasBackdrop: true,
-            panelClass: ['o-modal-wrapper'],
-            backdropClass: 'backdrop'
+    openModal() {
+        const ref = this.dialog.open(AddCategoryModalComponent);
+        ref.component.entityType = 'attribute';
+        this.subscriptions.add(ref.component.category.subscribe((category) => {
+            this.attrForm.patchValue({
+                categories: category.id
+            });
         }));
-        this.store.dispatch(ConfigActions.addingOverlay({ id: this.constructor.name }));
-        this.overlayRef.backdropClick().subscribe((_) => this.closeCategory());
-        this.overlayRef.attach(new TemplatePortal(this.template, this.viewContainerRef));
-    }
-    closeCategory() {
-        this.isShowedCategory = false;
-        this.catToAdd = {};
-        this.overlayRef?.dispose();
-        this.categories$ = this.store.select(CategorySelectors.categories);
-        this.store.dispatch(ConfigActions.closeOverlay({ id: this.constructor.name }));
-    }
-    search(event) {
-        this.filterCategories$.next(event.target.value);
-    }
-    addCategory() {
-        this.catToAdd.id = v4();
-        this.store.dispatch(AdminClassActions.saveCategory({ category: this.catToAdd }));
-        this.setCategory(this.catToAdd);
-    }
-    setCategory(cat) {
-        this.attrForm.patchValue({
-            category: cat.id
-        });
-        this.closeCategory();
+        this.subscriptions.add(ref.component.closeModal.subscribe(() => ref.close()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminAttributesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i5.Overlay }, { token: i0.ViewContainerRef }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n : { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chip\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n        [attr.data-tooltip]=\"description\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"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--secondary 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", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminAttributesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i4.PryI18nService }, { token: i4.PryDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, usesInheritance: true, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n: { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n: { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n: { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chip\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n        [attr.data-tooltip]=\"description\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"openModal()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminAttributesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-attributes-form', template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n : { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chip\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n        [attr.data-tooltip]=\"description\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"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--secondary 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: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i5.Overlay }, { type: i0.ViewContainerRef }, { type: i4.PryI18nService }], 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    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n: { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n: { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n: { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"u-display-flex\">\n      <pry-select\n        id=\"type\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [template]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chip\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <div\n        *ngIf=\"selectedFieldTypeDescription$ | async as description\"\n        class=\"m-info-icon a-tooltip -tooltip-width-lg u-self-center -flex-shrink-0\"\n        [attr.data-tooltip]=\"description\"\n        data-tooltip-position=\"right\"\n      >\n        <span>i</span>\n      </div>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [items]=\"categories$ | async\"\n      (click)=\"openModal()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i4.PryI18nService }, { type: i4.PryDialogService }], propDecorators: { selectedClass: [{
                 type: Input
             }], interClass: [{
                 type: Input
             }], selectedAttribute: [{
                 type: Input
-            }], template: [{
-                type: ViewChild,
-                args: ['template', { read: TemplateRef }]
             }] } });
 
 class AdminAttributesEditComponent {
@@ -1872,22 +1922,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
             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" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }] });
 
-const AdminDatasetActions = {
-    failure: createAction('[Dataset] failure effect Dataset', props()),
-    create: createAction('[Dataset] create Dataset', props()),
-    update: createAction('[Dataset] update Dataset', props()),
-    confirmDatasetDeletion: createAction('[Dataset] confirm deletion', props()),
-    delete: createAction('[Dataset] delete Dataset', props()),
-    deleted: createAction('[Dataset] Dataset is deleted call to admin', props()),
-    selectDataset: createAction('[Dataset] open Dataset details', props()),
-    unselectDataset: createAction('[Dataset] unselect Dataset'),
-    getDatasetById: createAction('[Dataset] Get Dataset by ID', props()),
-    getDatasetByIdSuccess: createAction('[Dataset] Get Dataset by Id Success', props()),
-    getDatasetByIdFailure: createAction('[Dataset] Get Dataset by Id Failure', props()),
-    openNewDataset: createAction('[Dataset] open new Dataset', props()),
-    setMissingGroups: createAction('[Dataset] set missing groups', props())
-};
-
 const datasetFeatureKey = '@pry/admin/datasets';
 const initialDatasetState = {
     isLoading: false,
@@ -2003,53 +2037,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                 args: ['input']
             }] } });
 
-class AdminFormDatasetComponent {
-    constructor(store, router, route, formBuilder) {
+class AdminFormDatasetComponent extends SubscriptionnerDirective {
+    constructor(store, router, route, formBuilder, dialog) {
+        super();
         this.store = store;
         this.router = router;
         this.route = route;
         this.formBuilder = formBuilder;
+        this.dialog = dialog;
         this.datasetList = [];
         this.datasetTypes = [];
-        this.sub = new Subscription();
         this.isSameName = false;
         this.isSubmitted = false;
         this.store.dispatch(ClassActions.load());
         this.store.dispatch(DataSourceActions.dataset.loadDataset());
+        this.store.dispatch(DataSourceActions.dataset.getCategories());
         this.datasetList$ = this.store.select(DataSourceSelectors.datasets);
-        this.classes = this.store.select(ClassSelectors.classes);
+        this.classes$ = this.store.select(ClassSelectors.classes);
+        this.categories$ = this.store.select(DataSourceSelectors.categories);
         this.form = this.formBuilder.group({
             id: [v4()],
             name: ['', [Validators.required, Validators.maxLength(100)]],
             oClass: ['', [Validators.required]],
             type: ['', [Validators.required]],
-            description: ['', [Validators.maxLength(500)]]
+            description: ['', [Validators.maxLength(500)]],
+            categories: [[]]
         });
     }
     ngOnInit() {
         this.isSameName = false;
-        this.sub = this.datasetList$.subscribe((dataset) => {
+        this.subscriptions.add(this.datasetList$.subscribe((dataset) => {
             this.datasetList = dataset;
-        });
+        }));
         this.datasetTypes = Object.keys(PryDatasetType).map((label) => ({
             label: '@pry.admin.dataset.' + label,
             value: label
         }));
-        this.sub.add(this.dataset$?.subscribe((dataset) => {
+        this.subscriptions.add(this.dataset$?.subscribe((dataset) => {
             if (dataset) {
                 this.form.patchValue({
                     id: dataset.id,
                     name: dataset.name,
                     oClass: dataset.oClass,
                     type: dataset.type,
-                    description: dataset.description
+                    description: dataset.description,
+                    categories: dataset.categories
                 });
+                this.form.controls['oClass'].disable();
+                this.form.controls['type'].disable();
             }
         }));
     }
-    ngOnDestroy() {
-        this.sub.unsubscribe();
-    }
     goBack() {
         this.store.dispatch(AdminActions.routeTo({ path: this.getPath() }));
     }
@@ -2069,23 +2107,35 @@ class AdminFormDatasetComponent {
             this.isSubmitted = false;
             if (this.dataset$) {
                 const path = this.router.createUrlTree(['../..'], { relativeTo: this.route });
-                this.store.dispatch(AdminDatasetActions.update({ dataset: this.form.value, route: path.toString() }));
+                this.store.dispatch(AdminDatasetActions.update({ dataset: this.form.getRawValue(), route: path.toString() }));
                 return;
             }
             const path = this.router.createUrlTree(['..'], { relativeTo: this.route });
             this.isSameName = !!this.datasetList.find((dataset) => this.form.get('name')?.value.toLowerCase() === dataset.name.toLowerCase());
             if (!this.isSameName) {
-                this.store.dispatch(AdminDatasetActions.create({ dataset: this.form.value, route: path.toString() }));
+                this.store.dispatch(AdminDatasetActions.create({ dataset: this.form.getRawValue(), route: path.toString() }));
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminFormDatasetComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: AdminFormDatasetComponent, selector: "pry-admin-form-dataset", inputs: { dataset$: "dataset$" }, ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.dataset.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      id=\"name\"\n      type=\"text\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      (ngModelChange)=\"changeValueName($event)\"\n      [attr.aria-labelledby]=\"isSubmitted && form.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      [attr.aria-invalid]=\"isSubmitted && form.get('name')?.invalid\"\n      required\n    />\n    <label\n      class=\"a-label a-label--help -error\"\n      id=\"name-error\"\n      for=\"name\"\n      *ngIf=\"isSubmitted && form.get('name')?.invalid\"\n      >{{ '@pry.admin.required' | i18n }}</label\n    >\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"description-label\" for=\"description\">{{ '@pry.admin.fields.description' | i18n }}</label>\n    <textarea\n      class=\"-resizable-both\"\n      formControlName=\"description\"\n      name=\"description\"\n      id=\"description\"\n      maxlength=\"500\"\n    ></textarea>\n    <label\n      for=\"description\"\n      *ngIf=\"form.get('description')?.hasError('maxlength')\"\n      class=\"a-label a-label--help -error\"\n    >\n      {{ '@pry.presentation.maxLength' | i18n : { len: '500' } }}\n    </label>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"class\">{{ '@pry.admin.dataset.oClass' | i18n }}</label>\n    <pry-select\n      id=\"class\"\n      formControlName=\"oClass\"\n      [items]=\"classes | async\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      aria-labelledby=\"item-label\"\n      [readonly]=\"!!dataset$\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"type\">{{ '@pry.admin.dataset.type' | i18n }}</label>\n    <pry-select\n      id=\"type\"\n      formControlName=\"type\"\n      [items]=\"datasetTypes\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n      [isForm]=\"true\"\n      aria-labelledby=\"user-label\"\n      [readonly]=\"!!dataset$\"\n    ></pry-select>\n  </div>\n\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameName\">{{ '@pry.admin.dataset.is-same-name' | i18n }}</label>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [innerHTML]=\"(dataset$ ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    openModal() {
+        const ref = this.dialog.open(AddCategoryModalComponent);
+        ref.component.entityType = 'dataset';
+        this.subscriptions.add(ref.component.category.subscribe((category) => {
+            if (!this.form.get('categories')?.value?.some((cat) => cat.id === category.id)) {
+                this.form.patchValue({
+                    categories: [...(this.form.get('categories')?.value ?? []), category]
+                });
+            }
+        }));
+        this.subscriptions.add(ref.component.closeModal.subscribe(() => ref.close()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: 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: "17.1.3", 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", "readonly", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminFormDatasetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-form-dataset', template: "<form class=\"o-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"name-label\" for=\"name\">\n      {{ '@pry.admin.dataset.name' | i18n }} *\n      <span class=\"u-visually-hidden\">({{ '@pry.admin.required' | i18n }})</span>\n    </label>\n    <input\n      id=\"name\"\n      type=\"text\"\n      class=\"a-form-field\"\n      formControlName=\"name\"\n      (ngModelChange)=\"changeValueName($event)\"\n      [attr.aria-labelledby]=\"isSubmitted && form.get('name')?.invalid ? 'name-label name-error' : 'name-label'\"\n      [attr.aria-invalid]=\"isSubmitted && form.get('name')?.invalid\"\n      required\n    />\n    <label\n      class=\"a-label a-label--help -error\"\n      id=\"name-error\"\n      for=\"name\"\n      *ngIf=\"isSubmitted && form.get('name')?.invalid\"\n      >{{ '@pry.admin.required' | i18n }}</label\n    >\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"description-label\" for=\"description\">{{ '@pry.admin.fields.description' | i18n }}</label>\n    <textarea\n      class=\"-resizable-both\"\n      formControlName=\"description\"\n      name=\"description\"\n      id=\"description\"\n      maxlength=\"500\"\n    ></textarea>\n    <label\n      for=\"description\"\n      *ngIf=\"form.get('description')?.hasError('maxlength')\"\n      class=\"a-label a-label--help -error\"\n    >\n      {{ '@pry.presentation.maxLength' | i18n : { len: '500' } }}\n    </label>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"item-label\" for=\"class\">{{ '@pry.admin.dataset.oClass' | i18n }}</label>\n    <pry-select\n      id=\"class\"\n      formControlName=\"oClass\"\n      [items]=\"classes | async\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      aria-labelledby=\"item-label\"\n      [readonly]=\"!!dataset$\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" id=\"user-label\" for=\"type\">{{ '@pry.admin.dataset.type' | i18n }}</label>\n    <pry-select\n      id=\"type\"\n      formControlName=\"type\"\n      [items]=\"datasetTypes\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n      [isForm]=\"true\"\n      aria-labelledby=\"user-label\"\n      [readonly]=\"!!dataset$\"\n    ></pry-select>\n  </div>\n\n  <label class=\"a-label a-label--help -error\" *ngIf=\"isSameName\">{{ '@pry.admin.dataset.is-same-name' | i18n }}</label>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [innerHTML]=\"(dataset$ ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }], propDecorators: { dataset$: [{
+            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$: [{
                 type: Input
             }] } });
 
@@ -2960,11 +3010,11 @@ class AdminSelectDatasetComponent extends SubscriptionnerDirective {
         return this.access ? this.access.canModifyDataset(dataset) : of(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminSelectDatasetComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i4.PryI18nService }, { token: PRY_ACCESS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", 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.details' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\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 #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.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.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", 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.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", 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.details' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\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 #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" }]
+            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: i4.PryBaseAccess, decorators: [{
                     type: Optional
                 }, {
@@ -6075,7 +6125,8 @@ const enTranslations = {
                 conflict: 'Careful, the following dashboards are shared to groups which can no longer access this datasource:',
                 entities: {
                     dashboard: 'Dashboard'
-                }
+                },
+                addTag: 'Add a new tag'
             },
             'abac-rules': {
                 delete: 'Delete',
@@ -6168,16 +6219,9 @@ const enTranslations = {
                     info: 'Attribute information',
                     description: 'Description',
                     field: 'Field',
+                    dfield: 'Field',
                     category: 'Category',
                     multiValued: 'Multi valued'
-                },
-                category: {
-                    select: 'Select category',
-                    searchOrCreate: 'Search for existing category OR create a new one',
-                    name: 'Category',
-                    selectIt: 'Select category',
-                    create: 'Create category',
-                    add: 'does not exist. <br>You can create it here. <br>It will be automatically selected and added to categories list.'
                 }
             },
             fields: {
@@ -6282,6 +6326,27 @@ const enTranslations = {
                     POSTGIS: 'PostGIS',
                     ELASTIC: 'ElasticSearch'
                 }
+            },
+            shared: {
+                noCategories: 'No categories available',
+                categoryModal: {
+                    dataset: {
+                        select: 'Select tag',
+                        searchOrCreate: 'Search for existing tag OR create a new one',
+                        name: 'Tag',
+                        selectIt: 'Select tag',
+                        create: 'Create tag',
+                        add: 'does not exist. <br>You can create it here. <br>It will be automatically selected and added to the tag list.'
+                    },
+                    attribute: {
+                        select: 'Select category',
+                        searchOrCreate: 'Search for existing category OR create a new one',
+                        name: 'Category',
+                        selectIt: 'Select category',
+                        create: 'Create category',
+                        add: 'does not exist. <br>You can create it here. <br>It will be automatically selected and added to the category list.'
+                    }
+                }
             }
         },
         tooltip: {
@@ -6431,7 +6496,8 @@ const frTranslations = {
             dataset: {
                 delete: "L'ensemble des versions et des données associées seront supprimées. Les restitutions et présentations utilisant ce jeu de données n'afficheront plus les données correspondantes. Confirmez-vous la suppression ?",
                 title: 'Jeux de données',
-                details: 'Détails du jeu de données',
+                details: 'Détails',
+                datasetDetails: 'Détails du jeu de données',
                 id: 'Identifiant',
                 name: 'Nom',
                 oClass: 'Modèle métier',
@@ -6450,7 +6516,8 @@ const frTranslations = {
                 conflict: "Attention, les tableaux de bord suivants sont partagés à des groupes qui n'auront plus accès aux données :",
                 entities: {
                     dashboard: 'Tableaux de bord'
-                }
+                },
+                addTag: 'Ajouter un noueau tag'
             },
             'abac-rules': {
                 delete: 'Supprimer',
@@ -6546,14 +6613,6 @@ const frTranslations = {
                     field: 'Type',
                     category: 'Catégorie',
                     multiValued: 'Multi valué'
-                },
-                category: {
-                    select: 'Sélectionner une catégorie',
-                    searchOrCreate: 'Rechercher une catégorie existante OU en créer une nouvelle',
-                    name: 'Catégorie',
-                    selectIt: 'Sélectionner la catégorie',
-                    create: 'Créer la catégorie',
-                    add: "n'existe pas encore. <br>Il est possible \n de la créer ici. <br>Elle sera automatiquement sélectionnée et ajoutée à la liste des catégories."
                 }
             },
             fields: {
@@ -6659,6 +6718,27 @@ const frTranslations = {
                     POSTGIS: 'PostGIS',
                     ELASTIC: 'ElasticSearch'
                 }
+            },
+            shared: {
+                categoryModal: {
+                    noCategories: "Aucune catégorie n'a été créée pour le moment",
+                    dataset: {
+                        select: 'Sélectionner un tag',
+                        searchOrCreate: 'Rechercher un tag existant OU en créer un nouveau',
+                        name: 'Tag',
+                        selectIt: 'Sélectionner le tag',
+                        create: 'Créer le tag',
+                        add: "n'existe pas encore. <br>Il est possible \n de le créer ici. <br>Il sera automatiquement sélectionné et ajouté à la liste des tags."
+                    },
+                    attribute: {
+                        select: 'Sélectionner une catégorie',
+                        searchOrCreate: 'Rechercher une catégorie existante OU en créer une nouvelle',
+                        name: 'Catégorie',
+                        selectIt: 'Sélectionner la catégorie',
+                        create: 'Créer la catégorie',
+                        add: "n'existe pas encore. <br>Il est possible \n de la créer ici. <br>Elle sera automatiquement sélectionnée et ajoutée à la liste des catégories."
+                    }
+                }
             }
         },
         tooltip: {
@@ -6730,9 +6810,10 @@ class AdminDatasetService {
             .pipe(mergeMap((url) => this.httpClient.post(encodeURI(`${url}/datasets`), dataset)));
     }
     updateDataset(dataset) {
-        return this.store
-            .select(ConfigSelectors.refUrl)
-            .pipe(mergeMap((url) => this.httpClient.put(encodeURI(`${url}/datasets`), dataset)));
+        return this.store.select(ConfigSelectors.refUrl).pipe(mergeMap((url) => this.httpClient.put(encodeURI(`${url}/datasets`), {
+            ...dataset,
+            categories: dataset.categories?.map((category) => category.id)
+        })));
     }
     deleteDataset(id) {
         return this.store
@@ -6759,6 +6840,11 @@ class AdminDatasetService {
             .select(ConfigSelectors.refUrl)
             .pipe(mergeMap((url) => this.httpClient.delete(encodeURI(`${url}/datasets/id/${datasetId}/metadata/id/${metadataId}`))));
     }
+    addCategory(category) {
+        return this.store
+            .select(ConfigSelectors.refUrl)
+            .pipe(mergeMap((url) => this.httpClient.put(encodeURI(`${url}/datasets/categories`), { ...category })));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminDatasetService, deps: [{ token: i1.Store }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminDatasetService, providedIn: 'root' }); }
 }
@@ -6853,6 +6939,7 @@ class AdminDatasetEffects {
                 DataSourceActions.dataset.loadDataset()
             ];
         })));
+        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: "17.1.3", ngImport: i0, type: AdminDatasetEffects, deps: [{ token: i1$2.Actions }, { token: AdminDatasetService }, { token: i4.PryDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: AdminDatasetEffects }); }
@@ -6940,7 +7027,8 @@ class PryAdminModule {
             AdminClassesCustomizeComponent,
             AdminClassesCustomizeTooltipComponent,
             AdminClassesCustomizeSymbolComponent,
-            PryAssociationComponent], imports: [CommonModule,
+            PryAssociationComponent,
+            AddCategoryModalComponent], imports: [CommonModule,
             PryCoreModule,
             AdminRoutingModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1.StoreFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, i1$2.EffectsFeatureModule, PryIconModule,
             FormsModule,
@@ -7079,7 +7167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                         AdminClassesCustomizeComponent,
                         AdminClassesCustomizeTooltipComponent,
                         AdminClassesCustomizeSymbolComponent,
-                        PryAssociationComponent
+                        PryAssociationComponent,
+                        AddCategoryModalComponent
                     ],
                     imports: [
                         CommonModule,