@tuki-io/tuki-widgets 0.0.210 → 0.0.212

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 +100 -21
  3. package/fesm2015/tuki-io-tuki-widgets-users-list.mjs +108 -22
  4. package/fesm2015/tuki-io-tuki-widgets-users-list.mjs.map +1 -1
  5. package/fesm2020/tuki-io-tuki-widgets-users-list.mjs +107 -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 +7 -0
package/fesm2020/tuki-io-tuki-widgets-users-list.mjs CHANGED
@@ -1527,6 +1527,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1527
1527
 
1528
1528
  class TableToolbarComponent {
1529
1529
  constructor() {
1530
+ this.searchValue = '';
1531
+ this.selectedUserType = null;
1530
1532
  this.searchChange = new EventEmitter();
1531
1533
  this.searchByType = new EventEmitter();
1532
1534
  this.addUser = new EventEmitter();
@@ -1546,12 +1548,16 @@ class TableToolbarComponent {
1546
1548
  }
1547
1549
  }
1548
1550
  TableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1549
- 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"] }] });
1551
+ 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"] }] });
1550
1552
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableToolbarComponent, decorators: [{
1551
1553
  type: Component,
1552
- 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"] }]
1554
+ 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"] }]
1553
1555
  }], propDecorators: { totalUsersCount: [{
1554
1556
  type: Input
1557
+ }], searchValue: [{
1558
+ type: Input
1559
+ }], selectedUserType: [{
1560
+ type: Input
1555
1561
  }], searchChange: [{
1556
1562
  type: Output
1557
1563
  }], searchByType: [{
@@ -1583,7 +1589,27 @@ class UsersListComponent {
1583
1589
  }
1584
1590
  isMigrationStatusCompleted(status) {
1585
1591
  const normalized = (status || '').toUpperCase();
1586
- return normalized === 'COMPLETED' || normalized === 'COMPLETED_WITH_ERRORS';
1592
+ return normalized === 'COMPLETED';
1593
+ }
1594
+ isMigrationStatusCompletedWithErrors(status) {
1595
+ const normalized = (status || '').toUpperCase();
1596
+ return normalized === 'COMPLETED_WITH_ERRORS';
1597
+ }
1598
+ refreshUsersAfterOperation(delayMs = 0) {
1599
+ if (delayMs > 0) {
1600
+ window.setTimeout(() => this.getMigratedUsers(), delayMs);
1601
+ return;
1602
+ }
1603
+ this.getMigratedUsers();
1604
+ }
1605
+ handleCompletedWithErrorsByUserId(userId) {
1606
+ const index = this.getUserIndexById(userId);
1607
+ this.removeUserInMigrationProgress();
1608
+ if (index > -1) {
1609
+ this.setStatusToUser(index, 'Completed with errors');
1610
+ window.setTimeout(() => this.setStatusToUser(index, 'Inactive'), 5000);
1611
+ this.refreshUsersAfterOperation(5000);
1612
+ }
1587
1613
  }
1588
1614
  isMigrationStatusFailed(status) {
1589
1615
  const normalized = (status || '').toUpperCase();
@@ -1603,10 +1629,13 @@ class UsersListComponent {
1603
1629
  this.userMoved = new EventEmitter();
1604
1630
  this.switchToWizard = new EventEmitter();
1605
1631
  this.createUserRequested = new EventEmitter();
1632
+ this.baseUsers = [];
1606
1633
  this.displayedColumns = DISPLAYED_COLS;
1607
1634
  this.showMoveUserWizard = false;
1608
1635
  this.moveUserPending = false;
1609
1636
  this.subscriptions = [];
1637
+ this.activeSearchToken = '';
1638
+ this.activeUserType = null;
1610
1639
  this.ON_PREM_ID = ON_PREM_ID;
1611
1640
  this.totalUsersCount = 0;
1612
1641
  this.destroy$ = new Subject();
@@ -1686,6 +1715,7 @@ class UsersListComponent {
1686
1715
  }, () => {
1687
1716
  this.removeUserInMigrationProgress();
1688
1717
  this.setStatusToUser(this.getUserIndexById(user.userid), 'Migration Error');
1718
+ this.refreshUsersAfterOperation();
1689
1719
  });
1690
1720
  this.subscriptions.push(subscription);
1691
1721
  }
@@ -1707,9 +1737,11 @@ class UsersListComponent {
1707
1737
  this.usersSearchService.migratedUsers =
1708
1738
  this.usersSearchService.migratedUsers.filter((migratedUser) => migratedUser.userid !== user.email);
1709
1739
  }
1740
+ this.getMigratedUsers();
1710
1741
  }, () => {
1711
1742
  this.removeUserInMigrationProgress();
1712
1743
  this.setStatusToUser(index, 'Migration Error');
1744
+ this.refreshUsersAfterOperation();
1713
1745
  });
1714
1746
  this.subscriptions.push(subscription);
1715
1747
  }
@@ -1736,15 +1768,16 @@ class UsersListComponent {
1736
1768
  this.dataSource = new MatTableDataSource(this.users);
1737
1769
  }
1738
1770
  initializeDataSource(users) {
1739
- if (users?.length) {
1740
- // this.setRandomUserRole(users);
1741
- this.users = users;
1742
- // set total rows count for toolbar/pagination from server-side pagination when available
1743
- this.totalUsersCount = this.usersSearchService?.total || users.length;
1744
- this.setUserMigrationProgress();
1745
- this.usersSearchService.setMigratedPropToUsers(this.users);
1746
- this.dataSource = new MatTableDataSource(users);
1747
- }
1771
+ const safeUsers = Array.isArray(users) ? users : [];
1772
+ // this.setRandomUserRole(users);
1773
+ this.baseUsers = safeUsers;
1774
+ this.users = safeUsers;
1775
+ // set total rows count for toolbar/pagination from server-side pagination when available
1776
+ this.totalUsersCount = this.usersSearchService?.total || safeUsers.length;
1777
+ this.setUserMigrationProgress();
1778
+ this.usersSearchService.setMigratedPropToUsers(this.users);
1779
+ this.dataSource = new MatTableDataSource(this.users);
1780
+ this.applyActiveFilter();
1748
1781
  }
1749
1782
  setUserRole() {
1750
1783
  if (this.users?.length) {
@@ -1875,28 +1908,43 @@ class UsersListComponent {
1875
1908
  }, () => {
1876
1909
  this.removeUserInMigrationProgress();
1877
1910
  this.setStatusToUser(this.moveUserIndex, 'Migration Error');
1911
+ this.refreshUsersAfterOperation();
1878
1912
  });
1879
1913
  this.subscriptions.push(subscription);
1880
1914
  }
1881
1915
  searchUsers(token, type) {
1916
+ const normalizedToken = (token || '').trim();
1917
+ const normalizedType = type || null;
1882
1918
  // if token is empty — restore current page datasource
1883
- if (!token && !type) {
1919
+ if (!normalizedToken && !normalizedType) {
1920
+ this.activeSearchToken = '';
1921
+ this.activeUserType = null;
1922
+ this.users = this.baseUsers;
1884
1923
  this.dataSource = new MatTableDataSource(this.users);
1885
1924
  this.totalUsersCount = this.usersSearchService?.total || this.users.length;
1886
1925
  return;
1887
1926
  }
1927
+ if (normalizedType) {
1928
+ this.activeUserType = normalizedType;
1929
+ this.activeSearchToken = '';
1930
+ }
1931
+ else {
1932
+ this.activeSearchToken = normalizedToken;
1933
+ this.activeUserType = null;
1934
+ }
1888
1935
  // fetch all users (server-side) and filter locally across the whole dataset
1889
1936
  this.dataPending = true;
1890
1937
  const subscription = this.usersSearchService.getAllRegularUsers()
1891
1938
  .subscribe((allUsers) => {
1892
1939
  let filtered;
1893
- if (type === undefined) {
1894
- filtered = this.filterByToken(allUsers, token);
1940
+ if (normalizedType === null) {
1941
+ filtered = this.filterByToken(allUsers, normalizedToken);
1895
1942
  }
1896
1943
  else {
1897
- filtered = this.filterByType(allUsers, type);
1944
+ filtered = this.filterByType(allUsers, normalizedType);
1898
1945
  }
1899
- this.dataSource = new MatTableDataSource(filtered);
1946
+ this.users = filtered;
1947
+ this.dataSource = new MatTableDataSource(this.users);
1900
1948
  this.totalUsersCount = filtered.length;
1901
1949
  this.dataPending = false;
1902
1950
  }, () => {
@@ -1906,7 +1954,21 @@ class UsersListComponent {
1906
1954
  this.subscriptions.push(subscription);
1907
1955
  }
1908
1956
  searchByType(userType) {
1909
- this.searchUsers('', userType);
1957
+ const normalizedType = userType || null;
1958
+ if (!normalizedType) {
1959
+ this.searchUsers('');
1960
+ return;
1961
+ }
1962
+ this.searchUsers('', normalizedType);
1963
+ }
1964
+ applyActiveFilter() {
1965
+ if (this.activeSearchToken) {
1966
+ this.searchUsers(this.activeSearchToken);
1967
+ return;
1968
+ }
1969
+ if (this.activeUserType) {
1970
+ this.searchUsers('', this.activeUserType);
1971
+ }
1910
1972
  }
1911
1973
  onCreateUserRequested() {
1912
1974
  this.createUserRequested.emit();
@@ -2127,11 +2189,13 @@ class UsersListComponent {
2127
2189
  this.setUserPendingStatus(user, 'Active');
2128
2190
  this.setOriginalUserStatus(user.email, 'Inactive');
2129
2191
  // this.notifications.success(`${user.userid} successfully activated`);
2192
+ this.refreshUsersAfterOperation();
2130
2193
  });
2131
2194
  },
2132
2195
  error: () => {
2133
2196
  this.setUserPendingStatus(user, 'Inactive');
2134
2197
  this.notifications.error('Activation failed. Please try again.');
2198
+ this.refreshUsersAfterOperation();
2135
2199
  }
2136
2200
  });
2137
2201
  }
@@ -2147,9 +2211,11 @@ class UsersListComponent {
2147
2211
  this.setUserPendingStatus(user, 'Inactive');
2148
2212
  this.setOriginalUserStatus(user.email, 'Active');
2149
2213
  // this.notifications.success(`${user.userid} successfully deactivated`);
2214
+ this.refreshUsersAfterOperation();
2150
2215
  },
2151
2216
  error: () => {
2152
2217
  this.setUserPendingStatus(user, 'Active');
2218
+ this.refreshUsersAfterOperation();
2153
2219
  }
2154
2220
  });
2155
2221
  }
@@ -2161,25 +2227,35 @@ class UsersListComponent {
2161
2227
  const subscription = timer(0, 5000)
2162
2228
  .pipe(switchMap(() => this.userService.getMigrationFormStatus(this.customerId, formId)), takeUntil(this.destroy$), takeWhile((response) => {
2163
2229
  const status = response?.status;
2164
- return !this.isMigrationStatusCompleted(status) && !this.isMigrationStatusFailed(status);
2230
+ return !this.isMigrationStatusCompleted(status)
2231
+ && !this.isMigrationStatusFailed(status)
2232
+ && !this.isMigrationStatusCompletedWithErrors(status);
2165
2233
  }, true))
2166
2234
  .subscribe({
2167
2235
  next: (response) => {
2168
2236
  const status = response?.status;
2237
+ const userId = this.users?.[index]?.userid || '';
2238
+ if (this.isMigrationStatusCompletedWithErrors(status) && userId) {
2239
+ this.handleCompletedWithErrorsByUserId(userId);
2240
+ return;
2241
+ }
2169
2242
  if (this.isMigrationStatusFailed(status)) {
2170
2243
  this.removeUserInMigrationProgress();
2171
2244
  this.setStatusToUser(index, 'Migration Error');
2245
+ this.refreshUsersAfterOperation();
2172
2246
  return;
2173
2247
  }
2174
2248
  if (this.isMigrationStatusCompleted(status)) {
2175
2249
  this.removeUserInMigrationProgress();
2176
2250
  this.setStatusToUser(index, 'Active');
2251
+ this.refreshUsersAfterOperation();
2177
2252
  onCompleted();
2178
2253
  }
2179
2254
  },
2180
2255
  error: () => {
2181
2256
  this.removeUserInMigrationProgress();
2182
2257
  this.setStatusToUser(index, 'Migration Error');
2258
+ this.refreshUsersAfterOperation();
2183
2259
  },
2184
2260
  });
2185
2261
  this.subscriptions.push(subscription);
@@ -2188,17 +2264,24 @@ class UsersListComponent {
2188
2264
  const subscription = timer(0, 5000)
2189
2265
  .pipe(switchMap(() => this.userService.getMigrationFormStatus(this.customerId, formId)), takeUntil(this.destroy$), takeWhile((response) => {
2190
2266
  const status = response?.status;
2191
- return !this.isMigrationStatusCompleted(status) && !this.isMigrationStatusFailed(status);
2267
+ return !this.isMigrationStatusCompleted(status)
2268
+ && !this.isMigrationStatusFailed(status)
2269
+ && !this.isMigrationStatusCompletedWithErrors(status);
2192
2270
  }, true))
2193
2271
  .subscribe({
2194
2272
  next: (response) => {
2195
2273
  const status = response?.status;
2196
2274
  const index = this.getUserIndexById(userId);
2275
+ if (this.isMigrationStatusCompletedWithErrors(status)) {
2276
+ this.handleCompletedWithErrorsByUserId(userId);
2277
+ return;
2278
+ }
2197
2279
  if (this.isMigrationStatusFailed(status)) {
2198
2280
  this.removeUserInMigrationProgress();
2199
2281
  if (index > -1) {
2200
2282
  this.setStatusToUser(index, 'Migration Error');
2201
2283
  }
2284
+ this.refreshUsersAfterOperation();
2202
2285
  return;
2203
2286
  }
2204
2287
  if (this.isMigrationStatusCompleted(status)) {
@@ -2206,6 +2289,7 @@ class UsersListComponent {
2206
2289
  if (index > -1) {
2207
2290
  this.setStatusToUser(index, 'Active');
2208
2291
  }
2292
+ this.refreshUsersAfterOperation();
2209
2293
  onCompleted();
2210
2294
  }
2211
2295
  },
@@ -2215,6 +2299,7 @@ class UsersListComponent {
2215
2299
  if (index > -1) {
2216
2300
  this.setStatusToUser(index, 'Migration Error');
2217
2301
  }
2302
+ this.refreshUsersAfterOperation();
2218
2303
  },
2219
2304
  });
2220
2305
  this.subscriptions.push(subscription);
@@ -2230,10 +2315,10 @@ class UsersListComponent {
2230
2315
  }
2231
2316
  }
2232
2317
  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 });
2233
- 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"] }] });
2318
+ 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"] }] });
2234
2319
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UsersListComponent, decorators: [{
2235
2320
  type: Component,
2236
- 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"] }]
2321
+ 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"] }]
2237
2322
  }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }, { type: ApiWebexService }, { type: NotificationService }, { type: UsersSearchService }, { type: i1.MatDialog }]; }, propDecorators: { token: [{
2238
2323
  type: Input
2239
2324
  }], customerId: [{