npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.219-dev.18 → 0.0.219-dev.19 - Mend

@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

package/fesm2020/tuki-io-tuki-widgets-user-manage.mjs CHANGED Viewed

@@ -440,6 +440,7 @@ class SimplifiedUser {
             this.siteId = user.siteId;
             this.siteName = user.siteName;
             this.token = user.token;
+            this.primaryLineReference = user.primaryLineReference;
             this.department = user.department;
             this.manager = user.manager;
             this.associatedPc = user.associatedPc;
@@ -1078,6 +1079,12 @@ class UserService {
             }
         }
     }
+    getPrimaryLineDevice(primaryLineReferenceDirectoryNumber) {
+        if (this.user?.devices && this.user.devices.length) {
+            const device = this.user.devices.find((device) => device.lineAssociations.some((line) => line?.directoryNumber?.directoryNumber === primaryLineReferenceDirectoryNumber));
+            return device;
+        }
+    }
 }
 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 });
 UserService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserService });
@@ -1773,9 +1780,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }], ctorParameters: function () { return [{ type: APIService }]; } });
 class UserCallingComponent {
-    get form() {
-        return this.userService?.user?.devices[0] && this.userService?.user?.devices[0].lineAssociations[0].form;
-    }
+    // get form(): FormGroup {
+    //   return this.userService?.user?.devices[0] && this.userService?.user?.devices[0].lineAssociations[0].form;
+    // }
     get isWebex() {
         return localStorage.getItem('webexUUID') && localStorage.getItem('webexUUID') !== 'null';
     }
@@ -1798,7 +1805,10 @@ class UserCallingComponent {
         this.onExtensionChange = new EventEmitter();
     }
     ngOnInit() {
-        // this.getData();
+        const primaryLineDevice = this.userService.getPrimaryLineDevice(this.primaryLineDirectoryNumber);
+        if (primaryLineDevice) {
+            this.form = primaryLineDevice.lineAssociations[0]?.form;
+        }
     }
     onExtensionLineChange(event) {
         const value = event.target.value.trim();
@@ -1843,14 +1853,16 @@ class UserCallingComponent {
     }
 }
 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 });
-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"] });
+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"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserCallingComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: UserService }, { type: DnsService }]; }, propDecorators: { siteId: [{
                 type: Input
             }], userId: [{
                 type: Input
+            }], primaryLineDirectoryNumber: [{
+                type: Input
             }], onExtensionChange: [{
                 type: Output
             }] } });
@@ -1919,6 +1931,9 @@ class UserManageWidgetComponent {
     get lineAssociation() {
         return this.userService?.user?.devices && this.userService?.user?.devices[0] && this.userService?.user?.devices[0].lineAssociations && this.userService?.user?.devices[0].lineAssociations[0];
     }
+    get primaryLineReference() {
+        return this.userService?.user?.primaryLineReference && this.userService?.user?.primaryLineReference?.directoryNumber;
+    }
     constructor(userService, apiService) {
         this.userService = userService;
         this.apiService = apiService;
@@ -2094,10 +2109,10 @@ class UserManageWidgetComponent {
     }
 }
 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 });
-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"] }] });
+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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UserManageWidgetComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: UserService }, { type: APIService }]; }, propDecorators: { onSave: [{
                 type: Output
             }], onChange: [{