@provoly/dashboard 0.20.1 → 0.20.3

package/esm2022/widgets/widget-table/get-value/get-value.pipe.mjs

@@ -11,7 +11,7 @@ export class GetValuePipe {
     transform(value, ...args) {
         return this.store.select(ClassSelectors.classes).pipe(combineLatestWith(this.store.select(FieldSelectors.fields)), filter(([classes, fields]) => !!classes && classes.length > 0), map(([classes, fields]) => {
             const oClass = classes.find((cl) => cl.id === value.oClass);
-            const attribute = oClass?.attributes.find((attr) => attr.name === args[0]);
+            const attribute = oClass?.attributes.find((attr) => attr.technicalName === args[0]);
             if (!!attribute) {
                 const field = fields.find((f) => f.id === attribute.field);
                 if (field &&
@@ -40,4 +40,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Pipe,
             args: [{ name: 'getValue' }]
         }], ctorParameters: function () { return [{ type: i1.Store }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2V0LXZhbHVlLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9wcm92b2x5L2Rhc2hib2FyZC93aWRnZXRzL3dpZGdldC10YWJsZS9nZXQtdmFsdWUvZ2V0LXZhbHVlLnBpcGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFFcEQsT0FBTyxFQUFFLGNBQWMsRUFBRSxjQUFjLEVBQUUsU0FBUyxFQUFRLFNBQVMsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ2hHLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN6QyxPQUFPLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFHN0MsTUFBTSxPQUFPLFlBQVk7SUFDdkIsWUFBb0IsS0FBaUI7UUFBakIsVUFBSyxHQUFMLEtBQUssQ0FBWTtJQUFHLENBQUM7SUFFekMsU0FBUyxDQUFDLEtBQVcsRUFBRSxHQUFHLElBQVc7UUFDbkMsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUNuRCxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxjQUFjLENBQUMsTUFBTSxDQUFDLENBQUMsRUFDM0QsTUFBTSxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsTUFBTSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxPQUFPLElBQUksT0FBTyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsRUFDOUQsR0FBRyxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsTUFBTSxDQUFDLEVBQUUsRUFBRTtZQUN4QixNQUFNLE1BQU0sR0FBRyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxLQUFLLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUM1RCxNQUFNLFNBQVMsR0FBRyxNQUFNLEVBQUUsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUMzRSxJQUFJLENBQUMsQ0FBQyxTQUFTLEVBQUU7Z0JBQ2YsTUFBTSxLQUFLLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsS0FBSyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQzNELElBQ0UsS0FBSztvQkFDTDt3QkFDRSxTQUFTLENBQUMsS0FBSzt3QkFDZixTQUFTLENBQUMsVUFBVTt3QkFDcEIsU0FBUyxDQUFDLElBQUk7d0JBQ2QsU0FBUyxDQUFDLFNBQVM7d0JBQ25CLFNBQVMsQ0FBQyxTQUFTO3dCQUNuQixTQUFTLENBQUMsT0FBTzt3QkFDakIsU0FBUyxDQUFDLFlBQVk7cUJBQ3ZCLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFDdEI7b0JBQ0EsYUFBYTtvQkFDYixNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQywyQkFBMkIsQ0FBQyxLQUFLLEVBQUUsU0FBUyxDQUFDLEVBQUUsV0FBVyxDQUFDLENBQUM7b0JBQ3pHLE9BQU8sV0FBVyxJQUFJLFdBQVcsQ0FBQyxNQUFNLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxHQUFHLFdBQVcsQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQztpQkFDcEc7Z0JBQ0QsT0FBTyxTQUFTLENBQUMsMkJBQTJCLENBQUMsS0FBSyxFQUFFLFNBQVMsQ0FBQyxDQUFDO2FBQ2hFO1lBQ0QsT0FBTyxTQUFTLENBQUMsMkJBQTJCLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQy9ELENBQUMsQ0FBQyxDQUNILENBQUM7SUFDSixDQUFDOytHQWpDVSxZQUFZOzZHQUFaLFlBQVk7OzRGQUFaLFlBQVk7a0JBRHhCLElBQUk7bUJBQUMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3RvcmUgfSBmcm9tICdAbmdyeC9zdG9yZSc7XG5pbXBvcnQgeyBDbGFzc1NlbGVjdG9ycywgRmllbGRTZWxlY3RvcnMsIEZpZWxkVHlwZSwgSXRlbSwgSXRlbVV0aWxzIH0gZnJvbSAnQHByb3ZvbHkvZGFzaGJvYXJkJztcbmltcG9ydCB7IGNvbWJpbmVMYXRlc3RXaXRoIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBmaWx0ZXIsIG1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQFBpcGUoeyBuYW1lOiAnZ2V0VmFsdWUnIH0pXG5leHBvcnQgY2xhc3MgR2V0VmFsdWVQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc3RvcmU6IFN0b3JlPGFueT4pIHt9XG5cbiAgdHJhbnNmb3JtKHZhbHVlOiBJdGVtLCAuLi5hcmdzOiBhbnlbXSk6IGFueSB7XG4gICAgcmV0dXJuIHRoaXMuc3RvcmUuc2VsZWN0KENsYXNzU2VsZWN0b3JzLmNsYXNzZXMpLnBpcGUoXG4gICAgICBjb21iaW5lTGF0ZXN0V2l0aCh0aGlzLnN0b3JlLnNlbGVjdChGaWVsZFNlbGVjdG9ycy5maWVsZHMpKSxcbiAgICAgIGZpbHRlcigoW2NsYXNzZXMsIGZpZWxkc10pID0+ICEhY2xhc3NlcyAmJiBjbGFzc2VzLmxlbmd0aCA+IDApLFxuICAgICAgbWFwKChbY2xhc3NlcywgZmllbGRzXSkgPT4ge1xuICAgICAgICBjb25zdCBvQ2xhc3MgPSBjbGFzc2VzLmZpbmQoKGNsKSA9PiBjbC5pZCA9PT0gdmFsdWUub0NsYXNzKTtcbiAgICAgICAgY29uc3QgYXR0cmlidXRlID0gb0NsYXNzPy5hdHRyaWJ1dGVzLmZpbmQoKGF0dHIpID0+IGF0dHIubmFtZSA9PT0gYXJnc1swXSk7XG4gICAgICAgIGlmICghIWF0dHJpYnV0ZSkge1xuICAgICAgICAgIGNvbnN0IGZpZWxkID0gZmllbGRzLmZpbmQoKGYpID0+IGYuaWQgPT09IGF0dHJpYnV0ZS5maWVsZCk7XG4gICAgICAgICAgaWYgKFxuICAgICAgICAgICAgZmllbGQgJiZcbiAgICAgICAgICAgIFtcbiAgICAgICAgICAgICAgRmllbGRUeXBlLlBPSU5ULFxuICAgICAgICAgICAgICBGaWVsZFR5cGUuTVVMVElQT0lOVCxcbiAgICAgICAgICAgICAgRmllbGRUeXBlLkxJTkUsXG4gICAgICAgICAgICAgIEZpZWxkVHlwZS5NVUxUSUxJTkUsXG4gICAgICAgICAgICAgIEZpZWxkVHlwZS5NVUxUSUxJTkUsXG4gICAgICAgICAgICAgIEZpZWxkVHlwZS5QT0xZR09OLFxuICAgICAgICAgICAgICBGaWVsZFR5cGUuTVVMVElQT0xZR09OXG4gICAgICAgICAgICBdLmluY2x1ZGVzKGZpZWxkLnR5cGUpXG4gICAgICAgICAgKSB7XG4gICAgICAgICAgICAvLyBAdHMtaWdub3JlXG4gICAgICAgICAgICBjb25zdCBjb29yZGluYXRlcyA9IEpTT04uc3RyaW5naWZ5KEl0ZW1VdGlscy5nZXRBdHRyaWJ1dGVDYWxjdWxhdGVkVmFsdWUodmFsdWUsIGF0dHJpYnV0ZSk/LmNvb3JkaW5hdGVzKTtcbiAgICAgICAgICAgIHJldHVybiBjb29yZGluYXRlcyAmJiBjb29yZGluYXRlcy5sZW5ndGggPiA0MCA/IGAke2Nvb3JkaW5hdGVzLnN1YnN0cmluZygwLCA0MCl9Li4uYCA6IGNvb3JkaW5hdGVzO1xuICAgICAgICAgIH1cbiAgICAgICAgICByZXR1cm4gSXRlbVV0aWxzLmdldEF0dHJpYnV0ZUNhbGN1bGF0ZWRWYWx1ZSh2YWx1ZSwgYXR0cmlidXRlKTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gSXRlbVV0aWxzLmdldEF0dHJpYnV0ZUNhbGN1bGF0ZWRWYWx1ZSh2YWx1ZSwgYXJnc1swXSk7XG4gICAgICB9KVxuICAgICk7XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2V0LXZhbHVlLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9wcm92b2x5L2Rhc2hib2FyZC93aWRnZXRzL3dpZGdldC10YWJsZS9nZXQtdmFsdWUvZ2V0LXZhbHVlLnBpcGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFFcEQsT0FBTyxFQUFFLGNBQWMsRUFBRSxjQUFjLEVBQUUsU0FBUyxFQUFRLFNBQVMsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ2hHLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN6QyxPQUFPLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFHN0MsTUFBTSxPQUFPLFlBQVk7SUFDdkIsWUFBb0IsS0FBaUI7UUFBakIsVUFBSyxHQUFMLEtBQUssQ0FBWTtJQUFHLENBQUM7SUFFekMsU0FBUyxDQUFDLEtBQVcsRUFBRSxHQUFHLElBQVc7UUFDbkMsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUNuRCxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxjQUFjLENBQUMsTUFBTSxDQUFDLENBQUMsRUFDM0QsTUFBTSxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsTUFBTSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxPQUFPLElBQUksT0FBTyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsRUFDOUQsR0FBRyxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsTUFBTSxDQUFDLEVBQUUsRUFBRTtZQUN4QixNQUFNLE1BQU0sR0FBRyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxLQUFLLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUM1RCxNQUFNLFNBQVMsR0FBRyxNQUFNLEVBQUUsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLGFBQWEsS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNwRixJQUFJLENBQUMsQ0FBQyxTQUFTLEVBQUU7Z0JBQ2YsTUFBTSxLQUFLLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsS0FBSyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7Z0JBQzNELElBQ0UsS0FBSztvQkFDTDt3QkFDRSxTQUFTLENBQUMsS0FBSzt3QkFDZixTQUFTLENBQUMsVUFBVTt3QkFDcEIsU0FBUyxDQUFDLElBQUk7d0JBQ2QsU0FBUyxDQUFDLFNBQVM7d0JBQ25CLFNBQVMsQ0FBQyxTQUFTO3dCQUNuQixTQUFTLENBQUMsT0FBTzt3QkFDakIsU0FBUyxDQUFDLFlBQVk7cUJBQ3ZCLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFDdEI7b0JBQ0EsYUFBYTtvQkFDYixNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQywyQkFBMkIsQ0FBQyxLQUFLLEVBQUUsU0FBUyxDQUFDLEVBQUUsV0FBVyxDQUFDLENBQUM7b0JBQ3pHLE9BQU8sV0FBVyxJQUFJLFdBQVcsQ0FBQyxNQUFNLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxHQUFHLFdBQVcsQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQztpQkFDcEc7Z0JBQ0QsT0FBTyxTQUFTLENBQUMsMkJBQTJCLENBQUMsS0FBSyxFQUFFLFNBQVMsQ0FBQyxDQUFDO2FBQ2hFO1lBQ0QsT0FBTyxTQUFTLENBQUMsMkJBQTJCLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQy9ELENBQUMsQ0FBQyxDQUNILENBQUM7SUFDSixDQUFDOytHQWpDVSxZQUFZOzZHQUFaLFlBQVk7OzRGQUFaLFlBQVk7a0JBRHhCLElBQUk7bUJBQUMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3RvcmUgfSBmcm9tICdAbmdyeC9zdG9yZSc7XG5pbXBvcnQgeyBDbGFzc1NlbGVjdG9ycywgRmllbGRTZWxlY3RvcnMsIEZpZWxkVHlwZSwgSXRlbSwgSXRlbVV0aWxzIH0gZnJvbSAnQHByb3ZvbHkvZGFzaGJvYXJkJztcbmltcG9ydCB7IGNvbWJpbmVMYXRlc3RXaXRoIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBmaWx0ZXIsIG1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQFBpcGUoeyBuYW1lOiAnZ2V0VmFsdWUnIH0pXG5leHBvcnQgY2xhc3MgR2V0VmFsdWVQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc3RvcmU6IFN0b3JlPGFueT4pIHt9XG5cbiAgdHJhbnNmb3JtKHZhbHVlOiBJdGVtLCAuLi5hcmdzOiBhbnlbXSk6IGFueSB7XG4gICAgcmV0dXJuIHRoaXMuc3RvcmUuc2VsZWN0KENsYXNzU2VsZWN0b3JzLmNsYXNzZXMpLnBpcGUoXG4gICAgICBjb21iaW5lTGF0ZXN0V2l0aCh0aGlzLnN0b3JlLnNlbGVjdChGaWVsZFNlbGVjdG9ycy5maWVsZHMpKSxcbiAgICAgIGZpbHRlcigoW2NsYXNzZXMsIGZpZWxkc10pID0+ICEhY2xhc3NlcyAmJiBjbGFzc2VzLmxlbmd0aCA+IDApLFxuICAgICAgbWFwKChbY2xhc3NlcywgZmllbGRzXSkgPT4ge1xuICAgICAgICBjb25zdCBvQ2xhc3MgPSBjbGFzc2VzLmZpbmQoKGNsKSA9PiBjbC5pZCA9PT0gdmFsdWUub0NsYXNzKTtcbiAgICAgICAgY29uc3QgYXR0cmlidXRlID0gb0NsYXNzPy5hdHRyaWJ1dGVzLmZpbmQoKGF0dHIpID0+IGF0dHIudGVjaG5pY2FsTmFtZSA9PT0gYXJnc1swXSk7XG4gICAgICAgIGlmICghIWF0dHJpYnV0ZSkge1xuICAgICAgICAgIGNvbnN0IGZpZWxkID0gZmllbGRzLmZpbmQoKGYpID0+IGYuaWQgPT09IGF0dHJpYnV0ZS5maWVsZCk7XG4gICAgICAgICAgaWYgKFxuICAgICAgICAgICAgZmllbGQgJiZcbiAgICAgICAgICAgIFtcbiAgICAgICAgICAgICAgRmllbGRUeXBlLlBPSU5ULFxuICAgICAgICAgICAgICBGaWVsZFR5cGUuTVVMVElQT0lOVCxcbiAgICAgICAgICAgICAgRmllbGRUeXBlLkxJTkUsXG4gICAgICAgICAgICAgIEZpZWxkVHlwZS5NVUxUSUxJTkUsXG4gICAgICAgICAgICAgIEZpZWxkVHlwZS5NVUxUSUxJTkUsXG4gICAgICAgICAgICAgIEZpZWxkVHlwZS5QT0xZR09OLFxuICAgICAgICAgICAgICBGaWVsZFR5cGUuTVVMVElQT0xZR09OXG4gICAgICAgICAgICBdLmluY2x1ZGVzKGZpZWxkLnR5cGUpXG4gICAgICAgICAgKSB7XG4gICAgICAgICAgICAvLyBAdHMtaWdub3JlXG4gICAgICAgICAgICBjb25zdCBjb29yZGluYXRlcyA9IEpTT04uc3RyaW5naWZ5KEl0ZW1VdGlscy5nZXRBdHRyaWJ1dGVDYWxjdWxhdGVkVmFsdWUodmFsdWUsIGF0dHJpYnV0ZSk/LmNvb3JkaW5hdGVzKTtcbiAgICAgICAgICAgIHJldHVybiBjb29yZGluYXRlcyAmJiBjb29yZGluYXRlcy5sZW5ndGggPiA0MCA/IGAke2Nvb3JkaW5hdGVzLnN1YnN0cmluZygwLCA0MCl9Li4uYCA6IGNvb3JkaW5hdGVzO1xuICAgICAgICAgIH1cbiAgICAgICAgICByZXR1cm4gSXRlbVV0aWxzLmdldEF0dHJpYnV0ZUNhbGN1bGF0ZWRWYWx1ZSh2YWx1ZSwgYXR0cmlidXRlKTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gSXRlbVV0aWxzLmdldEF0dHJpYnV0ZUNhbGN1bGF0ZWRWYWx1ZSh2YWx1ZSwgYXJnc1swXSk7XG4gICAgICB9KVxuICAgICk7XG4gIH1cbn1cbiJdfQ==

package/fesm2022/provoly-dashboard-admin.mjs

@@ -1031,9 +1031,9 @@ class AdminClassesCustomizeTooltipComponent extends SubscriptionnerDirective {
             if (component) {
                 component.instance.data.item = this.fields
                     .map((attr) => ({
-                    [attr.name]: {
+                    [attr.technicalName]: {
                         type: 'VALUE',
-                        value: '«' + this.translateService.instant('@pry.admin.customize.exemple', { expr: attr.name }) + '»',
+                        value: '«' + this.translateService.instant('@pry.admin.customize.exemple', { expr: attr.technicalName }) + '»',
                         visible: true
                     }
                 }))
@@ -1238,15 +1238,15 @@ class AdminClassesCustomizeComponent extends SubscriptionnerDirective {
         this.subscriptions.add(this.currentPropertiesConfig$.pipe(combineLatestWith(this.currentClass$)).subscribe(([attrs, clazz]) => {
             this.defaultAttributes = JSON.parse(JSON.stringify(attrs));
             this.otherAttributes = (clazz ?? { attributes: [] }).attributes
-                .map((attr) => attr.name)
-                .filter((name) => !attrs.includes(name));
+                .filter((attr) => !attrs.includes(attr.technicalName))
+                .map((attr) => attr.technicalName);
         }));
         this.currentTilePropertiesConfig$ = this.store.select(ConfigSelectors.tileAttributesDefinitions).pipe(combineLatestWith(this.currentClass$, this.fields$), map(([defs, clazz, fields]) => ItemUtils.getAttributesDefinitionForClass((clazz ?? { attributes: [] }), defs, fields)), map((attrs) => attrs.filter((_, i) => i < this.maxTilesAttributes)));
         this.subscriptions.add(this.currentTilePropertiesConfig$.pipe(combineLatestWith(this.currentClass$)).subscribe(([attrs, clazz]) => {
             this.defaultTileAttributes = JSON.parse(JSON.stringify(attrs));
             this.otherTileAttributes = (clazz ?? { attributes: [] }).attributes
-                .map((attr) => attr.name)
-                .filter((name) => !attrs.includes(name));
+                .filter((attr) => !attrs.includes(attr.technicalName))
+                .map((attr) => attr.technicalName);
         }));
         this.subscriptions.add(this.store.select(ConfigSelectors.maxAttributesInTiles).subscribe((max) => {
             this.maxTilesAttributes = max;
@@ -1430,8 +1430,9 @@ class AdminAttributesFormComponent {
         this.viewContainerRef = viewContainerRef;
         this.i18nService = i18nService;
         this.sub = new Subscription();
-        this.fieldTypeDescription = FIELD_OPTIONS;
         this.nameAlreadyExists = false;
+        this.technicalNameAlreadyExists = false;
+        this.fieldTypeDescription = FIELD_OPTIONS;
         this.isShowedCategory = false;
         this.catToAdd = {};
         this.filterCategories$ = new BehaviorSubject(undefined);
@@ -1441,7 +1442,11 @@ class AdminAttributesFormComponent {
         this.categories$ = combineLatest([this.store.select(CategorySelectors.categories), this.filterCategories$]).pipe(map(([categories, filter]) => categories.filter((cat) => !filter || cat.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))));
         this.attrForm = this.formBuilder.group({
             id: [v4()],
-            name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(100), noWhitespaceValidator]],
+            technicalName: [
+                '',
+                [Validators.required, Validators.minLength(2), Validators.maxLength(100), noWhitespaceValidator]
+            ],
+            name: ['', [Validators.maxLength(50), noWhitespaceValidator]],
             description: [{ value: '', disabled: true }],
             field: ['', [Validators.required]],
             category: [DEFAULT_CATEGORY_UUID],
@@ -1450,12 +1455,15 @@ class AdminAttributesFormComponent {
     }
     ngOnInit() {
         this.attributeNames = this.interClass?.attributes.map((attr) => attr.name);
+        this.attributeTechnicalNames = this.interClass?.attributes.map((attr) => attr.technicalName);
         if (this.selectedClass) {
             this.attributeNames = this.selectedClass.attributes.map((attr) => attr.name);
+            this.attributeTechnicalNames = this.selectedClass.attributes.map((attr) => attr.technicalName);
             if (this.selectedAttribute) {
                 this.attrForm.patchValue({
                     id: this.selectedAttribute.id,
-                    name: this.selectedAttribute.name,
+                    technicalName: this.selectedAttribute.technicalName,
+                    name: this.selectedAttribute.name ?? this.selectedAttribute.technicalName,
                     field: this.selectedAttribute.field,
                     category: this.selectedAttribute.category
                 });
@@ -1463,12 +1471,19 @@ class AdminAttributesFormComponent {
             }
         }
         if (this.attributeNames) {
-            this.nameAlreadyExists$ = combineLatest([
-                this.attrForm.get('name')?.valueChanges,
-                of(this.attributeNames)
-            ]).pipe(map(([value, attributeNames]) => attributeNames.includes(value) && value != this.selectedAttribute?.name));
+            this.nameAlreadyExists$ = this.attrForm
+                .get('name')
+                .valueChanges.pipe(map((value) => !!this.attributeNames?.includes(value) && value != this.selectedAttribute?.name));
             this.sub.add(this.nameAlreadyExists$.subscribe((value) => (this.nameAlreadyExists = value)));
         }
+        if (this.attributeTechnicalNames) {
+            this.technicalNameAlreadyExists$ = this.attrForm
+                .get('technicalName')
+                .valueChanges.pipe(map((value) => !!this.attributeTechnicalNames?.includes(value) && value != this.selectedAttribute?.technicalName));
+            this.sub.add(this.technicalNameAlreadyExists$.subscribe((value) => {
+                this.technicalNameAlreadyExists = value;
+            }));
+        }
         this.selectedFieldTypeDescription$ = this.attrForm.get('field')?.valueChanges.pipe(startWith(this.attrForm.get('field')?.value), distinctUntilChanged$1(), switchMap((selectedFieldId) => {
             return this.fields$.pipe(map((fields) => {
                 const fieldDescription = this.fieldTypeDescription.find((fieldType) => fieldType.varType === fields.find((field) => field.id === selectedFieldId)?.type);
@@ -1488,6 +1503,16 @@ class AdminAttributesFormComponent {
         this.attrForm.patchValue({
             name: this.attrForm.value.name.trim()
         });
+        if (!this.attrForm.value.name) {
+            this.attrForm.patchValue({
+                name: this.attrForm.value.technicalName.slice(0, 50)
+            });
+        }
+        if (this.attributeNames?.includes(this.attrForm.value.technicalName.slice(0, 50))) {
+            this.nameAlreadyExists = true;
+            this.attrForm.controls['name'].setErrors({ alreadyExists: true });
+            return;
+        }
         if (this.attrForm.valid) {
             let attrToSave = this.attrForm.getRawValue();
             let path = this.router.createUrlTree(['..'], { relativeTo: this.route });
@@ -1543,11 +1568,11 @@ class AdminAttributesFormComponent {
         this.closeCategory();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminAttributesFormComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i3$1.UntypedFormBuilder }, { token: i5.Overlay }, { token: i0.ViewContainerRef }, { token: i4.PryI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace') && !attrForm.get('name')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"title-container\">\n      <pry-select\n        id=\"type\"\n        class=\"a-pry-select\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [itemsAsOption]=\"true\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [templateLabel]=\"templateOption\"\n        [templateOption]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"selectedFieldTypeDescription$ | async as description\">\n        <div class=\"info-icon description-container description\">\n          <span class=\"info-text\">i</span>\n        </div>\n        <div class=\"description-tooltip title-tooltip\">\n          <p class=\"a-p -date\">{{ description }}</p>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [labelTranslate]=\"true\"\n      [items]=\"categories$ | async\"\n      (click)=\"showCategory()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scole=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAttributesFormComponent, selector: "pry-admin-attributes-form", inputs: { selectedClass: "selectedClass", interClass: "interClass", selectedAttribute: "selectedAttribute" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n : { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"title-container\">\n      <pry-select\n        id=\"type\"\n        class=\"a-pry-select\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [itemsAsOption]=\"true\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [templateLabel]=\"templateOption\"\n        [templateOption]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"selectedFieldTypeDescription$ | async as description\">\n        <div class=\"info-icon description-container description\">\n          <span class=\"info-text\">i</span>\n        </div>\n        <div class=\"description-tooltip title-tooltip\">\n          <p class=\"a-p -date\">{{ description }}</p>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [labelTranslate]=\"true\"\n      [items]=\"categories$ | async\"\n      (click)=\"showCategory()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scole=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PryAccessDirective, selector: "[pryAccess]", inputs: ["pryAccess"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PrySelectComponent, selector: "pry-select", inputs: ["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.2.12", ngImport: i0, type: AdminAttributesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-attributes-form', template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace') && !attrForm.get('name')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"title-container\">\n      <pry-select\n        id=\"type\"\n        class=\"a-pry-select\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [itemsAsOption]=\"true\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [templateLabel]=\"templateOption\"\n        [templateOption]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"selectedFieldTypeDescription$ | async as description\">\n        <div class=\"info-icon description-container description\">\n          <span class=\"info-text\">i</span>\n        </div>\n        <div class=\"description-tooltip title-tooltip\">\n          <p class=\"a-p -date\">{{ description }}</p>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [labelTranslate]=\"true\"\n      [items]=\"categories$ | async\"\n      (click)=\"showCategory()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scole=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-admin-attributes-form', template: "<form class=\"o-form\" [formGroup]=\"attrForm\" (ngSubmit)=\"addAttribute()\">\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</label>\n    <input id=\"attr_technicalName\" type=\"text\" class=\"a-form-field\" formControlName=\"technicalName\" required />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"technicalNameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('technicalName')?.invalid\">\n      <div *ngIf=\"attrForm.get('technicalName')?.dirty && attrForm.get('technicalName')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('minlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.minLength' | i18n : { len: 2 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('technicalName')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.maxLength' | i18n : { len: 100 }\n        }}</label>\n      </div>\n      <div\n        *ngIf=\"\n          attrForm.get('technicalName')?.hasError('whitespace') && !attrForm.get('technicalName')?.hasError('minlength')\n        \"\n      >\n        <label class=\"a-label a-label--help -error\" for=\"attr_technicalName\">{{\n          '@pry.admin.noWhitespace' | i18n\n        }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"attr_name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</label>\n    <input id=\"attr_name\" type=\"text\" class=\"a-form-field\" formControlName=\"name\" />\n    <label class=\"a-label a-label--help -error\" *ngIf=\"nameAlreadyExists$ | async\">{{\n      '@pry.admin.exists' | i18n\n    }}</label>\n    <div *ngIf=\"attrForm.get('name')?.invalid\">\n      <div *ngIf=\"attrForm.get('name')?.hasError('maxlength')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{\n          '@pry.admin.maxLength' | i18n : { len: 50 }\n        }}</label>\n      </div>\n      <div *ngIf=\"attrForm.get('name')?.hasError('whitespace')\">\n        <label class=\"a-label a-label--help -error\" for=\"attr_name\">{{ '@pry.admin.noWhitespace' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"type\">{{ '@pry.admin.classes.attributes.field' | i18n }}</label>\n    <div class=\"title-container\">\n      <pry-select\n        id=\"type\"\n        class=\"a-pry-select\"\n        formControlName=\"field\"\n        [items]=\"fields$ | async\"\n        [itemsAsOption]=\"true\"\n        [autocomplete]=\"true\"\n        bindLabel=\"name\"\n        bindValue=\"id\"\n        [isForm]=\"true\"\n        required=\"true\"\n        [templateLabel]=\"templateOption\"\n        [templateOption]=\"templateOption\"\n      ></pry-select>\n      <ng-template #templateOption let-item=\"item\">\n        <div class=\"aligned-option\">\n          <p>{{ item.name }}</p>\n          <div class=\"a-chips\" *ngIf=\"item.crs\">{{ item.crs }}</div>\n        </div>\n      </ng-template>\n      <ng-container *ngIf=\"selectedFieldTypeDescription$ | async as description\">\n        <div class=\"info-icon description-container description\">\n          <span class=\"info-text\">i</span>\n        </div>\n        <div class=\"description-tooltip title-tooltip\">\n          <p class=\"a-p -date\">{{ description }}</p>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"attrForm.get('field')?.invalid\">\n      <div *ngIf=\"attrForm.get('field')?.dirty && attrForm.get('field')?.hasError('required')\">\n        <label class=\"a-label a-label--help -error\">{{ '@pry.admin.required' | i18n }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"m-form-label-field -width-sm\">\n    <label class=\"a-label\" for=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</label>\n    <pry-select\n      id=\"category\"\n      class=\"form-control\"\n      formControlName=\"category\"\n      [labelTranslate]=\"true\"\n      [items]=\"categories$ | async\"\n      (click)=\"showCategory()\"\n      bindValue=\"id\"\n      bindLabel=\"name\"\n      [isForm]=\"true\"\n      [readonly]=\"true\"\n    ></pry-select>\n  </div>\n\n  <div class=\"m-btn-group -width-sm\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--secondary\"\n      (click)=\"goBack()\"\n      [innerHTML]=\"'@pry.admin.cancel' | i18n\"\n    ></button>\n    <button\n      *pryAccess=\"{ module: 'admin', page: 'classes', action: 'add_attribute' }\"\n      class=\"a-btn a-btn--primary\"\n      type=\"submit\"\n      [disabled]=\"attrForm.invalid || nameAlreadyExists || technicalNameAlreadyExists\"\n      [innerHTML]=\"(selectedAttribute ? '@pry.admin.edit' : '@pry.admin.create') | i18n\"\n    ></button>\n  </div>\n</form>\n\n<ng-template #template>\n  <div class=\"o-modal o-modal--selector\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.category.select' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"closeCategory()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <form (ngSubmit)=\"addCategory()\">\n      <div class=\"m-form-label-field selector\">\n        <label class=\"a-label\" for=\"name-search\">{{ '@pry.admin.classes.category.searchOrCreate' | i18n }}</label>\n        <input\n          type=\"text\"\n          class=\"a-form-field\"\n          (input)=\"search($event)\"\n          [(ngModel)]=\"catToAdd.name\"\n          name=\"name\"\n          id=\"name-search\"\n        />\n      </div>\n\n      <table class=\"a-table\">\n        <caption>\n          {{\n            '@pry.admin.classes.category.name' | i18n\n          }}\n        </caption>\n        <thead>\n          <tr>\n            <th scole=\"col\">{{ '@pry.admin.classes.category.name' | i18n }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let cat of categories$ | async\">\n            <td>\n              <button type=\"button\" class=\"a-btn a-btn--ghost select-it\" (click)=\"setCategory(cat)\">\n                <span class=\"u-visually-hidden\">{{ '@pry.admin.classes.category.selectIt' | i18n }}</span>\n                {{ cat.name }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <ng-container *ngIf=\"(categories$ | async)?.length === 0\">\n        <p class=\"a-p a-p--create\">\n          <strong>{{ catToAdd.name }} </strong>\n          <span [innerHTML]=\"'@pry.admin.classes.category.add' | i18n\"></span>\n        </p>\n        <button\n          type=\"submit\"\n          class=\"a-btn a-btn--primary\"\n          [innerHTML]=\"'@pry.admin.classes.category.create' | i18n\"\n        ></button>\n      </ng-container>\n    </form>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i3$1.UntypedFormBuilder }, { type: i5.Overlay }, { type: i0.ViewContainerRef }, { type: i4.PryI18nService }]; }, propDecorators: { selectedClass: [{
                 type: Input
             }], interClass: [{
@@ -1761,11 +1786,11 @@ class AdminClassesViewComponent {
         this.dispatchCloseModal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminClassesViewComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i5.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminClassesViewComponent, selector: "pry-admin-classes-view", viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"(selectedclass$ | async) || (interClass$ | async) as selectedClass\">\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">\n      {{ '@pry.admin.classes.title' | i18n: { class: selectedClass.name } }}\n    </h1>\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"name\"\n      prySortDirection=\"asc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.admin.classes.title' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</th>\n          <th prySortHeader=\"field\">{{ '@pry.admin.classes.attributes.field' | i18n }}</th>\n          <th prySortHeader=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let attr of attributesExtended$ | async | prySortData: sortActive : sortDirection\"\n          (click)=\"selectAttr(attr)\"\n          [class.is-selected]=\"(selectedAttributeId$ | async) === attr.id\"\n        >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-attr-' + attr.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedAttributeId$ | async) === attr.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-attr-' + attr.id\"\n            >\n              <span class=\"u-visually-hidden\">{{ attr.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ attr.name }}</td>\n          <td>{{ attr.fieldName }}</td>\n          <td>{{ attr.categoryName }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-container>\n\n<ng-template #confirmationModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.createClassConfirmMessage' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"dispatchCloseModal()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"saveClass()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"dispatchCloseModal()\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminClassesViewComponent, selector: "pry-admin-classes-view", viewQueries: [{ propertyName: "confirmationModal", first: true, predicate: ["confirmationModal"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"(selectedclass$ | async) || (interClass$ | async) as selectedClass\">\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">\n      {{ '@pry.admin.classes.title' | i18n : { class: selectedClass.name } }}\n    </h1>\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"name\"\n      prySortDirection=\"asc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.admin.classes.title' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</th>\n          <th prySortHeader=\"field\">{{ '@pry.admin.classes.attributes.field' | i18n }}</th>\n          <th prySortHeader=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let attr of attributesExtended$ | async | prySortData : sortActive : sortDirection\"\n          (click)=\"selectAttr(attr)\"\n          [class.is-selected]=\"(selectedAttributeId$ | async) === attr.id\"\n        >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-attr-' + attr.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedAttributeId$ | async) === attr.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-attr-' + attr.id\"\n            >\n              <span class=\"u-visually-hidden\">{{ attr.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ attr.technicalName }}</td>\n          <td>{{ attr.name }}</td>\n          <td>{{ attr.fieldName }}</td>\n          <td>{{ attr.categoryName }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-container>\n\n<ng-template #confirmationModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.createClassConfirmMessage' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"dispatchCloseModal()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"saveClass()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"dispatchCloseModal()\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i4.PrySortHeaderComponent, selector: "th[prySortHeader]", inputs: ["prySortHeader"], outputs: ["sortChange"] }, { kind: "directive", type: i4.PrySortHeaderDirective, selector: "[prySortHeader]" }, { kind: "directive", type: i4.PrySortTableDirective, selector: "[prySortTable]", inputs: ["prySortActive", "prySortDirection"], outputs: ["prySortChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PrySortDataPipe, name: "prySortData" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminClassesViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-classes-view', template: "<ng-container *ngIf=\"(selectedclass$ | async) || (interClass$ | async) as selectedClass\">\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">\n      {{ '@pry.admin.classes.title' | i18n: { class: selectedClass.name } }}\n    </h1>\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"name\"\n      prySortDirection=\"asc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.admin.classes.title' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</th>\n          <th prySortHeader=\"field\">{{ '@pry.admin.classes.attributes.field' | i18n }}</th>\n          <th prySortHeader=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let attr of attributesExtended$ | async | prySortData: sortActive : sortDirection\"\n          (click)=\"selectAttr(attr)\"\n          [class.is-selected]=\"(selectedAttributeId$ | async) === attr.id\"\n        >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-attr-' + attr.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedAttributeId$ | async) === attr.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-attr-' + attr.id\"\n            >\n              <span class=\"u-visually-hidden\">{{ attr.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ attr.name }}</td>\n          <td>{{ attr.fieldName }}</td>\n          <td>{{ attr.categoryName }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-container>\n\n<ng-template #confirmationModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.createClassConfirmMessage' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"dispatchCloseModal()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"saveClass()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"dispatchCloseModal()\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pry-admin-classes-view', template: "<ng-container *ngIf=\"(selectedclass$ | async) || (interClass$ | async) as selectedClass\">\n  <div class=\"o-base-container\">\n    <h1 class=\"a-h1\">\n      {{ '@pry.admin.classes.title' | i18n : { class: selectedClass.name } }}\n    </h1>\n    <table\n      class=\"a-table\"\n      prySortTable\n      prySortActive=\"name\"\n      prySortDirection=\"asc\"\n      (prySortChange)=\"sortActive = $event.active; sortDirection = $event.direction\"\n    >\n      <caption>\n        {{\n          '@pry.admin.classes.title' | i18n\n        }},\n        {{\n          '@pry.action.sortableColumnHeader' | i18n\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th></th>\n          <th prySortHeader=\"technicalName\">{{ '@pry.admin.classes.attributes.technicalName' | i18n }}</th>\n          <th prySortHeader=\"name\">{{ '@pry.admin.classes.attributes.name' | i18n }}</th>\n          <th prySortHeader=\"field\">{{ '@pry.admin.classes.attributes.field' | i18n }}</th>\n          <th prySortHeader=\"category\">{{ '@pry.admin.classes.attributes.category' | i18n }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr\n          *ngFor=\"let attr of attributesExtended$ | async | prySortData : sortActive : sortDirection\"\n          (click)=\"selectAttr(attr)\"\n          [class.is-selected]=\"(selectedAttributeId$ | async) === attr.id\"\n        >\n          <td class=\"view-details\">\n            <button\n              [id]=\"'button-attr-' + attr.id\"\n              type=\"button\"\n              class=\"a-btn a-btn--icon-only\"\n              title=\"{{ '@pry.action.viewDetails' | i18n }}\"\n              [attr.aria-expanded]=\"(selectedAttributeId$ | async) === attr.id\"\n              aria-haspopup\n              [attr.aria-controls]=\"'panel-attr-' + attr.id\"\n            >\n              <span class=\"u-visually-hidden\">{{ attr.name }}, {{ '@pry.action.viewDetails' | i18n }}</span>\n              <pry-icon iconSvg=\"eye\" [width]=\"15\" [height]=\"15\"></pry-icon>\n            </button>\n          </td>\n          <td>{{ attr.technicalName }}</td>\n          <td>{{ attr.name }}</td>\n          <td>{{ attr.fieldName }}</td>\n          <td>{{ attr.categoryName }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</ng-container>\n\n<ng-template #confirmationModal>\n  <div class=\"o-modal\">\n    <div class=\"o-modal__top\">\n      <div class=\"o-modal__top__title\">\n        <h2 class=\"a-h2\" id=\"dialog_title\">\n          {{ '@pry.admin.classes.createClassConfirmMessage' | i18n }}\n        </h2>\n      </div>\n      <div class=\"o-modal__top__close\">\n        <button class=\"a-btn a-btn--icon-only\" (click)=\"dispatchCloseModal()\">\n          <pry-icon iconSvg=\"close\" [height]=\"35\" [width]=\"35\"></pry-icon>\n          <span class=\"u-visually-hidden\">{{ '@pry.toolbox.close' | i18n }}</span>\n        </button>\n      </div>\n    </div>\n    <div class=\"m-btn-group\">\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"saveClass()\">\n        {{ '@pry.toolbox.manifest.validate' | i18n }}\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--secondary\" (click)=\"dispatchCloseModal()\">\n        {{ '@pry.toolbox.manifest.close' | i18n }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i5.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { confirmationModal: [{
                 type: ViewChild,
                 args: ['confirmationModal', { read: TemplateRef }]
@@ -2717,11 +2742,11 @@ class AdminAttributesSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminAttributesSelectComponent, deps: [{ token: i1.Store }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAttributesSelectComponent, selector: "pry-admin-attribute-select", ngImport: i0, template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.classes.attributes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"attributeDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"attributeAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #attributeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.name' | i18n }} :\n      <strong>{{ attribute.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.field' | i18n }} :\n      <strong>{{ attribute.fieldName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.category' | i18n }} :\n      <strong>{{ attribute.categoryName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n      <strong>{{ attribute.multiValued }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #attributeAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdminAttributesSelectComponent, selector: "pry-admin-attribute-select", ngImport: i0, template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.classes.attributes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"attributeDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"attributeAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #attributeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.technicalName' | i18n }} :\n      <strong>{{ attribute.technicalName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.name' | i18n }} :\n      <strong>{{ attribute.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.field' | i18n }} :\n      <strong>{{ attribute.fieldName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.category' | i18n }} :\n      <strong>{{ attribute.categoryName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n      <strong>{{ attribute.multiValued }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #attributeAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TabGroupComponent, selector: "pry-tab-group", inputs: ["translationStringBase"] }, { kind: "component", type: i4.TabComponent, selector: "pry-tab", inputs: ["name", "templateRef", "index"] }, { kind: "component", type: i4.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: PryAssociationComponent, selector: "pry-association", inputs: ["associations"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdminAttributesSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-admin-attribute-select', template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.classes.attributes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"attributeDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"attributeAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #attributeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.name' | i18n }} :\n      <strong>{{ attribute.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.field' | i18n }} :\n      <strong>{{ attribute.fieldName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.category' | i18n }} :\n      <strong>{{ attribute.categoryName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n      <strong>{{ attribute.multiValued }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #attributeAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pry-admin-attribute-select', template: "<div\n  *ngIf=\"selectedAttribute$ | async as attribute\"\n  [id]=\"'panel-attr-' + attribute.id\"\n  [attr.aria-labelledby]=\"'button-attr-' + attribute.id\"\n  class=\"o-panel\"\n>\n  <div class=\"o-panel__header\">\n    <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"closePanel()\">\n      <span class=\"u-visually-hidden\">{{ '@pry.action.closePanel' | i18n }}</span>\n      <pry-icon iconSvg=\"close\"></pry-icon>\n    </button>\n\n    <h3 class=\"a-h3\">\n      {{ '@pry.admin.classes.attributes.info' | i18n }}\n    </h3>\n  </div>\n\n  <pry-tab-group translationStringBase=\"@pry.admin.\">\n    <pry-tab [templateRef]=\"attributeDetails\" name=\"details\"></pry-tab>\n    <pry-tab [templateRef]=\"attributeAssociations\" name=\"classes.associations\"></pry-tab>\n  </pry-tab-group>\n\n  <ng-template #attributeDetails>\n    <h4 class=\"a-h4\">{{ '@pry.admin.properties' | i18n }}</h4>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.technicalName' | i18n }} :\n      <strong>{{ attribute.technicalName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.name' | i18n }} :\n      <strong>{{ attribute.name }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.field' | i18n }} :\n      <strong>{{ attribute.fieldName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.category' | i18n }} :\n      <strong>{{ attribute.categoryName }}</strong>\n    </p>\n    <p class=\"a-p\">\n      {{ '@pry.admin.classes.attributes.multiValued' | i18n }} :\n      <strong>{{ attribute.multiValued }}</strong>\n    </p>\n  </ng-template>\n\n  <ng-template #attributeAssociations>\n    <div *ngIf=\"associations$ | async as associations\" class=\"o-tabs__panels__item__content\">\n      <h4 class=\"a-h4\">{{ '@pry.admin.classes.associations' | i18n }}</h4>\n      <pry-association [associations]=\"associations\"></pry-association>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.Router }, { type: i2.ActivatedRoute }]; } });
 
 class AdminSelectDatasetComponent extends SubscriptionnerDirective {
@@ -2897,7 +2922,7 @@ class AdminFieldsSelectComponent {
             return classes
                 .map((clazz) => clazz.attributes
                 .filter((attribute) => attribute.field === field?.id)
-                .map((attribute) => ({ name: attribute.name, classId: clazz.id })))
+                .map((attribute) => ({ technicalName: attribute.technicalName, classId: clazz.id })))
                 .flat();
         }));
     }
@@ -5993,7 +6018,8 @@ const enTranslations = {
                 attributes: {
                     add: 'business model Add attribute',
                     edit: 'Edit attribute',
-                    name: 'Attribute name',
+                    name: 'Attribute label',
+                    technicalName: 'Technical name',
                     info: 'Attribute information',
                     description: 'Description',
                     field: 'Field',
@@ -6362,7 +6388,8 @@ const frTranslations = {
                     edit: "Modifier l'attribut",
                     info: "Détail de l'attribut",
                     delete: "Supprimer l'attribut",
-                    name: 'Nom attribut',
+                    name: "Libellé de l'attribut",
+                    technicalName: 'Nom technique',
                     description: 'Description',
                     field: 'Type',
                     category: 'Catégorie',