@masterteam/users-groups 0.0.15 → 0.0.16

package/fesm2022/masterteam-users-groups.mjs

@@ -64,6 +64,13 @@ class DeleteUser {
         this.userName = userName;
     }
 }
+class LinkUserToApplication {
+    userName;
+    static type = '[UsersGroups] Link User To Application';
+    constructor(userName) {
+        this.userName = userName;
+    }
+}
 class GetUserSummary {
     userName;
     static type = '[UsersGroups] Get User Summary';
@@ -131,6 +138,7 @@ var UsersGroupsActionKey;
     UsersGroupsActionKey["CreateUser"] = "createUser";
     UsersGroupsActionKey["UpdateUser"] = "updateUser";
     UsersGroupsActionKey["DeleteUser"] = "deleteUser";
+    UsersGroupsActionKey["LinkUserToApplication"] = "linkUserToApplication";
     UsersGroupsActionKey["GetUserSummary"] = "getUserSummary";
     UsersGroupsActionKey["AddUserToGroup"] = "addUserToGroup";
     UsersGroupsActionKey["DeleteUserFromGroup"] = "deleteUserFromGroup";
@@ -153,6 +161,9 @@ let UsersGroupsState = class UsersGroupsState extends CrudStateBase {
     context = new HttpContext().set(REQUEST_CONTEXT, {
         useBaseUrl: false,
     });
+    encodeUserName(userName) {
+        return encodeURIComponent(String(userName));
+    }
     // ============================================================================
     // Data Selectors - Individual selectors for fine-grained reactivity
     // ============================================================================
@@ -197,7 +208,8 @@ let UsersGroupsState = class UsersGroupsState extends CrudStateBase {
         });
     }
     getUser(ctx, { userName }) {
-        const req$ = this.http.get(`Identity/users/${userName}?editMode=true`, { context: this.context });
+        const encodedUserName = this.encodeUserName(userName ?? '');
+        const req$ = this.http.get(`Identity/users/${encodedUserName}?editMode=true`, { context: this.context });
         return handleApiRequest({
             ctx,
             key: UsersGroupsActionKey.GetUser,
@@ -250,7 +262,8 @@ let UsersGroupsState = class UsersGroupsState extends CrudStateBase {
         });
     }
     updateUser(ctx, { changes, id }) {
-        const req$ = this.http.put(`Identity/users/${id}`, changes, {
+        const encodedUserName = this.encodeUserName(id ?? '');
+        const req$ = this.http.put(`Identity/users/${encodedUserName}`, changes, {
             context: this.context,
         });
         return handleApiRequest({
@@ -272,19 +285,46 @@ let UsersGroupsState = class UsersGroupsState extends CrudStateBase {
         });
     }
     deleteUser(ctx, { userName }) {
-        const req$ = this.http.delete(`Identity/users/${userName}`, {
+        const encodedUserName = this.encodeUserName(userName);
+        const userNameKey = String(userName);
+        const req$ = this.http.delete(`Identity/users/${encodedUserName}`, {
             context: this.context,
         });
-        return this.delete(ctx, {
+        return handleApiRequest({
+            ctx,
             key: UsersGroupsActionKey.DeleteUser,
             request$: req$,
-            stateProperty: (state) => state.users,
-            uniqueKey: 'userName',
-            id: userName,
+            onSuccess: (_response, state) => ({
+                users: this.adapter.updateOne(state.users, userNameKey, { isLinkedToCurrentApplication: false }, 'userName'),
+            }),
+        });
+    }
+    linkUserToApplication(ctx, { userName }) {
+        const encodedUserName = this.encodeUserName(userName);
+        const userNameKey = String(userName);
+        const req$ = this.http.put(`Identity/users/${encodedUserName}/application/link`, {}, {
+            context: this.context,
+        });
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.LinkUserToApplication,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const linkedUser = {
+                    ...(state.users.find((user) => user.userName === userNameKey) ?? {}),
+                    ...(response.data ?? {}),
+                    userName: userNameKey,
+                    isLinkedToCurrentApplication: true,
+                };
+                return {
+                    users: this.adapter.upsertOne(state.users, linkedUser, 'userName'),
+                };
+            },
         });
     }
     getUserSummary(ctx, { userName }) {
-        const req$ = this.http.get(`identity/users/${userName}/summary`, { context: this.context });
+        const encodedUserName = this.encodeUserName(userName);
+        const req$ = this.http.get(`identity/users/${encodedUserName}/summary`, { context: this.context });
         return handleApiRequest({
             ctx,
             key: UsersGroupsActionKey.GetUserSummary,
@@ -295,7 +335,8 @@ let UsersGroupsState = class UsersGroupsState extends CrudStateBase {
         });
     }
     resetUserPassword(ctx, { id, payload }) {
-        const req$ = this.http.put(`Identity/users/${id}/password/reset`, payload, {
+        const encodedUserName = this.encodeUserName(id);
+        const req$ = this.http.put(`Identity/users/${encodedUserName}/password/reset`, payload, {
             context: this.context,
         });
         return handleApiRequest({
@@ -417,6 +458,9 @@ __decorate([
 __decorate([
     Action(DeleteUser)
 ], UsersGroupsState.prototype, "deleteUser", null);
+__decorate([
+    Action(LinkUserToApplication)
+], UsersGroupsState.prototype, "linkUserToApplication", null);
 __decorate([
     Action(GetUserSummary)
 ], UsersGroupsState.prototype, "getUserSummary", null);
@@ -481,7 +525,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: [], getUserSummary: [], resetUserPassword: [], deleteUserFromGroup: [], getGroups: [], getGroup: [], createGroup: [], updateGroup: [], deleteGroup: [], clearSelectedGroup: [] } });
+        }], propDecorators: { getUsers: [], getUser: [], createUser: [], addUserToGroup: [], updateUser: [], deleteUser: [], linkUserToApplication: [], getUserSummary: [], resetUserPassword: [], deleteUserFromGroup: [], getGroups: [], getGroup: [], createGroup: [], updateGroup: [], deleteGroup: [], clearSelectedGroup: [] } });
 
 class UsersGroupsFacade {
     store = inject(Store);
@@ -505,6 +549,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 */ []));
+    isLinkingUserToApplication = computed(() => this.loadingActive().includes(UsersGroupsActionKey.LinkUserToApplication), ...(ngDevMode ? [{ debugName: "isLinkingUserToApplication" }] : /* 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 */ []));
@@ -538,6 +583,9 @@ class UsersGroupsFacade {
     deleteUser(userName) {
         return this.store.dispatch(new DeleteUser(userName));
     }
+    linkUserToApplication(userName) {
+        return this.store.dispatch(new LinkUserToApplication(userName));
+    }
     getUserSummary(userName) {
         return this.store.dispatch(new GetUserSummary(userName));
     }
@@ -913,6 +961,21 @@ class ResetPasswordForm {
                             ValidatorConfig.pattern(this.passwordPattern, this.translocoService.translate('users-groups.password-rules')),
                         ],
                     },
+                    {
+                        key: 'confirmPassword',
+                        inputType: 'password',
+                        label: this.translocoService.translate('users-groups.confirm-password'),
+                        placeholder: this.translocoService.translate('users-groups.confirm-password'),
+                        hint: this.translocoService.translate('users-groups.password-rules'),
+                        validators: [
+                            ValidatorConfig.required(),
+                            ValidatorConfig.pattern(this.passwordPattern, this.translocoService.translate('users-groups.password-rules')),
+                            ValidatorConfig.custom((value, control) => {
+                                const newPassword = control?.parent?.get('newPassword')?.value;
+                                return !value || !newPassword || value === newPassword;
+                            }, this.translocoService.translate('users-groups.passwords-must-match')),
+                        ],
+                    },
                 ],
             },
         ],
@@ -921,6 +984,7 @@ class ResetPasswordForm {
         this.resetPasswordFormControl.setValue({
             displayName: this.user()?.displayName || '',
             newPassword: '',
+            confirmPassword: '',
         });
     }
     onSubmit() {
@@ -1080,6 +1144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 class Users {
     typeCol = viewChild.required('typeCol');
     userCol = viewChild.required('userCol');
+    applicationLinkCol = viewChild.required('applicationLinkCol');
     facade = inject(UsersGroupsFacade);
     modal = inject(ModalService);
     translocoService = inject(TranslocoService);
@@ -1091,6 +1156,8 @@ class Users {
                 return all.filter((user) => !user.isExternal);
             case 'external':
                 return all.filter((user) => user.isExternal);
+            case 'notLinked':
+                return all.filter((user) => !this.isLinkedToCurrentApplication(user));
             case 'all':
             default:
                 return all;
@@ -1109,6 +1176,10 @@ class Users {
             label: this.translocoService.translate('users-groups.external'),
             value: 'external',
         },
+        {
+            label: this.translocoService.translate('users-groups.not-linked'),
+            value: 'notLinked',
+        },
     ], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     activeTab = signal('all', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     tableActions = signal([
@@ -1122,6 +1193,7 @@ class Users {
         },
     ], ...(ngDevMode ? [{ debugName: "tableActions" }] : /* istanbul ignore next */ []));
     deletingRowIds = signal([], ...(ngDevMode ? [{ debugName: "deletingRowIds" }] : /* istanbul ignore next */ []));
+    linkingRowIds = signal([], ...(ngDevMode ? [{ debugName: "linkingRowIds" }] : /* istanbul ignore next */ []));
     rowActions = signal([
         {
             icon: 'general.link-01',
@@ -1130,6 +1202,7 @@ class Users {
             action: (row) => {
                 this.openLinkedGroupsDialog(row);
             },
+            hidden: (row) => !this.isLinkedToCurrentApplication(row),
         },
         {
             icon: 'security.key-01',
@@ -1138,7 +1211,7 @@ class Users {
             action: (row) => {
                 this.addResetPasswordDialog(row);
             },
-            hidden: (row) => !row.isExternal,
+            hidden: (row) => !row.isExternal || !this.isLinkedToCurrentApplication(row),
         },
         {
             icon: 'custom.pencil',
@@ -1147,25 +1220,49 @@ class Users {
             action: (row) => {
                 this.addUserDialog(row);
             },
-            hidden: (row) => !row.isExternal,
+            hidden: (row) => !row.isExternal || !this.isLinkedToCurrentApplication(row),
+        },
+        {
+            icon: 'user.user-plus-01',
+            tooltip: this.translocoService.translate('users-groups.link-to-application'),
+            color: 'success',
+            variant: 'outlined',
+            action: (row) => {
+                this.linkUserToApplication(row);
+            },
+            hidden: (row) => this.isLinkedToCurrentApplication(row),
+            confirmation: {
+                type: 'popup',
+                header: this.translocoService.translate('users-groups.link-confirm-header'),
+                message: this.translocoService.translate('users-groups.link-confirm-message'),
+                icon: 'user.user-plus-01',
+                acceptLabel: this.translocoService.translate('users-groups.link-to-application'),
+                rejectLabel: this.translocoService.translate('users-groups.cancel'),
+                acceptButton: {
+                    severity: 'success',
+                },
+            },
+            loading: (row) => this.linkingRowIds().includes(row.userName),
         },
         {
             icon: 'general.trash-01',
-            tooltip: this.translocoService.translate('delete'),
+            tooltip: this.translocoService.translate('users-groups.unlink-from-application'),
             color: 'danger',
             variant: 'outlined',
             action: (row) => {
-                this.deletingRowIds.update((ids) => [...ids, row.userName]);
-                this.facade
-                    .deleteUser(row.userName)
-                    .pipe(finalize(() => {
-                    this.deletingRowIds.update((ids) => ids.filter((id) => id !== row.userName));
-                }))
-                    .subscribe();
+                this.unlinkUserFromApplication(row);
             },
+            hidden: (row) => !this.isLinkedToCurrentApplication(row),
             confirmation: {
                 type: 'popup',
-                confirmationType: 'delete',
+                header: this.translocoService.translate('users-groups.unlink-confirm-header'),
+                message: this.translocoService.translate('users-groups.unlink-confirm-message'),
+                icon: 'general.link-broken-01',
+                acceptLabel: this.translocoService.translate('users-groups.unlink-from-application'),
+                rejectLabel: this.translocoService.translate('users-groups.cancel'),
+                acceptButton: {
+                    severity: 'danger',
+                },
             },
             loading: (row) => this.deletingRowIds().includes(row.userName),
         },
@@ -1187,6 +1284,26 @@ class Users {
             type: 'custom',
             customCellTpl: this.typeCol(),
         },
+        {
+            key: 'isLinkedToCurrentApplication',
+            label: this.translocoService.translate('users-groups.application-link'),
+            type: 'custom',
+            customCellTpl: this.applicationLinkCol(),
+            filterConfig: {
+                type: 'select',
+                label: this.translocoService.translate('users-groups.application-link'),
+                options: [
+                    {
+                        label: this.translocoService.translate('users-groups.linked'),
+                        value: true,
+                    },
+                    {
+                        label: this.translocoService.translate('users-groups.not-linked'),
+                        value: false,
+                    },
+                ],
+            },
+        },
         {
             key: 'email',
             label: this.translocoService.translate('users-groups.email'),
@@ -1206,6 +1323,35 @@ class Users {
     ngOnInit() {
         this.facade.getUsers();
     }
+    isLinkedToCurrentApplication(user) {
+        return user?.isLinkedToCurrentApplication !== false;
+    }
+    linkUserToApplication(user) {
+        const userName = user?.userName;
+        if (!userName) {
+            return;
+        }
+        this.linkingRowIds.update((ids) => [...ids, userName]);
+        this.facade
+            .linkUserToApplication(userName)
+            .pipe(finalize(() => {
+            this.linkingRowIds.update((ids) => ids.filter((id) => id !== userName));
+        }))
+            .subscribe();
+    }
+    unlinkUserFromApplication(user) {
+        const userName = user?.userName;
+        if (!userName || !this.isLinkedToCurrentApplication(user)) {
+            return;
+        }
+        this.deletingRowIds.update((ids) => [...ids, userName]);
+        this.facade
+            .deleteUser(userName)
+            .pipe(finalize(() => {
+            this.deletingRowIds.update((ids) => ids.filter((id) => id !== userName));
+        }))
+            .subscribe();
+    }
     addUserDialog(user = null) {
         const modalType = user ? 'drawer' : 'dialog';
         this.modal.openModal(UserForm, modalType, {
@@ -1248,7 +1394,7 @@ class Users {
         });
     }
     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.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"] }] });
+    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 }, { propertyName: "applicationLinkCol", first: true, predicate: ["applicationLinkCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\n  <div class=\"mt-5\">\n    <ng-template #typeCol let-row>\n      @if (row.isExternal) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-slate-50 dark:bg-slate-900/30 p-2\"\n        >\n          <mt-icon\n            icon=\"general.link-external-02\"\n            class=\"text-slate-600 dark:text-slate-300 text-sm\"\n          />\n          <span class=\"text-slate-700 dark:text-slate-200 text-xs font-medium\">\n            {{ t(\"external\") }}\n          </span>\n        </span>\n      } @else {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-emerald-50 dark:bg-emerald-900/30 p-2\"\n        >\n          <mt-icon\n            icon=\"user.users-01\"\n            class=\"text-emerald-600 dark:text-emerald-300 text-sm\"\n          />\n          <span\n            class=\"text-emerald-700 dark:text-emerald-200 text-xs font-medium\"\n          >\n            {{ t(\"internal\") }}\n          </span>\n        </span>\n      }\n    </ng-template>\n    <ng-template #userCol let-row>\n      <div class=\"flex items-center gap-2\">\n        <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar> {{ row.displayName }}\n      </div>\n    </ng-template>\n    <ng-template #applicationLinkCol let-row>\n      @if (isLinkedToCurrentApplication(row)) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-emerald-50 dark:bg-emerald-900/30 p-2\"\n        >\n          <mt-icon\n            icon=\"user.user-check-01\"\n            class=\"text-emerald-600 dark:text-emerald-300 text-sm\"\n          />\n          <span\n            class=\"text-emerald-700 dark:text-emerald-200 text-xs font-medium\"\n          >\n            {{ t(\"linked\") }}\n          </span>\n        </span>\n      } @else {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-amber-50 dark:bg-amber-900/30 p-2\"\n        >\n          <mt-icon\n            icon=\"general.link-broken-01\"\n            class=\"text-amber-600 dark:text-amber-300 text-sm\"\n          />\n          <span class=\"text-amber-700 dark:text-amber-200 text-xs font-medium\">\n            {{ t(\"not-linked\") }}\n          </span>\n        </span>\n      }\n    </ng-template>\n\n    <mt-table\n      [tabs]=\"tabs()\"\n      [(activeTab)]=\"activeTab\"\n      [data]=\"users()\"\n      [columns]=\"tableColumns()\"\n      [actions]=\"tableActions()\"\n      [rowActions]=\"rowActions()\"\n      [generalSearch]=\"true\"\n      [showFilters]=\"true\"\n      [loading]=\"loading()\"\n      storageKey=\"users-groups-users-table\"\n    >\n    </mt-table>\n  </div>\n</ng-container>\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,
@@ -1259,8 +1405,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         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 }] }] } });
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\n  <div class=\"mt-5\">\n    <ng-template #typeCol let-row>\n      @if (row.isExternal) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-slate-50 dark:bg-slate-900/30 p-2\"\n        >\n          <mt-icon\n            icon=\"general.link-external-02\"\n            class=\"text-slate-600 dark:text-slate-300 text-sm\"\n          />\n          <span class=\"text-slate-700 dark:text-slate-200 text-xs font-medium\">\n            {{ t(\"external\") }}\n          </span>\n        </span>\n      } @else {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-emerald-50 dark:bg-emerald-900/30 p-2\"\n        >\n          <mt-icon\n            icon=\"user.users-01\"\n            class=\"text-emerald-600 dark:text-emerald-300 text-sm\"\n          />\n          <span\n            class=\"text-emerald-700 dark:text-emerald-200 text-xs font-medium\"\n          >\n            {{ t(\"internal\") }}\n          </span>\n        </span>\n      }\n    </ng-template>\n    <ng-template #userCol let-row>\n      <div class=\"flex items-center gap-2\">\n        <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar> {{ row.displayName }}\n      </div>\n    </ng-template>\n    <ng-template #applicationLinkCol let-row>\n      @if (isLinkedToCurrentApplication(row)) {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-emerald-50 dark:bg-emerald-900/30 p-2\"\n        >\n          <mt-icon\n            icon=\"user.user-check-01\"\n            class=\"text-emerald-600 dark:text-emerald-300 text-sm\"\n          />\n          <span\n            class=\"text-emerald-700 dark:text-emerald-200 text-xs font-medium\"\n          >\n            {{ t(\"linked\") }}\n          </span>\n        </span>\n      } @else {\n        <span\n          class=\"inline-flex items-center gap-1 rounded-md bg-amber-50 dark:bg-amber-900/30 p-2\"\n        >\n          <mt-icon\n            icon=\"general.link-broken-01\"\n            class=\"text-amber-600 dark:text-amber-300 text-sm\"\n          />\n          <span class=\"text-amber-700 dark:text-amber-200 text-xs font-medium\">\n            {{ t(\"not-linked\") }}\n          </span>\n        </span>\n      }\n    </ng-template>\n\n    <mt-table\n      [tabs]=\"tabs()\"\n      [(activeTab)]=\"activeTab\"\n      [data]=\"users()\"\n      [columns]=\"tableColumns()\"\n      [actions]=\"tableActions()\"\n      [rowActions]=\"rowActions()\"\n      [generalSearch]=\"true\"\n      [showFilters]=\"true\"\n      [loading]=\"loading()\"\n      storageKey=\"users-groups-users-table\"\n    >\n    </mt-table>\n  </div>\n</ng-container>\n" }]
+        }], propDecorators: { typeCol: [{ type: i0.ViewChild, args: ['typeCol', { isSignal: true }] }], userCol: [{ type: i0.ViewChild, args: ['userCol', { isSignal: true }] }], applicationLinkCol: [{ type: i0.ViewChild, args: ['applicationLinkCol', { isSignal: true }] }] } });
 
 class GroupForm {
     modal = inject(ModalService);
@@ -1541,5 +1687,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, GetUserSummary, 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, LinkUserToApplication, ResetUserPassword, UpdateGroup, UpdateUser, UserForm, Users, UsersGroups, UsersGroupsActionKey, UsersGroupsFacade, UsersGroupsState };
 //# sourceMappingURL=masterteam-users-groups.mjs.map