@tuki-io/tuki-widgets 0.0.113 → 0.0.115

package/fesm2020/tuki-io-tuki-widgets-users-list.mjs

@@ -1439,9 +1439,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
-const DISPLAYED_COLS = ['name', 'email', 'status', 'last-active-time', 'role', 'source', 'actions'];
+class TableToolbarComponent {
+    constructor() {
+        this.searchChange = new EventEmitter();
+    }
+    onSearchInputChange(event) {
+        const value = event.target.value.trim().toLowerCase() || '';
+        if (this.timerId)
+            window.clearTimeout(this.timerId);
+        this.timerId = window.setTimeout(() => this.searchChange.emit(value), 500);
+    }
+}
+TableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableToolbarComponent, selector: "tk-users-table-toolbar", inputs: { totalUsersCount: "totalUsersCount" }, outputs: { searchChange: "searchChange" }, ngImport: i0, template: "<header style=\"margin-bottom: 1rem;\">\r\n    <div style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n      <div class=\"collection-header-left\">\r\n        <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n          <!-- Search Input -->\r\n          <div style=\"position: relative; width: fit-content; min-width: 200px;\">\r\n            <input (input)=\"onSearchInputChange($event)\" type=\"text\" placeholder=\"Search by display name, email\" style=\"width: 100%; height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 12px 6px 44px; border: 1px solid #00000080; background: #fff; color: #222; outline: none; box-sizing: border-box; min-width: 280px;\">\r\n            <span style=\"position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #757575; font-size: 18px; font-weight: normal; pointer-events: none;\">\r\n              <i class=\"material-icons\" style=\"font-size: 18px; font-weight: normal;\">search</i>\r\n            </span>\r\n          </div>\r\n          <span style=\"margin: 0 4px; color: #757575; font-size: 1rem;\">or</span>\r\n          <!-- Filter Select -->\r\n          <div style=\"display: flex; align-items: center; position: relative; width: fit-content; min-width: 200px;\">\r\n            <span style=\"position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #757575; font-size: 18px; font-weight: normal; pointer-events: none;\">\r\n              <i class=\"material-icons\" style=\"font-size: 18px; font-weight: normal;\">filter_list</i>\r\n            </span>\r\n            <select style=\"height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 32px 6px 44px; border: 1px solid #00000080; background: #fff; min-width: 200px; width: fit-content; color: #222; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill=\\'%23757575\\' height=\\'20\\' viewBox=\\'0 0 24 24\\' width=\\'20\\' xmlns=\\'http://www.w3.org/2000/svg\\'><path d=\\'M7 10l5 5 5-5z\\'/></svg>'); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;\">\r\n              <option>Filter</option>\r\n            </select>\r\n          </div>\r\n          <span style=\"margin: 0 4px; color: #757575; font-size: 1rem;\">or</span>\r\n          <!-- Location Select -->\r\n          <select style=\"height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 32px 6px 12px; border: 1px solid #00000080; background: #fff; min-width: 200px; width: fit-content; color: #222; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill=\\'%23757575\\' height=\\'20\\' viewBox=\\'0 0 24 24\\' width=\\'20\\' xmlns=\\'http://www.w3.org/2000/svg\\'><path d=\\'M7 10l5 5 5-5z\\'/></svg>'); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;\">\r\n            <option>Select a Location</option>\r\n          </select>\r\n          <span style=\"margin-left: 8px; color: #757575; font-size: 1rem; white-space: nowrap;\">{{ totalUsersCount }} users</span>\r\n        </div>\r\n      </div>\r\n      <div style=\"display: flex; gap: 1rem;\">\r\n        <button class=\"btn si\">\r\n          Send invitations\r\n        </button>\r\n        <button class=\"btn mu\">\r\n          Manage users\r\n        </button>\r\n      </div>\r\n    </div>\r\n</header>", styles: [".btn{position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;width:min-content;max-width:100%;padding:0rem .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);height:2rem;cursor:pointer}.btn:hover{background-color:#0000000d}.si{border-color:#0000004d;background-color:#0000;color:#000000f2}.mu{color:#fff;background-color:#000000f2}.mu:hover{background-color:#232323e6!important}\n"], dependencies: [{ kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-users-table-toolbar', template: "<header style=\"margin-bottom: 1rem;\">\r\n    <div style=\"display: flex; align-items: center; justify-content: space-between;\">\r\n      <div class=\"collection-header-left\">\r\n        <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n          <!-- Search Input -->\r\n          <div style=\"position: relative; width: fit-content; min-width: 200px;\">\r\n            <input (input)=\"onSearchInputChange($event)\" type=\"text\" placeholder=\"Search by display name, email\" style=\"width: 100%; height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 12px 6px 44px; border: 1px solid #00000080; background: #fff; color: #222; outline: none; box-sizing: border-box; min-width: 280px;\">\r\n            <span style=\"position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #757575; font-size: 18px; font-weight: normal; pointer-events: none;\">\r\n              <i class=\"material-icons\" style=\"font-size: 18px; font-weight: normal;\">search</i>\r\n            </span>\r\n          </div>\r\n          <span style=\"margin: 0 4px; color: #757575; font-size: 1rem;\">or</span>\r\n          <!-- Filter Select -->\r\n          <div style=\"display: flex; align-items: center; position: relative; width: fit-content; min-width: 200px;\">\r\n            <span style=\"position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #757575; font-size: 18px; font-weight: normal; pointer-events: none;\">\r\n              <i class=\"material-icons\" style=\"font-size: 18px; font-weight: normal;\">filter_list</i>\r\n            </span>\r\n            <select style=\"height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 32px 6px 44px; border: 1px solid #00000080; background: #fff; min-width: 200px; width: fit-content; color: #222; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill=\\'%23757575\\' height=\\'20\\' viewBox=\\'0 0 24 24\\' width=\\'20\\' xmlns=\\'http://www.w3.org/2000/svg\\'><path d=\\'M7 10l5 5 5-5z\\'/></svg>'); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;\">\r\n              <option>Filter</option>\r\n            </select>\r\n          </div>\r\n          <span style=\"margin: 0 4px; color: #757575; font-size: 1rem;\">or</span>\r\n          <!-- Location Select -->\r\n          <select style=\"height: 34px; border-radius: .5rem; font-size: 16px; padding: 6px 32px 6px 12px; border: 1px solid #00000080; background: #fff; min-width: 200px; width: fit-content; color: #222; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill=\\'%23757575\\' height=\\'20\\' viewBox=\\'0 0 24 24\\' width=\\'20\\' xmlns=\\'http://www.w3.org/2000/svg\\'><path d=\\'M7 10l5 5 5-5z\\'/></svg>'); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;\">\r\n            <option>Select a Location</option>\r\n          </select>\r\n          <span style=\"margin-left: 8px; color: #757575; font-size: 1rem; white-space: nowrap;\">{{ totalUsersCount }} users</span>\r\n        </div>\r\n      </div>\r\n      <div style=\"display: flex; gap: 1rem;\">\r\n        <button class=\"btn si\">\r\n          Send invitations\r\n        </button>\r\n        <button class=\"btn mu\">\r\n          Manage users\r\n        </button>\r\n      </div>\r\n    </div>\r\n</header>", styles: [".btn{position:relative;display:inline-flex;gap:6px;align-items:center;justify-content:center;overflow:hidden!important;width:min-content;max-width:100%;padding:0rem .75rem;border:1px solid transparent;border-radius:6.25rem;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;transition:all .1s cubic-bezier(.25,.1,.25,1);height:2rem;cursor:pointer}.btn:hover{background-color:#0000000d}.si{border-color:#0000004d;background-color:#0000;color:#000000f2}.mu{color:#fff;background-color:#000000f2}.mu:hover{background-color:#232323e6!important}\n"] }]
+        }], propDecorators: { totalUsersCount: [{
+                type: Input
+            }], searchChange: [{
+                type: Output
+            }] } });
+
+const DISPLAYED_COLS = [
+    'name',
+    'email',
+    'status',
+    'last-active-time',
+    'role',
+    'source',
+    'actions',
+];
 const LOCAL_STORAGE = {
-    USER_IN_MIGRATION: 'userIdInMigration'
+    USER_IN_MIGRATION: 'userIdInMigration',
 };
 class UsersListComponent {
     get form() {
@@ -1461,6 +1491,7 @@ class UsersListComponent {
         this.showMoveUserWizard = false;
         this.moveUserPending = false;
         this.subscriptions = [];
+        this.totalUsersCount = 0;
     }
     ngOnInit() {
         this.usersSearchService.setDefaultValues();
@@ -1471,8 +1502,7 @@ class UsersListComponent {
         this.apiService.apiUrl = this.host + '/dcp';
         this.apiWebexService.apiUrl = this.host + '/webex';
         this.getMigratedUsers();
-        const subscription = this.usersSearchService.foundUsers$
-            .subscribe((users) => {
+        const subscription = this.usersSearchService.foundUsers$.subscribe((users) => {
             this.initializeDataSource(users);
         });
         this.subscriptions.push(subscription);
@@ -1480,7 +1510,7 @@ class UsersListComponent {
     }
     ngOnDestroy() {
         if (this.subscriptions?.length) {
-            this.subscriptions.forEach(subscription => subscription.unsubscribe());
+            this.subscriptions.forEach((subscription) => subscription.unsubscribe());
         }
     }
     pageNumberChangeEvent(perPageNumber) {
@@ -1512,7 +1542,8 @@ class UsersListComponent {
             this.moveInProgressUserId = user.userid;
             this.setStatusToUser(index, 'In Progress');
             localStorage.setItem(LOCAL_STORAGE.USER_IN_MIGRATION, user.userid);
-            const subscription = this.userService.moveUserToMT(this.customerId, user)
+            const subscription = this.userService
+                .moveUserToMT(this.customerId, user)
                 .subscribe(() => {
                 this.moveUser = null;
                 this.moveUserIndex = null;
@@ -1530,13 +1561,16 @@ class UsersListComponent {
             this.moveInProgressUserId = user.userid;
             this.users[index].status = 'In Progress';
             localStorage.setItem(LOCAL_STORAGE.USER_IN_MIGRATION, user.userid);
-            const subscription = this.userService.moveUserToDI(this.customerId, user)
+            const subscription = this.userService
+                .moveUserToDI(this.customerId, user)
                 .subscribe(() => {
                 this.removeUserInMigrationProgress();
                 this.setStatusToUser(index, 'Active');
                 this.users[index].webexUUID = '';
-                if (this.usersSearchService.migratedUsers && this.usersSearchService.migratedUsers.length) {
-                    this.usersSearchService.migratedUsers = this.usersSearchService.migratedUsers.filter((migratedUser) => migratedUser.userid !== user.email);
+                if (this.usersSearchService.migratedUsers &&
+                    this.usersSearchService.migratedUsers.length) {
+                    this.usersSearchService.migratedUsers =
+                        this.usersSearchService.migratedUsers.filter((migratedUser) => migratedUser.userid !== user.email);
                 }
             }, () => {
                 this.removeUserInMigrationProgress();
@@ -1569,6 +1603,8 @@ class UsersListComponent {
         if (users?.length) {
             // this.setRandomUserRole(users);
             this.users = users;
+            // set total rows count for toolbar/pagination from server-side pagination when available
+            this.totalUsersCount = this.usersSearchService?.total || users.length;
             this.setUserMigrationProgress();
             this.usersSearchService.setMigratedPropToUsers(this.users);
             this.dataSource = new MatTableDataSource(users);
@@ -1576,7 +1612,7 @@ class UsersListComponent {
     }
     setUserRole() {
         if (this.users?.length) {
-            this.users.forEach(user => {
+            this.users.forEach((user) => {
                 if (!user.isMigrated) {
                     user.roleName = 'Dedicated Instance Calling user';
                 }
@@ -1588,7 +1624,7 @@ class UsersListComponent {
         const min = Math.round(this.usersSearchService.pageSize / 2);
         const randomAmount = Math.round(Math.random() * (max - min) + min);
         const indexes = this.getArrayOfRandomUserIndexes(randomAmount);
-        indexes.forEach(index => {
+        indexes.forEach((index) => {
             if (users[index]) {
                 users[index].roleName = 'Dedicated Instance Calling user';
             }
@@ -1605,8 +1641,7 @@ class UsersListComponent {
     }
     runSearch() {
         this.dataPending = true;
-        this.usersSearchService.quickRegularUsersSearch()
-            .subscribe(() => {
+        this.usersSearchService.quickRegularUsersSearch().subscribe(() => {
             this.dataPending = false;
         }, () => {
             this.dataPending = false;
@@ -1616,7 +1651,7 @@ class UsersListComponent {
     setUserMigrationProgress() {
         const userIdInMigration = localStorage.getItem(LOCAL_STORAGE.USER_IN_MIGRATION);
         if (userIdInMigration) {
-            const index = this.users.findIndex(user => user.userid === userIdInMigration);
+            const index = this.users.findIndex((user) => user.userid === userIdInMigration);
             this.moveInProgressUserId = index > -1 ? this.users[index].userid : '';
             this.moveUserPending = index > -1;
         }
@@ -1626,14 +1661,16 @@ class UsersListComponent {
         const searchParams = {
             customerid: this.customerId,
             siteid: this.siteId,
-            'cloud-only': 'true'
+            'cloud-only': 'true',
         };
         // this.usersSearchService.quickWebexUsersSearch(searchParams, true, MAX_INTEGER)
-        this.usersSearchService.getMigratedUsers(this.customerId)
+        this.usersSearchService
+            .getMigratedUsers(this.customerId)
             // this.usersSearchService.getMigratedWebexUsers(this.customerId)
             .subscribe(() => {
             const userIdInMigration = localStorage.getItem(LOCAL_STORAGE.USER_IN_MIGRATION);
-            if (userIdInMigration && this.usersSearchService.migratedUsers.filter((migratedUser) => migratedUser.userid === userIdInMigration)) {
+            if (userIdInMigration &&
+                this.usersSearchService.migratedUsers.filter((migratedUser) => migratedUser.userid === userIdInMigration)) {
                 localStorage.removeItem(LOCAL_STORAGE.USER_IN_MIGRATION);
             }
             this.runSearch();
@@ -1648,8 +1685,8 @@ class UsersListComponent {
                 title: `Upgrade user ${user.userid} to ${title}?`,
                 message: `<p>By upgrading from Dedicated Instance, you may need to reassign directory numbers and lose calling services.</p>
 <p>Are you sure you want to continue?</p>`,
-                confirmButtonText: 'Yes, continue'
-            }
+                confirmButtonText: 'Yes, continue',
+            },
         });
         dialogRef.beforeClosed().subscribe((result) => {
             if (result) {
@@ -1677,7 +1714,8 @@ class UsersListComponent {
             this.setStatusToUser(this.moveUserIndex, 'In Progress');
             localStorage.setItem(LOCAL_STORAGE.USER_IN_MIGRATION, this.moveUser.userid);
         }
-        const subscription = this.userService.moveUserToMT(this.customerId, this.moveUser)
+        const subscription = this.userService
+            .moveUserToMT(this.customerId, this.moveUser)
             .subscribe(() => {
             this.userService.userMoved$.next(true);
         }, () => {
@@ -1686,12 +1724,33 @@ class UsersListComponent {
         });
         this.subscriptions.push(subscription);
     }
+    searchUsers(token) {
+        if (!this.users?.length) {
+            return;
+        }
+        if (!token) {
+            this.dataSource = new MatTableDataSource(this.users);
+            this.totalUsersCount = this.usersSearchService?.total || this.users.length;
+            return;
+        }
+        const filtered = this.users.filter((user) => {
+            const firstName = (user?.firstName || '').toLowerCase();
+            const lastName = (user?.lastName || '').toLowerCase();
+            const fullName = `${firstName} ${lastName}`.trim();
+            const email = (user?.email || '').toLowerCase();
+            return (firstName.includes(token) ||
+                lastName.includes(token) ||
+                fullName.includes(token) ||
+                email.includes(token));
+        });
+        this.dataSource = new MatTableDataSource(filtered);
+    }
 }
 UsersListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListComponent, deps: [{ token: UserService }, { token: APIService }, { token: ApiWebexService }, { token: NotificationService }, { token: UsersSearchService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-UsersListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UsersListComponent, selector: "app-users-list", inputs: { token: "token", customerId: "customerId", siteId: "siteId", host: "host" }, outputs: { openUser: "openUser", userMoved: "userMoved", switchToWizard: "switchToWizard" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n\r\n  <table class=\"webex-table\" mat-table *ngIf=\"users?.length\" #table [dataSource]=\"dataSource\">\r\n\r\n    <!-- <ng-container matColumnDef=\"user-icon\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n      </td>\r\n    </ng-container> -->\r\n\r\n    <ng-container matColumnDef=\"name\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\" style=\"padding-left: 60px;\">Display name</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n          <div class=\"display-name-wrapper\">\r\n            <span>\r\n              {{ user.firstName }} {{ user.lastName }}\r\n            </span>\r\n            <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n          </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"email\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n      <td class=\"user-site\" [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\r\n        {{ user.email }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"status\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Status\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </span>\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-user-status icon-user-status-active\"></span>{{user.status}}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\" style=\"padding-left: 24px; padding-top: 4px;\">\r\n        <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\">\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user, let i = index\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\">\r\n        <mat-progress-spinner class=\"field-spinner\"\r\n                              [diameter]=\"70\"\r\n                              strokeWidth=\"3\"\r\n                              mode=\"indeterminate\"\r\n                              *ngIf=\"user.status === 'In Progress'\"></mat-progress-spinner>\r\n        <button *ngIf=\"!(moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid)\"\r\n                class=\"button-action-dot\" mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n          <div class=\"icon-actions-dots\">\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n          </div>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n          <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n          <button *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\">Quick Upgrade User to MT</button>\r\n          <button *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'MT', 'MT')\">Upgrade User to MT</button>\r\n          <button *ngIf=\"user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'DI', 'DI')\">Revert User to UCM/DI</button>\r\n          <button mat-menu-item [disabled]=\"true\">Deactivate User</button>\r\n          <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"role\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Admin roles</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">{{ user.roleName || '' }}</td>\r\n    </ng-container>\r\n    \r\n    <ng-container matColumnDef=\"source\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Provisioning Type</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\r\n        <ng-container *ngIf=\"user.webexUUID\">\r\n          <span><img src=\"assets/icons/webex_logo_icon.svg\" alt=\"\"></span>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!user.webexUUID\">\r\n          <span>CUCM</span>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    \r\n    <ng-container matColumnDef=\"last-active-time\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Last active time\r\n          <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n           <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </span>\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">2/16/26</td>/\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n\r\n  <app-pagination\r\n    [pagination]=\"usersSearchService.getPagination()\"\r\n    [showPageSizeOptions]=\"true\"\r\n    (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n    (pageEmitter)=\"pageEvent($event)\">\r\n  </app-pagination>\r\n  \r\n</div>\r\n\r\n<app-move-user-wizard *ngIf=\"showMoveUserWizard\" [user]=\"moveUser\" (done)=\"closeMoveUserWizard(true)\"\r\n                      [customerId]=\"customerId\" (runMoveUser)=\"runMoveUserToMT()\"\r\n                      (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D  %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D  %0D  %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D    stroke%3D%22currentColor%22 %0D    stroke-width%3D%221.2%22 %0D    stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:#009fdb!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-size:14px}.user-info-box h3{display:block;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table td{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover td:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:relative;margin:-20px auto auto}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["pagination", "showPageSizeOptions", "showRefreshButton", "lengthPending"], outputs: ["pageEmitter", "pageNumberChangeEmitter"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: MoveUserWizardComponent, selector: "app-move-user-wizard", inputs: ["user", "customerId"], outputs: ["closeMoveUserWizard", "done", "runMoveUser"] }] });
+UsersListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UsersListComponent, selector: "app-users-list", inputs: { token: "token", customerId: "customerId", siteId: "siteId", host: "host" }, outputs: { openUser: "openUser", userMoved: "userMoved", switchToWizard: "switchToWizard" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n  <tk-users-table-toolbar [totalUsersCount]=\"totalUsersCount\" (searchChange)=\"searchUsers($event)\"></tk-users-table-toolbar>\r\n  <table class=\"webex-table\" mat-table *ngIf=\"users?.length\" #table [dataSource]=\"dataSource\">\r\n\r\n    <!-- <ng-container matColumnDef=\"user-icon\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n      </td>\r\n    </ng-container> -->\r\n\r\n    <ng-container matColumnDef=\"name\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\" style=\"padding-left: 60px;\">Display name</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n          <div class=\"display-name-wrapper\">\r\n            <span>\r\n              {{ user.firstName }} {{ user.lastName }}\r\n            </span>\r\n            <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n          </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"email\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n      <td class=\"user-site\" [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\r\n        {{ user.email }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"status\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Status\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </span>\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-user-status icon-user-status-active\"></span>{{user.status}}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\" style=\"padding-left: 24px; padding-top: 4px;\">\r\n        <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\">\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user, let i = index\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\">\r\n        <mat-progress-spinner class=\"field-spinner\"\r\n                              [diameter]=\"70\"\r\n                              strokeWidth=\"3\"\r\n                              mode=\"indeterminate\"\r\n                              *ngIf=\"user.status === 'In Progress'\"></mat-progress-spinner>\r\n        <button *ngIf=\"!(moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid)\"\r\n                class=\"button-action-dot\" mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n          <div class=\"icon-actions-dots\">\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n          </div>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n          <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n          <button *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\">Quick Upgrade User to MT</button>\r\n          <button *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'MT', 'MT')\">Upgrade User to MT</button>\r\n          <button *ngIf=\"user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'DI', 'DI')\">Revert User to UCM/DI</button>\r\n          <button mat-menu-item [disabled]=\"true\">Deactivate User</button>\r\n          <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"role\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Admin roles</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">{{ user.roleName || '' }}</td>\r\n    </ng-container>\r\n    \r\n    <ng-container matColumnDef=\"source\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Provisioning Type</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\r\n        <ng-container *ngIf=\"user.webexUUID\">\r\n          <span><img src=\"assets/icons/webex_logo_icon.svg\" alt=\"\"></span>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!user.webexUUID\">\r\n          <span>CUCM</span>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    \r\n    <ng-container matColumnDef=\"last-active-time\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Last active time\r\n          <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n           <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </span>\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">2/16/26</td>/\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n\r\n  <app-pagination\r\n    [pagination]=\"usersSearchService.getPagination()\"\r\n    [showPageSizeOptions]=\"true\"\r\n    (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n    (pageEmitter)=\"pageEvent($event)\">\r\n  </app-pagination>\r\n  \r\n</div>\r\n\r\n<app-move-user-wizard *ngIf=\"showMoveUserWizard\" [user]=\"moveUser\" (done)=\"closeMoveUserWizard(true)\"\r\n                      [customerId]=\"customerId\" (runMoveUser)=\"runMoveUserToMT()\"\r\n                      (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D  %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D  %0D  %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D    stroke%3D%22currentColor%22 %0D    stroke-width%3D%221.2%22 %0D    stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:#009fdb!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-size:14px}.user-info-box h3{display:block;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table td{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover td:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:relative;margin:-20px auto auto}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i11$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["pagination", "showPageSizeOptions", "showRefreshButton", "lengthPending"], outputs: ["pageEmitter", "pageNumberChangeEmitter"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: MoveUserWizardComponent, selector: "app-move-user-wizard", inputs: ["user", "customerId"], outputs: ["closeMoveUserWizard", "done", "runMoveUser"] }, { kind: "component", type: TableToolbarComponent, selector: "tk-users-table-toolbar", inputs: ["totalUsersCount"], outputs: ["searchChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-users-list', template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n\r\n  <table class=\"webex-table\" mat-table *ngIf=\"users?.length\" #table [dataSource]=\"dataSource\">\r\n\r\n    <!-- <ng-container matColumnDef=\"user-icon\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n      </td>\r\n    </ng-container> -->\r\n\r\n    <ng-container matColumnDef=\"name\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\" style=\"padding-left: 60px;\">Display name</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n          <div class=\"display-name-wrapper\">\r\n            <span>\r\n              {{ user.firstName }} {{ user.lastName }}\r\n            </span>\r\n            <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n          </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"email\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n      <td class=\"user-site\" [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\r\n        {{ user.email }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"status\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Status\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </span>\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-user-status icon-user-status-active\"></span>{{user.status}}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\" style=\"padding-left: 24px; padding-top: 4px;\">\r\n        <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\">\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user, let i = index\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\">\r\n        <mat-progress-spinner class=\"field-spinner\"\r\n                              [diameter]=\"70\"\r\n                              strokeWidth=\"3\"\r\n                              mode=\"indeterminate\"\r\n                              *ngIf=\"user.status === 'In Progress'\"></mat-progress-spinner>\r\n        <button *ngIf=\"!(moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid)\"\r\n                class=\"button-action-dot\" mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n          <div class=\"icon-actions-dots\">\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n          </div>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n          <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n          <button *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\">Quick Upgrade User to MT</button>\r\n          <button *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'MT', 'MT')\">Upgrade User to MT</button>\r\n          <button *ngIf=\"user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'DI', 'DI')\">Revert User to UCM/DI</button>\r\n          <button mat-menu-item [disabled]=\"true\">Deactivate User</button>\r\n          <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"role\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Admin roles</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">{{ user.roleName || '' }}</td>\r\n    </ng-container>\r\n    \r\n    <ng-container matColumnDef=\"source\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Provisioning Type</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\r\n        <ng-container *ngIf=\"user.webexUUID\">\r\n          <span><img src=\"assets/icons/webex_logo_icon.svg\" alt=\"\"></span>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!user.webexUUID\">\r\n          <span>CUCM</span>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    \r\n    <ng-container matColumnDef=\"last-active-time\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Last active time\r\n          <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n           <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </span>\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">2/16/26</td>/\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n\r\n  <app-pagination\r\n    [pagination]=\"usersSearchService.getPagination()\"\r\n    [showPageSizeOptions]=\"true\"\r\n    (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n    (pageEmitter)=\"pageEvent($event)\">\r\n  </app-pagination>\r\n  \r\n</div>\r\n\r\n<app-move-user-wizard *ngIf=\"showMoveUserWizard\" [user]=\"moveUser\" (done)=\"closeMoveUserWizard(true)\"\r\n                      [customerId]=\"customerId\" (runMoveUser)=\"runMoveUserToMT()\"\r\n                      (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D  %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D  %0D  %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D    stroke%3D%22currentColor%22 %0D    stroke-width%3D%221.2%22 %0D    stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:#009fdb!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-size:14px}.user-info-box h3{display:block;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table td{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover td:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:relative;margin:-20px auto auto}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}\n"] }]
+            args: [{ selector: 'app-users-list', template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n  <tk-users-table-toolbar [totalUsersCount]=\"totalUsersCount\" (searchChange)=\"searchUsers($event)\"></tk-users-table-toolbar>\r\n  <table class=\"webex-table\" mat-table *ngIf=\"users?.length\" #table [dataSource]=\"dataSource\">\r\n\r\n    <!-- <ng-container matColumnDef=\"user-icon\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\"></th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n      </td>\r\n    </ng-container> -->\r\n\r\n    <ng-container matColumnDef=\"name\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\" style=\"padding-left: 60px;\">Display name</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n          <div class=\"display-name-wrapper\">\r\n            <span>\r\n              {{ user.firstName }} {{ user.lastName }}\r\n            </span>\r\n            <span class=\"icon-webex-box\"><span class=\"icon-webex icon-webex-user\"></span></span>\r\n          </div>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"email\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Email</th>\r\n      <td class=\"user-site\" [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\r\n        {{ user.email }}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"status\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Status\r\n          <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </span>\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\"\r\n          (click)=\"onUserClick(user)\">\r\n        <span class=\"icon-user-status icon-user-status-active\"></span>{{user.status}}\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"actions\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\" style=\"padding-left: 24px; padding-top: 4px;\">\r\n        <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\">\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user, let i = index\"\r\n          [ngClass]=\"{'disabled-user-row': moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid}\">\r\n        <mat-progress-spinner class=\"field-spinner\"\r\n                              [diameter]=\"70\"\r\n                              strokeWidth=\"3\"\r\n                              mode=\"indeterminate\"\r\n                              *ngIf=\"user.status === 'In Progress'\"></mat-progress-spinner>\r\n        <button *ngIf=\"!(moveUserPending && moveInProgressUserId && moveInProgressUserId === user?.userid)\"\r\n                class=\"button-action-dot\" mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n          <div class=\"icon-actions-dots\">\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n            <span class=\"icon-dot\">.</span>\r\n          </div>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button mat-menu-item [disabled]=\"true\">Resend Invitation</button>\r\n          <button mat-menu-item [disabled]=\"true\">Reset Password</button>\r\n          <button *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\">Quick Upgrade User to MT</button>\r\n          <button *ngIf=\"!user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'MT', 'MT')\">Upgrade User to MT</button>\r\n          <button *ngIf=\"user.isMigrated\" mat-menu-item (click)=\"onMoveUser(user, i, 'DI', 'DI')\">Revert User to UCM/DI</button>\r\n          <button mat-menu-item [disabled]=\"true\">Deactivate User</button>\r\n          <button mat-menu-item [disabled]=\"true\">Delete User</button>\r\n        </mat-menu>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container matColumnDef=\"role\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Admin roles</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">{{ user.roleName || '' }}</td>\r\n    </ng-container>\r\n    \r\n    <ng-container matColumnDef=\"source\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">Provisioning Type</th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">\r\n        <ng-container *ngIf=\"user.webexUUID\">\r\n          <span><img src=\"assets/icons/webex_logo_icon.svg\" alt=\"\"></span>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!user.webexUUID\">\r\n          <span>CUCM</span>\r\n        </ng-container>\r\n      </td>\r\n    </ng-container>\r\n    \r\n    <ng-container matColumnDef=\"last-active-time\">\r\n      <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n        <span class=\"header-with-info\">\r\n          Last active time\r\n          <!-- <mat-icon class=\"info-icon\">info</mat-icon> -->\r\n           <img src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n        </span>\r\n      </th>\r\n      <td class=\"user-site\" mat-cell *matCellDef=\"let user\" (click)=\"onUserClick(user)\">2/16/26</td>/\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n  </table>\r\n\r\n  <app-pagination\r\n    [pagination]=\"usersSearchService.getPagination()\"\r\n    [showPageSizeOptions]=\"true\"\r\n    (pageNumberChangeEmitter)=\"pageNumberChangeEvent($event)\"\r\n    (pageEmitter)=\"pageEvent($event)\">\r\n  </app-pagination>\r\n  \r\n</div>\r\n\r\n<app-move-user-wizard *ngIf=\"showMoveUserWizard\" [user]=\"moveUser\" (done)=\"closeMoveUserWizard(true)\"\r\n                      [customerId]=\"customerId\" (runMoveUser)=\"runMoveUserToMT()\"\r\n                      (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"></app-move-user-wizard>\r\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";#users-list{letter-spacing:.5px}.header-with-info{display:flex;align-items:center;gap:.5rem}.header-with-info .info-icon{font-size:16px;color:#c3c3c3;cursor:pointer}table.mat-table{border-spacing:0;width:100%}::ng-deep .mat-paginator{background:none}.icon-user-status{width:.5rem;height:.5rem;border-radius:50%;background-color:#707070;margin:0 5px 0 0}.icon-user-status.icon-user-status-active{background-color:#1d805f;display:inline-block}.mat-select{height:100%;line-height:35px}.mat-form-field-wrapper{padding-bottom:0!important}.mat-form-field{padding:0;max-width:300px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:.7rem;line-height:1rem;background:#545454;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{filter:brightness(0) invert(1);background-repeat:no-repeat;background-position:center;display:inline-block;height:20px;width:20px;background-size:contain}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22%3E%3Cpath d%3D%22M23.23 16.757a5.746 5.746 0 1 0-7.041-9.048 5 5 0 0 0 .071-.705 4.75 4.75 0 1 0-7.705 3.689 8.43 8.43 0 0 0-6.305 7.84c0 1.052.543 2.521 3.13 3.55 1.643.595 3.371.92 5.118.965a7.8 7.8 0 0 0-.248 1.926c0 1.1.57 2.636 3.285 3.716a18.1 18.1 0 0 0 6.463 1.06c4.853 0 9.75-1.476 9.75-4.776a8.86 8.86 0 0 0-6.517-8.217M20 7.755a4.25 4.25 0 0 1 .006 8.499h-.013a4.25 4.25 0 0 1 .007-8.5M8.26 7.004a3.25 3.25 0 1 1 6.5 0 3.25 3.25 0 0 1-6.5 0m2.76 14.574c-4.177-.093-7.27-1.368-7.27-3.045 0-3.737 3.478-6.778 7.752-6.778a8.7 8.7 0 0 1 2.757.45 5.75 5.75 0 0 0 2.508 4.552 9.43 9.43 0 0 0-5.747 4.82m8.978 6.672c-4.703 0-8.249-1.408-8.249-3.276 0-3.982 3.7-7.22 8.25-7.22s8.248 3.238 8.248 7.22c0 1.868-3.546 3.276-8.25 3.276%22%2F%3E%3C%2Fsvg%3E\")}.icon-webex-info{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2211%22 stroke%3D%22currentColor%22 stroke-width%3D%221.5%22%2F%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%227.5%22 r%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D  %3Crect x%3D%2211%22 y%3D%2210%22 width%3D%222%22 height%3D%227%22 rx%3D%221%22 fill%3D%22currentColor%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-webex-cogs{filter:invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);background-repeat:no-repeat;background-position:center;display:inline-block;height:1rem;width:1rem;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D  %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%223.5%22 stroke%3D%22currentColor%22 stroke-width%3D%221.2%22%2F%3E%0D  %0D  %3Cpath d%3D%22M12 2C12.8 2 13.5 2.5 13.8 3.2L14.2 4.2C14.4 4.8 15 5.2 15.7 5.1L16.8 4.9C17.8 4.7 18.8 5.2 19.3 6.1L20.5 8.2C21 9.1 20.9 10.2 20.1 11L19.4 11.6C18.9 12 18.9 12.7 19.4 13.1L20.1 13.7C20.9 14.5 21 15.6 20.5 16.5L19.3 18.6C18.8 19.5 17.8 20 16.8 19.8L15.7 19.6C15 19.5 14.4 19.9 14.2 20.5L13.8 21.5C13.5 22.2 12.8 22.7 12 22.7C11.2 22.7 10.5 22.2 10.2 21.5L9.8 20.5C9.6 19.9 9 19.5 8.3 19.6L7.2 19.8C6.2 20 5.2 19.5 4.7 18.6L3.5 16.5C3 15.6 3.1 14.5 3.9 13.7L4.6 13.1C5.1 12.7 5.1 12 4.6 11.6L3.9 11C3.1 10.2 3 9.1 3.5 8.2L4.7 6.1C5.2 5.2 6.2 4.7 7.2 4.9L8.3 5.1C9 5.2 9.6 4.8 9.8 4.2L10.2 3.2C10.5 2.5 11.2 2 12 2Z%22 %0D    stroke%3D%22currentColor%22 %0D    stroke-width%3D%221.2%22 %0D    stroke-linejoin%3D%22round%22%2F%3E%0D%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;font-style:normal}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:#009fdb!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.user-info-box{background:white;display:grid;grid-template-columns:30% 70%;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-size:14px}.user-info-box h3{display:block;font-size:16px}.mat-divider{margin:5px 0!important}.info-boxes-container{padding:24px 0;display:flex;flex-direction:column;gap:24px}.header-box{height:60px;width:100%;line-height:60px;background:white;border-bottom:1px solid #dedddd}.header-box .header-back-block{float:left}.header-box .header-button-block{float:right}.webex-table{width:100%;margin:auto}.webex-table tr{border-bottom:1px solid #dedede}.webex-table th{background:#ededed;color:#636363;font-size:12px}.webex-table th:hover{background-color:#dedede}.webex-table th ::ng-deep .mat-icon{font-size:16px;display:flex;align-items:center}.webex-table td{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover td:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{padding:0 24px 0 12px;border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.webex-table .display-name-wrapper{display:flex;align-items:center;justify-content:left;flex-flow:row-reverse;gap:1rem}.mat-form-field{padding:0 0 5px;width:93%}.mat-form-field.mat-form-field-disabled{border-bottom:none}.mat-error{color:#c73636;margin:13px 0 0}.select-box{border-radius:30px;background:#f3f6f6;border:1px solid #e2e9ef;height:35px;position:relative}.select-box select{border:none!important;background:transparent;height:100%;width:92%;margin:auto;display:block}option:focus,option:focus-visible{border:none!important;outline:none!important}option{height:30px;cursor:pointer;color:#636363}option:hover{background:#ededed!important}.mat-select{height:100%!important;line-height:35px!important}.info-holder,.input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__name,.input-holder__name{font-weight:500!important;font-size:14px!important}.info-holder__inputs .input-holder,.input-holder__inputs .input-holder{display:grid;grid-template-columns:30% 70%;align-items:baseline}.info-holder__inputs .input-holder__name,.input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}.mat-form-field-wrapper,.mat-form-field-flex{height:30px!important}.mat-form-field-appearance-outline .mat-form-field-outline,.mat-form-field-outline .mat-form-field-outline-thick{height:35px!important}.mat-select{line-height:20px!important}.mat-form-field-appearance-outline .mat-form-field-infix{padding:14px 12px 10px;border-top:0;max-width:300px}.mat-tab-group{font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.mat-tab-label{font-weight:500!important;font-size:14px!important;height:auto!important;min-width:auto!important;padding:0!important}.mat-ink-bar{background-color:#000000e6!important;height:3px!important}.mat-form-field-wrapper{padding-bottom:0}.mat-form-field{max-width:300px}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}:host ::ng-deep .mat-form-field-wrapper{height:30px}:host ::ng-deep .mat-form-field-flex{height:30px}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:host ::ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}:host ::ng-deep .mat-select{line-height:20px}:host ::ng-deep .mat-form-field-infix{border-top:0px!important}:host ::ng-deep .mat-paginator{background:transparent!important}:host ::ng-deep .mat-paginator-container{min-height:30px!important}:host ::ng-deep .mat-paginator-range-label{margin:0 10px 0 24px!important;font-size:15px!important}:host ::ng-deep .pagination{font-size:13px;color:#0000008a}:host ::ng-deep .per-page-block{display:flex;line-height:42px!important}:host ::ng-deep .item_per_page{line-height:42px!important}:host ::ng-deep .select-page-size{line-height:42px!important}:host ::ng-deep mat-progress-spinner.page-spinner{position:fixed;margin:auto;inset:0}:host ::ng-deep mat-progress-spinner.field-spinner{position:relative;margin:-20px auto auto}:host ::ng-deep mat-progress-spinner.tab-spinner{position:relative;margin:0 auto auto}.icon-dot{display:block;color:#4f4f4f;font-size:16px;line-height:5px}.button-action-dot:hover{background:#dfdfdf}.button-action-dot{padding:0 5px 5px;border-radius:.25rem}\n"] }]
         }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }, { type: ApiWebexService }, { type: NotificationService }, { type: UsersSearchService }, { type: i1.MatDialog }]; }, propDecorators: { token: [{
                 type: Input
             }], customerId: [{
@@ -1917,7 +1976,8 @@ UsersListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         MoveUserStepperComponent,
         UserListConfirmDialogComponent,
         DevicesMoveUserWizardTabComponent,
-        DeviceMoveUserWizardComponent], imports: [BrowserModule,
+        DeviceMoveUserWizardComponent,
+        TableToolbarComponent], imports: [BrowserModule,
         FormsModule,
         ReactiveFormsModule,
         HttpClientModule,
@@ -1949,7 +2009,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         MoveUserStepperComponent,
                         UserListConfirmDialogComponent,
                         DevicesMoveUserWizardTabComponent,
-                        DeviceMoveUserWizardComponent
+                        DeviceMoveUserWizardComponent,
+                        TableToolbarComponent
                     ],
                     imports: [
                         BrowserModule,