@tuki-io/tuki-widgets 0.0.210 → 0.0.211

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2020/users-list/src/components/table-toolbar/table-toolbar.component.mjs +9 -3
  2. package/esm2020/users-list/src/users-list.component.mjs +80 -21
  3. package/fesm2015/tuki-io-tuki-widgets-users-list.mjs +88 -22
  4. package/fesm2015/tuki-io-tuki-widgets-users-list.mjs.map +1 -1
  5. package/fesm2020/tuki-io-tuki-widgets-users-list.mjs +87 -22
  6. package/fesm2020/tuki-io-tuki-widgets-users-list.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/users-list/src/components/table-toolbar/table-toolbar.component.d.ts +3 -1
  9. package/users-list/src/users-list.component.d.ts +6 -0
package/fesm2015/tuki-io-tuki-widgets-users-list.mjs CHANGED
@@ -1542,6 +1542,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1542
1542
 
1543
1543
  class TableToolbarComponent {
1544
1544
  constructor() {
1545
+ this.searchValue = '';
1546
+ this.selectedUserType = null;
1545
1547
  this.searchChange = new EventEmitter();
1546
1548
  this.searchByType = new EventEmitter();
1547
1549
  this.addUser = new EventEmitter();
@@ -1561,12 +1563,16 @@ class TableToolbarComponent {
1561
1563
  }
1562
1564
  }
1563
1565
  TableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1564
- 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", searchByType: "searchByType", addUser: "addUser" }, 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\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 (change)=\"onTypeChange($event)\">\r\n <option value=\"null\" disabled selected hidden>Select type</option>\r\n <option value=\"\">All</option>\r\n <option value=\"CUCM\">Webex Calling DI</option>\r\n <option value=\"WEBEX\">Webex Calling</option>\r\n <option value=\"ONPREM\">UCM</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 mu\" (click)=\"onAddUser()\">\r\n Add user\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"] }] });
1566
+ TableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableToolbarComponent, selector: "tk-users-table-toolbar", inputs: { totalUsersCount: "totalUsersCount", searchValue: "searchValue", selectedUserType: "selectedUserType" }, outputs: { searchChange: "searchChange", searchByType: "searchByType", addUser: "addUser" }, ngImport: i0, template: "<header style=\"margin-bottom: 1rem\">\r\n <div\r\n style=\"display: flex; align-items: center; justify-content: space-between\"\r\n >\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\r\n [value]=\"searchValue\"\r\n (input)=\"onSearchInputChange($event)\"\r\n type=\"text\"\r\n placeholder=\"Search by display name, email\"\r\n style=\"\r\n width: 100%;\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 12px 6px 44px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n color: #222;\r\n outline: none;\r\n box-sizing: border-box;\r\n min-width: 280px;\r\n \"\r\n />\r\n <span\r\n style=\"\r\n position: absolute;\r\n left: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #757575;\r\n font-size: 18px;\r\n font-weight: normal;\r\n pointer-events: none;\r\n \"\r\n >\r\n <i\r\n class=\"material-icons\"\r\n style=\"font-size: 18px; font-weight: normal\"\r\n >search</i\r\n >\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\r\n style=\"\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n width: fit-content;\r\n min-width: 200px;\r\n \"\r\n >\r\n <span\r\n style=\"\r\n position: absolute;\r\n left: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #757575;\r\n font-size: 18px;\r\n font-weight: normal;\r\n pointer-events: none;\r\n \"\r\n >\r\n <i\r\n class=\"material-icons\"\r\n style=\"font-size: 18px; font-weight: normal\"\r\n >filter_list</i\r\n >\r\n </span>\r\n <select\r\n style=\"\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 32px 6px 44px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n min-width: 200px;\r\n width: fit-content;\r\n color: #222;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n background-image: url(&quot;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>&quot;);\r\n background-repeat: no-repeat;\r\n background-position: right 12px center;\r\n background-size: 20px 20px;\r\n \"\r\n >\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\r\n style=\"\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 32px 6px 12px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n min-width: 200px;\r\n width: fit-content;\r\n color: #222;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n background-image: url(&quot;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>&quot;);\r\n background-repeat: no-repeat;\r\n background-position: right 12px center;\r\n background-size: 20px 20px;\r\n \"\r\n >\r\n <option>Select a Location</option>\r\n </select>\r\n\r\n <select\r\n [value]=\"selectedUserType || ''\"\r\n style=\"\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 32px 6px 12px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n min-width: 200px;\r\n width: fit-content;\r\n color: #222;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n background-image: url(&quot;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>&quot;);\r\n background-repeat: no-repeat;\r\n background-position: right 12px center;\r\n background-size: 20px 20px;\r\n \"\r\n (change)=\"onTypeChange($event)\"\r\n >\r\n <option value=\"null\" disabled hidden>Select type</option>\r\n <option value=\"\">All</option>\r\n <option value=\"CUCM\">Webex Calling DI</option>\r\n <option value=\"WEBEX\">Webex Calling</option>\r\n <option value=\"ONPREM\">UCM</option>\r\n </select>\r\n <span\r\n style=\"\r\n margin-left: 8px;\r\n color: #757575;\r\n font-size: 1rem;\r\n white-space: nowrap;\r\n \"\r\n >{{ totalUsersCount }} users</span\r\n >\r\n </div>\r\n </div>\r\n <div style=\"display: flex; gap: 1rem\">\r\n <button class=\"btn mu\" (click)=\"onAddUser()\">Add user</button>\r\n </div>\r\n </div>\r\n</header>\r\n", 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"] }] });
1565
1567
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableToolbarComponent, decorators: [{
1566
1568
  type: Component,
1567
- 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\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 (change)=\"onTypeChange($event)\">\r\n <option value=\"null\" disabled selected hidden>Select type</option>\r\n <option value=\"\">All</option>\r\n <option value=\"CUCM\">Webex Calling DI</option>\r\n <option value=\"WEBEX\">Webex Calling</option>\r\n <option value=\"ONPREM\">UCM</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 mu\" (click)=\"onAddUser()\">\r\n Add user\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"] }]
1569
+ args: [{ selector: 'tk-users-table-toolbar', template: "<header style=\"margin-bottom: 1rem\">\r\n <div\r\n style=\"display: flex; align-items: center; justify-content: space-between\"\r\n >\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\r\n [value]=\"searchValue\"\r\n (input)=\"onSearchInputChange($event)\"\r\n type=\"text\"\r\n placeholder=\"Search by display name, email\"\r\n style=\"\r\n width: 100%;\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 12px 6px 44px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n color: #222;\r\n outline: none;\r\n box-sizing: border-box;\r\n min-width: 280px;\r\n \"\r\n />\r\n <span\r\n style=\"\r\n position: absolute;\r\n left: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #757575;\r\n font-size: 18px;\r\n font-weight: normal;\r\n pointer-events: none;\r\n \"\r\n >\r\n <i\r\n class=\"material-icons\"\r\n style=\"font-size: 18px; font-weight: normal\"\r\n >search</i\r\n >\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\r\n style=\"\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n width: fit-content;\r\n min-width: 200px;\r\n \"\r\n >\r\n <span\r\n style=\"\r\n position: absolute;\r\n left: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #757575;\r\n font-size: 18px;\r\n font-weight: normal;\r\n pointer-events: none;\r\n \"\r\n >\r\n <i\r\n class=\"material-icons\"\r\n style=\"font-size: 18px; font-weight: normal\"\r\n >filter_list</i\r\n >\r\n </span>\r\n <select\r\n style=\"\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 32px 6px 44px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n min-width: 200px;\r\n width: fit-content;\r\n color: #222;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n background-image: url(&quot;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>&quot;);\r\n background-repeat: no-repeat;\r\n background-position: right 12px center;\r\n background-size: 20px 20px;\r\n \"\r\n >\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\r\n style=\"\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 32px 6px 12px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n min-width: 200px;\r\n width: fit-content;\r\n color: #222;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n background-image: url(&quot;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>&quot;);\r\n background-repeat: no-repeat;\r\n background-position: right 12px center;\r\n background-size: 20px 20px;\r\n \"\r\n >\r\n <option>Select a Location</option>\r\n </select>\r\n\r\n <select\r\n [value]=\"selectedUserType || ''\"\r\n style=\"\r\n height: 34px;\r\n border-radius: 0.5rem;\r\n font-size: 16px;\r\n padding: 6px 32px 6px 12px;\r\n border: 1px solid #00000080;\r\n background: #fff;\r\n min-width: 200px;\r\n width: fit-content;\r\n color: #222;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n background-image: url(&quot;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>&quot;);\r\n background-repeat: no-repeat;\r\n background-position: right 12px center;\r\n background-size: 20px 20px;\r\n \"\r\n (change)=\"onTypeChange($event)\"\r\n >\r\n <option value=\"null\" disabled hidden>Select type</option>\r\n <option value=\"\">All</option>\r\n <option value=\"CUCM\">Webex Calling DI</option>\r\n <option value=\"WEBEX\">Webex Calling</option>\r\n <option value=\"ONPREM\">UCM</option>\r\n </select>\r\n <span\r\n style=\"\r\n margin-left: 8px;\r\n color: #757575;\r\n font-size: 1rem;\r\n white-space: nowrap;\r\n \"\r\n >{{ totalUsersCount }} users</span\r\n >\r\n </div>\r\n </div>\r\n <div style=\"display: flex; gap: 1rem\">\r\n <button class=\"btn mu\" (click)=\"onAddUser()\">Add user</button>\r\n </div>\r\n </div>\r\n</header>\r\n", 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"] }]
1568
1570
  }], propDecorators: { totalUsersCount: [{
1569
1571
  type: Input
1572
+ }], searchValue: [{
1573
+ type: Input
1574
+ }], selectedUserType: [{
1575
+ type: Input
1570
1576
  }], searchChange: [{
1571
1577
  type: Output
1572
1578
  }], searchByType: [{
@@ -1598,7 +1604,19 @@ class UsersListComponent {
1598
1604
  }
1599
1605
  isMigrationStatusCompleted(status) {
1600
1606
  const normalized = (status || '').toUpperCase();
1601
- return normalized === 'COMPLETED' || normalized === 'COMPLETED_WITH_ERRORS';
1607
+ return normalized === 'COMPLETED';
1608
+ }
1609
+ isMigrationStatusCompletedWithErrors(status) {
1610
+ const normalized = (status || '').toUpperCase();
1611
+ return normalized === 'COMPLETED_WITH_ERRORS';
1612
+ }
1613
+ handleCompletedWithErrorsByUserId(userId) {
1614
+ const index = this.getUserIndexById(userId);
1615
+ this.removeUserInMigrationProgress();
1616
+ if (index > -1) {
1617
+ this.setStatusToUser(index, 'Completed with errors');
1618
+ window.setTimeout(() => this.setStatusToUser(index, 'Inactive'), 5000);
1619
+ }
1602
1620
  }
1603
1621
  isMigrationStatusFailed(status) {
1604
1622
  const normalized = (status || '').toUpperCase();
@@ -1619,10 +1637,13 @@ class UsersListComponent {
1619
1637
  this.userMoved = new EventEmitter();
1620
1638
  this.switchToWizard = new EventEmitter();
1621
1639
  this.createUserRequested = new EventEmitter();
1640
+ this.baseUsers = [];
1622
1641
  this.displayedColumns = DISPLAYED_COLS;
1623
1642
  this.showMoveUserWizard = false;
1624
1643
  this.moveUserPending = false;
1625
1644
  this.subscriptions = [];
1645
+ this.activeSearchToken = '';
1646
+ this.activeUserType = null;
1626
1647
  this.ON_PREM_ID = ON_PREM_ID;
1627
1648
  this.totalUsersCount = 0;
1628
1649
  this.destroy$ = new Subject();
@@ -1724,6 +1745,7 @@ class UsersListComponent {
1724
1745
  this.usersSearchService.migratedUsers =
1725
1746
  this.usersSearchService.migratedUsers.filter((migratedUser) => migratedUser.userid !== user.email);
1726
1747
  }
1748
+ this.getMigratedUsers();
1727
1749
  }, () => {
1728
1750
  this.removeUserInMigrationProgress();
1729
1751
  this.setStatusToUser(index, 'Migration Error');
@@ -1754,15 +1776,16 @@ class UsersListComponent {
1754
1776
  }
1755
1777
  initializeDataSource(users) {
1756
1778
  var _a;
1757
- if (users === null || users === void 0 ? void 0 : users.length) {
1758
- // this.setRandomUserRole(users);
1759
- this.users = users;
1760
- // set total rows count for toolbar/pagination from server-side pagination when available
1761
- this.totalUsersCount = ((_a = this.usersSearchService) === null || _a === void 0 ? void 0 : _a.total) || users.length;
1762
- this.setUserMigrationProgress();
1763
- this.usersSearchService.setMigratedPropToUsers(this.users);
1764
- this.dataSource = new MatTableDataSource(users);
1765
- }
1779
+ const safeUsers = Array.isArray(users) ? users : [];
1780
+ // this.setRandomUserRole(users);
1781
+ this.baseUsers = safeUsers;
1782
+ this.users = safeUsers;
1783
+ // set total rows count for toolbar/pagination from server-side pagination when available
1784
+ this.totalUsersCount = ((_a = this.usersSearchService) === null || _a === void 0 ? void 0 : _a.total) || safeUsers.length;
1785
+ this.setUserMigrationProgress();
1786
+ this.usersSearchService.setMigratedPropToUsers(this.users);
1787
+ this.dataSource = new MatTableDataSource(this.users);
1788
+ this.applyActiveFilter();
1766
1789
  }
1767
1790
  setUserRole() {
1768
1791
  var _a;
@@ -1899,24 +1922,38 @@ class UsersListComponent {
1899
1922
  }
1900
1923
  searchUsers(token, type) {
1901
1924
  var _a;
1925
+ const normalizedToken = (token || '').trim();
1926
+ const normalizedType = type || null;
1902
1927
  // if token is empty — restore current page datasource
1903
- if (!token && !type) {
1928
+ if (!normalizedToken && !normalizedType) {
1929
+ this.activeSearchToken = '';
1930
+ this.activeUserType = null;
1931
+ this.users = this.baseUsers;
1904
1932
  this.dataSource = new MatTableDataSource(this.users);
1905
1933
  this.totalUsersCount = ((_a = this.usersSearchService) === null || _a === void 0 ? void 0 : _a.total) || this.users.length;
1906
1934
  return;
1907
1935
  }
1936
+ if (normalizedType) {
1937
+ this.activeUserType = normalizedType;
1938
+ this.activeSearchToken = '';
1939
+ }
1940
+ else {
1941
+ this.activeSearchToken = normalizedToken;
1942
+ this.activeUserType = null;
1943
+ }
1908
1944
  // fetch all users (server-side) and filter locally across the whole dataset
1909
1945
  this.dataPending = true;
1910
1946
  const subscription = this.usersSearchService.getAllRegularUsers()
1911
1947
  .subscribe((allUsers) => {
1912
1948
  let filtered;
1913
- if (type === undefined) {
1914
- filtered = this.filterByToken(allUsers, token);
1949
+ if (normalizedType === null) {
1950
+ filtered = this.filterByToken(allUsers, normalizedToken);
1915
1951
  }
1916
1952
  else {
1917
- filtered = this.filterByType(allUsers, type);
1953
+ filtered = this.filterByType(allUsers, normalizedType);
1918
1954
  }
1919
- this.dataSource = new MatTableDataSource(filtered);
1955
+ this.users = filtered;
1956
+ this.dataSource = new MatTableDataSource(this.users);
1920
1957
  this.totalUsersCount = filtered.length;
1921
1958
  this.dataPending = false;
1922
1959
  }, () => {
@@ -1926,7 +1963,21 @@ class UsersListComponent {
1926
1963
  this.subscriptions.push(subscription);
1927
1964
  }
1928
1965
  searchByType(userType) {
1929
- this.searchUsers('', userType);
1966
+ const normalizedType = userType || null;
1967
+ if (!normalizedType) {
1968
+ this.searchUsers('');
1969
+ return;
1970
+ }
1971
+ this.searchUsers('', normalizedType);
1972
+ }
1973
+ applyActiveFilter() {
1974
+ if (this.activeSearchToken) {
1975
+ this.searchUsers(this.activeSearchToken);
1976
+ return;
1977
+ }
1978
+ if (this.activeUserType) {
1979
+ this.searchUsers('', this.activeUserType);
1980
+ }
1930
1981
  }
1931
1982
  onCreateUserRequested() {
1932
1983
  this.createUserRequested.emit();
@@ -2170,6 +2221,7 @@ class UsersListComponent {
2170
2221
  this.setUserPendingStatus(user, 'Inactive');
2171
2222
  this.setOriginalUserStatus(user.email, 'Active');
2172
2223
  // this.notifications.success(`${user.userid} successfully deactivated`);
2224
+ this.getMigratedUsers();
2173
2225
  },
2174
2226
  error: () => {
2175
2227
  this.setUserPendingStatus(user, 'Active');
@@ -2184,11 +2236,19 @@ class UsersListComponent {
2184
2236
  const subscription = timer(0, 5000)
2185
2237
  .pipe(switchMap(() => this.userService.getMigrationFormStatus(this.customerId, formId)), takeUntil(this.destroy$), takeWhile((response) => {
2186
2238
  const status = response === null || response === void 0 ? void 0 : response.status;
2187
- return !this.isMigrationStatusCompleted(status) && !this.isMigrationStatusFailed(status);
2239
+ return !this.isMigrationStatusCompleted(status)
2240
+ && !this.isMigrationStatusFailed(status)
2241
+ && !this.isMigrationStatusCompletedWithErrors(status);
2188
2242
  }, true))
2189
2243
  .subscribe({
2190
2244
  next: (response) => {
2245
+ var _a, _b;
2191
2246
  const status = response === null || response === void 0 ? void 0 : response.status;
2247
+ const userId = ((_b = (_a = this.users) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.userid) || '';
2248
+ if (this.isMigrationStatusCompletedWithErrors(status) && userId) {
2249
+ this.handleCompletedWithErrorsByUserId(userId);
2250
+ return;
2251
+ }
2192
2252
  if (this.isMigrationStatusFailed(status)) {
2193
2253
  this.removeUserInMigrationProgress();
2194
2254
  this.setStatusToUser(index, 'Migration Error');
@@ -2211,12 +2271,18 @@ class UsersListComponent {
2211
2271
  const subscription = timer(0, 5000)
2212
2272
  .pipe(switchMap(() => this.userService.getMigrationFormStatus(this.customerId, formId)), takeUntil(this.destroy$), takeWhile((response) => {
2213
2273
  const status = response === null || response === void 0 ? void 0 : response.status;
2214
- return !this.isMigrationStatusCompleted(status) && !this.isMigrationStatusFailed(status);
2274
+ return !this.isMigrationStatusCompleted(status)
2275
+ && !this.isMigrationStatusFailed(status)
2276
+ && !this.isMigrationStatusCompletedWithErrors(status);
2215
2277
  }, true))
2216
2278
  .subscribe({
2217
2279
  next: (response) => {
2218
2280
  const status = response === null || response === void 0 ? void 0 : response.status;
2219
2281
  const index = this.getUserIndexById(userId);
2282
+ if (this.isMigrationStatusCompletedWithErrors(status)) {
2283
+ this.handleCompletedWithErrorsByUserId(userId);
2284
+ return;
2285
+ }
2220
2286
  if (this.isMigrationStatusFailed(status)) {
2221
2287
  this.removeUserInMigrationProgress();
2222
2288
  if (index > -1) {
@@ -2254,10 +2320,10 @@ class UsersListComponent {
2254
2320
  }
2255
2321
  }
2256
2322
  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 });
2257
- 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", createUserRequested: "createUserRequested" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n <tk-users-table-toolbar\r\n [totalUsersCount]=\"totalUsersCount\"\r\n (searchChange)=\"searchUsers($event)\"\r\n (searchByType)=\"searchByType($event)\"\r\n (addUser)=\"onCreateUserRequested()\"\r\n ></tk-users-table-toolbar>\r\n <table\r\n class=\"webex-table\"\r\n mat-table\r\n *ngIf=\"users?.length\"\r\n #table\r\n [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\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 60px\"\r\n >\r\n Display name\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <div class=\"display-name-wrapper\">\r\n <span\r\n class=\"user-name-text\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n >\r\n {{ user.firstName }} {{ user.lastName }}\r\n </span>\r\n <span class=\"icon-webex-box\"\r\n ><span class=\"icon-webex icon-webex-user\"></span\r\n ></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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n [matTooltip]=\"\r\n user.status !== 'Active' && user.webexUUID\r\n ? 'Pending cutover to MT. Please contact your administrator for details.'\r\n : ''\r\n \"\r\n matTooltipPosition=\"above\"\r\n >\r\n <span\r\n class=\"icon-user-status\"\r\n [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active' }\"\r\n ></span\r\n >{{ user.status }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 24px; padding-top: 4px\"\r\n >\r\n <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n </th>\r\n <td\r\n class=\"user-site actions-cell\"\r\n mat-cell\r\n *matCellDef=\"let user; let i = index\"\r\n style=\"position: relative\"\r\n >\r\n <mat-progress-spinner\r\n class=\"field-spinner\"\r\n [diameter]=\"30\"\r\n strokeWidth=\"3\"\r\n mode=\"indeterminate\"\r\n *ngIf=\"\r\n user.status === 'In Progress' ||\r\n user.status === 'Pending Activation' ||\r\n user.status === 'Pending Deactivation'\r\n \"\r\n ></mat-progress-spinner>\r\n <button\r\n *ngIf=\"\r\n !(\r\n user.status === 'In Progress' ||\r\n user.status === 'Pending Activation' ||\r\n user.status === 'Pending Deactivation'\r\n ) &&\r\n !(\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid\r\n )\r\n \"\r\n class=\"button-action-dot\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n >\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\r\n *ngIf=\"!user.webexUUID && user.cucmId == ON_PREM_ID\"\r\n mat-menu-item\r\n [disabled]=\"true\"\r\n matTooltip=\"Coming soon\"\r\n matTooltipPosition=\"right\"\r\n >\r\n Enable AI Transcribe\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n >\r\n Quick Upgrade User to MT\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n >\r\n Upgrade User to MT\r\n </button>\r\n <button\r\n *ngIf=\"user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n >\r\n Revert User to UCM/DI\r\n </button>\r\n <button\r\n mat-menu-item\r\n [disabled]=\"!isValidWebexUuid(user) || user.status !== 'Inactive'\"\r\n (click)=\"onFirmwareUpgradeClicked(user)\"\r\n >\r\n Activate User\r\n </button>\r\n <button\r\n mat-menu-item\r\n [disabled]=\"!user.webexUUID || user.status !== 'Active'\"\r\n (click)=\"onRevertClicked(user)\"\r\n >\r\n Revert\r\n </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\">\r\n Admin roles\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.roleName || \"-\" }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Provisioning Type\r\n </th>\r\n <td\r\n class=\"user-provisioning-type\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <ng-container *ngIf=\"user.webexUUID\">\r\n <span class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!user.webexUUID\">\r\n <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/local_24.svg\"\r\n width=\"20\"\r\n alt=\"\"\r\n [matTooltip]=\"'UCM'\"\r\n matTooltipPosition=\"right\"\r\n /></span>\r\n <span *ngIf=\"user.cucmId != ON_PREM_ID\" class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ getTodayShortDate() }}\r\n </td>\r\n /\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === row?.userid,\r\n 'inactive-user-row': row.status !== 'Active',\r\n }\"\r\n ></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 >\r\n </app-pagination>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n *ngIf=\"showMoveUserWizard\"\r\n [user]=\"moveUser\"\r\n (done)=\"closeMoveUserWizard(true)\"\r\n [customerId]=\"customerId\"\r\n (runMoveUser)=\"runMoveUserToMT()\"\r\n (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></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;flex-shrink:0}.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}:host .mat-progress-spinner circle,:host .mat-spinner circle{stroke:gray!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 tr{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table tr.inactive-user-row{opacity:.35}.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:absolute;margin:-15px -29px}: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}.actions-cell .field-spinner{position:absolute;right:32px;top:50%;transform:translateY(-50%);margin:0}.user-provisioning-type{text-align:start}.user-provisioning-type .icon-wrapper{display:flex;align-items:center}\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: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i12$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12$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", "searchByType", "addUser"] }] });
2323
+ 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", createUserRequested: "createUserRequested" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending\"></app-loader>\r\n<div *ngIf=\"!showMoveUserWizard\" id=\"users-list\">\r\n <tk-users-table-toolbar\r\n [totalUsersCount]=\"totalUsersCount\"\r\n [searchValue]=\"activeSearchToken\"\r\n [selectedUserType]=\"activeUserType\"\r\n (searchChange)=\"searchUsers($event)\"\r\n (searchByType)=\"searchByType($event)\"\r\n (addUser)=\"onCreateUserRequested()\"\r\n ></tk-users-table-toolbar>\r\n <table\r\n class=\"webex-table\"\r\n mat-table\r\n *ngIf=\"users?.length\"\r\n #table\r\n [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\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 60px\"\r\n >\r\n Display name\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <div class=\"display-name-wrapper\">\r\n <span\r\n class=\"user-name-text\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n >\r\n {{ user.firstName }} {{ user.lastName }}\r\n </span>\r\n <span class=\"icon-webex-box\"\r\n ><span class=\"icon-webex icon-webex-user\"></span\r\n ></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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n [matTooltip]=\"\r\n user.status !== 'Active' && user.webexUUID\r\n ? 'Pending cutover to MT. Please contact your administrator for details.'\r\n : ''\r\n \"\r\n matTooltipPosition=\"above\"\r\n >\r\n <span\r\n class=\"icon-user-status\"\r\n [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active' }\"\r\n ></span\r\n >{{ user.status }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 24px; padding-top: 4px\"\r\n >\r\n <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n </th>\r\n <td\r\n class=\"user-site actions-cell\"\r\n mat-cell\r\n *matCellDef=\"let user; let i = index\"\r\n style=\"position: relative\"\r\n >\r\n <mat-progress-spinner\r\n class=\"field-spinner\"\r\n [diameter]=\"30\"\r\n strokeWidth=\"3\"\r\n mode=\"indeterminate\"\r\n *ngIf=\"\r\n user.status === 'In Progress' ||\r\n user.status === 'Pending Activation' ||\r\n user.status === 'Pending Deactivation'\r\n \"\r\n ></mat-progress-spinner>\r\n <button\r\n *ngIf=\"\r\n !(\r\n user.status === 'In Progress' ||\r\n user.status === 'Pending Activation' ||\r\n user.status === 'Pending Deactivation'\r\n ) &&\r\n !(\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid\r\n )\r\n \"\r\n class=\"button-action-dot\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n >\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\r\n *ngIf=\"!user.webexUUID && user.cucmId == ON_PREM_ID\"\r\n mat-menu-item\r\n [disabled]=\"true\"\r\n matTooltip=\"Coming soon\"\r\n matTooltipPosition=\"right\"\r\n >\r\n Enable AI Transcribe\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n >\r\n Quick Upgrade User to MT\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n >\r\n Upgrade User to MT\r\n </button>\r\n <button\r\n *ngIf=\"user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n >\r\n Revert User to UCM/DI\r\n </button>\r\n <button\r\n mat-menu-item\r\n [disabled]=\"!isValidWebexUuid(user) || user.status !== 'Inactive'\"\r\n (click)=\"onFirmwareUpgradeClicked(user)\"\r\n >\r\n Activate User\r\n </button>\r\n <button\r\n mat-menu-item\r\n [disabled]=\"!user.webexUUID || user.status !== 'Active'\"\r\n (click)=\"onRevertClicked(user)\"\r\n >\r\n Revert\r\n </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\">\r\n Admin roles\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.roleName || \"-\" }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Provisioning Type\r\n </th>\r\n <td\r\n class=\"user-provisioning-type\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <ng-container *ngIf=\"user.webexUUID\">\r\n <span class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!user.webexUUID\">\r\n <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/local_24.svg\"\r\n width=\"20\"\r\n alt=\"\"\r\n [matTooltip]=\"'UCM'\"\r\n matTooltipPosition=\"right\"\r\n /></span>\r\n <span *ngIf=\"user.cucmId != ON_PREM_ID\" class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ getTodayShortDate() }}\r\n </td>\r\n /\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === row?.userid,\r\n 'inactive-user-row': row.status !== 'Active',\r\n }\"\r\n ></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 >\r\n </app-pagination>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n *ngIf=\"showMoveUserWizard\"\r\n [user]=\"moveUser\"\r\n (done)=\"closeMoveUserWizard(true)\"\r\n [customerId]=\"customerId\"\r\n (runMoveUser)=\"runMoveUserToMT()\"\r\n (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></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;flex-shrink:0}.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}:host .mat-progress-spinner circle,:host .mat-spinner circle{stroke:gray!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 tr{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table tr.inactive-user-row{opacity:.35}.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:absolute;margin:-15px -29px}: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}.actions-cell .field-spinner{position:absolute;right:32px;top:50%;transform:translateY(-50%);margin:0}.user-provisioning-type{text-align:start}.user-provisioning-type .icon-wrapper{display:flex;align-items:center}\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: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i12$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12$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", "searchValue", "selectedUserType"], outputs: ["searchChange", "searchByType", "addUser"] }] });
2258
2324
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListComponent, decorators: [{
2259
2325
  type: Component,
2260
- 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\r\n [totalUsersCount]=\"totalUsersCount\"\r\n (searchChange)=\"searchUsers($event)\"\r\n (searchByType)=\"searchByType($event)\"\r\n (addUser)=\"onCreateUserRequested()\"\r\n ></tk-users-table-toolbar>\r\n <table\r\n class=\"webex-table\"\r\n mat-table\r\n *ngIf=\"users?.length\"\r\n #table\r\n [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\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 60px\"\r\n >\r\n Display name\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <div class=\"display-name-wrapper\">\r\n <span\r\n class=\"user-name-text\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n >\r\n {{ user.firstName }} {{ user.lastName }}\r\n </span>\r\n <span class=\"icon-webex-box\"\r\n ><span class=\"icon-webex icon-webex-user\"></span\r\n ></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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n [matTooltip]=\"\r\n user.status !== 'Active' && user.webexUUID\r\n ? 'Pending cutover to MT. Please contact your administrator for details.'\r\n : ''\r\n \"\r\n matTooltipPosition=\"above\"\r\n >\r\n <span\r\n class=\"icon-user-status\"\r\n [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active' }\"\r\n ></span\r\n >{{ user.status }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 24px; padding-top: 4px\"\r\n >\r\n <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n </th>\r\n <td\r\n class=\"user-site actions-cell\"\r\n mat-cell\r\n *matCellDef=\"let user; let i = index\"\r\n style=\"position: relative\"\r\n >\r\n <mat-progress-spinner\r\n class=\"field-spinner\"\r\n [diameter]=\"30\"\r\n strokeWidth=\"3\"\r\n mode=\"indeterminate\"\r\n *ngIf=\"\r\n user.status === 'In Progress' ||\r\n user.status === 'Pending Activation' ||\r\n user.status === 'Pending Deactivation'\r\n \"\r\n ></mat-progress-spinner>\r\n <button\r\n *ngIf=\"\r\n !(\r\n user.status === 'In Progress' ||\r\n user.status === 'Pending Activation' ||\r\n user.status === 'Pending Deactivation'\r\n ) &&\r\n !(\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid\r\n )\r\n \"\r\n class=\"button-action-dot\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n >\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\r\n *ngIf=\"!user.webexUUID && user.cucmId == ON_PREM_ID\"\r\n mat-menu-item\r\n [disabled]=\"true\"\r\n matTooltip=\"Coming soon\"\r\n matTooltipPosition=\"right\"\r\n >\r\n Enable AI Transcribe\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n >\r\n Quick Upgrade User to MT\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n >\r\n Upgrade User to MT\r\n </button>\r\n <button\r\n *ngIf=\"user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n >\r\n Revert User to UCM/DI\r\n </button>\r\n <button\r\n mat-menu-item\r\n [disabled]=\"!isValidWebexUuid(user) || user.status !== 'Inactive'\"\r\n (click)=\"onFirmwareUpgradeClicked(user)\"\r\n >\r\n Activate User\r\n </button>\r\n <button\r\n mat-menu-item\r\n [disabled]=\"!user.webexUUID || user.status !== 'Active'\"\r\n (click)=\"onRevertClicked(user)\"\r\n >\r\n Revert\r\n </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\">\r\n Admin roles\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.roleName || \"-\" }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Provisioning Type\r\n </th>\r\n <td\r\n class=\"user-provisioning-type\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <ng-container *ngIf=\"user.webexUUID\">\r\n <span class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!user.webexUUID\">\r\n <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/local_24.svg\"\r\n width=\"20\"\r\n alt=\"\"\r\n [matTooltip]=\"'UCM'\"\r\n matTooltipPosition=\"right\"\r\n /></span>\r\n <span *ngIf=\"user.cucmId != ON_PREM_ID\" class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ getTodayShortDate() }}\r\n </td>\r\n /\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === row?.userid,\r\n 'inactive-user-row': row.status !== 'Active',\r\n }\"\r\n ></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 >\r\n </app-pagination>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n *ngIf=\"showMoveUserWizard\"\r\n [user]=\"moveUser\"\r\n (done)=\"closeMoveUserWizard(true)\"\r\n [customerId]=\"customerId\"\r\n (runMoveUser)=\"runMoveUserToMT()\"\r\n (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></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;flex-shrink:0}.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}:host .mat-progress-spinner circle,:host .mat-spinner circle{stroke:gray!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 tr{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table tr.inactive-user-row{opacity:.35}.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:absolute;margin:-15px -29px}: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}.actions-cell .field-spinner{position:absolute;right:32px;top:50%;transform:translateY(-50%);margin:0}.user-provisioning-type{text-align:start}.user-provisioning-type .icon-wrapper{display:flex;align-items:center}\n"] }]
2326
+ 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\r\n [totalUsersCount]=\"totalUsersCount\"\r\n [searchValue]=\"activeSearchToken\"\r\n [selectedUserType]=\"activeUserType\"\r\n (searchChange)=\"searchUsers($event)\"\r\n (searchByType)=\"searchByType($event)\"\r\n (addUser)=\"onCreateUserRequested()\"\r\n ></tk-users-table-toolbar>\r\n <table\r\n class=\"webex-table\"\r\n mat-table\r\n *ngIf=\"users?.length\"\r\n #table\r\n [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\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 60px\"\r\n >\r\n Display name\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <div class=\"display-name-wrapper\">\r\n <span\r\n class=\"user-name-text\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n >\r\n {{ user.firstName }} {{ user.lastName }}\r\n </span>\r\n <span class=\"icon-webex-box\"\r\n ><span class=\"icon-webex icon-webex-user\"></span\r\n ></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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n [matTooltip]=\"\r\n user.status !== 'Active' && user.webexUUID\r\n ? 'Pending cutover to MT. Please contact your administrator for details.'\r\n : ''\r\n \"\r\n matTooltipPosition=\"above\"\r\n >\r\n <span\r\n class=\"icon-user-status\"\r\n [ngClass]=\"{ 'icon-user-status-active': user.status === 'Active' }\"\r\n ></span\r\n >{{ user.status }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"actions\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"webex-table-th\"\r\n style=\"padding-left: 24px; padding-top: 4px\"\r\n >\r\n <img src=\"assets/icons/settings-regular.svg\" width=\"16\" alt=\"\" />\r\n </th>\r\n <td\r\n class=\"user-site actions-cell\"\r\n mat-cell\r\n *matCellDef=\"let user; let i = index\"\r\n style=\"position: relative\"\r\n >\r\n <mat-progress-spinner\r\n class=\"field-spinner\"\r\n [diameter]=\"30\"\r\n strokeWidth=\"3\"\r\n mode=\"indeterminate\"\r\n *ngIf=\"\r\n user.status === 'In Progress' ||\r\n user.status === 'Pending Activation' ||\r\n user.status === 'Pending Deactivation'\r\n \"\r\n ></mat-progress-spinner>\r\n <button\r\n *ngIf=\"\r\n !(\r\n user.status === 'In Progress' ||\r\n user.status === 'Pending Activation' ||\r\n user.status === 'Pending Deactivation'\r\n ) &&\r\n !(\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === user?.userid\r\n )\r\n \"\r\n class=\"button-action-dot\"\r\n mat-icon-button\r\n [matMenuTriggerFor]=\"menu\"\r\n >\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\r\n *ngIf=\"!user.webexUUID && user.cucmId == ON_PREM_ID\"\r\n mat-menu-item\r\n [disabled]=\"true\"\r\n matTooltip=\"Coming soon\"\r\n matTooltipPosition=\"right\"\r\n >\r\n Enable AI Transcribe\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'QuickMove', 'MT')\"\r\n >\r\n Quick Upgrade User to MT\r\n </button>\r\n <button\r\n [disabled]=\"user.webexUUID || user.status !== 'Active'\"\r\n *ngIf=\"!user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'MT', 'MT')\"\r\n >\r\n Upgrade User to MT\r\n </button>\r\n <button\r\n *ngIf=\"user.isMigrated\"\r\n mat-menu-item\r\n (click)=\"onMoveUser(user, i, 'DI', 'DI')\"\r\n >\r\n Revert User to UCM/DI\r\n </button>\r\n <button\r\n mat-menu-item\r\n [disabled]=\"!isValidWebexUuid(user) || user.status !== 'Inactive'\"\r\n (click)=\"onFirmwareUpgradeClicked(user)\"\r\n >\r\n Activate User\r\n </button>\r\n <button\r\n mat-menu-item\r\n [disabled]=\"!user.webexUUID || user.status !== 'Active'\"\r\n (click)=\"onRevertClicked(user)\"\r\n >\r\n Revert\r\n </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\">\r\n Admin roles\r\n </th>\r\n <td\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ user.roleName || \"-\" }}\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"source\">\r\n <th mat-header-cell *matHeaderCellDef class=\"webex-table-th\">\r\n Provisioning Type\r\n </th>\r\n <td\r\n class=\"user-provisioning-type\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n <ng-container *ngIf=\"user.webexUUID\">\r\n <span class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/webex.svg\"\r\n [matTooltip]=\"'Webex Calling'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!user.webexUUID\">\r\n <span *ngIf=\"user.cucmId == ON_PREM_ID\" class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/local_24.svg\"\r\n width=\"20\"\r\n alt=\"\"\r\n [matTooltip]=\"'UCM'\"\r\n matTooltipPosition=\"right\"\r\n /></span>\r\n <span *ngIf=\"user.cucmId != ON_PREM_ID\" class=\"icon-wrapper\"\r\n ><img\r\n src=\"assets/icons/di_cloud_24.svg\"\r\n [matTooltip]=\"'Webex Calling DI'\"\r\n matTooltipPosition=\"right\"\r\n width=\"20\"\r\n alt=\"\"\r\n /></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\r\n class=\"user-site\"\r\n mat-cell\r\n *matCellDef=\"let user\"\r\n [ngClass]=\"{ 'inactive-user-row': user.status !== 'Active' }\"\r\n (click)=\"onUserClick(user)\"\r\n >\r\n {{ getTodayShortDate() }}\r\n </td>\r\n /\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n [ngClass]=\"{\r\n 'disabled-user-row':\r\n moveUserPending &&\r\n moveInProgressUserId &&\r\n moveInProgressUserId === row?.userid,\r\n 'inactive-user-row': row.status !== 'Active',\r\n }\"\r\n ></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 >\r\n </app-pagination>\r\n</div>\r\n\r\n<app-move-user-wizard\r\n *ngIf=\"showMoveUserWizard\"\r\n [user]=\"moveUser\"\r\n (done)=\"closeMoveUserWizard(true)\"\r\n [customerId]=\"customerId\"\r\n (runMoveUser)=\"runMoveUserToMT()\"\r\n (closeMoveUserWizard)=\"closeMoveUserWizard(false)\"\r\n></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;flex-shrink:0}.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}:host .mat-progress-spinner circle,:host .mat-spinner circle{stroke:gray!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 tr{background:#fff;color:#000000f2;font-size:14px}.webex-table tr:hover:not(.disabled-user-row){background:#ededed;cursor:pointer}.webex-table tr.inactive-user-row{opacity:.35}.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:absolute;margin:-15px -29px}: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}.actions-cell .field-spinner{position:absolute;right:32px;top:50%;transform:translateY(-50%);margin:0}.user-provisioning-type{text-align:start}.user-provisioning-type .icon-wrapper{display:flex;align-items:center}\n"] }]
2261
2327
  }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }, { type: ApiWebexService }, { type: NotificationService }, { type: UsersSearchService }, { type: i1.MatDialog }]; }, propDecorators: { token: [{
2262
2328
  type: Input
2263
2329
  }], customerId: [{