@provoly/dashboard 0.13.10 → 0.13.12

package/fesm2022/provoly-dashboard-admin.mjs

@@ -1,4 +1,4 @@
-import * as i4$1 from '@angular/cdk/drag-drop';
+import * as i5$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i5 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
@@ -16,7 +16,7 @@ import * as i4 from '@provoly/dashboard';
 import { ClassSelectors, FieldSelectors, FieldType, ClassActions, FieldActions, SubscriptionnerDirective, ConfigSelectors, ConfigActions, DEFAULT_ICON_URL, IconPosition, compareOperationFunctions, ItemUtils, CategoryActions, CategorySelectors, DEFAULT_CATEGORY_UUID, DataSourceActions, DataSourceSelectors, PryDatasetType, ENV_OPTIONS, FIELD_OPTIONS, META_OPTIONS, RelationTypesSelectors, RelationTypesActions, BaseMenuComponent, BaseLayoutComponent, PRY_ACCESS_GUARD, PryDialogConfirmComponent, PrySortModule, PryIconModule, PryModalModule, PryI18nModule, PryCoreModule, PrySelectModule, PryToggleModule, PryOverlayModule } from '@provoly/dashboard';
 import * as i5$1 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
-import * as i5$2 from '@provoly/dashboard/components/metadata-editor';
+import * as i5$3 from '@provoly/dashboard/components/metadata-editor';
 import { MetadataSelectors, MetadataActions, PryExpandPanelModule } from '@provoly/dashboard/components/metadata-editor';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -1048,7 +1048,6 @@ class AdminClassesCustomizeTooltipComponent extends SubscriptionnerDirective {
         this.store = store;
         this.currentClassConfig = { type: 'default' };
         this.advancedTooltip = false;
-        this.attributesForTooltip = [];
         this.possibleAttributes = [];
         this.possibleNonAttributesFields = [
             {
@@ -1131,11 +1130,11 @@ class AdminClassesCustomizeTooltipComponent extends SubscriptionnerDirective {
         this.currentClassConfig.options.attributes = $event;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminClassesCustomizeTooltipComponent, deps: [{ token: i4.TooltipFactoryService }, { token: i0.Injector }, { token: i4.PryI18nService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: { currentClass: "currentClass" }, outputs: { backPressed: "backPressed" }, viewQueries: [{ propertyName: "example", first: true, predicate: ["example"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div>\n  <div class=\"m-form-label-field -width-xl\">\n    <label class=\"a-label\" for=\"tooltip_type\">{{ '@pry.admin.customize.type' | i18n }}</label>\n    <pry-select\n      id=\"tooltip_type\"\n      class=\"a-pry-select\"\n      (ngModelChange)=\"tooltipTypeChanged($event)\"\n      [ngModel]=\"currentClassConfig.type\"\n      [items]=\"possibleTooltipTypes$ | async\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n      [labelTranslate]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div>\n    <pry-checkbox [(ngModel)]=\"advancedTooltip\">{{ '@pry.admin.customize.advanced' | i18n }}</pry-checkbox>\n  </div>\n\n  <ng-container *ngIf=\"!advancedTooltip && currentClassConfig.type === 'attribute'\">\n    <label class=\"a-label\" for=\"customize_simplified\">{{ '@pry.admin.customize.simplified' | i18n }}</label>\n    <pry-select\n      id=\"customize_simplified\"\n      class=\"a-pry-select\"\n      (ngModelChange)=\"changeAttributes($event)\"\n      [ngModel]=\"currentClassConfig.options.attributes\"\n      [itemsAsOption]=\"true\"\n      [items]=\"possibleAttributes\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"name\"\n    ></pry-select>\n  </ng-container>\n\n  <ng-container *ngIf=\"advancedTooltip\">\n    <textarea\n      cols=\"100\"\n      rows=\"15\"\n      class=\"a-form-field\"\n      [(ngModel)]=\"strOptions\"\n      (focusout)=\"optionsChanged()\"\n    ></textarea>\n  </ng-container>\n</div>\n\n<div class=\"m-tooltip m-tooltip--example\" [class.-hidden]=\"noTooltip\">\n  <div #example></div>\n</div>\n\n<div class=\"m-btn-group -width-md\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTemplate()\">\n    {{ '@pry.admin.customize.update' | i18n }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: { currentClass: "currentClass" }, outputs: { backPressed: "backPressed" }, viewQueries: [{ propertyName: "example", first: true, predicate: ["example"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<div>\n  <div class=\"m-form-label-field -width-xl\">\n    <label class=\"a-label\" for=\"tooltip_type\">{{ '@pry.admin.customize.type' | i18n }}</label>\n    <pry-select\n      id=\"tooltip_type\"\n      class=\"a-pry-select\"\n      (ngModelChange)=\"tooltipTypeChanged($event)\"\n      [ngModel]=\"currentClassConfig.type\"\n      [items]=\"possibleTooltipTypes$ | async\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n    ></pry-select>\n  </div>\n\n  <div>\n    <pry-checkbox [(ngModel)]=\"advancedTooltip\">{{ '@pry.admin.customize.advanced' | i18n }}</pry-checkbox>\n  </div>\n\n  <ng-container *ngIf=\"!advancedTooltip && currentClassConfig.type === 'attribute'\">\n    <label class=\"a-label\" for=\"customize_simplified\">{{ '@pry.admin.customize.simplified' | i18n }}</label>\n    <pry-select\n      id=\"customize_simplified\"\n      class=\"a-pry-select\"\n      (ngModelChange)=\"changeAttributes($event)\"\n      [ngModel]=\"currentClassConfig.options.attributes\"\n      [itemsAsOption]=\"true\"\n      [items]=\"possibleAttributes\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"name\"\n    ></pry-select>\n  </ng-container>\n\n  <ng-container *ngIf=\"advancedTooltip\">\n    <textarea\n      cols=\"100\"\n      rows=\"15\"\n      class=\"a-form-field\"\n      [(ngModel)]=\"strOptions\"\n      (focusout)=\"optionsChanged()\"\n    ></textarea>\n  </ng-container>\n</div>\n\n<div class=\"m-tooltip m-tooltip--example\" [class.-hidden]=\"noTooltip\">\n  <div #example></div>\n</div>\n\n<div class=\"m-btn-group -width-md\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTemplate()\">\n    {{ '@pry.admin.customize.update' | i18n }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminClassesCustomizeTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-customize-tooltip', template: "<div>\n  <div class=\"m-form-label-field -width-xl\">\n    <label class=\"a-label\" for=\"tooltip_type\">{{ '@pry.admin.customize.type' | i18n }}</label>\n    <pry-select\n      id=\"tooltip_type\"\n      class=\"a-pry-select\"\n      (ngModelChange)=\"tooltipTypeChanged($event)\"\n      [ngModel]=\"currentClassConfig.type\"\n      [items]=\"possibleTooltipTypes$ | async\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n      [labelTranslate]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div>\n    <pry-checkbox [(ngModel)]=\"advancedTooltip\">{{ '@pry.admin.customize.advanced' | i18n }}</pry-checkbox>\n  </div>\n\n  <ng-container *ngIf=\"!advancedTooltip && currentClassConfig.type === 'attribute'\">\n    <label class=\"a-label\" for=\"customize_simplified\">{{ '@pry.admin.customize.simplified' | i18n }}</label>\n    <pry-select\n      id=\"customize_simplified\"\n      class=\"a-pry-select\"\n      (ngModelChange)=\"changeAttributes($event)\"\n      [ngModel]=\"currentClassConfig.options.attributes\"\n      [itemsAsOption]=\"true\"\n      [items]=\"possibleAttributes\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"name\"\n    ></pry-select>\n  </ng-container>\n\n  <ng-container *ngIf=\"advancedTooltip\">\n    <textarea\n      cols=\"100\"\n      rows=\"15\"\n      class=\"a-form-field\"\n      [(ngModel)]=\"strOptions\"\n      (focusout)=\"optionsChanged()\"\n    ></textarea>\n  </ng-container>\n</div>\n\n<div class=\"m-tooltip m-tooltip--example\" [class.-hidden]=\"noTooltip\">\n  <div #example></div>\n</div>\n\n<div class=\"m-btn-group -width-md\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTemplate()\">\n    {{ '@pry.admin.customize.update' | i18n }}\n  </button>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-classes-customize-tooltip', template: "<div>\n  <div class=\"m-form-label-field -width-xl\">\n    <label class=\"a-label\" for=\"tooltip_type\">{{ '@pry.admin.customize.type' | i18n }}</label>\n    <pry-select\n      id=\"tooltip_type\"\n      class=\"a-pry-select\"\n      (ngModelChange)=\"tooltipTypeChanged($event)\"\n      [ngModel]=\"currentClassConfig.type\"\n      [items]=\"possibleTooltipTypes$ | async\"\n      [itemsAsOption]=\"true\"\n      bindValue=\"value\"\n      bindLabel=\"label\"\n    ></pry-select>\n  </div>\n\n  <div>\n    <pry-checkbox [(ngModel)]=\"advancedTooltip\">{{ '@pry.admin.customize.advanced' | i18n }}</pry-checkbox>\n  </div>\n\n  <ng-container *ngIf=\"!advancedTooltip && currentClassConfig.type === 'attribute'\">\n    <label class=\"a-label\" for=\"customize_simplified\">{{ '@pry.admin.customize.simplified' | i18n }}</label>\n    <pry-select\n      id=\"customize_simplified\"\n      class=\"a-pry-select\"\n      (ngModelChange)=\"changeAttributes($event)\"\n      [ngModel]=\"currentClassConfig.options.attributes\"\n      [itemsAsOption]=\"true\"\n      [items]=\"possibleAttributes\"\n      [multiple]=\"true\"\n      [closeOnSelect]=\"false\"\n      bindLabel=\"name\"\n      bindValue=\"name\"\n    ></pry-select>\n  </ng-container>\n\n  <ng-container *ngIf=\"advancedTooltip\">\n    <textarea\n      cols=\"100\"\n      rows=\"15\"\n      class=\"a-form-field\"\n      [(ngModel)]=\"strOptions\"\n      (focusout)=\"optionsChanged()\"\n    ></textarea>\n  </ng-container>\n</div>\n\n<div class=\"m-tooltip m-tooltip--example\" [class.-hidden]=\"noTooltip\">\n  <div #example></div>\n</div>\n\n<div class=\"m-btn-group -width-md\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTemplate()\">\n    {{ '@pry.admin.customize.update' | i18n }}\n  </button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i4.TooltipFactoryService }, { type: i0.Injector }, { type: i4.PryI18nService }, { type: i1.Store }]; }, propDecorators: { example: [{
                 type: ViewChild,
                 args: ['example', { read: ViewContainerRef }]
@@ -1270,11 +1269,11 @@ class AdminClassesCustomizeSymbolComponent extends SubscriptionnerDirective {
         this.store.dispatch(ConfigActions.updateIcons({ definitions: { [this.currentClass?.id ?? '']: this.definitions } }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminClassesCustomizeSymbolComponent, deps: [{ token: i4.PryI18nService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: { currentClass: "currentClass" }, outputs: { backPressed: "backPressed" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"m-rule-wrapper\">\n  <li\n    *ngFor=\"let definition of definitions; let i = index\"\n    [class.m-rule--default]=\"definition.isDefault\"\n    class=\"m-rule\"\n  >\n    <div class=\"m-rule__header\">\n      <h3 class=\"a-h3\">\n        {{ '@pry.admin.rule' | i18n: { id: i + 1 } }}\n        <span>{{ definition.isDefault ? ('@pry.admin.defaultRule' | i18n) : '' }}</span>\n      </h3>\n\n      <div *ngIf=\"!definition.isDefault\" class=\"m-rule__actions\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i <= 1\"\n          [disabled]=\"i <= 1\"\n          (click)=\"move(i, i - 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_haut\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i >= definitions.length - 1\"\n          [disabled]=\"i >= definitions.length - 1\"\n          (click)=\"move(i, i + 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_bas\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"removeRule(i)\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <div>\n      <pry-select-image [iconUrl]=\"definition.iconUrl\" (changed)=\"changeForImage($event, i)\"></pry-select-image>\n\n      <ng-container *ngIf=\"definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"size\">{{ '@pry.admin.size' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeSize($event)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"sizes\"\n            [ngModel]=\"definition.iconSize[0]\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\n            id=\"size\"\n          ></pry-select>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"display_mode\">{{ '@pry.admin.displayModeImage' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changePosition($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"positions\"\n            [ngModel]=\"definition.position\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\n            id=\"display_mode\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <pry-checkbox [ngModel]=\"!!definition.rule\" (click)=\"toggleRule(i)\">{{\n            '@pry.admin.classes.condition' | i18n\n          }}</pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div *ngIf=\"!!definition.rule && !definition.isDefault\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_attrname\">{{ '@pry.admin.classes.attrName' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeAttrName($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"fieldsForClass\"\n            [ngModel]=\"definition.rule.attributeName\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"name\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\n            id=\"classes_attrname\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_operation\">{{ '@pry.admin.classes.operation' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeOperation($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"operations\"\n            [ngModel]=\"definition.rule.operation\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\n            id=\"classes_operation\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_value\">{{ '@pry.admin.classes.value' | i18n }}</label>\n          <input\n            id=\"classes_value\"\n            type=\"text\"\n            class=\"a-form-field\"\n            (ngModelChange)=\"changeValue($event, i)\"\n            [ngModel]=\"definition.rule.value\"\n          />\n        </div>\n      </div>\n    </div>\n  </li>\n</ul>\n\n<button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"addRule()\">\n  <pry-icon iconSvg=\"add\"></pry-icon>\n  Ajouter une r\u00E8gle\n</button>\n\n<div class=\"m-btn-group -width-lg\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"restoreSymbols(); goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button\n    class=\"a-btn a-btn--primary\"\n    [innerHTML]=\"'@pry.admin.customize.updateIcons' | i18n\"\n    (click)=\"valid()\"\n  ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: { currentClass: "currentClass" }, outputs: { backPressed: "backPressed" }, usesInheritance: true, ngImport: i0, template: "<ul class=\"m-rule-wrapper\">\n  <li\n    *ngFor=\"let definition of definitions; let i = index\"\n    [class.m-rule--default]=\"definition.isDefault\"\n    class=\"m-rule\"\n  >\n    <div class=\"m-rule__header\">\n      <h3 class=\"a-h3\">\n        {{ '@pry.admin.rule' | i18n : { id: i + 1 } }}\n        <span>{{ definition.isDefault ? ('@pry.admin.defaultRule' | i18n) : '' }}</span>\n      </h3>\n\n      <div *ngIf=\"!definition.isDefault\" class=\"m-rule__actions\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i <= 1\"\n          [disabled]=\"i <= 1\"\n          (click)=\"move(i, i - 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_haut\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i >= definitions.length - 1\"\n          [disabled]=\"i >= definitions.length - 1\"\n          (click)=\"move(i, i + 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_bas\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"removeRule(i)\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <div>\n      <pry-select-image [iconUrl]=\"definition.iconUrl\" (changed)=\"changeForImage($event, i)\"></pry-select-image>\n\n      <ng-container *ngIf=\"definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"size\">{{ '@pry.admin.size' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeSize($event)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"sizes\"\n            [ngModel]=\"definition.iconSize[0]\"\n            [labelTranslate]=\"false\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\n            id=\"size\"\n          ></pry-select>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"display_mode\">{{ '@pry.admin.displayModeImage' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changePosition($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"positions\"\n            [ngModel]=\"definition.position\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\n            id=\"display_mode\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <pry-checkbox [ngModel]=\"!!definition.rule\" (click)=\"toggleRule(i)\">{{\n            '@pry.admin.classes.condition' | i18n\n          }}</pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div *ngIf=\"!!definition.rule && !definition.isDefault\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_attrname\">{{ '@pry.admin.classes.attrName' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeAttrName($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"fieldsForClass\"\n            [ngModel]=\"definition.rule.attributeName\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"name\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\n            id=\"classes_attrname\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_operation\">{{ '@pry.admin.classes.operation' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeOperation($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"operations\"\n            [ngModel]=\"definition.rule.operation\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\n            id=\"classes_operation\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_value\">{{ '@pry.admin.classes.value' | i18n }}</label>\n          <input\n            id=\"classes_value\"\n            type=\"text\"\n            class=\"a-form-field\"\n            (ngModelChange)=\"changeValue($event, i)\"\n            [ngModel]=\"definition.rule.value\"\n          />\n        </div>\n      </div>\n    </div>\n  </li>\n</ul>\n\n<button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"addRule()\">\n  <pry-icon iconSvg=\"add\"></pry-icon>\n  Ajouter une r\u00E8gle\n</button>\n\n<div class=\"m-btn-group -width-lg\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"restoreSymbols(); goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button\n    class=\"a-btn a-btn--primary\"\n    [innerHTML]=\"'@pry.admin.customize.updateIcons' | i18n\"\n    (click)=\"valid()\"\n  ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PrySelectImageComponent, selector: "pry-select-image", inputs: ["iconUrl", "size", "mode"], outputs: ["toggled", "changed"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminClassesCustomizeSymbolComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-customize-symbol', template: "<ul class=\"m-rule-wrapper\">\n  <li\n    *ngFor=\"let definition of definitions; let i = index\"\n    [class.m-rule--default]=\"definition.isDefault\"\n    class=\"m-rule\"\n  >\n    <div class=\"m-rule__header\">\n      <h3 class=\"a-h3\">\n        {{ '@pry.admin.rule' | i18n: { id: i + 1 } }}\n        <span>{{ definition.isDefault ? ('@pry.admin.defaultRule' | i18n) : '' }}</span>\n      </h3>\n\n      <div *ngIf=\"!definition.isDefault\" class=\"m-rule__actions\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i <= 1\"\n          [disabled]=\"i <= 1\"\n          (click)=\"move(i, i - 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_haut\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i >= definitions.length - 1\"\n          [disabled]=\"i >= definitions.length - 1\"\n          (click)=\"move(i, i + 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_bas\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"removeRule(i)\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <div>\n      <pry-select-image [iconUrl]=\"definition.iconUrl\" (changed)=\"changeForImage($event, i)\"></pry-select-image>\n\n      <ng-container *ngIf=\"definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"size\">{{ '@pry.admin.size' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeSize($event)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"sizes\"\n            [ngModel]=\"definition.iconSize[0]\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\n            id=\"size\"\n          ></pry-select>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"display_mode\">{{ '@pry.admin.displayModeImage' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changePosition($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"positions\"\n            [ngModel]=\"definition.position\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\n            id=\"display_mode\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <pry-checkbox [ngModel]=\"!!definition.rule\" (click)=\"toggleRule(i)\">{{\n            '@pry.admin.classes.condition' | i18n\n          }}</pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div *ngIf=\"!!definition.rule && !definition.isDefault\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_attrname\">{{ '@pry.admin.classes.attrName' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeAttrName($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"fieldsForClass\"\n            [ngModel]=\"definition.rule.attributeName\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"name\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\n            id=\"classes_attrname\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_operation\">{{ '@pry.admin.classes.operation' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeOperation($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"operations\"\n            [ngModel]=\"definition.rule.operation\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\n            id=\"classes_operation\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_value\">{{ '@pry.admin.classes.value' | i18n }}</label>\n          <input\n            id=\"classes_value\"\n            type=\"text\"\n            class=\"a-form-field\"\n            (ngModelChange)=\"changeValue($event, i)\"\n            [ngModel]=\"definition.rule.value\"\n          />\n        </div>\n      </div>\n    </div>\n  </li>\n</ul>\n\n<button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"addRule()\">\n  <pry-icon iconSvg=\"add\"></pry-icon>\n  Ajouter une r\u00E8gle\n</button>\n\n<div class=\"m-btn-group -width-lg\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"restoreSymbols(); goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button\n    class=\"a-btn a-btn--primary\"\n    [innerHTML]=\"'@pry.admin.customize.updateIcons' | i18n\"\n    (click)=\"valid()\"\n  ></button>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-classes-customize-symbol', template: "<ul class=\"m-rule-wrapper\">\n  <li\n    *ngFor=\"let definition of definitions; let i = index\"\n    [class.m-rule--default]=\"definition.isDefault\"\n    class=\"m-rule\"\n  >\n    <div class=\"m-rule__header\">\n      <h3 class=\"a-h3\">\n        {{ '@pry.admin.rule' | i18n : { id: i + 1 } }}\n        <span>{{ definition.isDefault ? ('@pry.admin.defaultRule' | i18n) : '' }}</span>\n      </h3>\n\n      <div *ngIf=\"!definition.isDefault\" class=\"m-rule__actions\">\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i <= 1\"\n          [disabled]=\"i <= 1\"\n          (click)=\"move(i, i - 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_haut\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveUp' | i18n }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"a-btn a-btn--icon-only\"\n          [class.-disabled]=\"i >= definitions.length - 1\"\n          [disabled]=\"i >= definitions.length - 1\"\n          (click)=\"move(i, i + 1)\"\n        >\n          <pry-icon [height]=\"25\" [width]=\"25\" iconSvg=\"fleche_bas\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.moveDown' | i18n }}</span>\n        </button>\n        <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"removeRule(i)\">\n          <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"delete\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.action.delete' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n\n    <div>\n      <pry-select-image [iconUrl]=\"definition.iconUrl\" (changed)=\"changeForImage($event, i)\"></pry-select-image>\n\n      <ng-container *ngIf=\"definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"size\">{{ '@pry.admin.size' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeSize($event)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"sizes\"\n            [ngModel]=\"definition.iconSize[0]\"\n            [labelTranslate]=\"false\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\n            id=\"size\"\n          ></pry-select>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!definition.isDefault\">\n        <div class=\"m-form-label-field m-rule__display-mode\">\n          <label class=\"a-label\" for=\"display_mode\">{{ '@pry.admin.displayModeImage' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changePosition($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"positions\"\n            [ngModel]=\"definition.position\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"a-pry-select\"\n            id=\"display_mode\"\n          ></pry-select>\n        </div>\n        <div class=\"m-form-label-field\">\n          <pry-checkbox [ngModel]=\"!!definition.rule\" (click)=\"toggleRule(i)\">{{\n            '@pry.admin.classes.condition' | i18n\n          }}</pry-checkbox>\n        </div>\n      </ng-container>\n\n      <div *ngIf=\"!!definition.rule && !definition.isDefault\">\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_attrname\">{{ '@pry.admin.classes.attrName' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeAttrName($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"fieldsForClass\"\n            [ngModel]=\"definition.rule.attributeName\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"name\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\n            id=\"classes_attrname\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_operation\">{{ '@pry.admin.classes.operation' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeOperation($event, i)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"operations\"\n            [ngModel]=\"definition.rule.operation\"\n            [labelTranslate]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"name\"\n            class=\"a-pry-select\"\n            id=\"classes_operation\"\n          ></pry-select>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"classes_value\">{{ '@pry.admin.classes.value' | i18n }}</label>\n          <input\n            id=\"classes_value\"\n            type=\"text\"\n            class=\"a-form-field\"\n            (ngModelChange)=\"changeValue($event, i)\"\n            [ngModel]=\"definition.rule.value\"\n          />\n        </div>\n      </div>\n    </div>\n  </li>\n</ul>\n\n<button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"addRule()\">\n  <pry-icon iconSvg=\"add\"></pry-icon>\n  Ajouter une r\u00E8gle\n</button>\n\n<div class=\"m-btn-group -width-lg\">\n  <button\n    type=\"button\"\n    class=\"a-btn a-btn--secondary\"\n    (click)=\"restoreSymbols(); goBack()\"\n    [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n  ></button>\n  <button\n    class=\"a-btn a-btn--primary\"\n    [innerHTML]=\"'@pry.admin.customize.updateIcons' | i18n\"\n    (click)=\"valid()\"\n  ></button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i4.PryI18nService }, { type: i1.Store }]; }, propDecorators: { backPressed: [{
                 type: Output
             }], currentClass: [{
@@ -1290,9 +1289,7 @@ class AdminClassesCustomizeComponent extends SubscriptionnerDirective {
         this.currentClass = {};
         this.defaultAttributes = [];
         this.otherAttributes = [];
-        this.currentRuleModifiedIndex = -1;
         this.classes$ = of([]);
-        this.tab = 0;
         this.defaultTileAttributes = [];
         this.otherTileAttributes = [];
         this.maxTilesAttributes = 5;
@@ -1352,11 +1349,11 @@ class AdminClassesCustomizeComponent extends SubscriptionnerDirective {
         return this.defaultTileAttributes.length > 0 && this.defaultTileAttributes.length <= this.maxTilesAttributes;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminClassesCustomizeComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminClassesCustomizeComponent, selector: "pry-admin-classes-customize", usesInheritance: true, ngImport: i0, template: "<div class=\"o-pry-admin-classes-customize\">\n  <h1 class=\"a-h1\" id=\"tab-custo\">{{ '@pry.admin.customize.title' | i18n }}</h1>\n\n  <div class=\"o-tabs\">\n    <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-custo'\">\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-custo-btn-0'\"\n        [attr.aria-selected]=\"tab === 0\"\n        [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n        [attr.aria-controls]=\"'tab-custo-pnl-0'\"\n        (click)=\"tab = 0\"\n      >\n        {{ '@pry.admin.customize.template' | i18n }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-custo-btn-1'\"\n        [attr.aria-selected]=\"tab === 1\"\n        [attr.tabindex]=\"tab === 1 ? 0 : -1\"\n        [attr.aria-controls]=\"'tab-custo-pnl-1'\"\n        (click)=\"tab = 1\"\n      >\n        {{ '@pry.admin.customize.table' | i18n }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-custo-btn-2'\"\n        [attr.aria-selected]=\"tab === 2\"\n        [attr.tabindex]=\"tab === 2 ? 0 : -1\"\n        [attr.aria-controls]=\"'tab-custo-pnl-2'\"\n        (click)=\"tab = 2\"\n      >\n        {{ '@pry.admin.classes.rules' | i18n }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-custo-btn-3'\"\n        [attr.aria-selected]=\"tab === 3\"\n        [attr.tabindex]=\"tab === 3 ? 0 : -1\"\n        [attr.aria-controls]=\"'tab-custo-pnl-3'\"\n        (click)=\"tab = 3\"\n      >\n        {{ '@pry.admin.customize.tile' | i18n }}\n      </button>\n    </div>\n\n    <div class=\"o-tabs__panels\">\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 0\"\n        [id]=\"'tab-custo-pnl-0'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-custo-btn-0'\"\n        tabindex=\"0\"\n      >\n        <pry-admin-classes-customize-tooltip\n          (backPressed)=\"goBack()\"\n          [currentClass]=\"currentClass$ | async\"\n        ></pry-admin-classes-customize-tooltip>\n      </div>\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 1\"\n        [id]=\"'tab-custo-pnl-1'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-custo-btn-1'\"\n        tabindex=\"0\"\n      >\n        <div class=\"container\">\n          <h2>{{ '@pry.admin.customize.tableAttrs' | i18n }}</h2>\n\n          <div\n            cdkDropList\n            #defaultList=\"cdkDropList\"\n            [cdkDropListData]=\"defaultAttributes\"\n            [cdkDropListConnectedTo]=\"[notDefaultList]\"\n            class=\"list\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <div class=\"item\" *ngFor=\"let item of defaultAttributes\" cdkDrag>{{ item }}</div>\n          </div>\n        </div>\n\n        <div class=\"container\">\n          <h2>{{ '@pry.admin.customize.noTableAttrs' | i18n }}</h2>\n\n          <div\n            cdkDropList\n            #notDefaultList=\"cdkDropList\"\n            [cdkDropListData]=\"otherAttributes\"\n            [cdkDropListConnectedTo]=\"[defaultList]\"\n            class=\"list\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <div class=\"item\" *ngFor=\"let item of otherAttributes\" cdkDrag>{{ item }}</div>\n          </div>\n        </div>\n\n        <div class=\"m-btn-group -width-lg\">\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--secondary\"\n            (click)=\"goBack()\"\n            [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n          ></button>\n          <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTableAttrs()\">\n            {{ '@pry.admin.customize.updateTable' | i18n }}\n          </button>\n        </div>\n      </div>\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 2\"\n        [id]=\"'tab-custo-pnl-2'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-custo-btn-2'\"\n        tabindex=\"0\"\n      >\n        <pry-admin-classes-customize-symbol\n          (backPressed)=\"goBack()\"\n          [currentClass]=\"currentClass$ | async\"\n        ></pry-admin-classes-customize-symbol>\n      </div>\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 3\"\n        [id]=\"'tab-custo-pnl-3'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-custo-btn-3'\"\n        tabindex=\"0\"\n      >\n        <div class=\"container\">\n          <h2>{{ '@pry.admin.customize.tile' | i18n }}</h2>\n\n          <div\n            cdkDropList\n            #defaultTilesList=\"cdkDropList\"\n            [cdkDropListData]=\"defaultTileAttributes\"\n            [cdkDropListConnectedTo]=\"[notDefaultTilesList]\"\n            class=\"list\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <div class=\"item\" *ngFor=\"let item of defaultTileAttributes\" cdkDrag>{{ item }}</div>\n          </div>\n        </div>\n\n        <div class=\"container\">\n          <h2>{{ '@pry.admin.customize.noTileAttrs' | i18n }}</h2>\n\n          <div\n            cdkDropList\n            #notDefaultTilesList=\"cdkDropList\"\n            [cdkDropListData]=\"otherTileAttributes\"\n            [cdkDropListConnectedTo]=\"[defaultTilesList]\"\n            class=\"list\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <div class=\"item\" *ngFor=\"let item of otherTileAttributes\" cdkDrag>{{ item }}</div>\n          </div>\n        </div>\n\n        <div>\n          <ng-container *ngIf=\"!isTileConfValid()\">\n            <p>{{ '@pry.admin.customize.tileHint' | i18n: { max: maxTilesAttributes } }}</p>\n          </ng-container>\n        </div>\n\n        <div class=\"m-btn-group -width-lg\">\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--secondary\"\n            (click)=\"goBack()\"\n            [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n          ></button>\n          <button\n            class=\"a-btn a-btn--primary\"\n            type=\"submit\"\n            (click)=\"updateTileAttrs()\"\n            [disabled]=\"!isTileConfValid()\"\n          >\n            {{ '@pry.admin.customize.updateTile' | i18n }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "component", type: AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminClassesCustomizeComponent, selector: "pry-admin-classes-customize", usesInheritance: true, ngImport: i0, template: "<div class=\"o-pry-admin-classes-customize\">\n  <h1 class=\"a-h1\" id=\"tab-custom\">{{ '@pry.admin.customize.title' | i18n }}</h1>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"customizeTemplate\" name=\"customize.template\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTable\" name=\"customize.table\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeSymbol\" name=\"classes.rules\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTile\" name=\"customize.tile\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #customizeTemplate>\n    <pry-admin-classes-customize-tooltip\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-tooltip>\n  </ng-template>\n  <ng-template #customizeTable>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultList=\"cdkDropList\"\n        [cdkDropListData]=\"otherAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTableAttrs()\">\n        {{ '@pry.admin.customize.updateTable' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n  <ng-template #customizeSymbol>\n    <pry-admin-classes-customize-symbol\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-symbol>\n  </ng-template>\n  <ng-template #customizeTile>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tile' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultTileAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTileAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"otherTileAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div>\n      <ng-container *ngIf=\"!isTileConfValid()\">\n        <p>{{ '@pry.admin.customize.tileHint' | i18n : { max: maxTilesAttributes } }}</p>\n      </ng-container>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTileAttrs()\" [disabled]=\"!isTileConfValid()\">\n        {{ '@pry.admin.customize.updateTile' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: AdminClassesCustomizeTooltipComponent, selector: "pry-admin-classes-customize-tooltip", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "component", type: AdminClassesCustomizeSymbolComponent, selector: "pry-admin-classes-customize-symbol", inputs: ["currentClass"], outputs: ["backPressed"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminClassesCustomizeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-customize', template: "<div class=\"o-pry-admin-classes-customize\">\n  <h1 class=\"a-h1\" id=\"tab-custo\">{{ '@pry.admin.customize.title' | i18n }}</h1>\n\n  <div class=\"o-tabs\">\n    <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-custo'\">\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-custo-btn-0'\"\n        [attr.aria-selected]=\"tab === 0\"\n        [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n        [attr.aria-controls]=\"'tab-custo-pnl-0'\"\n        (click)=\"tab = 0\"\n      >\n        {{ '@pry.admin.customize.template' | i18n }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-custo-btn-1'\"\n        [attr.aria-selected]=\"tab === 1\"\n        [attr.tabindex]=\"tab === 1 ? 0 : -1\"\n        [attr.aria-controls]=\"'tab-custo-pnl-1'\"\n        (click)=\"tab = 1\"\n      >\n        {{ '@pry.admin.customize.table' | i18n }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-custo-btn-2'\"\n        [attr.aria-selected]=\"tab === 2\"\n        [attr.tabindex]=\"tab === 2 ? 0 : -1\"\n        [attr.aria-controls]=\"'tab-custo-pnl-2'\"\n        (click)=\"tab = 2\"\n      >\n        {{ '@pry.admin.classes.rules' | i18n }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-custo-btn-3'\"\n        [attr.aria-selected]=\"tab === 3\"\n        [attr.tabindex]=\"tab === 3 ? 0 : -1\"\n        [attr.aria-controls]=\"'tab-custo-pnl-3'\"\n        (click)=\"tab = 3\"\n      >\n        {{ '@pry.admin.customize.tile' | i18n }}\n      </button>\n    </div>\n\n    <div class=\"o-tabs__panels\">\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 0\"\n        [id]=\"'tab-custo-pnl-0'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-custo-btn-0'\"\n        tabindex=\"0\"\n      >\n        <pry-admin-classes-customize-tooltip\n          (backPressed)=\"goBack()\"\n          [currentClass]=\"currentClass$ | async\"\n        ></pry-admin-classes-customize-tooltip>\n      </div>\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 1\"\n        [id]=\"'tab-custo-pnl-1'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-custo-btn-1'\"\n        tabindex=\"0\"\n      >\n        <div class=\"container\">\n          <h2>{{ '@pry.admin.customize.tableAttrs' | i18n }}</h2>\n\n          <div\n            cdkDropList\n            #defaultList=\"cdkDropList\"\n            [cdkDropListData]=\"defaultAttributes\"\n            [cdkDropListConnectedTo]=\"[notDefaultList]\"\n            class=\"list\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <div class=\"item\" *ngFor=\"let item of defaultAttributes\" cdkDrag>{{ item }}</div>\n          </div>\n        </div>\n\n        <div class=\"container\">\n          <h2>{{ '@pry.admin.customize.noTableAttrs' | i18n }}</h2>\n\n          <div\n            cdkDropList\n            #notDefaultList=\"cdkDropList\"\n            [cdkDropListData]=\"otherAttributes\"\n            [cdkDropListConnectedTo]=\"[defaultList]\"\n            class=\"list\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <div class=\"item\" *ngFor=\"let item of otherAttributes\" cdkDrag>{{ item }}</div>\n          </div>\n        </div>\n\n        <div class=\"m-btn-group -width-lg\">\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--secondary\"\n            (click)=\"goBack()\"\n            [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n          ></button>\n          <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTableAttrs()\">\n            {{ '@pry.admin.customize.updateTable' | i18n }}\n          </button>\n        </div>\n      </div>\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 2\"\n        [id]=\"'tab-custo-pnl-2'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-custo-btn-2'\"\n        tabindex=\"0\"\n      >\n        <pry-admin-classes-customize-symbol\n          (backPressed)=\"goBack()\"\n          [currentClass]=\"currentClass$ | async\"\n        ></pry-admin-classes-customize-symbol>\n      </div>\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 3\"\n        [id]=\"'tab-custo-pnl-3'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-custo-btn-3'\"\n        tabindex=\"0\"\n      >\n        <div class=\"container\">\n          <h2>{{ '@pry.admin.customize.tile' | i18n }}</h2>\n\n          <div\n            cdkDropList\n            #defaultTilesList=\"cdkDropList\"\n            [cdkDropListData]=\"defaultTileAttributes\"\n            [cdkDropListConnectedTo]=\"[notDefaultTilesList]\"\n            class=\"list\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <div class=\"item\" *ngFor=\"let item of defaultTileAttributes\" cdkDrag>{{ item }}</div>\n          </div>\n        </div>\n\n        <div class=\"container\">\n          <h2>{{ '@pry.admin.customize.noTileAttrs' | i18n }}</h2>\n\n          <div\n            cdkDropList\n            #notDefaultTilesList=\"cdkDropList\"\n            [cdkDropListData]=\"otherTileAttributes\"\n            [cdkDropListConnectedTo]=\"[defaultTilesList]\"\n            class=\"list\"\n            (cdkDropListDropped)=\"drop($event)\"\n          >\n            <div class=\"item\" *ngFor=\"let item of otherTileAttributes\" cdkDrag>{{ item }}</div>\n          </div>\n        </div>\n\n        <div>\n          <ng-container *ngIf=\"!isTileConfValid()\">\n            <p>{{ '@pry.admin.customize.tileHint' | i18n: { max: maxTilesAttributes } }}</p>\n          </ng-container>\n        </div>\n\n        <div class=\"m-btn-group -width-lg\">\n          <button\n            type=\"button\"\n            class=\"a-btn a-btn--secondary\"\n            (click)=\"goBack()\"\n            [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n          ></button>\n          <button\n            class=\"a-btn a-btn--primary\"\n            type=\"submit\"\n            (click)=\"updateTileAttrs()\"\n            [disabled]=\"!isTileConfValid()\"\n          >\n            {{ '@pry.admin.customize.updateTile' | i18n }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-classes-customize', template: "<div class=\"o-pry-admin-classes-customize\">\n  <h1 class=\"a-h1\" id=\"tab-custom\">{{ '@pry.admin.customize.title' | i18n }}</h1>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"customizeTemplate\" name=\"customize.template\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTable\" name=\"customize.table\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeSymbol\" name=\"classes.rules\"></pry-tab>\n    <pry-tab [templateRef]=\"customizeTile\" name=\"customize.tile\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #customizeTemplate>\n    <pry-admin-classes-customize-tooltip\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-tooltip>\n  </ng-template>\n  <ng-template #customizeTable>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTableAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultList=\"cdkDropList\"\n        [cdkDropListData]=\"otherAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTableAttrs()\">\n        {{ '@pry.admin.customize.updateTable' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n  <ng-template #customizeSymbol>\n    <pry-admin-classes-customize-symbol\n      (backPressed)=\"goBack()\"\n      [currentClass]=\"currentClass$ | async\"\n    ></pry-admin-classes-customize-symbol>\n  </ng-template>\n  <ng-template #customizeTile>\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.tile' | i18n }}</h2>\n      <div\n        cdkDropList\n        #defaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"defaultTileAttributes\"\n        [cdkDropListConnectedTo]=\"[notDefaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of defaultTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div class=\"container\">\n      <h2>{{ '@pry.admin.customize.noTileAttrs' | i18n }}</h2>\n      <div\n        cdkDropList\n        #notDefaultTilesList=\"cdkDropList\"\n        [cdkDropListData]=\"otherTileAttributes\"\n        [cdkDropListConnectedTo]=\"[defaultTilesList]\"\n        class=\"list\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div class=\"item\" *ngFor=\"let item of otherTileAttributes\" cdkDrag>{{ item }}</div>\n      </div>\n    </div>\n\n    <div>\n      <ng-container *ngIf=\"!isTileConfValid()\">\n        <p>{{ '@pry.admin.customize.tileHint' | i18n : { max: maxTilesAttributes } }}</p>\n      </ng-container>\n    </div>\n\n    <div class=\"m-btn-group -width-lg\">\n      <button\n        type=\"button\"\n        class=\"a-btn a-btn--secondary\"\n        (click)=\"goBack()\"\n        [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n      ></button>\n      <button class=\"a-btn a-btn--primary\" type=\"submit\" (click)=\"updateTileAttrs()\" [disabled]=\"!isTileConfValid()\">\n        {{ '@pry.admin.customize.updateTile' | i18n }}\n      </button>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
 class PryAdminComponent extends SubscriptionnerDirective {
@@ -2595,18 +2592,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 type: Input
             }] } });
 
-let nextCompId$a = 0;
 class AdminClassesSelectComponent {
     static { this.id = 'AdminClassesSelectComponent'; }
     constructor(store, router, route) {
         this.store = store;
         this.router = router;
         this.route = route;
-        this.tab = 0;
         this.sub = new Subscription();
         this.currentClass$ = this.store.select(AdminClassSelectors.selectedClass);
         this.associations$ = this.store.select(AdminSelectors.selectedAssociation);
-        this.compId = nextCompId$a++;
         this.linkedObjects$ = this.currentClass$.pipe(concatLatestFrom((clazz) => this.store.select(DataSourceSelectors.datasets)), map(([clazz, datasets]) => datasets.filter((dataset) => dataset.oClass === clazz?.id)));
     }
     ngOnInit() {
@@ -2660,9 +2654,6 @@ class AdminClassesSelectComponent {
             }
         }));
     }
-    switch(number) {
-        this.tab = number;
-    }
     ngOnDestroy() {
         this.sub.unsubscribe();
     }
@@ -2684,14 +2675,13 @@ class AdminClassesSelectComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminClassesSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminClassesSelectComponent, selector: "pry-admin-classes-select", ngImport: i0, template: "<div\n  *ngIf=\"currentClass$ | async as clazz\"\n  [id]=\"'panel-class-' + clazz.id\"\n  [attr.aria-labelledby]=\"'button-class-' + clazz.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.classes.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n          (click)=\"switch(0)\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-1'\"\n          [attr.aria-selected]=\"tab === 1\"\n          [attr.tabindex]=\"tab === 1 ? 1 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-1'\"\n          (click)=\"switch(1)\"\n        >\n          {{ '@pry.admin.classes.associations' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.classes.name' | i18n }} :\n              <strong>{{ clazz.name }}</strong>\n            </p>\n            <p class=\"a-p u-display-flex -align-center\">\n              {{ '@pry.admin.classes.image' | i18n }} :\n              <img\n                alt=\"\"\n                [height]=\"25\"\n                [width]=\"25\"\n                [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n              />\n            </p>\n          </div>\n        </div>\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 1\"\n          [id]=\"'tabpanel-' + compId + '-1'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-1'\"\n          tabindex=\"2\"\n        >\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        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminClassesSelectComponent, selector: "pry-admin-classes-select", ngImport: i0, template: "<div\n  *ngIf=\"currentClass$ | async as clazz\"\n  [id]=\"'panel-class-' + clazz.id\"\n  [attr.aria-labelledby]=\"'button-class-' + clazz.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.classes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"classDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"classAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #classDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.name' | i18n }} :\n      <strong>{{ clazz.name }}</strong>\n    </p>\n    <p class=\"a-p u-display-flex -align-center\">\n      {{ '@pry.admin.classes.image' | i18n }} :\n      <img\n        alt=\"\"\n        [height]=\"25\"\n        [width]=\"25\"\n        [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n      />\n    </p>\n  </ng-template>\n\n  <ng-template #classAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminClassesSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-select', template: "<div\n  *ngIf=\"currentClass$ | async as clazz\"\n  [id]=\"'panel-class-' + clazz.id\"\n  [attr.aria-labelledby]=\"'button-class-' + clazz.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.classes.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n          (click)=\"switch(0)\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-1'\"\n          [attr.aria-selected]=\"tab === 1\"\n          [attr.tabindex]=\"tab === 1 ? 1 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-1'\"\n          (click)=\"switch(1)\"\n        >\n          {{ '@pry.admin.classes.associations' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.classes.name' | i18n }} :\n              <strong>{{ clazz.name }}</strong>\n            </p>\n            <p class=\"a-p u-display-flex -align-center\">\n              {{ '@pry.admin.classes.image' | i18n }} :\n              <img\n                alt=\"\"\n                [height]=\"25\"\n                [width]=\"25\"\n                [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n              />\n            </p>\n          </div>\n        </div>\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 1\"\n          [id]=\"'tabpanel-' + compId + '-1'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-1'\"\n          tabindex=\"2\"\n        >\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        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-classes-select', template: "<div\n  *ngIf=\"currentClass$ | async as clazz\"\n  [id]=\"'panel-class-' + clazz.id\"\n  [attr.aria-labelledby]=\"'button-class-' + clazz.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.classes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"classDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"classAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #classDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.name' | i18n }} :\n      <strong>{{ clazz.name }}</strong>\n    </p>\n    <p class=\"a-p u-display-flex -align-center\">\n      {{ '@pry.admin.classes.image' | i18n }} :\n      <img\n        alt=\"\"\n        [height]=\"25\"\n        [width]=\"25\"\n        [src]=\"clazz.id | translateId : { type: 'class', output: 'icon' } | async\"\n      />\n    </p>\n  </ng-template>\n\n  <ng-template #classAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
-let nextCompId$9 = 0;
 class AdminAttributesSelectComponent {
     static { this.id = 'AdminAttributesSelectComponent'; }
     constructor(store, router, route) {
@@ -2704,7 +2694,6 @@ class AdminAttributesSelectComponent {
         this.selectedClassId$ = this.store.select(AdminClassSelectors.selectedClassId);
         this.interClass$ = this.store.select(AdminClassSelectors.interClass);
         this.interClassId$ = this.store.select(AdminClassSelectors.interClassId);
-        this.compId = nextCompId$9++;
         this.associations$ = this.store.select(AdminSelectors.selectedAssociation);
     }
     ngOnInit() {
@@ -2755,18 +2744,14 @@ class AdminAttributesSelectComponent {
             }));
         }
     }
-    switch(number) {
-        this.tab = number;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminAttributesSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminAttributesSelectComponent, selector: "pry-admin-attribute-select", ngImport: i0, template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.classes.attributes.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n          (click)=\"switch(0)\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-1'\"\n          [attr.aria-selected]=\"tab === 1\"\n          [attr.tabindex]=\"tab === 1 ? 1 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-1'\"\n          (click)=\"switch(1)\"\n        >\n          {{ '@pry.admin.classes.associations' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.classes.attributes.name' | i18n }} :\n              <strong>{{ attribute.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.classes.attributes.field' | i18n }} :\n              <strong>{{ attribute.fieldName }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.classes.attributes.category' | i18n }} :\n              <strong>{{ attribute.categoryName }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n              <strong>{{ attribute.multiValued }}</strong>\n            </p>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 1\"\n        [id]=\"'tabpanel-' + compId + '-1'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + compId + '-1'\"\n        tabindex=\"2\"\n      >\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      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminAttributesSelectComponent, selector: "pry-admin-attribute-select", ngImport: i0, template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.classes.attributes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"attributeDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"attributeAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #attributeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.name' | i18n }} :\n      <strong>{{ attribute.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.field' | i18n }} :\n      <strong>{{ attribute.fieldName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.category' | i18n }} :\n      <strong>{{ attribute.categoryName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n      <strong>{{ attribute.multiValued }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #attributeAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminAttributesSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-attribute-select', template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.classes.attributes.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n          (click)=\"switch(0)\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-1'\"\n          [attr.aria-selected]=\"tab === 1\"\n          [attr.tabindex]=\"tab === 1 ? 1 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-1'\"\n          (click)=\"switch(1)\"\n        >\n          {{ '@pry.admin.classes.associations' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.classes.attributes.name' | i18n }} :\n              <strong>{{ attribute.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.classes.attributes.field' | i18n }} :\n              <strong>{{ attribute.fieldName }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.classes.attributes.category' | i18n }} :\n              <strong>{{ attribute.categoryName }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n              <strong>{{ attribute.multiValued }}</strong>\n            </p>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 1\"\n        [id]=\"'tabpanel-' + compId + '-1'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + compId + '-1'\"\n        tabindex=\"2\"\n      >\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      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-attribute-select', template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.classes.attributes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"attributeDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"attributeAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #attributeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.name' | i18n }} :\n      <strong>{{ attribute.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.field' | i18n }} :\n      <strong>{{ attribute.fieldName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.category' | i18n }} :\n      <strong>{{ attribute.categoryName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n      <strong>{{ attribute.multiValued }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #attributeAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
-let nextCompId$8 = 0;
 class AdminSelectDatasetComponent extends SubscriptionnerDirective {
     static { this.id = 'AdminSelectDatasetComponent'; }
     constructor(store, router, route) {
@@ -2776,13 +2761,11 @@ class AdminSelectDatasetComponent extends SubscriptionnerDirective {
         this.route = route;
         this.sub = new Subscription();
         this.currentTypeTranslation = '';
-        this.tab = 0;
         this.store.dispatch(MetadataActions.loadMetadata());
         this.selectedDataset$ = this.store.select(DataSourceSelectors.selectedDataset);
         this.datasetMetadata$ = this.store.select(DataSourceSelectors.selectedDatasetMetadata);
         this.associations$ = this.store.select(AdminSelectors.selectedAssociation);
         this.editable$ = this.store.select(MetadataSelectors.editable);
-        this.compId = nextCompId$8++;
     }
     ngOnInit() {
         this.subscriptions.add(this.selectedDataset$.subscribe((dataset) => {
@@ -2834,9 +2817,6 @@ class AdminSelectDatasetComponent extends SubscriptionnerDirective {
             ]
         }));
     }
-    switch(number) {
-        this.tab = number;
-    }
     removeMetadata(metadata) {
         this.store.dispatch(MetadataActions.deleteDatasetMetadata({ datasetId: metadata.id, metadataId: metadata.metadataId }));
     }
@@ -2848,14 +2828,13 @@ class AdminSelectDatasetComponent extends SubscriptionnerDirective {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminSelectDatasetComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.metadata.details' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n          (click)=\"switch(0)\"\n        >\n          {{ '@pry.admin.metadata.title' | i18n }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-1'\"\n          [attr.aria-selected]=\"tab === 1\"\n          [attr.tabindex]=\"tab === 1 ? 1 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-1'\"\n          (click)=\"switch(1)\"\n        >\n          {{ '@pry.admin.classes.associations' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <pry-metadata-editor\n            [targetId]=\"(selectedDataset$ | async)?.id ?? ''\"\n            [editable]=\"(editable$ | async) ?? false\"\n            [metadata]=\"(datasetMetadata$ | async) ?? []\"\n            (removeMeta)=\"removeMetadata($event)\"\n            (addMeta)=\"addDatasetMetadata($event)\"\n          ></pry-metadata-editor>\n        </div>\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 1\"\n          [id]=\"'tabpanel-' + compId + '-1'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-1'\"\n          tabindex=\"1\"\n        >\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        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i5$2.PryMetadataEditorComponent, selector: "pry-metadata-editor", inputs: ["targetId", "editable", "metadata"], outputs: ["addMeta", "removeMeta"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", 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\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.metadata.details' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"datasetMetadata\" name=\"metadata.title\"></pry-tab>\n    <pry-tab [templateRef]=\"datasetAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #datasetMetadata>\n    <pry-metadata-editor\n      [targetId]=\"(selectedDataset$ | async)?.id ?? ''\"\n      [editable]=\"(editable$ | async) ?? false\"\n      [metadata]=\"(datasetMetadata$ | async) ?? []\"\n      (removeMeta)=\"removeMetadata($event)\"\n      (addMeta)=\"addDatasetMetadata($event)\"\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</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i5$3.PryMetadataEditorComponent, selector: "pry-metadata-editor", inputs: ["targetId", "editable", "metadata"], outputs: ["addMeta", "removeMeta"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", 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\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.metadata.details' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n          (click)=\"switch(0)\"\n        >\n          {{ '@pry.admin.metadata.title' | i18n }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-1'\"\n          [attr.aria-selected]=\"tab === 1\"\n          [attr.tabindex]=\"tab === 1 ? 1 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-1'\"\n          (click)=\"switch(1)\"\n        >\n          {{ '@pry.admin.classes.associations' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <pry-metadata-editor\n            [targetId]=\"(selectedDataset$ | async)?.id ?? ''\"\n            [editable]=\"(editable$ | async) ?? false\"\n            [metadata]=\"(datasetMetadata$ | async) ?? []\"\n            (removeMeta)=\"removeMetadata($event)\"\n            (addMeta)=\"addDatasetMetadata($event)\"\n          ></pry-metadata-editor>\n        </div>\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 1\"\n          [id]=\"'tabpanel-' + compId + '-1'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-1'\"\n          tabindex=\"1\"\n        >\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        </div>\n      </div>\n    </div>\n  </div>\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\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.metadata.details' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"datasetMetadata\" name=\"metadata.title\"></pry-tab>\n    <pry-tab [templateRef]=\"datasetAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #datasetMetadata>\n    <pry-metadata-editor\n      [targetId]=\"(selectedDataset$ | async)?.id ?? ''\"\n      [editable]=\"(editable$ | async) ?? false\"\n      [metadata]=\"(datasetMetadata$ | async) ?? []\"\n      (removeMeta)=\"removeMetadata($event)\"\n      (addMeta)=\"addDatasetMetadata($event)\"\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</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
-let nextCompId$7 = 0;
 class AdminEnvironmentSelectComponent {
     static { this.id = 'AdminEnvironmentSelectComponent'; }
     constructor(store, router, route) {
@@ -2863,14 +2842,12 @@ class AdminEnvironmentSelectComponent {
         this.router = router;
         this.route = route;
         this.sub = new Subscription();
-        this.tab = 0;
         this.currentTypeTranslation = '';
         this.currentEnv$ = this.store.select(EnvironmentSelectors.currentEnv);
         this.sub.add(this.currentEnv$.subscribe((ce) => {
             const type = ENV_OPTIONS.find((el) => el.varType === ce?.type);
             this.currentTypeTranslation = type ? type.translation : ENV_OPTIONS[0].translation;
         }));
-        this.compId = nextCompId$7++;
     }
     ngOnInit() {
         this.sub.add(this.currentEnv$.subscribe((env) => {
@@ -2927,29 +2904,23 @@ class AdminEnvironmentSelectComponent {
             ]
         }));
     }
-    switch(number) {
-        this.tab = number;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminEnvironmentSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminEnvironmentSelectComponent, selector: "pry-admin-environment-select", ngImport: i0, template: "<div\n  *ngIf=\"currentEnv$ | async as env\"\n  [id]=\"'panel-env-' + env.name\"\n  [attr.aria-labelledby]=\"'button-env-' + env.name\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.environment.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.environment.name' | i18n }} :\n              <strong>{{ env.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.environment.type' | i18n }} :\n              <strong>{{ currentTypeTranslation | i18n }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.environment.value' | i18n }} :\n              <strong>{{ env.value }}</strong>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminEnvironmentSelectComponent, selector: "pry-admin-environment-select", ngImport: i0, template: "<div\n  *ngIf=\"currentEnv$ | async as env\"\n  [id]=\"'panel-env-' + env.name\"\n  [attr.aria-labelledby]=\"'button-env-' + env.name\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.environment.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"environmentDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #environmentDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.name' | i18n }} :\n      <strong>{{ env.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.value' | i18n }} :\n      <strong>{{ env.value }}</strong>\n    </p>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminEnvironmentSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-environment-select', template: "<div\n  *ngIf=\"currentEnv$ | async as env\"\n  [id]=\"'panel-env-' + env.name\"\n  [attr.aria-labelledby]=\"'button-env-' + env.name\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.environment.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.environment.name' | i18n }} :\n              <strong>{{ env.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.environment.type' | i18n }} :\n              <strong>{{ currentTypeTranslation | i18n }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.environment.value' | i18n }} :\n              <strong>{{ env.value }}</strong>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-environment-select', template: "<div\n  *ngIf=\"currentEnv$ | async as env\"\n  [id]=\"'panel-env-' + env.name\"\n  [attr.aria-labelledby]=\"'button-env-' + env.name\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.environment.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"environmentDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #environmentDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.name' | i18n }} :\n      <strong>{{ env.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.environment.value' | i18n }} :\n      <strong>{{ env.value }}</strong>\n    </p>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
-let nextCompId$6 = 0;
 class AdminFieldsSelectComponent {
     static { this.id = 'AdminFieldsSelectComponent'; }
     constructor(store, router, route) {
         this.store = store;
         this.router = router;
         this.route = route;
-        this.tab = 0;
         this.sub = new Subscription();
         this.currentField$ = this.store.select(FieldsSelectors.selectedField);
         this.associations$ = this.store.select(AdminSelectors.selectedAssociation);
-        this.compId = nextCompId$6++;
         this.attributes$ = combineLatest([this.currentField$, store.select(ClassSelectors.classes)]).pipe(map(([field, classes]) => {
             return classes
                 .map((clazz) => clazz.attributes
@@ -2989,9 +2960,6 @@ class AdminFieldsSelectComponent {
             }
         }));
     }
-    switch(number) {
-        this.tab = number;
-    }
     getTranslationType(type) {
         return FIELD_OPTIONS.find((el) => el.varType === type)?.translation || 'undefined';
     }
@@ -3016,11 +2984,11 @@ class AdminFieldsSelectComponent {
         this.sub.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminFieldsSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminFieldsSelectComponent, selector: "pry-admin-fields-select", ngImport: i0, template: "<div\n  *ngIf=\"currentField$ | async as field\"\n  [id]=\"'panel-field-' + field.id\"\n  [attr.aria-labelledby]=\"'button-field-' + field.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.fields.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n          (click)=\"switch(0)\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-1'\"\n          [attr.aria-selected]=\"tab === 1\"\n          [attr.tabindex]=\"tab === 1 ? 1 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-1'\"\n          (click)=\"switch(1)\"\n        >\n          {{ '@pry.admin.classes.associations' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.fields.name' | i18n }} :\n              <strong>{{ field.name }}</strong>\n            </p>\n            <p class=\"a-p\">{{ '@pry.admin.fields.description' | i18n }} :</p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.fields.type' | i18n }} :\n              <strong>{{ getTranslationType(field.type) | i18n }}</strong>\n            </p>\n          </div>\n        </div>\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 1\"\n          [id]=\"'tabpanel-' + compId + '-1'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-1'\"\n          tabindex=\"1\"\n        >\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        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminFieldsSelectComponent, selector: "pry-admin-fields-select", ngImport: i0, template: "<div\n  *ngIf=\"currentField$ | async as field\"\n  [id]=\"'panel-field-' + field.id\"\n  [attr.aria-labelledby]=\"'button-field-' + field.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.fields.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"fieldDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"fieldAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #fieldDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.fields.name' | i18n }} :\n      <strong>{{ field.name }}</strong>\n    </p>\n    <p class=\"a-p\">{{ '@pry.admin.fields.description' | i18n }} :</p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.fields.type' | i18n }} :\n      <strong>{{ getTranslationType(field.type) | i18n }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #fieldAssociations>\n    <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n    <pry-association [associations]=\"associations$ | async\"></pry-association>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminFieldsSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-fields-select', template: "<div\n  *ngIf=\"currentField$ | async as field\"\n  [id]=\"'panel-field-' + field.id\"\n  [attr.aria-labelledby]=\"'button-field-' + field.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.fields.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n          (click)=\"switch(0)\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-1'\"\n          [attr.aria-selected]=\"tab === 1\"\n          [attr.tabindex]=\"tab === 1 ? 1 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-1'\"\n          (click)=\"switch(1)\"\n        >\n          {{ '@pry.admin.classes.associations' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.fields.name' | i18n }} :\n              <strong>{{ field.name }}</strong>\n            </p>\n            <p class=\"a-p\">{{ '@pry.admin.fields.description' | i18n }} :</p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.fields.type' | i18n }} :\n              <strong>{{ getTranslationType(field.type) | i18n }}</strong>\n            </p>\n          </div>\n        </div>\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 1\"\n          [id]=\"'tabpanel-' + compId + '-1'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-1'\"\n          tabindex=\"1\"\n        >\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        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-fields-select', template: "<div\n  *ngIf=\"currentField$ | async as field\"\n  [id]=\"'panel-field-' + field.id\"\n  [attr.aria-labelledby]=\"'button-field-' + field.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.fields.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"fieldDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"fieldAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #fieldDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.fields.name' | i18n }} :\n      <strong>{{ field.name }}</strong>\n    </p>\n    <p class=\"a-p\">{{ '@pry.admin.fields.description' | i18n }} :</p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.fields.type' | i18n }} :\n      <strong>{{ getTranslationType(field.type) | i18n }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #fieldAssociations>\n    <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n    <pry-association [associations]=\"associations$ | async\"></pry-association>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
 var MetadataRulesActionTypes;
@@ -3082,7 +3050,6 @@ const MetadataRulesSelectors = {
     metadataRulesSelectedId
 };
 
-let nextCompId$5 = 0;
 class AdminSelectMetadataRulesComponent {
     static { this.id = 'AdminSelectMetadataRulesComponent'; }
     constructor(store, router, route) {
@@ -3091,9 +3058,7 @@ class AdminSelectMetadataRulesComponent {
         this.route = route;
         this.sub = new Subscription();
         this.currentTypeTranslation = '';
-        this.tab = 0;
         this.metadataRulesSelected$ = this.store.select(MetadataRulesSelectors.metadataRulesSelected);
-        this.compId = nextCompId$5++;
     }
     ngOnInit() {
         this.sub.add(this.metadataRulesSelected$.subscribe((metadata) => {
@@ -3151,14 +3116,13 @@ class AdminSelectMetadataRulesComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminSelectMetadataRulesComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminSelectMetadataRulesComponent, selector: "pry-admin-select-metadata-rules", ngImport: i0, template: "<div\n  *ngIf=\"metadataRulesSelected$ | async as metadataRules\"\n  [id]=\"'panel-meta-rule-' + metadataRules.id\"\n  [attr.aria-labelledby]=\"'button-meta-rule-' + metadataRules.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.metadata.details' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata-rules.label' | i18n }} :\n              <strong>{{ metadataRules.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata-rules.metadata-item.name' | i18n }} :\n              <strong>{{ metadataRules.metadata.name }}</strong>\n            </p>\n            <p class=\"a-p\" *ngIf=\"metadataRules.metadata.description\">\n              {{ '@pry.admin.metadata-rules.metadata-item.description' | i18n }} :\n              <strong>{{ metadataRules.metadata.description }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata-rules.metadata-item.type' | i18n }} :\n              <strong>{{ metadataRules.metadata.type }}</strong>\n            </p>\n            <ng-container *ngIf=\"metadataRules.metadata.allowedValues\">\n              <p class=\"a-p\" *ngFor=\"let item of metadataRules.metadata.allowedValues\">{{ item }}</p>\n            </ng-container>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata-rules.metadata-user.name' | i18n }} :\n              <strong>{{ metadataRules.userProfile.name }}</strong>\n            </p>\n            <p class=\"a-p\" *ngIf=\"metadataRules.userProfile.description\">\n              {{ '@pry.admin.metadata-rules.metadata-user.description' | i18n }} :\n              <strong>{{ metadataRules.userProfile.description }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata-rules.metadata-user.type' | i18n }} :\n              <strong>{{ metadataRules.userProfile.type }}</strong>\n            </p>\n            <ng-container *ngIf=\"metadataRules.userProfile.allowedValues\">\n              <p class=\"a-p\" *ngFor=\"let item of metadataRules.userProfile.allowedValues\">{{ item }}</p>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminSelectMetadataRulesComponent, selector: "pry-admin-select-metadata-rules", ngImport: i0, template: "<div\n  *ngIf=\"metadataRulesSelected$ | async as metadataRules\"\n  [id]=\"'panel-meta-rule-' + metadataRules.id\"\n  [attr.aria-labelledby]=\"'button-meta-rule-' + metadataRules.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.metadata.details' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"metadataRuleDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #metadataRuleDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.label' | i18n }} :\n      <strong>{{ metadataRules.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-item.name' | i18n }} :\n      <strong>{{ metadataRules.metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\" *ngIf=\"metadataRules.metadata.description\">\n      {{ '@pry.admin.metadata-rules.metadata-item.description' | i18n }} :\n      <strong>{{ metadataRules.metadata.description }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-item.type' | i18n }} :\n      <strong>{{ metadataRules.metadata.type }}</strong>\n    </p>\n    <ng-container *ngIf=\"metadataRules.metadata.allowedValues\">\n      <p class=\"a-p\" *ngFor=\"let item of metadataRules.metadata.allowedValues\">{{ item }}</p>\n    </ng-container>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-user.name' | i18n }} :\n      <strong>{{ metadataRules.userProfile.name }}</strong>\n    </p>\n    <p class=\"a-p\" *ngIf=\"metadataRules.userProfile.description\">\n      {{ '@pry.admin.metadata-rules.metadata-user.description' | i18n }} :\n      <strong>{{ metadataRules.userProfile.description }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-user.type' | i18n }} :\n      <strong>{{ metadataRules.userProfile.type }}</strong>\n    </p>\n    <ng-container *ngIf=\"metadataRules.userProfile.allowedValues\">\n      <p class=\"a-p\" *ngFor=\"let item of metadataRules.userProfile.allowedValues\">{{ item }}</p>\n    </ng-container>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminSelectMetadataRulesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-select-metadata-rules', template: "<div\n  *ngIf=\"metadataRulesSelected$ | async as metadataRules\"\n  [id]=\"'panel-meta-rule-' + metadataRules.id\"\n  [attr.aria-labelledby]=\"'button-meta-rule-' + metadataRules.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.metadata.details' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata-rules.label' | i18n }} :\n              <strong>{{ metadataRules.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata-rules.metadata-item.name' | i18n }} :\n              <strong>{{ metadataRules.metadata.name }}</strong>\n            </p>\n            <p class=\"a-p\" *ngIf=\"metadataRules.metadata.description\">\n              {{ '@pry.admin.metadata-rules.metadata-item.description' | i18n }} :\n              <strong>{{ metadataRules.metadata.description }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata-rules.metadata-item.type' | i18n }} :\n              <strong>{{ metadataRules.metadata.type }}</strong>\n            </p>\n            <ng-container *ngIf=\"metadataRules.metadata.allowedValues\">\n              <p class=\"a-p\" *ngFor=\"let item of metadataRules.metadata.allowedValues\">{{ item }}</p>\n            </ng-container>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata-rules.metadata-user.name' | i18n }} :\n              <strong>{{ metadataRules.userProfile.name }}</strong>\n            </p>\n            <p class=\"a-p\" *ngIf=\"metadataRules.userProfile.description\">\n              {{ '@pry.admin.metadata-rules.metadata-user.description' | i18n }} :\n              <strong>{{ metadataRules.userProfile.description }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata-rules.metadata-user.type' | i18n }} :\n              <strong>{{ metadataRules.userProfile.type }}</strong>\n            </p>\n            <ng-container *ngIf=\"metadataRules.userProfile.allowedValues\">\n              <p class=\"a-p\" *ngFor=\"let item of metadataRules.userProfile.allowedValues\">{{ item }}</p>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-select-metadata-rules', template: "<div\n  *ngIf=\"metadataRulesSelected$ | async as metadataRules\"\n  [id]=\"'panel-meta-rule-' + metadataRules.id\"\n  [attr.aria-labelledby]=\"'button-meta-rule-' + metadataRules.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.metadata.details' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"metadataRuleDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #metadataRuleDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.label' | i18n }} :\n      <strong>{{ metadataRules.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-item.name' | i18n }} :\n      <strong>{{ metadataRules.metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\" *ngIf=\"metadataRules.metadata.description\">\n      {{ '@pry.admin.metadata-rules.metadata-item.description' | i18n }} :\n      <strong>{{ metadataRules.metadata.description }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-item.type' | i18n }} :\n      <strong>{{ metadataRules.metadata.type }}</strong>\n    </p>\n    <ng-container *ngIf=\"metadataRules.metadata.allowedValues\">\n      <p class=\"a-p\" *ngFor=\"let item of metadataRules.metadata.allowedValues\">{{ item }}</p>\n    </ng-container>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-user.name' | i18n }} :\n      <strong>{{ metadataRules.userProfile.name }}</strong>\n    </p>\n    <p class=\"a-p\" *ngIf=\"metadataRules.userProfile.description\">\n      {{ '@pry.admin.metadata-rules.metadata-user.description' | i18n }} :\n      <strong>{{ metadataRules.userProfile.description }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata-rules.metadata-user.type' | i18n }} :\n      <strong>{{ metadataRules.userProfile.type }}</strong>\n    </p>\n    <ng-container *ngIf=\"metadataRules.userProfile.allowedValues\">\n      <p class=\"a-p\" *ngFor=\"let item of metadataRules.userProfile.allowedValues\">{{ item }}</p>\n    </ng-container>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
-let nextCompId$4 = 0;
 class AdminUserSelectMetadataComponent {
     static { this.id = 'AdminUserSelectMetadataComponent'; }
     constructor(store, router, route) {
@@ -3167,13 +3131,11 @@ class AdminUserSelectMetadataComponent {
         this.route = route;
         this.sub = new Subscription();
         this.currentTypeTranslation = '';
-        this.tab = 0;
         this.metadata$ = this.store.select(AdminMetadataUserSelectors.selectedMetadata);
         this.sub.add(this.metadata$.subscribe((meta) => {
             const type = META_OPTIONS.find((el) => el.varType === meta?.type);
             this.currentTypeTranslation = type ? type.translation : META_OPTIONS[0].translation;
         }));
-        this.compId = nextCompId$4++;
     }
     ngOnInit() {
         this.sub.add(this.metadata$.subscribe((metadata) => {
@@ -3217,14 +3179,13 @@ class AdminUserSelectMetadataComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminUserSelectMetadataComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminUserSelectMetadataComponent, selector: "pry-admin-user-select-metadata", ngImport: i0, template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.metadata.detailsUser' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.label' | i18n }} :\n              <strong>{{ metadata.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.description' | i18n }} :\n              <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.type' | i18n }} :\n              <strong>{{ currentTypeTranslation | i18n }}</strong>\n            </p>\n\n            <ng-container *ngIf=\"metadata.allowedValues\">\n              <ng-container *ngFor=\"let item of metadata.allowedValues\">\n                <p class=\"a-p\">{{ item }}</p>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminUserSelectMetadataComponent, selector: "pry-admin-user-select-metadata", ngImport: i0, template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n    <h3 class=\"a-h3\">{{ '@pry.admin.metadata.detailsUser' | i18n }}</h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"userMetadataDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #userMetadataDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.label' | i18n }} :\n      <strong>{{ metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.description' | i18n }} :\n      <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n\n    <ng-container *ngIf=\"metadata.allowedValues\">\n      <ng-container *ngFor=\"let item of metadata.allowedValues\">\n        <p class=\"a-p\">{{ item }}</p>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminUserSelectMetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-user-select-metadata', template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.metadata.detailsUser' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.label' | i18n }} :\n              <strong>{{ metadata.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.description' | i18n }} :\n              <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.type' | i18n }} :\n              <strong>{{ currentTypeTranslation | i18n }}</strong>\n            </p>\n\n            <ng-container *ngIf=\"metadata.allowedValues\">\n              <ng-container *ngFor=\"let item of metadata.allowedValues\">\n                <p class=\"a-p\">{{ item }}</p>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-user-select-metadata', template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n    <h3 class=\"a-h3\">{{ '@pry.admin.metadata.detailsUser' | i18n }}</h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"userMetadataDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #userMetadataDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.label' | i18n }} :\n      <strong>{{ metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.description' | i18n }} :\n      <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n\n    <ng-container *ngIf=\"metadata.allowedValues\">\n      <ng-container *ngFor=\"let item of metadata.allowedValues\">\n        <p class=\"a-p\">{{ item }}</p>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
-let nextCompId$3 = 0;
 class AdminSelectMetadataComponent {
     static { this.id = 'AdminSelectMetadataComponent'; }
     constructor(store, router, route) {
@@ -3233,13 +3194,11 @@ class AdminSelectMetadataComponent {
         this.route = route;
         this.sub = new Subscription();
         this.currentTypeTranslation = '';
-        this.tab = 0;
         this.metadata$ = this.store.select(MetadataSelectors.selectedMetadata);
         this.sub.add(this.metadata$.subscribe((meta) => {
             const type = META_OPTIONS.find((el) => el.varType === meta?.type);
             this.currentTypeTranslation = type ? type.translation : META_OPTIONS[0].translation;
         }));
-        this.compId = nextCompId$3++;
     }
     ngOnInit() {
         this.sub.add(this.metadata$.subscribe((metadata) => {
@@ -3283,24 +3242,21 @@ class AdminSelectMetadataComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminSelectMetadataComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminSelectMetadataComponent, selector: "pry-select-metadata", ngImport: i0, template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.metadata.details' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.label' | i18n }} :\n              <strong>{{ metadata.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.description' | i18n }} :\n              <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.type' | i18n }} :\n              <strong>{{ currentTypeTranslation | i18n }}</strong>\n            </p>\n\n            <ng-container *ngIf=\"metadata.allowedValues\">\n              <ng-container *ngFor=\"let item of metadata.allowedValues\">\n                <p>{{ item }}</p>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminSelectMetadataComponent, selector: "pry-select-metadata", ngImport: i0, template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.metadata.details' | i18n }}\n    </h3>\n  </div>\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"metadataDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #metadataDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.label' | i18n }} :\n      <strong>{{ metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.description' | i18n }} :\n      <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n\n    <ng-container *ngIf=\"metadata.allowedValues\">\n      <ng-container *ngFor=\"let item of metadata.allowedValues\">\n        <p>{{ item }}</p>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminSelectMetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-select-metadata', template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.metadata.details' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.label' | i18n }} :\n              <strong>{{ metadata.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.description' | i18n }} :\n              <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.metadata.type' | i18n }} :\n              <strong>{{ currentTypeTranslation | i18n }}</strong>\n            </p>\n\n            <ng-container *ngIf=\"metadata.allowedValues\">\n              <ng-container *ngFor=\"let item of metadata.allowedValues\">\n                <p>{{ item }}</p>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-select-metadata', template: "<div\n  *ngIf=\"metadata$ | async as metadata\"\n  [id]=\"'panel-meta-' + metadata.id\"\n  [attr.aria-labelledby]=\"'button-meta-' + metadata.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.metadata.details' | i18n }}\n    </h3>\n  </div>\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"metadataDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #metadataDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.label' | i18n }} :\n      <strong>{{ metadata.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.description' | i18n }} :\n      <strong>{{ metadata.description ? metadata.description : '' }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.metadata.type' | i18n }} :\n      <strong>{{ currentTypeTranslation | i18n }}</strong>\n    </p>\n\n    <ng-container *ngIf=\"metadata.allowedValues\">\n      <ng-container *ngFor=\"let item of metadata.allowedValues\">\n        <p>{{ item }}</p>\n      </ng-container>\n    </ng-container>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
-let nextCompId$2 = 0;
 class AdminPredicatesSelectComponent {
     static { this.id = 'AdminPredicatesSelectComponent'; }
     constructor(store, router, route) {
         this.store = store;
         this.router = router;
         this.route = route;
-        this.tab = 0;
         this.sub = new Subscription();
         this.currentPredicate$ = this.store.select(PredicatesSelectors.currentPredicate);
-        this.compId = nextCompId$2++;
     }
     ngOnInit() {
         this.sub.add(this.currentPredicate$.subscribe((pred) => {
@@ -3342,22 +3298,19 @@ class AdminPredicatesSelectComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminPredicatesSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminPredicatesSelectComponent, selector: "pry-admin-predicates-select", ngImport: i0, template: "<div\n  *ngIf=\"currentPredicate$ | async as pred\"\n  [id]=\"'panel-pred-' + pred.id\"\n  [attr.aria-labelledby]=\"'button-pred-' + pred.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.predicates.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.predicates.name' | i18n }} :\n              <strong>{{ pred.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.predicates.value' | i18n }} :\n              <strong>{{ pred.value }}</strong>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminPredicatesSelectComponent, selector: "pry-admin-predicates-select", ngImport: i0, template: "<div\n  *ngIf=\"currentPredicate$ | async as pred\"\n  [id]=\"'panel-pred-' + pred.id\"\n  [attr.aria-labelledby]=\"'button-pred-' + pred.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.predicates.info' | i18n }}\n    </h3>\n  </div>\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"predicateDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n  <ng-template #predicateDetails>\n    <div>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.predicates.name' | i18n }} :\n        <strong>{{ pred.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.predicates.value' | i18n }} :\n        <strong>{{ pred.value }}</strong>\n      </p>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminPredicatesSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-predicates-select', template: "<div\n  *ngIf=\"currentPredicate$ | async as pred\"\n  [id]=\"'panel-pred-' + pred.id\"\n  [attr.aria-labelledby]=\"'button-pred-' + pred.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.predicates.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.predicates.name' | i18n }} :\n              <strong>{{ pred.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.predicates.value' | i18n }} :\n              <strong>{{ pred.value }}</strong>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-predicates-select', template: "<div\n  *ngIf=\"currentPredicate$ | async as pred\"\n  [id]=\"'panel-pred-' + pred.id\"\n  [attr.aria-labelledby]=\"'button-pred-' + pred.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.predicates.info' | i18n }}\n    </h3>\n  </div>\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"predicateDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n  <ng-template #predicateDetails>\n    <div>\n      <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n      <p class=\"a-p\">\n        {{ '@pry.admin.predicates.name' | i18n }} :\n        <strong>{{ pred.name }}</strong>\n      </p>\n      <p class=\"a-p\">\n        {{ '@pry.admin.predicates.value' | i18n }} :\n        <strong>{{ pred.value }}</strong>\n      </p>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
-let nextCompId$1 = 0;
 class AdminRelationTypesSelectComponent {
     static { this.id = 'AdminRelationTypesSelectComponent'; }
     constructor(store) {
         this.store = store;
         this.sub = new Subscription();
-        this.tab = 0;
         this.currentRelationType$ = this.store.select(RelationTypesSelectors.selectedRelationType);
-        this.compId = nextCompId$1++;
     }
     ngOnInit() {
         this.sub.add(this.currentRelationType$.subscribe((relationType) => {
@@ -3397,11 +3350,11 @@ class AdminRelationTypesSelectComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminRelationTypesSelectComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminRelationTypesSelectComponent, selector: "pry-admin-relation-types-select", ngImport: i0, template: "<div\n  *ngIf=\"currentRelationType$ | async as relationType\"\n  [id]=\"'panel-rt-' + relationType.id\"\n  [attr.aria-labelledby]=\"'button-rt-' + relationType.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.relationTypes.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.relationTypes.name' | i18n }} :\n              <strong>{{ relationType.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.relationTypes.nbLink' | i18n }} :\n              <strong>{{ relationType.nbLink }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.relationTypes.dateModification' | i18n }} :\n              <strong>{{ relationType.modificationDate | date: 'dd-MM-yyyy, HH:mm:ss' }}</strong>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminRelationTypesSelectComponent, selector: "pry-admin-relation-types-select", ngImport: i0, template: "<div\n  *ngIf=\"currentRelationType$ | async as relationType\"\n  [id]=\"'panel-rt-' + relationType.id\"\n  [attr.aria-labelledby]=\"'button-rt-' + relationType.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.relationTypes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"relationTypeDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #relationTypeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.name' | i18n }} :\n      <strong>{{ relationType.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.nbLink' | i18n }} :\n      <strong>{{ relationType.nbLink }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.dateModification' | i18n }} :\n      <strong>{{ relationType.modificationDate | date : 'dd-MM-yyyy, HH:mm:ss' }}</strong>\n    </p>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminRelationTypesSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-relation-types-select', template: "<div\n  *ngIf=\"currentRelationType$ | async as relationType\"\n  [id]=\"'panel-rt-' + relationType.id\"\n  [attr.aria-labelledby]=\"'button-rt-' + relationType.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.relationTypes.info' | i18n }}\n      </h3>\n    </div>\n\n    <div class=\"o-tabs\">\n      <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n        <button\n          type=\"button\"\n          class=\"o-tabs__list__btn\"\n          role=\"tab\"\n          [id]=\"'tab-' + compId + '-0'\"\n          [attr.aria-selected]=\"tab === 0\"\n          [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        >\n          {{ '@pry.admin.details' | i18n }}\n        </button>\n      </div>\n\n      <div class=\"o-tabs__panels\">\n        <div\n          class=\"o-tabs__panels__item\"\n          [class.is-hidden]=\"tab !== 0\"\n          [id]=\"'tabpanel-' + compId + '-0'\"\n          role=\"tabpanel\"\n          [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n          tabindex=\"0\"\n        >\n          <div class=\"o-tabs__panels__item__content\">\n            <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n            <p class=\"a-p\">\n              {{ '@pry.admin.relationTypes.name' | i18n }} :\n              <strong>{{ relationType.name }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.relationTypes.nbLink' | i18n }} :\n              <strong>{{ relationType.nbLink }}</strong>\n            </p>\n            <p class=\"a-p\">\n              {{ '@pry.admin.relationTypes.dateModification' | i18n }} :\n              <strong>{{ relationType.modificationDate | date: 'dd-MM-yyyy, HH:mm:ss' }}</strong>\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-relation-types-select', template: "<div\n  *ngIf=\"currentRelationType$ | async as relationType\"\n  [id]=\"'panel-rt-' + relationType.id\"\n  [attr.aria-labelledby]=\"'button-rt-' + relationType.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.relationTypes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"relationTypeDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #relationTypeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.name' | i18n }} :\n      <strong>{{ relationType.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.nbLink' | i18n }} :\n      <strong>{{ relationType.nbLink }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.relationTypes.dateModification' | i18n }} :\n      <strong>{{ relationType.modificationDate | date : 'dd-MM-yyyy, HH:mm:ss' }}</strong>\n    </p>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }]; } });
 
 const BASE = '[Admin/User]';
@@ -3509,11 +3462,11 @@ class AdminUserSelectComponent {
         this.tab = number;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminUserSelectComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminUserSelectComponent, selector: "pry-admin-user-select", inputs: { profil: "profil" }, ngImport: i0, template: "<div\n  *ngIf=\"selectedUser$ | async as user\"\n  [id]=\"'panel-user-' + user.id\"\n  [attr.aria-labelledby]=\"'button-user-' + user.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.userInfo.info' | i18n }}\n      </h3>\n    </div>\n  </div>\n\n  <div class=\"o-tabs\">\n    <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-' + compId + '-0'\"\n        [attr.aria-selected]=\"tab === 0\"\n        [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n        [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        (click)=\"switch(0)\"\n      >\n        {{ '@pry.admin.userInfo.profile' | i18n }}\n      </button>\n\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        [id]=\"'tab-' + compId + '-1'\"\n        role=\"tab\"\n        [attr.aria-selected]=\"tab === 1\"\n        [attr.tabindex]=\"tab === 1 ? 0 : -1\"\n        [attr.aria-controls]=\"'tabpanel-' + compId + '-1'\"\n        (click)=\"switch(1)\"\n      >\n        {{ '@pry.admin.details' | i18n }}\n      </button>\n    </div>\n\n    <div class=\"o-tabs__panels\">\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 0\"\n        [id]=\"'tabpanel-' + compId + '-0'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n        tabindex=\"0\"\n      >\n        <pry-metadata-editor\n          [targetId]=\"(selectedUser$ | async)?.id ?? ''\"\n          [editable]=\"(editable$ | async) ?? false\"\n          [metadata]=\"(userMetadata$ | async) ?? []\"\n          (removeMeta)=\"removeMetadata($event)\"\n          (addMeta)=\"addMetadataUser($event)\"\n        ></pry-metadata-editor>\n      </div>\n\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 1\"\n        [id]=\"'tabpanel-' + compId + '-1'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + compId + '-1'\"\n        tabindex=\"0\"\n      >\n        <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n        <p class=\"a-p\">\n          {{ '@pry.admin.userInfo.name' | i18n }} :\n          <strong>{{ user?.name }}</strong>\n        </p>\n        <p class=\"a-p\">\n          {{ '@pry.admin.userInfo.familyName' | i18n }} :\n          <strong>{{ user.familyName }}</strong>\n        </p>\n        <p class=\"a-p\">\n          {{ '@pry.admin.userInfo.email' | i18n }} :\n          <strong>{{ user.email }}</strong>\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i5$2.PryMetadataEditorComponent, selector: "pry-metadata-editor", inputs: ["targetId", "editable", "metadata"], outputs: ["addMeta", "removeMeta"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AdminUserSelectComponent, selector: "pry-admin-user-select", inputs: { profil: "profil" }, ngImport: i0, template: "<div\n  *ngIf=\"selectedUser$ | async as user\"\n  [id]=\"'panel-user-' + user.id\"\n  [attr.aria-labelledby]=\"'button-user-' + user.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n      {{ '@pry.admin.userInfo.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"userProfile\" name=\"userInfo.profile\"></pry-tab>\n    <pry-tab [templateRef]=\"userDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #userProfile>\n    <pry-metadata-editor\n      [targetId]=\"(selectedUser$ | async)?.id ?? ''\"\n      [editable]=\"(editable$ | async) ?? false\"\n      [metadata]=\"(userMetadata$ | async) ?? []\"\n      (removeMeta)=\"removeMetadata($event)\"\n      (addMeta)=\"addMetadataUser($event)\"\n    ></pry-metadata-editor>\n  </ng-template>\n\n  <ng-template #userDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.name' | i18n }} :\n      <strong>{{ user?.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.familyName' | i18n }} :\n      <strong>{{ user.familyName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.email' | i18n }} :\n      <strong>{{ user.email }}</strong>\n    </p>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i5$3.PryMetadataEditorComponent, selector: "pry-metadata-editor", inputs: ["targetId", "editable", "metadata"], outputs: ["addMeta", "removeMeta"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AdminUserSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-user-select', template: "<div\n  *ngIf=\"selectedUser$ | async as user\"\n  [id]=\"'panel-user-' + user.id\"\n  [attr.aria-labelledby]=\"'button-user-' + user.id\"\n  class=\"o-panel\"\n>\n  <div>\n    <div class=\"o-panel__header\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n        <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n        <pry-icon iconSvg=\"close\"></pry-icon>\n      </button>\n\n      <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n        {{ '@pry.admin.userInfo.info' | i18n }}\n      </h3>\n    </div>\n  </div>\n\n  <div class=\"o-tabs\">\n    <div class=\"o-tabs__list\" role=\"tablist\" [attr.aria-labelledby]=\"'tab-title-' + compId\">\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        role=\"tab\"\n        [id]=\"'tab-' + compId + '-0'\"\n        [attr.aria-selected]=\"tab === 0\"\n        [attr.tabindex]=\"tab === 0 ? 0 : -1\"\n        [attr.aria-controls]=\"'tabpanel-' + compId + '-0'\"\n        (click)=\"switch(0)\"\n      >\n        {{ '@pry.admin.userInfo.profile' | i18n }}\n      </button>\n\n      <button\n        type=\"button\"\n        class=\"o-tabs__list__btn\"\n        [id]=\"'tab-' + compId + '-1'\"\n        role=\"tab\"\n        [attr.aria-selected]=\"tab === 1\"\n        [attr.tabindex]=\"tab === 1 ? 0 : -1\"\n        [attr.aria-controls]=\"'tabpanel-' + compId + '-1'\"\n        (click)=\"switch(1)\"\n      >\n        {{ '@pry.admin.details' | i18n }}\n      </button>\n    </div>\n\n    <div class=\"o-tabs__panels\">\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 0\"\n        [id]=\"'tabpanel-' + compId + '-0'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + compId + '-0'\"\n        tabindex=\"0\"\n      >\n        <pry-metadata-editor\n          [targetId]=\"(selectedUser$ | async)?.id ?? ''\"\n          [editable]=\"(editable$ | async) ?? false\"\n          [metadata]=\"(userMetadata$ | async) ?? []\"\n          (removeMeta)=\"removeMetadata($event)\"\n          (addMeta)=\"addMetadataUser($event)\"\n        ></pry-metadata-editor>\n      </div>\n\n      <div\n        class=\"o-tabs__panels__item\"\n        [class.is-hidden]=\"tab !== 1\"\n        [id]=\"'tabpanel-' + compId + '-1'\"\n        role=\"tabpanel\"\n        [attr.aria-labelledby]=\"'tab-' + compId + '-1'\"\n        tabindex=\"0\"\n      >\n        <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n        <p class=\"a-p\">\n          {{ '@pry.admin.userInfo.name' | i18n }} :\n          <strong>{{ user?.name }}</strong>\n        </p>\n        <p class=\"a-p\">\n          {{ '@pry.admin.userInfo.familyName' | i18n }} :\n          <strong>{{ user.familyName }}</strong>\n        </p>\n        <p class=\"a-p\">\n          {{ '@pry.admin.userInfo.email' | i18n }} :\n          <strong>{{ user.email }}</strong>\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-user-select', template: "<div\n  *ngIf=\"selectedUser$ | async as user\"\n  [id]=\"'panel-user-' + user.id\"\n  [attr.aria-labelledby]=\"'button-user-' + user.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 [id]=\"'tab-title-' + compId\" class=\"a-h3\">\n      {{ '@pry.admin.userInfo.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"userProfile\" name=\"userInfo.profile\"></pry-tab>\n    <pry-tab [templateRef]=\"userDetails\" name=\"details\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #userProfile>\n    <pry-metadata-editor\n      [targetId]=\"(selectedUser$ | async)?.id ?? ''\"\n      [editable]=\"(editable$ | async) ?? false\"\n      [metadata]=\"(userMetadata$ | async) ?? []\"\n      (removeMeta)=\"removeMetadata($event)\"\n      (addMeta)=\"addMetadataUser($event)\"\n    ></pry-metadata-editor>\n  </ng-template>\n\n  <ng-template #userDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.name' | i18n }} :\n      <strong>{{ user?.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.familyName' | i18n }} :\n      <strong>{{ user.familyName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.userInfo.email' | i18n }} :\n      <strong>{{ user.email }}</strong>\n    </p>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { profil: [{
                 type: Input
             }] } });