npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.158 → 0.0.159 - Mend

@tuki-io/tuki-widgets 0.0.158 → 0.0.159

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 (26) hide show

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

@@ -1787,8 +1787,6 @@ class UserCallingComponent {
     }
     get phoneNumberValue() {
         var _a, _b, _c, _d, _e, _f;
-        // const control = this.form?.get('directoryNumber') as FormControl;
-        // return control;
         return ((_b = (_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.devices[0]) && ((_f = (_e = (_d = (_c = this.userService) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.devices[0]) === null || _e === void 0 ? void 0 : _e.lineAssociations[0]) === null || _f === void 0 ? void 0 : _f.mappedDids[0]);
     }
     get lineAssociation() {
@@ -1808,7 +1806,7 @@ class UserCallingComponent {
     }
     onExtensionLineChange(event) {
         var _a, _b, _c, _d, _e, _f;
-        const value = event.target.innerText.trim();
+        const value = event.target.value.trim();
         (((_a = this.userService) === null || _a === void 0 ? void 0 : _a.user) && ((_c = (_b = this.userService) === null || _b === void 0 ? void 0 : _b.user) === null || _c === void 0 ? void 0 : _c.lines) && ((_f = (_e = (_d = this.userService) === null || _d === void 0 ? void 0 : _d.user) === null || _e === void 0 ? void 0 : _e.lines[0]) === null || _f === void 0 ? void 0 : _f.mappedDids[0])) ? this.userService.user.lines[0].mappedDids[0] = value : void 0;
         this.onExtensionChange.next(true);
     }
@@ -1851,10 +1849,10 @@ 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                  <span\r\n                    [attr.contenteditable]=\"!isWebex\"\r\n                    (blur)=\"onExtensionLineChange($event)\">\r\n                    {{ phoneNumberValue }}\r\n                  </span>\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                    <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 style=\"background:#fff; border:1px solid #c4c4c4; padding:8px 20px; border-radius:18px; font-size:14px; font-weight:400; cursor:pointer; color:#333;\" onmouseover=\"this.style.background='#ededed'\" onmouseout=\"this.style.background='#fff'\">Add secondary number</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}.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" }, 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 style=\"background:#fff; border:1px solid #c4c4c4; padding:8px 20px; border-radius:18px; font-size:14px; font-weight:400; cursor:pointer; color:#333;\" onmouseover=\"this.style.background='#ededed'\" onmouseout=\"this.style.background='#fff'\">Add secondary number</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                  <span\r\n                    [attr.contenteditable]=\"!isWebex\"\r\n                    (blur)=\"onExtensionLineChange($event)\">\r\n                    {{ phoneNumberValue }}\r\n                  </span>\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                    <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 style=\"background:#fff; border:1px solid #c4c4c4; padding:8px 20px; border-radius:18px; font-size:14px; font-weight:400; cursor:pointer; color:#333;\" onmouseover=\"this.style.background='#ededed'\" onmouseout=\"this.style.background='#fff'\">Add secondary number</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}.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 style=\"background:#fff; border:1px solid #c4c4c4; padding:8px 20px; border-radius:18px; font-size:14px; font-weight:400; cursor:pointer; color:#333;\" onmouseover=\"this.style.background='#ededed'\" onmouseout=\"this.style.background='#fff'\">Add secondary number</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: [{