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/fesm2020/tuki-io-tuki-widgets-user-manage.mjs CHANGED Viewed

@@ -1783,8 +1783,6 @@ class UserCallingComponent {
         return control;
     }
     get phoneNumberValue() {
-        // const control = this.form?.get('directoryNumber') as FormControl;
-        // return control;
         return this.userService?.user?.devices[0] && this.userService?.user?.devices[0]?.lineAssociations[0]?.mappedDids[0];
     }
     get lineAssociation() {
@@ -1802,7 +1800,7 @@ class UserCallingComponent {
         // this.getData();
     }
     onExtensionLineChange(event) {
-        const value = event.target.innerText.trim();
+        const value = event.target.value.trim();
         (this.userService?.user && this.userService?.user?.lines && this.userService?.user?.lines[0]?.mappedDids[0]) ? this.userService.user.lines[0].mappedDids[0] = value : void 0;
         this.onExtensionChange.next(true);
     }
@@ -1844,10 +1842,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: [{