@tuki-io/tuki-widgets 0.0.219-dev.18 → 0.0.219-dev.19

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 (18) hide show
  1. package/esm2020/user-creation/src/widgets/user-creation-wizard/user-creation-wizard.component.mjs +3 -3
  2. package/esm2020/user-manage/src/classes/simplified-user.mjs +2 -1
  3. package/esm2020/user-manage/src/services/user.service.mjs +7 -1
  4. package/esm2020/user-manage/src/user-calling/user-calling.component.mjs +12 -7
  5. package/esm2020/user-manage/src/user-manage-widget.component.mjs +6 -3
  6. package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs +2 -2
  7. package/fesm2015/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
  8. package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs +26 -9
  9. package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
  10. package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs +2 -2
  11. package/fesm2020/tuki-io-tuki-widgets-user-creation.mjs.map +1 -1
  12. package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs +23 -8
  13. package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs.map +1 -1
  14. package/package.json +1 -1
  15. package/user-manage/src/classes/simplified-user.d.ts +7 -0
  16. package/user-manage/src/services/user.service.d.ts +1 -0
  17. package/user-manage/src/user-calling/user-calling.component.d.ts +3 -2
  18. package/user-manage/src/user-manage-widget.component.d.ts +1 -0
package/fesm2015/tuki-io-tuki-widgets-user-manage.mjs CHANGED
@@ -441,6 +441,7 @@ class SimplifiedUser {
441
441
  this.siteId = user.siteId;
442
442
  this.siteName = user.siteName;
443
443
  this.token = user.token;
444
+ this.primaryLineReference = user.primaryLineReference;
444
445
  this.department = user.department;
445
446
  this.manager = user.manager;
446
447
  this.associatedPc = user.associatedPc;
@@ -1077,6 +1078,13 @@ class UserService {
1077
1078
  }
1078
1079
  }
1079
1080
  }
1081
+ getPrimaryLineDevice(primaryLineReferenceDirectoryNumber) {
1082
+ var _a;
1083
+ if (((_a = this.user) === null || _a === void 0 ? void 0 : _a.devices) && this.user.devices.length) {
1084
+ const device = this.user.devices.find((device) => device.lineAssociations.some((line) => { var _a; return ((_a = line === null || line === void 0 ? void 0 : line.directoryNumber) === null || _a === void 0 ? void 0 : _a.directoryNumber) === primaryLineReferenceDirectoryNumber; }));
1085
+ return device;
1086
+ }
1087
+ }
1080
1088
  }
1081
1089
  UserService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserService, deps: [{ token: APIService }, { token: LineService }], target: i0.ɵɵFactoryTarget.Injectable });
1082
1090
  UserService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserService });
@@ -1774,10 +1782,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1774
1782
  }], ctorParameters: function () { return [{ type: APIService }]; } });
1775
1783
 
1776
1784
  class UserCallingComponent {
1777
- get form() {
1778
- var _a, _b, _c, _d;
1779
- return ((_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.devices[0]) && ((_d = (_c = this.userService) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.devices[0].lineAssociations[0].form);
1780
- }
1785
+ // get form(): FormGroup {
1786
+ // return this.userService?.user?.devices[0] && this.userService?.user?.devices[0].lineAssociations[0].form;
1787
+ // }
1781
1788
  get isWebex() {
1782
1789
  return localStorage.getItem('webexUUID') && localStorage.getItem('webexUUID') !== 'null';
1783
1790
  }
@@ -1803,7 +1810,11 @@ class UserCallingComponent {
1803
1810
  this.onExtensionChange = new EventEmitter();
1804
1811
  }
1805
1812
  ngOnInit() {
1806
- // this.getData();
1813
+ var _a;
1814
+ const primaryLineDevice = this.userService.getPrimaryLineDevice(this.primaryLineDirectoryNumber);
1815
+ if (primaryLineDevice) {
1816
+ this.form = (_a = primaryLineDevice.lineAssociations[0]) === null || _a === void 0 ? void 0 : _a.form;
1817
+ }
1807
1818
  }
1808
1819
  onExtensionLineChange(event) {
1809
1820
  var _a, _b, _c, _d, _e, _f;
@@ -1850,14 +1861,16 @@ class UserCallingComponent {
1850
1861
  }
1851
1862
  }
1852
1863
  UserCallingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingComponent, deps: [{ token: UserService }, { token: DnsService }], target: i0.ɵɵFactoryTarget.Component });
1853
- UserCallingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCallingComponent, selector: "app-user-calling", inputs: { siteId: "siteId", userId: "userId" }, outputs: { onExtensionChange: "onExtensionChange" }, ngImport: i0, template: "<!-- NUMBERS BOX -->\r\n<div style=\"display: flex; flex-direction: column; padding: 24px 0; gap: 24px;\">\r\n <div class=\"user-info-box user-details-box\" style=\"display: flex;\">\r\n <h3 class=\"user-box-title\" style=\"width: 180px;\">Numbers</h3>\r\n <div style=\"flex:1; display:flex; flex-direction:column;\">\r\n <!-- Directory numbers section -->\r\n <div style=\"display:flex; align-items:flex-start; padding:16px 0;\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n <span>Directory numbers</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n <div style=\"flex:1; display:flex; flex-direction:column; align-items:flex-start;\">\r\n <!-- Table -->\r\n <table style=\"width:100%; border-collapse:collapse; margin-bottom:16px;\">\r\n <thead>\r\n <tr style=\"background:#ededed;\">\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Type</th>\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Phone number</th>\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Extension</th>\r\n <th style=\"padding:10px 8px; border-bottom:1px solid #e8e8e8; width:30px;\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr style=\"background:#fff; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='#fff'\">\r\n <td style=\"padding:12px 16px; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; background:#e8f4fc; color:#1170a8; padding:4px 14px; border-radius:14px; font-size:13px; font-weight:400; border:1px solid #b8d9ed;\">Primary</span>\r\n </td>\r\n <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n <input\r\n class=\"input-text\"\r\n disabled=\"true\"\r\n type=\"text\"\r\n (blur)=\"onExtensionLineChange($event)\"\r\n (keydown.enter)=\"onExtensionLineChange($event)\"\r\n [value]=\"phoneNumberValue\"\r\n autofocus\r\n />\r\n </td>\r\n <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n <div>\r\n <input\r\n class=\"input-text\"\r\n disabled=\"true\"\r\n type=\"text\"\r\n (blur)=\"onDirectoryNumberChange($event)\"\r\n (keydown.enter)=\"onDirectoryNumberChange($event)\"\r\n [value]=\"formControl.value\"\r\n autofocus\r\n />\r\n <!-- <span\r\n [attr.contenteditable]=\"!isWebex\"\r\n (blur)=\"onDirectoryNumberChange($event)\">\r\n {{ formControl.value }}\r\n </span> -->\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/copy-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n </td>\r\n <td style=\"padding:19px 8px; text-align:center; border-bottom:1px solid #e8e8e8; display:flex; align-items:center; justify-content:center; line-height:0;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <!-- Add secondary number button -->\r\n <button\r\n disabled\r\n style=\"background:#fff; border:1px solid #c4c4c4; padding:8px 20px; border-radius:18px; font-size:14px; font-weight:400; cursor:not-allowed; color:#333; opacity:0.6;\"\r\n onmouseover=\"this.style.background='#ededed'\"\r\n onmouseout=\"this.style.background='#fff'\">\r\n Add secondary number\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n <!-- Caller ID section -->\r\n <div style=\"display:flex; align-items:center; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n <span>Caller ID</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n <div style=\"flex:1;\"></div>\r\n <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n <!-- Emergency callback number section -->\r\n <div style=\"display:flex; align-items:flex-start; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:flex-start;\">\r\n <div>\r\n <div style=\"display:flex; align-items:center;\">\r\n <span>Emergency callback</span>\r\n </div>\r\n <div style=\"display:flex; align-items:center;\">\r\n <span>number</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"flex:1; display:flex; align-items:flex-start; padding-top:2px;\">\r\n <i class=\"fa fa-times-circle\" style=\"color:#c62828; margin-right:8px; margin-top: 2px; font-size:14px;\"></i>\r\n <span style=\"color:#c62828; font-size:13px; line-height:1.4;\">All calls will be blocked if there's no ECBN, assign a phone number to this user or set the location default ECBN.</span>\r\n </div>\r\n <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- user-calling-extension\r\n *ngIf=\"formControl\"\r\n [siteId]=\"this.siteId\"\r\n [control]=\"formControl\"\r\n [routePartition]=\"this.lineAssociation.directoryNumber.routePartitionName\"\r\n [directoryNumber]=\"this.lineAssociation.directoryNumber.directoryNumber\"\r\n (onChange)=\"onDirectoryNumberChange($event)\">\r\n </app-user-calling-extension> -->\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";#user-calling{height:calc(100vh - 100px)}#user-calling table{margin:10px 0;width:100%}#user-calling th{color:#000;text-align:left;background:#efefef;font-size:14px;font-weight:500;padding:2px 5px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{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}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}td .input-text{color:#333;font-size:14px;padding:5px;background:none}td .input-text:not(:focus){border:none}td .input-text:focus{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem}td .input-text:focus-visible{outline:none}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.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-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;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:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.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}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"] });
1864
+ UserCallingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserCallingComponent, selector: "app-user-calling", inputs: { siteId: "siteId", userId: "userId", primaryLineDirectoryNumber: "primaryLineDirectoryNumber" }, outputs: { onExtensionChange: "onExtensionChange" }, ngImport: i0, template: "<!-- NUMBERS BOX -->\r\n<div style=\"display: flex; flex-direction: column; padding: 24px 0; gap: 24px;\">\r\n <div class=\"user-info-box user-details-box\" style=\"display: flex;\">\r\n <h3 class=\"user-box-title\" style=\"width: 180px;\">Numbers</h3>\r\n <div style=\"flex:1; display:flex; flex-direction:column;\">\r\n <!-- Directory numbers section -->\r\n <div style=\"display:flex; align-items:flex-start; padding:16px 0;\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n <span>Directory numbers</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n <div style=\"flex:1; display:flex; flex-direction:column; align-items:flex-start;\">\r\n <!-- Table -->\r\n <table style=\"width:100%; border-collapse:collapse; margin-bottom:16px;\">\r\n <thead>\r\n <tr style=\"background:#ededed;\">\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Type</th>\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Phone number</th>\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Extension</th>\r\n <th style=\"padding:10px 8px; border-bottom:1px solid #e8e8e8; width:30px;\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr style=\"background:#fff; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='#fff'\">\r\n <td style=\"padding:12px 16px; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; background:#e8f4fc; color:#1170a8; padding:4px 14px; border-radius:14px; font-size:13px; font-weight:400; border:1px solid #b8d9ed;\">Primary</span>\r\n </td>\r\n <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n <input\r\n class=\"input-text\"\r\n disabled=\"true\"\r\n type=\"text\"\r\n (blur)=\"onExtensionLineChange($event)\"\r\n (keydown.enter)=\"onExtensionLineChange($event)\"\r\n [value]=\"phoneNumberValue\"\r\n autofocus\r\n />\r\n </td>\r\n <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n <div>\r\n <input\r\n class=\"input-text\"\r\n disabled=\"true\"\r\n type=\"text\"\r\n (blur)=\"onDirectoryNumberChange($event)\"\r\n (keydown.enter)=\"onDirectoryNumberChange($event)\"\r\n [value]=\"formControl?.value\"\r\n autofocus\r\n />\r\n <!-- <span\r\n [attr.contenteditable]=\"!isWebex\"\r\n (blur)=\"onDirectoryNumberChange($event)\">\r\n {{ formControl?.value }}\r\n </span> -->\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/copy-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n </td>\r\n <td style=\"padding:19px 8px; text-align:center; border-bottom:1px solid #e8e8e8; display:flex; align-items:center; justify-content:center; line-height:0;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <!-- Add secondary number button -->\r\n <button\r\n disabled\r\n style=\"background:#fff; border:1px solid #c4c4c4; padding:8px 20px; border-radius:18px; font-size:14px; font-weight:400; cursor:not-allowed; color:#333; opacity:0.6;\"\r\n onmouseover=\"this.style.background='#ededed'\"\r\n onmouseout=\"this.style.background='#fff'\">\r\n Add secondary number\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n <!-- Caller ID section -->\r\n <div style=\"display:flex; align-items:center; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n <span>Caller ID</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n <div style=\"flex:1;\"></div>\r\n <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n <!-- Emergency callback number section -->\r\n <div style=\"display:flex; align-items:flex-start; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:flex-start;\">\r\n <div>\r\n <div style=\"display:flex; align-items:center;\">\r\n <span>Emergency callback</span>\r\n </div>\r\n <div style=\"display:flex; align-items:center;\">\r\n <span>number</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"flex:1; display:flex; align-items:flex-start; padding-top:2px;\">\r\n <i class=\"fa fa-times-circle\" style=\"color:#c62828; margin-right:8px; margin-top: 2px; font-size:14px;\"></i>\r\n <span style=\"color:#c62828; font-size:13px; line-height:1.4;\">All calls will be blocked if there's no ECBN, assign a phone number to this user or set the location default ECBN.</span>\r\n </div>\r\n <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- user-calling-extension\r\n *ngIf=\"formControl\"\r\n [siteId]=\"this.siteId\"\r\n [control]=\"formControl\"\r\n [routePartition]=\"this.lineAssociation.directoryNumber.routePartitionName\"\r\n [directoryNumber]=\"this.lineAssociation.directoryNumber.directoryNumber\"\r\n (onChange)=\"onDirectoryNumberChange($event)\">\r\n </app-user-calling-extension> -->\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";#user-calling{height:calc(100vh - 100px)}#user-calling table{margin:10px 0;width:100%}#user-calling th{color:#000;text-align:left;background:#efefef;font-size:14px;font-weight:500;padding:2px 5px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{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}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}td .input-text{color:#333;font-size:14px;padding:5px;background:none}td .input-text:not(:focus){border:none}td .input-text:focus{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem}td .input-text:focus-visible{outline:none}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.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-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;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:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.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}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"] });
1854
1865
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingComponent, decorators: [{
1855
1866
  type: Component,
1856
- args: [{ selector: 'app-user-calling', template: "<!-- NUMBERS BOX -->\r\n<div style=\"display: flex; flex-direction: column; padding: 24px 0; gap: 24px;\">\r\n <div class=\"user-info-box user-details-box\" style=\"display: flex;\">\r\n <h3 class=\"user-box-title\" style=\"width: 180px;\">Numbers</h3>\r\n <div style=\"flex:1; display:flex; flex-direction:column;\">\r\n <!-- Directory numbers section -->\r\n <div style=\"display:flex; align-items:flex-start; padding:16px 0;\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n <span>Directory numbers</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n <div style=\"flex:1; display:flex; flex-direction:column; align-items:flex-start;\">\r\n <!-- Table -->\r\n <table style=\"width:100%; border-collapse:collapse; margin-bottom:16px;\">\r\n <thead>\r\n <tr style=\"background:#ededed;\">\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Type</th>\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Phone number</th>\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Extension</th>\r\n <th style=\"padding:10px 8px; border-bottom:1px solid #e8e8e8; width:30px;\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr style=\"background:#fff; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='#fff'\">\r\n <td style=\"padding:12px 16px; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; background:#e8f4fc; color:#1170a8; padding:4px 14px; border-radius:14px; font-size:13px; font-weight:400; border:1px solid #b8d9ed;\">Primary</span>\r\n </td>\r\n <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n <input\r\n class=\"input-text\"\r\n disabled=\"true\"\r\n type=\"text\"\r\n (blur)=\"onExtensionLineChange($event)\"\r\n (keydown.enter)=\"onExtensionLineChange($event)\"\r\n [value]=\"phoneNumberValue\"\r\n autofocus\r\n />\r\n </td>\r\n <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n <div>\r\n <input\r\n class=\"input-text\"\r\n disabled=\"true\"\r\n type=\"text\"\r\n (blur)=\"onDirectoryNumberChange($event)\"\r\n (keydown.enter)=\"onDirectoryNumberChange($event)\"\r\n [value]=\"formControl.value\"\r\n autofocus\r\n />\r\n <!-- <span\r\n [attr.contenteditable]=\"!isWebex\"\r\n (blur)=\"onDirectoryNumberChange($event)\">\r\n {{ formControl.value }}\r\n </span> -->\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/copy-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n </td>\r\n <td style=\"padding:19px 8px; text-align:center; border-bottom:1px solid #e8e8e8; display:flex; align-items:center; justify-content:center; line-height:0;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <!-- Add secondary number button -->\r\n <button\r\n disabled\r\n style=\"background:#fff; border:1px solid #c4c4c4; padding:8px 20px; border-radius:18px; font-size:14px; font-weight:400; cursor:not-allowed; color:#333; opacity:0.6;\"\r\n onmouseover=\"this.style.background='#ededed'\"\r\n onmouseout=\"this.style.background='#fff'\">\r\n Add secondary number\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n <!-- Caller ID section -->\r\n <div style=\"display:flex; align-items:center; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n <span>Caller ID</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n <div style=\"flex:1;\"></div>\r\n <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n <!-- Emergency callback number section -->\r\n <div style=\"display:flex; align-items:flex-start; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:flex-start;\">\r\n <div>\r\n <div style=\"display:flex; align-items:center;\">\r\n <span>Emergency callback</span>\r\n </div>\r\n <div style=\"display:flex; align-items:center;\">\r\n <span>number</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"flex:1; display:flex; align-items:flex-start; padding-top:2px;\">\r\n <i class=\"fa fa-times-circle\" style=\"color:#c62828; margin-right:8px; margin-top: 2px; font-size:14px;\"></i>\r\n <span style=\"color:#c62828; font-size:13px; line-height:1.4;\">All calls will be blocked if there's no ECBN, assign a phone number to this user or set the location default ECBN.</span>\r\n </div>\r\n <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- user-calling-extension\r\n *ngIf=\"formControl\"\r\n [siteId]=\"this.siteId\"\r\n [control]=\"formControl\"\r\n [routePartition]=\"this.lineAssociation.directoryNumber.routePartitionName\"\r\n [directoryNumber]=\"this.lineAssociation.directoryNumber.directoryNumber\"\r\n (onChange)=\"onDirectoryNumberChange($event)\">\r\n </app-user-calling-extension> -->\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";#user-calling{height:calc(100vh - 100px)}#user-calling table{margin:10px 0;width:100%}#user-calling th{color:#000;text-align:left;background:#efefef;font-size:14px;font-weight:500;padding:2px 5px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{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}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}td .input-text{color:#333;font-size:14px;padding:5px;background:none}td .input-text:not(:focus){border:none}td .input-text:focus{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem}td .input-text:focus-visible{outline:none}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.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-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;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:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.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}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"] }]
1867
+ args: [{ selector: 'app-user-calling', template: "<!-- NUMBERS BOX -->\r\n<div style=\"display: flex; flex-direction: column; padding: 24px 0; gap: 24px;\">\r\n <div class=\"user-info-box user-details-box\" style=\"display: flex;\">\r\n <h3 class=\"user-box-title\" style=\"width: 180px;\">Numbers</h3>\r\n <div style=\"flex:1; display:flex; flex-direction:column;\">\r\n <!-- Directory numbers section -->\r\n <div style=\"display:flex; align-items:flex-start; padding:16px 0;\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n <span>Directory numbers</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n <div style=\"flex:1; display:flex; flex-direction:column; align-items:flex-start;\">\r\n <!-- Table -->\r\n <table style=\"width:100%; border-collapse:collapse; margin-bottom:16px;\">\r\n <thead>\r\n <tr style=\"background:#ededed;\">\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Type</th>\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Phone number</th>\r\n <th style=\"padding:10px 16px; font-size:13px; font-weight:400; color:#545454; text-align:left; border-bottom:1px solid #e8e8e8;\">Extension</th>\r\n <th style=\"padding:10px 8px; border-bottom:1px solid #e8e8e8; width:30px;\"></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr style=\"background:#fff; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='#fff'\">\r\n <td style=\"padding:12px 16px; border-bottom:1px solid #e8e8e8;\">\r\n <span style=\"display:inline-block; background:#e8f4fc; color:#1170a8; padding:4px 14px; border-radius:14px; font-size:13px; font-weight:400; border:1px solid #b8d9ed;\">Primary</span>\r\n </td>\r\n <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n <input\r\n class=\"input-text\"\r\n disabled=\"true\"\r\n type=\"text\"\r\n (blur)=\"onExtensionLineChange($event)\"\r\n (keydown.enter)=\"onExtensionLineChange($event)\"\r\n [value]=\"phoneNumberValue\"\r\n autofocus\r\n />\r\n </td>\r\n <td style=\"padding:12px 16px; color:#333; font-size:14px; border-bottom:1px solid #e8e8e8;\">\r\n <div>\r\n <input\r\n class=\"input-text\"\r\n disabled=\"true\"\r\n type=\"text\"\r\n (blur)=\"onDirectoryNumberChange($event)\"\r\n (keydown.enter)=\"onDirectoryNumberChange($event)\"\r\n [value]=\"formControl?.value\"\r\n autofocus\r\n />\r\n <!-- <span\r\n [attr.contenteditable]=\"!isWebex\"\r\n (blur)=\"onDirectoryNumberChange($event)\">\r\n {{ formControl?.value }}\r\n </span> -->\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/copy-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n </td>\r\n <td style=\"padding:19px 8px; text-align:center; border-bottom:1px solid #e8e8e8; display:flex; align-items:center; justify-content:center; line-height:0;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <!-- Add secondary number button -->\r\n <button\r\n disabled\r\n style=\"background:#fff; border:1px solid #c4c4c4; padding:8px 20px; border-radius:18px; font-size:14px; font-weight:400; cursor:not-allowed; color:#333; opacity:0.6;\"\r\n onmouseover=\"this.style.background='#ededed'\"\r\n onmouseout=\"this.style.background='#fff'\">\r\n Add secondary number\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n <!-- Caller ID section -->\r\n <div style=\"display:flex; align-items:center; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:center;\">\r\n <span>Caller ID</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n <div style=\"flex:1;\"></div>\r\n <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n <div style=\"height:1px; background:#e8e8e8; margin:8px 0;\"></div>\r\n\r\n <!-- Emergency callback number section -->\r\n <div style=\"display:flex; align-items:flex-start; padding:16px 0; cursor:pointer;\" onmouseover=\"this.style.background='#fafafa'\" onmouseout=\"this.style.background='transparent'\">\r\n <div style=\"min-width:170px; font-weight:400; font-size:14px; color:#121212; display:flex; align-items:flex-start;\">\r\n <div>\r\n <div style=\"display:flex; align-items:center;\">\r\n <span>Emergency callback</span>\r\n </div>\r\n <div style=\"display:flex; align-items:center;\">\r\n <span>number</span>\r\n <img style=\"margin-left: .5rem;\" src=\"assets/icons/info-circle-regular.svg\" width=\"16\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"flex:1; display:flex; align-items:flex-start; padding-top:2px;\">\r\n <i class=\"fa fa-times-circle\" style=\"color:#c62828; margin-right:8px; margin-top: 2px; font-size:14px;\"></i>\r\n <span style=\"color:#c62828; font-size:13px; line-height:1.4;\">All calls will be blocked if there's no ECBN, assign a phone number to this user or set the location default ECBN.</span>\r\n </div>\r\n <div style=\"padding-right:8px; display:flex; align-items:center;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style=\"width:16px; height:16px; color:#222222; transform:rotate(-90deg); transform-origin:center; display:block; margin:0;\" aria-hidden=\"true\">\r\n <path fill=\"currentColor\" d=\"M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- user-calling-extension\r\n *ngIf=\"formControl\"\r\n [siteId]=\"this.siteId\"\r\n [control]=\"formControl\"\r\n [routePartition]=\"this.lineAssociation.directoryNumber.routePartitionName\"\r\n [directoryNumber]=\"this.lineAssociation.directoryNumber.directoryNumber\"\r\n (onChange)=\"onDirectoryNumberChange($event)\">\r\n </app-user-calling-extension> -->\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";#user-calling{height:calc(100vh - 100px)}#user-calling table{margin:10px 0;width:100%}#user-calling th{color:#000;text-align:left;background:#efefef;font-size:14px;font-weight:500;padding:2px 5px}.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{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}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}td .input-text{color:#333;font-size:14px;padding:5px;background:none}td .input-text:not(:focus){border:none}td .input-text:focus{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem}td .input-text:focus-visible{outline:none}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.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-weight:400;font-size:14px}.user-info-box h3{display:block;font-weight:500;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:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.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}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:16px!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px}\n"] }]
1857
1868
  }], ctorParameters: function () { return [{ type: UserService }, { type: DnsService }]; }, propDecorators: { siteId: [{
1858
1869
  type: Input
1859
1870
  }], userId: [{
1860
1871
  type: Input
1872
+ }], primaryLineDirectoryNumber: [{
1873
+ type: Input
1861
1874
  }], onExtensionChange: [{
1862
1875
  type: Output
1863
1876
  }] } });
@@ -1929,6 +1942,10 @@ class UserManageWidgetComponent {
1929
1942
  var _a, _b, _c, _d, _e, _f, _g, _h;
1930
1943
  return ((_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.devices) && ((_d = (_c = this.userService) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.devices[0]) && ((_f = (_e = this.userService) === null || _e === void 0 ? void 0 : _e.user) === null || _f === void 0 ? void 0 : _f.devices[0].lineAssociations) && ((_h = (_g = this.userService) === null || _g === void 0 ? void 0 : _g.user) === null || _h === void 0 ? void 0 : _h.devices[0].lineAssociations[0]);
1931
1944
  }
1945
+ get primaryLineReference() {
1946
+ var _a, _b, _c, _d, _e;
1947
+ return ((_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.primaryLineReference) && ((_e = (_d = (_c = this.userService) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.primaryLineReference) === null || _e === void 0 ? void 0 : _e.directoryNumber);
1948
+ }
1932
1949
  constructor(userService, apiService) {
1933
1950
  this.userService = userService;
1934
1951
  this.apiService = apiService;
@@ -2110,10 +2127,10 @@ class UserManageWidgetComponent {
2110
2127
  }
2111
2128
  }
2112
2129
  UserManageWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, deps: [{ token: UserService }, { token: APIService }], target: i0.ɵɵFactoryTarget.Component });
2113
- UserManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserManageWidgetComponent, selector: "app-user-manage-widget", inputs: { token: "token", host: "host", siteId: "siteId", userId: "userId", deviceName: "deviceName", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange", selectDevice: "selectDevice", goBack: "goBack" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\" [cucmid]=\"user.cucmId\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{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}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.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:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.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}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input ::ng-deep .mat-form-field,:host .input-holder__input ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field:hover,:host .input-holder__input ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: UserInfoComponent, selector: "app-user-info", inputs: ["name", "active", "email", "position", "cucmid"] }, { kind: "component", type: LazyLoadingSelectComponent, selector: "app-lazy-loading-select", inputs: ["siteId", "form", "standalone", "placeholder", "controlName", "optionsToken", "appearance", "errorCode", "errorText", "default", "id"], outputs: ["changeField"] }, { kind: "component", type: UserCallingComponent, selector: "app-user-calling", inputs: ["siteId", "userId"], outputs: ["onExtensionChange"] }, { kind: "component", type: DeviceListComponent, selector: "app-device-list", inputs: ["devices"], outputs: ["onDeviceSelect"] }] });
2130
+ UserManageWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UserManageWidgetComponent, selector: "app-user-manage-widget", inputs: { token: "token", host: "host", siteId: "siteId", userId: "userId", deviceName: "deviceName", isLdap: "isLdap" }, outputs: { onSave: "onSave", onChange: "onChange", selectDevice: "selectDevice", goBack: "goBack" }, ngImport: i0, template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\" [cucmid]=\"user.cucmId\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!primaryLineReference\">\r\n <app-user-calling *ngIf=\"primaryLineReference\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\" [primaryLineDirectoryNumber]=\"primaryLineReference\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{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}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.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:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.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}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input ::ng-deep .mat-form-field,:host .input-holder__input ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field:hover,:host .input-holder__input ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: AppLoaderComponent, selector: "app-loader" }, { kind: "component", type: UserInfoComponent, selector: "app-user-info", inputs: ["name", "active", "email", "position", "cucmid"] }, { kind: "component", type: LazyLoadingSelectComponent, selector: "app-lazy-loading-select", inputs: ["siteId", "form", "standalone", "placeholder", "controlName", "optionsToken", "appearance", "errorCode", "errorText", "default", "id"], outputs: ["changeField"] }, { kind: "component", type: UserCallingComponent, selector: "app-user-calling", inputs: ["siteId", "userId", "primaryLineDirectoryNumber"], outputs: ["onExtensionChange"] }, { kind: "component", type: DeviceListComponent, selector: "app-device-list", inputs: ["devices"], outputs: ["onDeviceSelect"] }] });
2114
2131
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, decorators: [{
2115
2132
  type: Component,
2116
- args: [{ selector: 'app-user-manage-widget', template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\" [cucmid]=\"user.cucmId\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!lineAssociation\">\r\n <app-user-calling *ngIf=\"lineAssociation\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{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}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.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:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.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}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input ::ng-deep .mat-form-field,:host .input-holder__input ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field:hover,:host .input-holder__input ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"] }]
2133
+ args: [{ selector: 'app-user-manage-widget', template: "<app-loader *ngIf=\"dataPending || userService.dataPending\"></app-loader>\r\n\r\n<div *ngIf=\"!dataPending\">\r\n <div class=\"go-back-box\" (click)=\"onGoBack()\">\r\n <div class=\"go-back-box-container\">\r\n <span class=\"app-icon icon-webex-left-arrow\"></span>\r\n <span class=\"go-back-title\">Users</span>\r\n </div>\r\n </div>\r\n\r\n <app-user-info *ngIf=\"user\" [name]=\"userName\" [email]=\"user.email\" [active]=\"true\"\r\n [position]=\"user.siteName ? 'Member of ' + user.siteName : ''\" [cucmid]=\"user.cucmId\"></app-user-info>\r\n\r\n <mat-tab-group disableRipple class=\"tabs-container\">\r\n <!-- <mat-tab label=\"Summary\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Profile\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"General\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Meetings\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Calling\" [disabled]=\"!primaryLineReference\">\r\n <app-user-calling *ngIf=\"primaryLineReference\" [siteId]=\"siteId\"\r\n (onExtensionChange)=\"onExtensionChange()\" [primaryLineDirectoryNumber]=\"primaryLineReference\"></app-user-calling>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Messaging\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <!-- <mat-tab label=\"Hybrid Services\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Devices\" [disabled]=\"!user?.devices || !user?.devices.length\">\r\n <app-device-list [devices]=\"user?.devices\" (onDeviceSelect)=\"onDeviceSelect($event)\"></app-device-list>\r\n </mat-tab>\r\n <!-- <mat-tab label=\"Vidcast\">\r\n <ng-container *ngTemplateOutlet=\"userProfile\">\r\n </ng-container>\r\n </mat-tab> -->\r\n <mat-tab label=\"Lines\" [disabled]=\"true\"></mat-tab>\r\n <mat-tab label=\"Features\" [disabled]=\"true\"></mat-tab>\r\n </mat-tab-group>\r\n\r\n <ng-template #userProfile>\r\n <form *ngIf=\"user && form\" [formGroup]=\"form\">\r\n <div class=\"info-boxes-container\">\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">User Details</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User Id</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"userid\" matInput (input)=\"onChangeField('userid')\">\r\n <mat-error\r\n *ngIf=\"form.get('userid')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('userid')?.hasError('exist')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n User ID already exists\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Primary email</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"email\" matInput (input)=\"onChangeField('email')\">\r\n <mat-error\r\n *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"form.get('email')?.touched && form.get('email')?.hasError('pattern')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n Please enter valid email\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Fisrt Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"firstName\" matInput (input)=\"onChangeField('firstName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Last Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"lastName\" matInput (input)=\"onChangeField('lastName')\">\r\n <mat-error\r\n *ngIf=\"form.get('lastName')?.touched && form.get('lastName')?.hasError('required')\">\r\n <i class=\"fa fa-exclamation-triangle\"></i>\r\n This field is required\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">General User Info</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Department</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"department\" matInput type=\"text\" (input)=\"onChangeField('department')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Manager user ID</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"manager\" matInput type=\"text\" (input)=\"onChangeField('manager')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Associated PC</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"associatedPc\" matInput type=\"text\" (input)=\"onChangeField('associatedPc')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"digestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">User profile</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userProfile'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField('userProfile')\"\r\n [optionsToken]=\"'userProfiles'\"\r\n ></app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile voice access</div>\r\n <div class=\"input-holder__input\">\r\n <mat-slide-toggle class=\"custom-toggle\"\r\n formControlName=\"enableMobileVoiceAccess\"\r\n (change)=\"onChangeField('enableMobileVoiceAccess')\"\r\n [checked]=\"user.enableMobileVoiceAccess\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Userlocale</div>\r\n <div class=\"input-holder__input\">\r\n <app-lazy-loading-select\r\n [siteId]=\"siteId\"\r\n [controlName]=\"'userLocale'\"\r\n [form]=\"user.form\"\r\n (changeField)=\"changeField($event)\"\r\n [optionsToken]=\"'userLocales'\"\r\n [default]=\"{key: '', value: 'None', disabled: false}\">\r\n </app-lazy-loading-select>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Confirm digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input formControlName=\"confirmDigestCredentials\" matInput type=\"text\"\r\n (input)=\"onChangeField('confirmDigestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- USER INFO BOX-->\r\n <div class=\"user-info-box user-details-box\">\r\n <h3 class=\"user-box-title\">Contact Information</h3>\r\n <div class=\"form-holder__inputs\">\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Middle Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"middleName\" (input)=\"onChangeField('middleName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Telephone Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"telephoneNumber\"\r\n (input)=\"onChangeField('telephoneNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Mobile Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"mobileNumber\" (input)=\"onChangeField('mobileNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Digest credentials</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"digestCredentials\"\r\n (input)=\"onChangeField('digestCredentials')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Diractory URI</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"directoryUri\" (input)=\"onChangeField('directoryUri')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Title</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"title\" (input)=\"onChangeField('title')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Home Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"homeNumber\" (input)=\"onChangeField('homeNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Pager Number</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"number\" formControlName=\"pagerNumber\" (input)=\"onChangeField('pagerNumber')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <mat-divider></mat-divider>\r\n <div class=\"input-holder\">\r\n <div class=\"input-holder__name\">Display Name</div>\r\n <div class=\"input-holder__input\">\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput type=\"text\" formControlName=\"displayName\" (input)=\"onChangeField('displayName')\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n </ng-template>\r\n</div>\r\n\r\n<!--<mat-progress-spinner *ngIf=\"dataPending\"-->\r\n<!-- class=\"page-spinner\"-->\r\n<!-- mode=\"indeterminate\"-->\r\n<!-- [diameter]=\"70\" strokeWidth=\"3\"></mat-progress-spinner>-->\r\n", styles: ["@charset \"UTF-8\";@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";.fa:hover{color:#0d56aa!important}.mat-icon-button{background:transparent}.icon-webex-box{width:2rem;height:2rem;font-size:.7rem;line-height:1rem;display:inline-block;background:#d0d0d0;border-radius:2rem;line-height:40px;text-align:center}.icon-webex{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}.icon-webex-user{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22a%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 16.67 15.56%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%232c355d%3Bstroke-width%3A1.4px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22b%22 d%3D%22M4.87%2C3.89c0-1.72%2C1.51-3.19%2C3.47-3.19s3.47%2C1.47%2C3.47%2C3.19-1.51%2C3.19-3.47%2C3.19-3.47-1.47-3.47-3.19ZM.7%2C12.64c0-.37%2C.19-.76%2C.67-1.17%2C.48-.41%2C1.17-.78%2C2-1.09%2C1.66-.62%2C3.66-.93%2C4.97-.93s3.31%2C.31%2C4.97%2C.93c.83%2C.31%2C1.52%2C.68%2C2%2C1.09%2C.47%2C.41%2C.67%2C.8%2C.67%2C1.17v2.22H.7v-2.22Z%22%2F%3E%3C%2Fsvg%3E\")}.icon-user-status{display:inline-block}*{margin:0}body{background:#f7f7f7}body,th,td{font-family:Poppins,Poppins,sans-serif;font-size:14px}th{color:#0000008a;text-align:left}td{box-sizing:border-box;padding:10px 5px 10px 0}.content-box{margin:auto;position:relative;width:95%}.content-box table{width:100%}.edit-icon-td{width:50px;position:relative}.edit-icon-td button{position:absolute;top:4px}.mat-progress-spinner circle,.mat-spinner circle{stroke:gray!important}.data-loader{position:absolute;top:calc(50% - 25px);left:calc(50% - 25px)}.flex-box{display:flex;justify-content:flex-start}.spinner-container{width:100%;display:flex;justify-content:center;align-items:center}.spinner-container ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#000}.user-info-box{background:white;display:flex;gap:2rem;border-radius:8px;border:rgba(0,0,0,.2) 1px solid;padding:24px;font-weight:400;font-size:14px}.user-info-box .user-box-title{display:flex;font-weight:500;font-size:16px;max-inline-size:11.25rem;flex:1;color:#000000f2;margin-top:3px;font-family:Poppins,Poppins,sans-serif}.user-info-box .form-holder__inputs{display:flex;flex-direction:column;flex:1}.user-info-box .form-holder__inputs .input-holder{display:flex;gap:1.5rem;padding:.5rem 0;font-size:.75rem;line-height:1.25;align-items:center;overflow:hidden}.user-info-box .form-holder__inputs .input-holder:nth-child(1){padding-top:0}.user-info-box .form-holder__inputs .input-holder:last-child{padding-bottom:0}.user-info-box .form-holder__inputs .input-holder__name{font-weight:500!important;font-size:14px!important;flex-basis:12rem}.user-info-box .form-holder__inputs .input-holder__input{display:flex;flex:1}.user-info-box .form-holder__inputs .mat-divider{margin:0!important}.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:#f7f7f7;color:#636363;font-size:12px}.webex-table td{background:#fff;color:#636363;font-size:14px}.webex-table tr:hover td{background:#ededed;cursor:pointer}.webex-table th.mat-header-cell,.webex-table td.mat-cell,.webex-table td.mat-footer-cell{border-bottom:1px solid #dedede}.webex-table tr.mat-header-row{height:37px}.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}:host .info-holder__name,:host .input-holder__name{font-weight:500!important;font-size:14px!important}:host .info-holder__inputs .input-holder__name,:host .input-holder__inputs .input-holder__name{font-weight:400!important;font-size:14px!important}:host .info-holder__input ::ng-deep .mat-form-field,:host .input-holder__input ::ng-deep .mat-form-field{border:.0625rem solid rgba(0,0,0,.5019607843)!important;border-radius:.5rem;color:#000000f2;font-weight:400;font-size:.875rem;max-inline-size:18rem;padding:0}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-start{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end,:host .input-holder__input ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex:hover .mat-form-field-outline-end{border:none!important}:host .info-holder__input ::ng-deep .mat-form-field:hover,:host .input-holder__input ::ng-deep .mat-form-field:hover{background-color:#00000012!important;border:.0625rem solid rgba(0,0,0,.5019607843)!important}:host .info-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start,:host .input-holder__input ::ng-deep .mat-form-field.mat-focused .mat-form-field-outline-start{display:none}table{border-collapse:collapse;border-spacing:0}.mat-form-field-appearance-outline .mat-form-field-infix{padding:0!important}.mat-divider{margin:12px 0}::ng-deep .mat-form-field-wrapper{height:30px}::ng-deep .mat-form-field-flex{height:30px}::ng-deep .mat-form-field-flex .mat-form-field-outline-start{display:none}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{height:35px}:ng-deep .mat-form-field-outline .mat-form-field-outline-thick{height:35px}::ng-deep .mat-select{line-height:20px}::ng-deep .mat-form-field-infix{border-top:0px!important}::ng-deep .mat-tab-group{font-family:Inter,sans-serif}::ng-deep .mat-tab-label{font-weight:500!important;font-size:.875rem!important;height:auto!important;min-width:auto!important;padding:0!important;opacity:1!important;color:#000!important;margin:0!important;box-shadow:0 -3px #000000e6;margin-bottom:.225rem!important;color:#0009!important}::ng-deep .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-ink-bar{background-color:#000!important;height:3px!important}::ng-deep .mat-tab-labels{gap:30px;border-bottom:.0625rem solid rgba(0,0,0,.4)}::ng-deep .mat-tab-labels .mat-tab-label{font-size:.875rem!important;color:#181818!important}::ng-deep .mat-tab-labels .mat-tab-label.mat-tab-label-active .mat-tab-label-content{color:#000!important;font-weight:500!important;font-size:.875rem!important}::ng-deep .mat-progress-spinner{position:absolute!important;top:40%;left:45%}.app-icon{height:20px;width:20px;display:inline-block;cursor:pointer;background-repeat:no-repeat;background-position:center}.app-icon{transition:all .15s ease-out}.icon-webex-right-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-right%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M14.0812 9.66902L6.58119 2.16902C6.53813 2.12351 6.48638 2.0871 6.429 2.06193C6.37162 2.03677 6.30978 2.02336 6.24713 2.0225C6.18448 2.02165 6.1223 2.03336 6.06425 2.05695C6.00621 2.08053 5.95348 2.11552 5.90919 2.15983C5.8649 2.20415 5.82994 2.25689 5.80638 2.31495C5.78282 2.373 5.77113 2.43519 5.77202 2.49784C5.77291 2.56049 5.78634 2.62232 5.81153 2.67969C5.83673 2.73705 5.87316 2.78879 5.91869 2.83183L13.0874 10.0003L5.91869 17.169C5.87316 17.2121 5.83673 17.2638 5.81153 17.3212C5.78634 17.3785 5.77291 17.4404 5.77202 17.503C5.77113 17.5657 5.78282 17.6279 5.80638 17.6859C5.82994 17.744 5.8649 17.7967 5.90919 17.841C5.95348 17.8853 6.00621 17.9203 6.06425 17.9439C6.1223 17.9675 6.18448 17.9792 6.24713 17.9783C6.30978 17.9775 6.37162 17.9641 6.429 17.9389C6.48638 17.9138 6.53813 17.8773 6.58119 17.8318L14.0812 10.3318C14.1691 10.2439 14.2184 10.1247 14.2184 10.0004C14.2184 9.87613 14.1691 9.75692 14.0812 9.66902Z%22 fill%3D%22%230F0F0F%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.icon-webex-left-arrow{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22arrow-left%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M5.70746 7.99987L11.3539 2.35352C11.4453 2.25928 11.496 2.13287 11.495 2.00159C11.494 1.8703 11.4414 1.74467 11.3486 1.65183C11.2558 1.55899 11.1301 1.50639 10.9988 1.50539C10.8676 1.50438 10.7411 1.55506 10.6469 1.64647L4.64691 7.64647C4.55316 7.74023 4.50049 7.8674 4.50049 7.99999C4.50049 8.13259 4.55316 8.25975 4.64691 8.35352L10.6469 14.3535C10.6931 14.4011 10.7482 14.439 10.8092 14.4651C10.8702 14.4912 10.9357 14.5049 11.002 14.5054C11.0683 14.5059 11.134 14.4932 11.1954 14.468C11.2567 14.4429 11.3125 14.4058 11.3593 14.3589C11.4062 14.312 11.4433 14.2563 11.4685 14.1949C11.4936 14.1336 11.5063 14.0679 11.5058 14.0016C11.5053 13.9353 11.4916 13.8697 11.4655 13.8088C11.4394 13.7478 11.4015 13.6926 11.3539 13.6465L5.70746 7.99987Z%22 fill%3D%22black%22 fill-opacity%3D%220.95%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\")}.go-back-box{background:white;border-bottom:rgba(0,0,0,.2) 1px solid;height:60px;width:100%;line-height:60px;cursor:pointer}.go-back-box-container{padding:0 1rem;display:flex;justify-content:flex-start}.go-back-box-container .icon-webex-left-arrow,.go-back-box-container .go-back-title{display:block;height:60px}.go-back-box-container .go-back-title{line-height:61px}.go-back-title{display:inline-block;margin:0 10px}.tabs-container{padding:1.5rem 4.375rem 0}::ng-deep .custom-toggle .mat-slide-toggle-bar{position:relative;width:48px;height:25px;flex-shrink:0;border-radius:13px;background-color:#ccc}::ng-deep .custom-toggle .mat-slide-toggle-thumb{height:20px;width:20px;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;left:3px;top:5px;background-color:#fff!important}::ng-deep .custom-toggle .mat-slide-toggle-thumb:after{content:\"\\d7\";font-size:14px;color:#8e9fb7;line-height:1;display:block;pointer-events:none;transform:translateY(0)}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb{left:calc(100% - 11px)!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb:after{content:\"\\2713\";color:#0d56aa;font-weight:700;font-size:10px}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar{background:#1170cf!important}::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar:hover{background:#0353a8!important}\n"] }]
2117
2134
  }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }]; }, propDecorators: { onSave: [{
2118
2135
  type: Output
2119
2136
  }], onChange: [{