@masterteam/users-groups 0.0.13 → 0.0.15

package/fesm2022/masterteam-users-groups.mjs

@@ -13,6 +13,7 @@ import { Table } from '@masterteam/components/table';
 import * as i1 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { Avatar } from '@masterteam/components/avatar';
+import { Icon } from '@masterteam/icons';
 import { ModalService } from '@masterteam/components/modal';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/forms';
@@ -21,6 +22,7 @@ import { DynamicForm } from '@masterteam/forms/dynamic-form';
 import { ModalRef, DialogService } from '@masterteam/components/dialog';
 import { Tabs } from '@masterteam/components/tabs';
 import { finalize } from 'rxjs';
+import { SecureImagePipe } from '@masterteam/components/upload-field';
 
 class GetUsers {
     static type = '[UsersGroups] Get Users';
@@ -62,6 +64,13 @@ class DeleteUser {
         this.userName = userName;
     }
 }
+class GetUserSummary {
+    userName;
+    static type = '[UsersGroups] Get User Summary';
+    constructor(userName) {
+        this.userName = userName;
+    }
+}
 class ResetUserPassword {
     id;
     payload;
@@ -122,6 +131,7 @@ var UsersGroupsActionKey;
     UsersGroupsActionKey["CreateUser"] = "createUser";
     UsersGroupsActionKey["UpdateUser"] = "updateUser";
     UsersGroupsActionKey["DeleteUser"] = "deleteUser";
+    UsersGroupsActionKey["GetUserSummary"] = "getUserSummary";
     UsersGroupsActionKey["AddUserToGroup"] = "addUserToGroup";
     UsersGroupsActionKey["DeleteUserFromGroup"] = "deleteUserFromGroup";
     UsersGroupsActionKey["GetGroups"] = "getGroups";
@@ -152,6 +162,9 @@ let UsersGroupsState = class UsersGroupsState extends CrudStateBase {
     static getSelectedUser(state) {
         return state.selectedUser;
     }
+    static getUserSummary(state) {
+        return state.userSummary;
+    }
     static getGroups(state) {
         return state.groups;
     }
@@ -223,13 +236,15 @@ let UsersGroupsState = class UsersGroupsState extends CrudStateBase {
             key: UsersGroupsActionKey.AddUserToGroup,
             request$: req$,
             onSuccess: (response, state) => {
-                const newMembers = response.data?.members ?? [];
-                const existingMembers = state.selectedGroup?.members ?? [];
+                const updatedGroup = response.data;
+                if (!updatedGroup)
+                    return {};
                 return {
                     selectedGroup: {
                         ...(state.selectedGroup ?? {}),
-                        members: [...existingMembers, ...newMembers],
+                        ...updatedGroup,
                     },
+                    groups: this.adapter.upsertOne(state.groups, updatedGroup, 'id'),
                 };
             },
         });
@@ -268,6 +283,17 @@ let UsersGroupsState = class UsersGroupsState extends CrudStateBase {
             id: userName,
         });
     }
+    getUserSummary(ctx, { userName }) {
+        const req$ = this.http.get(`identity/users/${userName}/summary`, { context: this.context });
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.GetUserSummary,
+            request$: req$,
+            onSuccess: (response) => ({
+                userSummary: response.data ?? null,
+            }),
+        });
+    }
     resetUserPassword(ctx, { id, payload }) {
         const req$ = this.http.put(`Identity/users/${id}/password/reset`, payload, {
             context: this.context,
@@ -391,6 +417,9 @@ __decorate([
 __decorate([
     Action(DeleteUser)
 ], UsersGroupsState.prototype, "deleteUser", null);
+__decorate([
+    Action(GetUserSummary)
+], UsersGroupsState.prototype, "getUserSummary", null);
 __decorate([
     Action(ResetUserPassword)
 ], UsersGroupsState.prototype, "resetUserPassword", null);
@@ -421,6 +450,9 @@ __decorate([
 __decorate([
     Selector()
 ], UsersGroupsState, "getSelectedUser", null);
+__decorate([
+    Selector()
+], UsersGroupsState, "getUserSummary", null);
 __decorate([
     Selector()
 ], UsersGroupsState, "getGroups", null);
@@ -439,6 +471,7 @@ UsersGroupsState = __decorate([
         defaults: {
             users: [],
             selectedUser: null,
+            userSummary: null,
             groups: [],
             selectedGroup: null,
             loadingActive: [],
@@ -448,7 +481,7 @@ UsersGroupsState = __decorate([
 ], UsersGroupsState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UsersGroupsState, decorators: [{
             type: Injectable
-        }], propDecorators: { getUsers: [], getUser: [], createUser: [], addUserToGroup: [], updateUser: [], deleteUser: [], resetUserPassword: [], deleteUserFromGroup: [], getGroups: [], getGroup: [], createGroup: [], updateGroup: [], deleteGroup: [], clearSelectedGroup: [] } });
+        }], propDecorators: { getUsers: [], getUser: [], createUser: [], addUserToGroup: [], updateUser: [], deleteUser: [], getUserSummary: [], resetUserPassword: [], deleteUserFromGroup: [], getGroups: [], getGroup: [], createGroup: [], updateGroup: [], deleteGroup: [], clearSelectedGroup: [] } });
 
 class UsersGroupsFacade {
     store = inject(Store);
@@ -457,6 +490,7 @@ class UsersGroupsFacade {
     // ============================================================================
     users = select(UsersGroupsState.getUsers);
     selectedUser = select(UsersGroupsState.getSelectedUser);
+    userSummary = select(UsersGroupsState.getUserSummary);
     groups = select(UsersGroupsState.getGroups);
     selectedGroup = select(UsersGroupsState.getSelectedGroup);
     // ============================================================================
@@ -471,6 +505,7 @@ class UsersGroupsFacade {
     isSavingUser = computed(() => this.loadingActive().includes(UsersGroupsActionKey.CreateUser) ||
         this.loadingActive().includes(UsersGroupsActionKey.UpdateUser), ...(ngDevMode ? [{ debugName: "isSavingUser" }] : /* istanbul ignore next */ []));
     isDeletingUser = computed(() => this.loadingActive().includes(UsersGroupsActionKey.DeleteUser), ...(ngDevMode ? [{ debugName: "isDeletingUser" }] : /* istanbul ignore next */ []));
+    isLoadingUserSummary = computed(() => this.loadingActive().includes(UsersGroupsActionKey.GetUserSummary), ...(ngDevMode ? [{ debugName: "isLoadingUserSummary" }] : /* istanbul ignore next */ []));
     isLoadingGroups = computed(() => this.loadingActive().includes(UsersGroupsActionKey.GetGroups), ...(ngDevMode ? [{ debugName: "isLoadingGroups" }] : /* istanbul ignore next */ []));
     isLoadingGroup = computed(() => this.loadingActive().includes(UsersGroupsActionKey.GetGroup), ...(ngDevMode ? [{ debugName: "isLoadingGroup" }] : /* istanbul ignore next */ []));
     isSavingGroup = computed(() => this.loadingActive().includes(UsersGroupsActionKey.CreateGroup) ||
@@ -503,6 +538,9 @@ class UsersGroupsFacade {
     deleteUser(userName) {
         return this.store.dispatch(new DeleteUser(userName));
     }
+    getUserSummary(userName) {
+        return this.store.dispatch(new GetUserSummary(userName));
+    }
     resetUserPassword(id, payload) {
         return this.store.dispatch(new ResetUserPassword(id, payload));
     }
@@ -596,6 +634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         }] });
 
 class UserForm {
+    passwordPattern = '^(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?=.*[a-z])(?=.*\\d).{6,}$';
     modal = inject(ModalService);
     ref = inject(ModalRef);
     userForEdit = input(null, ...(ngDevMode ? [{ debugName: "userForEdit" }] : /* istanbul ignore next */ []));
@@ -671,7 +710,7 @@ class UserForm {
                 fields: [
                     new UploadFileFieldConfig({
                         key: 'image',
-                        label: 'Avatar',
+                        label: this.translocoService.translate('users-groups.avatar'),
                         shape: 'circle',
                         endPoint: 'avatar',
                         context: this.contextGatway,
@@ -703,7 +742,10 @@ class UserForm {
                         key: 'mobile',
                         label: this.translocoService.translate('users-groups.mobile'),
                         placeholder: this.translocoService.translate('users-groups.mobile'),
-                        validators: [ValidatorConfig.required()],
+                        validators: [
+                            ValidatorConfig.required(),
+                            ValidatorConfig.pattern('^\\+?[0-9]{7,15}$', this.translocoService.translate('users-groups.mobile-invalid')),
+                        ],
                         colSpan: this.fieldColSpan(),
                         order: 4,
                     },
@@ -776,6 +818,7 @@ class UserForm {
     }
     updateFormFields() {
         if (!this.userForEdit()?.userName) {
+            const passwordRules = this.translocoService.translate('users-groups.password-rules');
             this.externalUserFormConfig().sections[0].fields.push({
                 key: 'userName',
                 label: this.translocoService.translate('users-groups.user-name'),
@@ -791,9 +834,10 @@ class UserForm {
                 key: 'password',
                 label: this.translocoService.translate('users-groups.password'),
                 placeholder: this.translocoService.translate('users-groups.password'),
+                hint: passwordRules,
                 validators: [
                     ValidatorConfig.required(),
-                    ValidatorConfig.pattern('^(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).+$', "Passwords must have at least one non alphanumeric character.\nPasswords must have at least one uppercase ('A'-'Z')."),
+                    ValidatorConfig.pattern(this.passwordPattern, passwordRules),
                 ],
                 inputType: 'password',
                 colSpan: 6,
@@ -803,9 +847,14 @@ class UserForm {
                 key: 'confirmPassword',
                 label: this.translocoService.translate('users-groups.confirm-password'),
                 placeholder: this.translocoService.translate('users-groups.confirm-password'),
+                hint: passwordRules,
                 validators: [
                     ValidatorConfig.required(),
-                    ValidatorConfig.pattern('^(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).+$', "Passwords must have at least one non alphanumeric character.\nPasswords must have at least one uppercase ('A'-'Z')."),
+                    ValidatorConfig.pattern(this.passwordPattern, passwordRules),
+                    ValidatorConfig.custom((value, control) => {
+                        const password = control?.parent?.get('password')?.value;
+                        return !value || !password || value === password;
+                    }, this.translocoService.translate('users-groups.passwords-must-match')),
                 ],
                 inputType: 'password',
                 colSpan: 6,
@@ -815,7 +864,7 @@ class UserForm {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UserForm, isStandalone: true, selector: "mt-user-form", inputs: { userForEdit: { classPropertyName: "userForEdit", publicName: "userForEdit", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getUserFormLoading()) {\r\n      <div class=\"flex justify-center\">\r\n        <div class=\"w-60\">\r\n          <mt-tabs\r\n            [(active)]=\"selectedTab\"\r\n            [options]=\"tabsList\"\r\n            fluid\r\n            size=\"small\"\r\n            [disabled]=\"!!this.userForEdit()?.userName\"\r\n          ></mt-tabs>\r\n        </div>\r\n      </div>\r\n\r\n      <form class=\"col-span-1\">\r\n        @if (selectedTab() === \"internal\") {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n        } @else {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"externalUserFormConfig()\"\r\n            [formControl]=\"externalUserFormControl\"\r\n          />\r\n        }\r\n      </form>\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"selectedUser() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateUserLoading()\"\r\n      [disabled]=\"isSubmitDisabled()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UserForm, isStandalone: true, selector: "mt-user-form", inputs: { userForEdit: { classPropertyName: "userForEdit", publicName: "userForEdit", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getUserFormLoading()) {\r\n      <div class=\"flex justify-center\">\r\n        <div class=\"w-60\">\r\n          <mt-tabs\r\n            [(active)]=\"selectedTab\"\r\n            [options]=\"tabsList\"\r\n            fluid\r\n            size=\"small\"\r\n            [disabled]=\"!!this.userForEdit()?.userName\"\r\n          ></mt-tabs>\r\n        </div>\r\n      </div>\r\n\r\n      <form class=\"col-span-1\">\r\n        @if (selectedTab() === \"internal\") {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n        } @else {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"externalUserFormConfig()\"\r\n            [formControl]=\"externalUserFormControl\"\r\n          />\r\n        }\r\n      </form>\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"createUpdateUserLoading()\"\r\n      (click)=\"ref.close(false)\"\r\n    />\r\n    <mt-button\r\n      [label]=\"selectedUser() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateUserLoading()\"\r\n      [disabled]=\"isSubmitDisabled()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserForm, decorators: [{
             type: Component,
@@ -828,38 +877,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ReactiveFormsModule,
                         Tabs,
                         TranslocoPipe,
-                    ], providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getUserFormLoading()) {\r\n      <div class=\"flex justify-center\">\r\n        <div class=\"w-60\">\r\n          <mt-tabs\r\n            [(active)]=\"selectedTab\"\r\n            [options]=\"tabsList\"\r\n            fluid\r\n            size=\"small\"\r\n            [disabled]=\"!!this.userForEdit()?.userName\"\r\n          ></mt-tabs>\r\n        </div>\r\n      </div>\r\n\r\n      <form class=\"col-span-1\">\r\n        @if (selectedTab() === \"internal\") {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n        } @else {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"externalUserFormConfig()\"\r\n            [formControl]=\"externalUserFormControl\"\r\n          />\r\n        }\r\n      </form>\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"selectedUser() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateUserLoading()\"\r\n      [disabled]=\"isSubmitDisabled()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+                    ], providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getUserFormLoading()) {\r\n      <div class=\"flex justify-center\">\r\n        <div class=\"w-60\">\r\n          <mt-tabs\r\n            [(active)]=\"selectedTab\"\r\n            [options]=\"tabsList\"\r\n            fluid\r\n            size=\"small\"\r\n            [disabled]=\"!!this.userForEdit()?.userName\"\r\n          ></mt-tabs>\r\n        </div>\r\n      </div>\r\n\r\n      <form class=\"col-span-1\">\r\n        @if (selectedTab() === \"internal\") {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n        } @else {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"externalUserFormConfig()\"\r\n            [formControl]=\"externalUserFormControl\"\r\n          />\r\n        }\r\n      </form>\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"createUpdateUserLoading()\"\r\n      (click)=\"ref.close(false)\"\r\n    />\r\n    <mt-button\r\n      [label]=\"selectedUser() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateUserLoading()\"\r\n      [disabled]=\"isSubmitDisabled()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { userForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "userForEdit", required: false }] }] } });
-function passwordMatchValidator(passwordControlName, confirmPasswordControlName) {
-    return (group) => {
-        // 1. Get the controls from the group
-        const passwordControl = group.get(passwordControlName);
-        const confirmPasswordControl = group.get(confirmPasswordControlName);
-        // 2. Basic checks (if controls don't exist, or if one is null, it's not a mismatch error)
-        if (!passwordControl || !confirmPasswordControl) {
-            return null;
-        }
-        // 3. Check for value mismatch
-        if (passwordControl.value !== confirmPasswordControl.value) {
-            // 4. Set the error on the 'confirm password' control for clearer user feedback
-            confirmPasswordControl.setErrors({ mismatch: true });
-            return { mismatch: true }; // The group itself has a mismatch error
-        }
-        else {
-            // 5. If they match, clear any previous mismatch error on the 'confirm password' control
-            if (confirmPasswordControl.hasError('mismatch')) {
-                const errors = confirmPasswordControl.errors;
-                if (errors) {
-                    delete errors['mismatch'];
-                    confirmPasswordControl.setErrors(Object.keys(errors).length > 0 ? errors : null);
-                }
-            }
-            return null; // No mismatch error
-        }
-    };
-}
 
 class ResetPasswordForm {
+    passwordPattern = '^(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?=.*[a-z])(?=.*\\d).{6,}$';
     modal = inject(ModalService);
     ref = inject(ModalRef);
     translocoService = inject(TranslocoService);
@@ -885,9 +907,10 @@ class ResetPasswordForm {
                         key: 'newPassword',
                         inputType: 'password',
                         label: this.translocoService.translate('users-groups.new-password'),
+                        hint: this.translocoService.translate('users-groups.password-rules'),
                         validators: [
                             ValidatorConfig.required(),
-                            ValidatorConfig.pattern('^(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).+$', "Passwords must have at least one non alphanumeric character.\nPasswords must have at least one uppercase ('A'-'Z')."),
+                            ValidatorConfig.pattern(this.passwordPattern, this.translocoService.translate('users-groups.password-rules')),
                         ],
                     },
                 ],
@@ -913,7 +936,7 @@ class ResetPasswordForm {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ResetPasswordForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: ResetPasswordForm, isStandalone: true, selector: "mt-reset-password-form", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <form class=\"p-4\" [class]=\"modal.contentClass\">\r\n    <mt-dynamic-form\r\n      [formConfig]=\"resetPasswordFormConfig()\"\r\n      [formControl]=\"resetPasswordFormControl\"\r\n    />\r\n  </form>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"'save' | transloco\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"passwordResetLoading()\"\r\n      [disabled]=\"!this.resetPasswordFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: ResetPasswordForm, isStandalone: true, selector: "mt-reset-password-form", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <form class=\"p-4\" [class]=\"modal.contentClass\">\r\n    <mt-dynamic-form\r\n      [formConfig]=\"resetPasswordFormConfig()\"\r\n      [formControl]=\"resetPasswordFormControl\"\r\n    />\r\n  </form>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"passwordResetLoading()\"\r\n      (click)=\"ref.close(false)\"\r\n    />\r\n    <mt-button\r\n      [label]=\"'save' | transloco\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"passwordResetLoading()\"\r\n      [disabled]=\"!this.resetPasswordFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ResetPasswordForm, decorators: [{
             type: Component,
@@ -925,7 +948,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         DynamicForm,
                         ReactiveFormsModule,
                         TranslocoPipe,
-                    ], providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <form class=\"p-4\" [class]=\"modal.contentClass\">\r\n    <mt-dynamic-form\r\n      [formConfig]=\"resetPasswordFormConfig()\"\r\n      [formControl]=\"resetPasswordFormControl\"\r\n    />\r\n  </form>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"'save' | transloco\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"passwordResetLoading()\"\r\n      [disabled]=\"!this.resetPasswordFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+                    ], providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <form class=\"p-4\" [class]=\"modal.contentClass\">\r\n    <mt-dynamic-form\r\n      [formConfig]=\"resetPasswordFormConfig()\"\r\n      [formControl]=\"resetPasswordFormControl\"\r\n    />\r\n  </form>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"passwordResetLoading()\"\r\n      (click)=\"ref.close(false)\"\r\n    />\r\n    <mt-button\r\n      [label]=\"'save' | transloco\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"passwordResetLoading()\"\r\n      [disabled]=\"!this.resetPasswordFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], propDecorators: { user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }] } });
+
+class UserLinkedGroups {
+    facade = inject(UsersGroupsFacade);
+    translocoService = inject(TranslocoService);
+    ref = inject(ModalRef);
+    user = input(null, ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    context = new HttpContext().set(REQUEST_CONTEXT, {
+        useBaseUrl: true,
+    });
+    loading = this.facade.isLoadingUserSummary;
+    summary = this.facade.userSummary;
+    activeTab = signal('groups', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    groups = computed(() => {
+        const lang = this.lang();
+        return (this.summary()?.groups ?? []).map((group) => ({
+            id: group.id,
+            name: this.resolveTranslated(group.name, lang),
+            isActivated: !!group.isActivated,
+            membersCount: group.membersCount ?? 0,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    roles = computed(() => {
+        const lang = this.lang();
+        return (this.summary()?.roles ?? []).map((role) => ({
+            id: role.id,
+            name: this.resolveTranslated(role.name, lang),
+            moduleType: role.moduleType ?? '',
+        }));
+    }, ...(ngDevMode ? [{ debugName: "roles" }] : /* istanbul ignore next */ []));
+    permissions = computed(() => {
+        const lang = this.lang();
+        return (this.summary()?.permissions ?? []).map((permission) => ({
+            id: permission.id,
+            name: this.resolveTranslated(permission.name, lang),
+            command: permission.command ?? '',
+            moduleType: permission.moduleType ?? '',
+        }));
+    }, ...(ngDevMode ? [{ debugName: "permissions" }] : /* istanbul ignore next */ []));
+    accessibilities = computed(() => {
+        const lang = this.lang();
+        return (this.summary()?.accessibilities ?? []).map((accessibility) => ({
+            id: accessibility.id,
+            name: this.resolveTranslated(accessibility.moduleName, lang),
+            category: this.resolveTranslated(accessibility.name, lang),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "accessibilities" }] : /* istanbul ignore next */ []));
+    userImage = computed(() => this.summary()?.user?.image ?? this.user()?.image ?? '', ...(ngDevMode ? [{ debugName: "userImage" }] : /* istanbul ignore next */ []));
+    userDisplayName = computed(() => this.summary()?.user?.displayName ?? this.user()?.displayName ?? '', ...(ngDevMode ? [{ debugName: "userDisplayName" }] : /* istanbul ignore next */ []));
+    tabs = computed(() => [
+        {
+            label: `${this.translocoService.translate('users-groups.groups')} (${this.groups().length})`,
+            value: 'groups',
+        },
+        {
+            label: `${this.translocoService.translate('users-groups.permissions')} (${this.permissions().length})`,
+            value: 'permissions',
+        },
+        {
+            label: `${this.translocoService.translate('users-groups.roles')} (${this.roles().length})`,
+            value: 'roles',
+        },
+        {
+            label: `${this.translocoService.translate('users-groups.accessibilities')} (${this.accessibilities().length})`,
+            value: 'accessibilities',
+        },
+    ], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    isEmpty = computed(() => {
+        if (this.loading())
+            return false;
+        switch (this.activeTab()) {
+            case 'groups':
+                return this.groups().length === 0;
+            case 'permissions':
+                return this.permissions().length === 0;
+            case 'roles':
+                return this.roles().length === 0;
+            case 'accessibilities':
+                return this.accessibilities().length === 0;
+        }
+    }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        const userName = this.user()?.userName;
+        if (!userName)
+            return;
+        this.facade.getUserSummary(userName);
+    }
+    lang() {
+        return this.translocoService.getActiveLang();
+    }
+    resolveTranslated(value, lang) {
+        if (!value)
+            return '';
+        if (typeof value === 'object') {
+            const v = value;
+            return v['display'] || v[lang] || v['en'] || v['ar'] || '';
+        }
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+                try {
+                    const parsed = JSON.parse(trimmed);
+                    return parsed[lang] || parsed['en'] || parsed['ar'] || '';
+                }
+                catch {
+                    return value;
+                }
+            }
+            return value;
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserLinkedGroups, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: UserLinkedGroups, isStandalone: true, selector: "mt-user-linked-groups", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"flex flex-col gap-4 p-4 max-h-[75vh] overflow-auto\">\r\n    <div class=\"flex items-center min-w-0\">\r\n      <mt-tabs\r\n        class=\"flex-1 min-w-0\"\r\n        [options]=\"tabs()\"\r\n        [(active)]=\"activeTab\"\r\n        mode=\"underline\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      ></mt-tabs>\r\n      <div\r\n        class=\"flex items-center gap-2 pb-2 px-2 shrink-0 border-b border-slate-200 dark:border-slate-700\"\r\n      >\r\n        <mt-avatar\r\n          [image]=\"\r\n            userImage()\r\n              ? $any(userImage() | secureImage: true : context : 'avatar/')\r\n              : ''\r\n          \"\r\n          [icon]=\"'user.user-01'\"\r\n          styleClass=\"w-8! h-8! text-lg! text-gray-600! bg-surface-300!\"\r\n        ></mt-avatar>\r\n        <div class=\"flex flex-col min-w-0\">\r\n          <span\r\n            class=\"text-sm font-medium text-slate-600 dark:text-slate-100 truncate\"\r\n            [title]=\"userDisplayName()\"\r\n          >\r\n            {{ userDisplayName() }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (loading()) {\r\n      <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\r\n        <p-skeleton height=\"4rem\"></p-skeleton>\r\n        <p-skeleton height=\"4rem\"></p-skeleton>\r\n        <p-skeleton height=\"4rem\"></p-skeleton>\r\n        <p-skeleton height=\"4rem\"></p-skeleton>\r\n      </div>\r\n    } @else if (isEmpty()) {\r\n      <div\r\n        class=\"flex flex-col items-center justify-center text-center py-10 gap-2 text-slate-500 dark:text-slate-400\"\r\n      >\r\n        <mt-icon icon=\"general.link-broken-01\" class=\"text-2xl\" />\r\n        <span class=\"text-sm font-medium\">\r\n          @switch (activeTab()) {\r\n            @case (\"groups\") {\r\n              {{ t(\"no-linked-groups\") }}\r\n            }\r\n            @case (\"permissions\") {\r\n              {{ t(\"no-permissions\") }}\r\n            }\r\n            @case (\"roles\") {\r\n              {{ t(\"no-roles\") }}\r\n            }\r\n            @case (\"accessibilities\") {\r\n              {{ t(\"no-accessibilities\") }}\r\n            }\r\n          }\r\n        </span>\r\n      </div>\r\n    } @else {\r\n      @switch (activeTab()) {\r\n        @case (\"groups\") {\r\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 pb-3\">\r\n            @for (group of groups(); track group.id) {\r\n              <div\r\n                class=\"flex flex-col gap-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-3 hover:shadow-sm transition-shadow\"\r\n              >\r\n                <div class=\"flex items-start justify-between gap-2\">\r\n                  <div class=\"flex items-center gap-3 min-w-0\">\r\n                    <span\r\n                      class=\"inline-flex items-center justify-center rounded-md bg-indigo-50 dark:bg-indigo-900/30 p-2\"\r\n                    >\r\n                      <mt-icon\r\n                        icon=\"user.users-01\"\r\n                        class=\"text-indigo-600 dark:text-indigo-300 text-xl\"\r\n                      />\r\n                    </span>\r\n                    <div class=\"flex flex-col min-w-0\">\r\n                      <span\r\n                        class=\"text-md text-slate-800 dark:text-slate-100 truncate\"\r\n                        [title]=\"group.name\"\r\n                      >\r\n                        {{ group.name }}\r\n                      </span>\r\n                      <span\r\n                        class=\"inline-flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400\"\r\n                      >\r\n                        <mt-icon icon=\"user.users-01\" class=\"text-sm\" />\r\n                        {{ group.membersCount }} {{ t(\"users-number\") }}\r\n                      </span>\r\n                    </div>\r\n                  </div>\r\n\r\n                  @if (group.isActivated) {\r\n                    <span\r\n                      class=\"inline-flex items-center gap-1 rounded-md bg-emerald-50 dark:bg-emerald-900/30 px-2 py-0.5 shrink-0\"\r\n                    >\r\n                      <span\r\n                        class=\"w-1.5 h-1.5 rounded-full bg-emerald-500\"\r\n                      ></span>\r\n                      <span\r\n                        class=\"text-emerald-700 dark:text-emerald-200 text-xs font-medium\"\r\n                      >\r\n                        {{ t(\"active\") }}\r\n                      </span>\r\n                    </span>\r\n                  } @else {\r\n                    <span\r\n                      class=\"inline-flex items-center gap-1 rounded-md bg-slate-100 dark:bg-slate-700 px-2 py-0.5 shrink-0\"\r\n                    >\r\n                      <span\r\n                        class=\"w-1.5 h-1.5 rounded-full bg-slate-400\"\r\n                      ></span>\r\n                      <span\r\n                        class=\"text-slate-600 dark:text-slate-200 text-xs font-medium\"\r\n                      >\r\n                        {{ t(\"inactive\") }}\r\n                      </span>\r\n                    </span>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @case (\"permissions\") {\r\n          <div\r\n            class=\"flex flex-col divide-y divide-slate-100 dark:divide-slate-700 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800\"\r\n          >\r\n            @for (permission of permissions(); track permission.id) {\r\n              <div class=\"flex items-center gap-3 p-3\">\r\n                <span\r\n                  class=\"inline-flex items-center justify-center rounded-md bg-amber-50 dark:bg-amber-900/30 p-2 shrink-0\"\r\n                >\r\n                  <mt-icon\r\n                    icon=\"security.shield-tick\"\r\n                    class=\"text-amber-600 dark:text-amber-300 text-lg\"\r\n                  />\r\n                </span>\r\n                <div class=\"flex flex-col min-w-0 flex-1\">\r\n                  <span\r\n                    class=\"text-sm font-medium text-slate-800 dark:text-slate-100 truncate\"\r\n                    [title]=\"permission.name\"\r\n                  >\r\n                    {{ permission.name }}\r\n                  </span>\r\n                  <span\r\n                    class=\"text-xs text-slate-500 dark:text-slate-400 truncate\"\r\n                    [title]=\"permission.command\"\r\n                  >\r\n                    {{ permission.command }}\r\n                  </span>\r\n                </div>\r\n                @if (permission.moduleType) {\r\n                  <span\r\n                    class=\"inline-flex items-center rounded-md bg-slate-50 dark:bg-slate-900/30 px-2 py-0.5 shrink-0 text-xs text-slate-600 dark:text-slate-300 font-medium\"\r\n                  >\r\n                    {{ permission.moduleType }}\r\n                  </span>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @case (\"roles\") {\r\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 pb-3\">\r\n            @for (role of roles(); track role.id) {\r\n              <div\r\n                class=\"flex items-center gap-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-3\"\r\n              >\r\n                <span\r\n                  class=\"inline-flex items-center justify-center rounded-md bg-violet-50 dark:bg-violet-900/30 p-2 shrink-0\"\r\n                >\r\n                  <mt-icon\r\n                    icon=\"user.user-check-01\"\r\n                    class=\"text-violet-600 dark:text-violet-300 text-xl\"\r\n                  />\r\n                </span>\r\n                <div class=\"flex flex-col min-w-0 flex-1\">\r\n                  <span\r\n                    class=\"text-md text-slate-800 dark:text-slate-100 truncate\"\r\n                    [title]=\"role.name\"\r\n                  >\r\n                    {{ role.name }}\r\n                  </span>\r\n                  @if (role.moduleType) {\r\n                    <span class=\"text-xs text-slate-500 dark:text-slate-400\">\r\n                      {{ role.moduleType }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @case (\"accessibilities\") {\r\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 pb-3\">\r\n            @for (accessibility of accessibilities(); track accessibility.id) {\r\n              <div\r\n                class=\"flex items-center gap-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-3\"\r\n              >\r\n                <span\r\n                  class=\"inline-flex items-center justify-center rounded-md bg-sky-50 dark:bg-sky-900/30 p-2 shrink-0\"\r\n                >\r\n                  <mt-icon\r\n                    icon=\"security.lock-unlocked-01\"\r\n                    class=\"text-sky-600 dark:text-sky-300 text-xl\"\r\n                  />\r\n                </span>\r\n                <div class=\"flex flex-col min-w-0 flex-1\">\r\n                  <span\r\n                    class=\"text-md text-slate-800 dark:text-slate-100 truncate\"\r\n                    [title]=\"accessibility.name\"\r\n                  >\r\n                    {{ accessibility.name }}\r\n                  </span>\r\n                  @if (accessibility.category) {\r\n                    <span class=\"text-xs text-slate-500 dark:text-slate-400\">\r\n                      {{ accessibility.category }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "pipe", type: SecureImagePipe, name: "secureImage" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UserLinkedGroups, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-user-linked-groups', standalone: true, imports: [
+                        CommonModule,
+                        TranslocoDirective,
+                        SkeletonModule,
+                        Icon,
+                        Tabs,
+                        Avatar,
+                        SecureImagePipe,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"flex flex-col gap-4 p-4 max-h-[75vh] overflow-auto\">\r\n    <div class=\"flex items-center min-w-0\">\r\n      <mt-tabs\r\n        class=\"flex-1 min-w-0\"\r\n        [options]=\"tabs()\"\r\n        [(active)]=\"activeTab\"\r\n        mode=\"underline\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      ></mt-tabs>\r\n      <div\r\n        class=\"flex items-center gap-2 pb-2 px-2 shrink-0 border-b border-slate-200 dark:border-slate-700\"\r\n      >\r\n        <mt-avatar\r\n          [image]=\"\r\n            userImage()\r\n              ? $any(userImage() | secureImage: true : context : 'avatar/')\r\n              : ''\r\n          \"\r\n          [icon]=\"'user.user-01'\"\r\n          styleClass=\"w-8! h-8! text-lg! text-gray-600! bg-surface-300!\"\r\n        ></mt-avatar>\r\n        <div class=\"flex flex-col min-w-0\">\r\n          <span\r\n            class=\"text-sm font-medium text-slate-600 dark:text-slate-100 truncate\"\r\n            [title]=\"userDisplayName()\"\r\n          >\r\n            {{ userDisplayName() }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    @if (loading()) {\r\n      <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\r\n        <p-skeleton height=\"4rem\"></p-skeleton>\r\n        <p-skeleton height=\"4rem\"></p-skeleton>\r\n        <p-skeleton height=\"4rem\"></p-skeleton>\r\n        <p-skeleton height=\"4rem\"></p-skeleton>\r\n      </div>\r\n    } @else if (isEmpty()) {\r\n      <div\r\n        class=\"flex flex-col items-center justify-center text-center py-10 gap-2 text-slate-500 dark:text-slate-400\"\r\n      >\r\n        <mt-icon icon=\"general.link-broken-01\" class=\"text-2xl\" />\r\n        <span class=\"text-sm font-medium\">\r\n          @switch (activeTab()) {\r\n            @case (\"groups\") {\r\n              {{ t(\"no-linked-groups\") }}\r\n            }\r\n            @case (\"permissions\") {\r\n              {{ t(\"no-permissions\") }}\r\n            }\r\n            @case (\"roles\") {\r\n              {{ t(\"no-roles\") }}\r\n            }\r\n            @case (\"accessibilities\") {\r\n              {{ t(\"no-accessibilities\") }}\r\n            }\r\n          }\r\n        </span>\r\n      </div>\r\n    } @else {\r\n      @switch (activeTab()) {\r\n        @case (\"groups\") {\r\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 pb-3\">\r\n            @for (group of groups(); track group.id) {\r\n              <div\r\n                class=\"flex flex-col gap-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-3 hover:shadow-sm transition-shadow\"\r\n              >\r\n                <div class=\"flex items-start justify-between gap-2\">\r\n                  <div class=\"flex items-center gap-3 min-w-0\">\r\n                    <span\r\n                      class=\"inline-flex items-center justify-center rounded-md bg-indigo-50 dark:bg-indigo-900/30 p-2\"\r\n                    >\r\n                      <mt-icon\r\n                        icon=\"user.users-01\"\r\n                        class=\"text-indigo-600 dark:text-indigo-300 text-xl\"\r\n                      />\r\n                    </span>\r\n                    <div class=\"flex flex-col min-w-0\">\r\n                      <span\r\n                        class=\"text-md text-slate-800 dark:text-slate-100 truncate\"\r\n                        [title]=\"group.name\"\r\n                      >\r\n                        {{ group.name }}\r\n                      </span>\r\n                      <span\r\n                        class=\"inline-flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400\"\r\n                      >\r\n                        <mt-icon icon=\"user.users-01\" class=\"text-sm\" />\r\n                        {{ group.membersCount }} {{ t(\"users-number\") }}\r\n                      </span>\r\n                    </div>\r\n                  </div>\r\n\r\n                  @if (group.isActivated) {\r\n                    <span\r\n                      class=\"inline-flex items-center gap-1 rounded-md bg-emerald-50 dark:bg-emerald-900/30 px-2 py-0.5 shrink-0\"\r\n                    >\r\n                      <span\r\n                        class=\"w-1.5 h-1.5 rounded-full bg-emerald-500\"\r\n                      ></span>\r\n                      <span\r\n                        class=\"text-emerald-700 dark:text-emerald-200 text-xs font-medium\"\r\n                      >\r\n                        {{ t(\"active\") }}\r\n                      </span>\r\n                    </span>\r\n                  } @else {\r\n                    <span\r\n                      class=\"inline-flex items-center gap-1 rounded-md bg-slate-100 dark:bg-slate-700 px-2 py-0.5 shrink-0\"\r\n                    >\r\n                      <span\r\n                        class=\"w-1.5 h-1.5 rounded-full bg-slate-400\"\r\n                      ></span>\r\n                      <span\r\n                        class=\"text-slate-600 dark:text-slate-200 text-xs font-medium\"\r\n                      >\r\n                        {{ t(\"inactive\") }}\r\n                      </span>\r\n                    </span>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @case (\"permissions\") {\r\n          <div\r\n            class=\"flex flex-col divide-y divide-slate-100 dark:divide-slate-700 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800\"\r\n          >\r\n            @for (permission of permissions(); track permission.id) {\r\n              <div class=\"flex items-center gap-3 p-3\">\r\n                <span\r\n                  class=\"inline-flex items-center justify-center rounded-md bg-amber-50 dark:bg-amber-900/30 p-2 shrink-0\"\r\n                >\r\n                  <mt-icon\r\n                    icon=\"security.shield-tick\"\r\n                    class=\"text-amber-600 dark:text-amber-300 text-lg\"\r\n                  />\r\n                </span>\r\n                <div class=\"flex flex-col min-w-0 flex-1\">\r\n                  <span\r\n                    class=\"text-sm font-medium text-slate-800 dark:text-slate-100 truncate\"\r\n                    [title]=\"permission.name\"\r\n                  >\r\n                    {{ permission.name }}\r\n                  </span>\r\n                  <span\r\n                    class=\"text-xs text-slate-500 dark:text-slate-400 truncate\"\r\n                    [title]=\"permission.command\"\r\n                  >\r\n                    {{ permission.command }}\r\n                  </span>\r\n                </div>\r\n                @if (permission.moduleType) {\r\n                  <span\r\n                    class=\"inline-flex items-center rounded-md bg-slate-50 dark:bg-slate-900/30 px-2 py-0.5 shrink-0 text-xs text-slate-600 dark:text-slate-300 font-medium\"\r\n                  >\r\n                    {{ permission.moduleType }}\r\n                  </span>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @case (\"roles\") {\r\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 pb-3\">\r\n            @for (role of roles(); track role.id) {\r\n              <div\r\n                class=\"flex items-center gap-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-3\"\r\n              >\r\n                <span\r\n                  class=\"inline-flex items-center justify-center rounded-md bg-violet-50 dark:bg-violet-900/30 p-2 shrink-0\"\r\n                >\r\n                  <mt-icon\r\n                    icon=\"user.user-check-01\"\r\n                    class=\"text-violet-600 dark:text-violet-300 text-xl\"\r\n                  />\r\n                </span>\r\n                <div class=\"flex flex-col min-w-0 flex-1\">\r\n                  <span\r\n                    class=\"text-md text-slate-800 dark:text-slate-100 truncate\"\r\n                    [title]=\"role.name\"\r\n                  >\r\n                    {{ role.name }}\r\n                  </span>\r\n                  @if (role.moduleType) {\r\n                    <span class=\"text-xs text-slate-500 dark:text-slate-400\">\r\n                      {{ role.moduleType }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @case (\"accessibilities\") {\r\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 pb-3\">\r\n            @for (accessibility of accessibilities(); track accessibility.id) {\r\n              <div\r\n                class=\"flex items-center gap-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-3\"\r\n              >\r\n                <span\r\n                  class=\"inline-flex items-center justify-center rounded-md bg-sky-50 dark:bg-sky-900/30 p-2 shrink-0\"\r\n                >\r\n                  <mt-icon\r\n                    icon=\"security.lock-unlocked-01\"\r\n                    class=\"text-sky-600 dark:text-sky-300 text-xl\"\r\n                  />\r\n                </span>\r\n                <div class=\"flex flex-col min-w-0 flex-1\">\r\n                  <span\r\n                    class=\"text-md text-slate-800 dark:text-slate-100 truncate\"\r\n                    [title]=\"accessibility.name\"\r\n                  >\r\n                    {{ accessibility.name }}\r\n                  </span>\r\n                  @if (accessibility.category) {\r\n                    <span class=\"text-xs text-slate-500 dark:text-slate-400\">\r\n                      {{ accessibility.category }}\r\n                    </span>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</ng-container>\r\n" }]
         }], propDecorators: { user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }] } });
 
 class Users {
@@ -974,6 +1123,14 @@ class Users {
     ], ...(ngDevMode ? [{ debugName: "tableActions" }] : /* istanbul ignore next */ []));
     deletingRowIds = signal([], ...(ngDevMode ? [{ debugName: "deletingRowIds" }] : /* istanbul ignore next */ []));
     rowActions = signal([
+        {
+            icon: 'general.link-01',
+            tooltip: this.translocoService.translate('users-groups.linked-groups'),
+            color: 'secondary',
+            action: (row) => {
+                this.openLinkedGroupsDialog(row);
+            },
+        },
         {
             icon: 'security.key-01',
             tooltip: this.translocoService.translate('users-groups.reset-password'),
@@ -1039,8 +1196,9 @@ class Users {
             },
         },
         {
-            key: 'lastLoginTime.displayValue',
+            key: 'lastLoginTime.actualValue',
             label: this.translocoService.translate('users-groups.last-seen'),
+            type: 'dateTime',
         },
     ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : /* istanbul ignore next */ []));
     loading = this.facade.isLoadingUsers;
@@ -1078,12 +1236,30 @@ class Users {
             },
         });
     }
+    openLinkedGroupsDialog(user) {
+        this.modal.openModal(UserLinkedGroups, 'dialog', {
+            header: this.translocoService.translate('users-groups.summary'),
+            styleClass: '!w-[50rem]',
+            dismissableMask: true,
+            dismissible: true,
+            inputValues: {
+                user,
+            },
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Users, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: Users, isStandalone: true, selector: "mt-users", viewQueries: [{ propertyName: "typeCol", first: true, predicate: ["typeCol"], descendants: true, isSignal: true }, { propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #typeCol let-row>\r\n      <div>{{ row.isExternal ? t(\"external\") : t(\"internal\") }}</div>\r\n    </ng-template>\r\n    <ng-template #userCol let-row>\r\n      <div class=\"flex items-center gap-2\">\r\n        <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar> {{ row.displayName }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <mt-table\r\n      [tabs]=\"tabs()\"\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"users()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n      storageKey=\"users-groups-users-table\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tableLayout", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Users, isStandalone: true, selector: "mt-users", viewQueries: [{ propertyName: "typeCol", first: true, predicate: ["typeCol"], descendants: true, isSignal: true }, { propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #typeCol let-row>\r\n      @if (row.isExternal) {\r\n        <span\r\n          class=\"inline-flex items-center gap-1 rounded-md bg-slate-50 dark:bg-slate-900/30 p-2\"\r\n        >\r\n          <mt-icon\r\n            icon=\"general.link-external-02\"\r\n            class=\"text-slate-600 dark:text-slate-300 text-sm\"\r\n          />\r\n          <span class=\"text-slate-700 dark:text-slate-200 text-xs font-medium\">\r\n            {{ t(\"external\") }}\r\n          </span>\r\n        </span>\r\n      } @else {\r\n        <span\r\n          class=\"inline-flex items-center gap-1 rounded-md bg-emerald-50 dark:bg-emerald-900/30 p-2\"\r\n        >\r\n          <mt-icon\r\n            icon=\"user.users-01\"\r\n            class=\"text-emerald-600 dark:text-emerald-300 text-sm\"\r\n          />\r\n          <span\r\n            class=\"text-emerald-700 dark:text-emerald-200 text-xs font-medium\"\r\n          >\r\n            {{ t(\"internal\") }}\r\n          </span>\r\n        </span>\r\n      }\r\n    </ng-template>\r\n    <ng-template #userCol let-row>\r\n      <div class=\"flex items-center gap-2\">\r\n        <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar> {{ row.displayName }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <mt-table\r\n      [tabs]=\"tabs()\"\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"users()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n      storageKey=\"users-groups-users-table\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Users, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-users', standalone: true, imports: [CommonModule, SkeletonModule, Table, Avatar, TranslocoDirective], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #typeCol let-row>\r\n      <div>{{ row.isExternal ? t(\"external\") : t(\"internal\") }}</div>\r\n    </ng-template>\r\n    <ng-template #userCol let-row>\r\n      <div class=\"flex items-center gap-2\">\r\n        <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar> {{ row.displayName }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <mt-table\r\n      [tabs]=\"tabs()\"\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"users()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n      storageKey=\"users-groups-users-table\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'mt-users', standalone: true, imports: [
+                        CommonModule,
+                        SkeletonModule,
+                        Table,
+                        Avatar,
+                        Icon,
+                        TranslocoDirective,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #typeCol let-row>\r\n      @if (row.isExternal) {\r\n        <span\r\n          class=\"inline-flex items-center gap-1 rounded-md bg-slate-50 dark:bg-slate-900/30 p-2\"\r\n        >\r\n          <mt-icon\r\n            icon=\"general.link-external-02\"\r\n            class=\"text-slate-600 dark:text-slate-300 text-sm\"\r\n          />\r\n          <span class=\"text-slate-700 dark:text-slate-200 text-xs font-medium\">\r\n            {{ t(\"external\") }}\r\n          </span>\r\n        </span>\r\n      } @else {\r\n        <span\r\n          class=\"inline-flex items-center gap-1 rounded-md bg-emerald-50 dark:bg-emerald-900/30 p-2\"\r\n        >\r\n          <mt-icon\r\n            icon=\"user.users-01\"\r\n            class=\"text-emerald-600 dark:text-emerald-300 text-sm\"\r\n          />\r\n          <span\r\n            class=\"text-emerald-700 dark:text-emerald-200 text-xs font-medium\"\r\n          >\r\n            {{ t(\"internal\") }}\r\n          </span>\r\n        </span>\r\n      }\r\n    </ng-template>\r\n    <ng-template #userCol let-row>\r\n      <div class=\"flex items-center gap-2\">\r\n        <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar> {{ row.displayName }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <mt-table\r\n      [tabs]=\"tabs()\"\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"users()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n      storageKey=\"users-groups-users-table\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n" }]
         }], propDecorators: { typeCol: [{ type: i0.ViewChild, args: ['typeCol', { isSignal: true }] }], userCol: [{ type: i0.ViewChild, args: ['userCol', { isSignal: true }] }] } });
 
 class GroupForm {
@@ -1205,7 +1381,7 @@ class GroupForm {
             });
         }
         this.internalUserFormControl.valueChanges.subscribe((value) => {
-            const isUserExistInMembers = this.selectedGroup()?.members?.find((member) => member?.user?.id === value?.userField?.id);
+            const isUserExistInMembers = !!this.selectedGroup()?.members?.find((member) => member?.id === value?.userField?.id);
             this.isUserExistInMembers.set(isUserExistInMembers);
         });
     }
@@ -1248,7 +1424,7 @@ class GroupForm {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GroupForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: GroupForm, isStandalone: true, selector: "mt-group-form", inputs: { groupForEdit: { classPropertyName: "groupForEdit", publicName: "groupForEdit", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], viewQueries: [{ propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getGroupFormLoading()) {\r\n      <form class=\"col-span-1\">\r\n        <mt-dynamic-form\r\n          [formConfig]=\"groupFormConfig()\"\r\n          [formControl]=\"groupFormControl\"\r\n        />\r\n      </form>\r\n\r\n      @if (groupForEdit()) {\r\n        <div class=\"flex gap-3 items-end mt-6 pt-4 border-t-1 border-surface\">\r\n          <mt-dynamic-form\r\n            class=\"flex-1\"\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            class=\"mb-0\"\r\n            variant=\"outlined\"\r\n            (click)=\"onAddUser()\"\r\n            [disabled]=\"\r\n              addUserToGroupLoading() ||\r\n              isUserExistInMembers() ||\r\n              !internalUserFormControl.value?.userField\r\n            \"\r\n          />\r\n        </div>\r\n\r\n        <mt-table\r\n          [data]=\"selectedGroup()?.members || []\"\r\n          [columns]=\"tableColumns()\"\r\n          [rowActions]=\"rowActions()\"\r\n          storageKey=\"users-groups-group-members-table\"\r\n          [generalSearch]=\"false\"\r\n          [showFilters]=\"false\"\r\n          [loading]=\"addUserToGroupLoading()\"\r\n        >\r\n        </mt-table>\r\n        <ng-template #userCol let-row>\r\n          <div class=\"flex items-center gap-2\">\r\n            <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar>\r\n            {{ row?.displayName }}\r\n          </div>\r\n        </ng-template>\r\n      }\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"selectedGroup() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateGroupLoading()\"\r\n      [disabled]=\"!this.groupFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tableLayout", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: GroupForm, isStandalone: true, selector: "mt-group-form", inputs: { groupForEdit: { classPropertyName: "groupForEdit", publicName: "groupForEdit", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], viewQueries: [{ propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getGroupFormLoading()) {\r\n      <form class=\"col-span-1\">\r\n        <mt-dynamic-form\r\n          [formConfig]=\"groupFormConfig()\"\r\n          [formControl]=\"groupFormControl\"\r\n        />\r\n      </form>\r\n\r\n      @if (groupForEdit()) {\r\n        <div class=\"flex gap-3 items-end mt-6 pt-4 border-t-1 border-surface\">\r\n          <mt-dynamic-form\r\n            class=\"flex-1\"\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            class=\"mb-0\"\r\n            variant=\"outlined\"\r\n            (click)=\"onAddUser()\"\r\n            [disabled]=\"\r\n              addUserToGroupLoading() ||\r\n              isUserExistInMembers() ||\r\n              !internalUserFormControl.value?.userField\r\n            \"\r\n          />\r\n        </div>\r\n\r\n        <mt-table\r\n          noCard\r\n          [data]=\"selectedGroup()?.members || []\"\r\n          [columns]=\"tableColumns()\"\r\n          [rowActions]=\"rowActions()\"\r\n          storageKey=\"users-groups-group-members-table\"\r\n          [generalSearch]=\"false\"\r\n          [showFilters]=\"false\"\r\n          [loading]=\"addUserToGroupLoading()\"\r\n        >\r\n        </mt-table>\r\n        <ng-template #userCol let-row>\r\n          <div class=\"flex items-center gap-2\">\r\n            <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar>\r\n            {{ row?.displayName }}\r\n          </div>\r\n        </ng-template>\r\n      }\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"createUpdateGroupLoading()\"\r\n      (click)=\"ref.close(false)\"\r\n    />\r\n    <mt-button\r\n      [label]=\"selectedGroup() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateGroupLoading()\"\r\n      [disabled]=\"!this.groupFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: GroupForm, decorators: [{
             type: Component,
@@ -1262,7 +1438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         TranslocoPipe,
                         Avatar,
                         Table,
-                    ], providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getGroupFormLoading()) {\r\n      <form class=\"col-span-1\">\r\n        <mt-dynamic-form\r\n          [formConfig]=\"groupFormConfig()\"\r\n          [formControl]=\"groupFormControl\"\r\n        />\r\n      </form>\r\n\r\n      @if (groupForEdit()) {\r\n        <div class=\"flex gap-3 items-end mt-6 pt-4 border-t-1 border-surface\">\r\n          <mt-dynamic-form\r\n            class=\"flex-1\"\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            class=\"mb-0\"\r\n            variant=\"outlined\"\r\n            (click)=\"onAddUser()\"\r\n            [disabled]=\"\r\n              addUserToGroupLoading() ||\r\n              isUserExistInMembers() ||\r\n              !internalUserFormControl.value?.userField\r\n            \"\r\n          />\r\n        </div>\r\n\r\n        <mt-table\r\n          [data]=\"selectedGroup()?.members || []\"\r\n          [columns]=\"tableColumns()\"\r\n          [rowActions]=\"rowActions()\"\r\n          storageKey=\"users-groups-group-members-table\"\r\n          [generalSearch]=\"false\"\r\n          [showFilters]=\"false\"\r\n          [loading]=\"addUserToGroupLoading()\"\r\n        >\r\n        </mt-table>\r\n        <ng-template #userCol let-row>\r\n          <div class=\"flex items-center gap-2\">\r\n            <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar>\r\n            {{ row?.displayName }}\r\n          </div>\r\n        </ng-template>\r\n      }\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"selectedGroup() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateGroupLoading()\"\r\n      [disabled]=\"!this.groupFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+                    ], providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getGroupFormLoading()) {\r\n      <form class=\"col-span-1\">\r\n        <mt-dynamic-form\r\n          [formConfig]=\"groupFormConfig()\"\r\n          [formControl]=\"groupFormControl\"\r\n        />\r\n      </form>\r\n\r\n      @if (groupForEdit()) {\r\n        <div class=\"flex gap-3 items-end mt-6 pt-4 border-t-1 border-surface\">\r\n          <mt-dynamic-form\r\n            class=\"flex-1\"\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            class=\"mb-0\"\r\n            variant=\"outlined\"\r\n            (click)=\"onAddUser()\"\r\n            [disabled]=\"\r\n              addUserToGroupLoading() ||\r\n              isUserExistInMembers() ||\r\n              !internalUserFormControl.value?.userField\r\n            \"\r\n          />\r\n        </div>\r\n\r\n        <mt-table\r\n          noCard\r\n          [data]=\"selectedGroup()?.members || []\"\r\n          [columns]=\"tableColumns()\"\r\n          [rowActions]=\"rowActions()\"\r\n          storageKey=\"users-groups-group-members-table\"\r\n          [generalSearch]=\"false\"\r\n          [showFilters]=\"false\"\r\n          [loading]=\"addUserToGroupLoading()\"\r\n        >\r\n        </mt-table>\r\n        <ng-template #userCol let-row>\r\n          <div class=\"flex items-center gap-2\">\r\n            <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar>\r\n            {{ row?.displayName }}\r\n          </div>\r\n        </ng-template>\r\n      }\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"createUpdateGroupLoading()\"\r\n      (click)=\"ref.close(false)\"\r\n    />\r\n    <mt-button\r\n      [label]=\"selectedGroup() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateGroupLoading()\"\r\n      [disabled]=\"!this.groupFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { groupForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupForEdit", required: false }] }], userCol: [{ type: i0.ViewChild, args: ['userCol', { isSignal: true }] }] } });
 
 class Groups {
@@ -1352,7 +1528,7 @@ class Groups {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Groups, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: Groups, isStandalone: true, selector: "mt-groups", viewQueries: [{ propertyName: "workspaceCol", first: true, predicate: ["workspaceCol"], descendants: true, isSignal: true }, { propertyName: "groupCol", first: true, predicate: ["groupCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #workspaceCol let-row>\r\n      <div>{{ row.workspace }}</div>\r\n    </ng-template>\r\n    <ng-template #groupCol let-row>\r\n      <div class=\"flex items-center gap-2\">\r\n        {{ row.name?.display }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <mt-table\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"allGroups()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n      storageKey=\"users-groups-groups-table\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n", styles: [".groups{padding:2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "exportFilename", "actionShape", "tableLayout", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: Groups, isStandalone: true, selector: "mt-groups", viewQueries: [{ propertyName: "workspaceCol", first: true, predicate: ["workspaceCol"], descendants: true, isSignal: true }, { propertyName: "groupCol", first: true, predicate: ["groupCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #workspaceCol let-row>\r\n      <div>{{ row.workspace }}</div>\r\n    </ng-template>\r\n    <ng-template #groupCol let-row>\r\n      <div class=\"flex items-center gap-2\">\r\n        {{ row.name?.display }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <mt-table\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"allGroups()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n      storageKey=\"users-groups-groups-table\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n", styles: [".groups{padding:2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Groups, decorators: [{
             type: Component,
@@ -1365,5 +1541,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddUserToGroup, ClearSelectedGroup, CreateGroup, CreateUser, DeleteGroup, DeleteUser, DeleteUserFromGroup, GetGroup, GetGroups, GetUser, GetUsers, GroupForm, Groups, ResetUserPassword, UpdateGroup, UpdateUser, UserForm, Users, UsersGroups, UsersGroupsActionKey, UsersGroupsFacade, UsersGroupsState };
+export { AddUserToGroup, ClearSelectedGroup, CreateGroup, CreateUser, DeleteGroup, DeleteUser, DeleteUserFromGroup, GetGroup, GetGroups, GetUser, GetUserSummary, GetUsers, GroupForm, Groups, ResetUserPassword, UpdateGroup, UpdateUser, UserForm, Users, UsersGroups, UsersGroupsActionKey, UsersGroupsFacade, UsersGroupsState };
 //# sourceMappingURL=masterteam-users-groups.mjs.map